Tag Archives: Design

UX: Flat Design

I’ve grown to become quite opinionated about the recent Flat Design trend. Ironically at this time of writing my blog is using a rather flat design, however it still uses borders, dividers, and background colors which as you will see many flat designs ignore or drop.

Gripe with Flat Design

Microsoft chose grey on light grey on white with their new flat design in MS Office 2013. This is very hard on the eyes and makes finding sections / ideas in the UI take a bit of studying to understand. I won’t even go into Windows 8 start screen or new desktop UI which both have other issues. Apple in iOS7 appears to be choosing border-less white divs with section breaks just being a larger padding between items. There is little to no affordance.

If these are the leaders, I’m concerned.

Some are using Flat Design well

However, in my opinion some companies are pulling off flat design well. For instance AVG 2013, they chose very intuitive layout that makes the UI simple and understandable, I don’t use the product, but I would trust my grandma to run it. Other fine examples are the games OLO, Letterpress – check them out.

Some companies are going for a Almost Flat Design, which I can agree is a good compromise, making things a bit more intuitive and have substance. Examples include LinkedIn app, Google products, Facebook. And now with Google announcing Material Design that becomes even more clear.

What I’m saying?

It’s not about emulating the ‘real world’ as it is giving items a sense of sections, and layers. First sections, A menu bar or sidebar ought to look separate from the content. More specifically, static vs. dynamic content ought to be separate. Second layers, if a menu has a drop down that is going to cover content, there ought to be (even a subtle) hint/shadow that is is currently above the content and has a border to visually show its identity. Users will intuitively know there is content under it and not mistake it being part of the content. And not to say ‘Real world’ is what I’m suggesting, if I were then I would want SPST Push Button or NTE 54-533 Switch Rocker.

Where are we heading?

I could dig in further with some closer examples, but I feel User Experience seems unfortunately been placed on the side in many flat design cases. It seems we are in a UI counter-culture mood swing from our overdose on 3D buttons, and huge drop shadows. I get it. We just have to be careful to consider usability, intuitiveness, learnability, human errors, and other UX items. Maybe it is just poor flat design that I’m not a fan of or haven’t given it a full chance, but I’m concerned.

Thankfully with Google talking about Material Design, perhaps we can start to head in a smarter direction.

UX: How my brain analyzes objects.

(In loose quick categories to be later sorted and ranked)

Ironically this list needs further organization.

Objects I thought of while building this list:
Car, Bike Lock, Door security code, Dresser, Website, Smart phone, Spatula, Database, street lamp, boxes of different screws, music, driving directions, people, posters, roller coasters, dentist chair lamp.

Categorizes / Characteristics / Typecasting

What items are behave similar or are related?
Can they be grouped, and thus the group have a predictable nature?
Should it be placed with similar objects?
Do other objects belong with it?
Is it loose or well defined?
Is it subject to lazily containing extraneous objects that do not belong to its type?
Does it have a predictable nature?
Can you amuse another one would have the same characteristics?
What are its attributes?
What are its attribute types?
Can it be sorted / organized?
Can numeric values be applied and compared?
Can it be compared, ranked, filtered, or sorted?
What is its mediums?
Are their variations?
Does it deviate from the norm of similar objects?
Do colours have a meaning?
Hoe does it move?
What is its movment range / max?

Patterns / Symmetry / Predictability

What is it like?
Are other pieces identical to others and thus simpler than it appears?
Was it crafted with care relative to other similar parts?
Is it intuitive?
Are components replaceable?
Does it known my intention?
Can it know more with asking less?
Is there time constraints or automation?
Is their a longer and shorter way?
What can’t I see/observe?
How did it get this way?
What holds it together / in place?
Does it require maintenance?

Function / Dis-function / Improvements

How does it work?
What is its purpose?
What other purposes does it have?
Can it be broke, bypassed, or misused? Why?
Could it do another task better?
What feedback do you get from misuse?
Could it be simplified?
Are all steps needed? Could steps be removed?
Is their a manual human process involved? What is their effort level or intellect level?
Can it be interrupted?
Was it tested and verified?

Inputs / Storage / Outputs

What ways does it receive instruction?
What formats can it be controlled by?
Can inputs be tampered with? Does it validate?
Does it remember?
What format or where does it remember?
Can the storage be accessed, changed, or cleared?
How do I receive feedback?
How can it be used or captured?
Does it forget?
Where else could I see or access these points from?

Keys / Permissions / Access

How does one properly gain access?
Is temporary access granted?
Who can use it?
Are there different levels of access?
How does it reject bad access? What feedback is provided?
What finite bound are set on access?
Could access be guessed? How long?
Is access accidentally revealed?
Is the access method default, obvious, or simple?
Is the access method easily spoofed?
Is the access method answer stored nearby in plain site?

Options / Alternate Uses / Choices

What preferences or settings do I have?
Can it be used in an alternate way?
Are the default options the best?

Extendablity / Compatibility / Flexibilty

Is it modular, upgradable?
Will it work with other related objects? Which ones? Why?
Can it be reused in a different context?
Can it adapt to different situations?

Adaptability / Longevity / Morph-able

Can it change over time to adapt to newer circumstances and advancements?
What is the lifespan?
How will it work x years from now?
Can it change? What does change look like?
Is anything outdated?

In summery: Obnoxious What? How? Why?

And I’m ok with that.

Think of some to add? Add a quick comment!

UX: ‘Next’ or ‘More’ buttons

I’ve been thinking about pagination buttons and specifically the verbiage for the next button.

Hitting a button labeled “Next” feels laborious, tedious like the viewers are sifting through a list to find something.

Hitting a button labeled “More” button may appease the viewer, making them feel content with what they have seen so far. This type of button may get a user curious, like peaking around the corner just to see what more is there.

I’m thinking people respond better to a “More” button.

However, this really depends on the type of pagination being used. If the buttons are a paired “back/next” buttons, using “more” is probably awkward.

Or am I totally off on this?