Flat meme!!

Flat UX

Things to consider when designing flat.

Web and Mobile get their own style, Yeah!!

For years we have been treating the web and mobile as some kind of new medium that is radically changing the way we live and do things. Because of that, web and mobile designs have tried to make it easier for users to get into their designs by adding elements from the “real world”.

With Flat design it looks like a unique design language for web and mobile is finally coming in.

Skeuomorphic designs

Skeuomorphism refers to a design principle in which design cues are taken from the physical world. — Techopedia

Skeuomorphic designs try to incorporate real life looking elements such as real looking knobs and light switches into the interface. Using widely recognised elements such as a light switch to associate with a “switch on” action eases the transition and learnability of the interface.

Flat is not the opposite of Skeuomorphic

Even though it does seem this way, flat design is not the direct opposite of skeuomorphic design. They are just two different sets of design styles and principles that happen to not play well together.

Once you start skeuomorphic you have to go all the way!

As there are tons of great looking skeuomorphic designs out there, there are twice as many poorly implemented skeuomorphic designs. Their main point of failure is not being able to elegantly mix the real life and web/mobile elements together. For instance, a normal slide bar component may look odd on wooden background. In order to make it look good you have to make the slide bar look more 3 dimensional, add some bevel and shadowing, add some texture etc….

What if you wanted to add a text input next to it? and a button? … Well, you have to skeuomorph them as well! Many website don’t get it and you can end up having some funny looking mixes like a leather background with text and links on top of it.

Skeuomorphizm gone bad

There are a few psychological and perceptual problems that occur when you mix “real elements” with non real elements, here are 2 of them:

  1. Cognitive dissonance

Cognitive dissonance is the discomfort experienced when simultaneously holding two or more conflicting cognitions: ideas, beliefs, values or emotional reactions” — From Wikipedia

Users don’t expect to have “contact us” textfields embedded into a faux leather background! This goes against how they perceive leather and textfields. Cognitive dissonance can be also used to drive people to a certain behaviour and can be a very powerful way to get users more engaged, change their mind about different brands and products. But the problem is that the way that people deal with cognitive dissonance is very personal and unpredictable. Therefore, by giving too many conflicting elements in your designs you may be taking your users on an unnecessary roller coaster ride.

2. Uncanny

The uncanny (German: Das Unheimliche, “the opposite of what is familiar”) is a Freudian concept of an instance where something can be familiar, yet foreign at the same time, resulting in a feeling of it being uncomfortably strange or uncomfortably familiar -From Wikipedia

Similarly to Cognitive dissonance, uncanny causes some discomfort among users when they mix familiar with un-familiar.

One of the best uncanny examples is the uncanny valley syndrome, which describes the discomfort people have when presented with something that looks very human but not completely. For example: Androids that really resemble humans (Scary!! :).

Example in UX:

One of the ways to enhance the experience of text to speech applications is to show a mouth talking on the screen which is synced with the text. This has been proven to make users understand and remember the text better. However, the closer the mouth looks and feels like a real mouth but not fully real, the more likely that users will be distracted by the subtle differences, even worse when they are un-synced. Therefore, even a simple character animation like this = [] = [] <> = [] ([] mouth open wide, = mouth open narrow, <> vowel etc..) may give a big boost to the experience without the cognitive discomfort.

Flat Design

flat design is defined by flatness of style: simplifying an interface by removing extra elements such as shadows, bevels, textures and gradients that create a 3D look. — ANTONIO PRATAS

Affordance of UI dynamic elements

Non-flat buttons, input fields etc.. all have a clear “press me”, “use me” affordance.

A simple bevel or shadow can make your element look like its something the user can interact with. However, with flat design the user may need different hints or indications for which elements he can interact with or can not.

Consistency with previous designs

Unless you are starting completely from fresh, you probably already have some designs up somewhere.

Users by now are already used to your branding and your design language. Therefore, it’s very important that when you introduce flat design into your products, that the change is not too radical.

One good way of doing this is to anchor your users to existing familiar elements. A great example is googles’ latest flat logo, which is well anchored to the previous logo.

Unprovenness and newness of Flat design

Flat design is the new kid on the block, this means that there isn’t that much proof for its effectiveness. It hasn’t been around enough time to draw clear conclusions and it may not work out after all.

In 2 years time, people maybe calling desperately for the return of shadows and bevels. Or maybe, just maybe flat design is just the revolution that people needed.

Grouping, separating, sticking out, highlighting etc.. still work!

Once you get rid of shadowing, bevelling and all funny kinds of ways to make grouping and actions stand out, you realise that it doesn’t really loose it’s effectiveness and that you can very well do without them!

This has been tested and grounded for centuries in graphic design for print and other mediums way before the web.

The most prominent design guidelines that can help you do proper grouping and structuring of information without the need for extra shadowing and filters are the Gestalt Design principles.

More space!

With less bordering, shadowing etc.. you also get a lot of space freed up which allows you to fit in more text and information if needed or just let the users enjoy the sense of space. Those 10-20 extra pixels can take you a long way on a small screen.

Fresh new look and feel!

It’s fresh and cool and everybody is doing it!

The bandwagon moves non stop, you didn’t jump on it today.. two days have gone by and you find yourself left behind — Meir Ariel

It’s a great opportunity to freshen up your look and feel, give your users a cleaner and simpler upgrade. Corporate identities usually have a 10-15 years lifespan, but Web and Mobile identities last even less and products and services come and go almost on a monthly basis. Web and mobile users need constant improvement and a general up-slope of incremental positive changes to stay engaged and loyal to your product.

Should I go Flat!

My suggestion is to just go for it! But as with everything new, try it with caution, measure and evaluate every step. All the above things in this article can be taken into consideration, but there are tons more things to research and look into.

Most importantly, you have to like it!

You need to break an egg to make an omelette!

Flat design is quite disruptive and makes you break a lot of things to make space for the new ones. But in the long run, the simplicity factor in it will pay.

Even if Flat in its pure flatness will not prevail, it will surely make a big change for the better.

Good luck and share your stuff!

CTOx3 -> UX Consultant

CTOx3 -> UX Consultant