FLATTER THAN THAT

Apple’s new iOS7 has refuelled discussion on the Flat UI trend. A debate that if nothing else, has popularised the word ‘skeumorphism’ – and you’ve got to love a new term to play with.

But this may have overshadowed an altogether more interesting point. Whilst the rise of the Flat UI may reflect a maturity in our expectation and acceptance of technology, it also represents a maturity in our approach to the design of digital products.

A focus on the value and utility that they create, and not just the way they look and feel. A focus not just on how usable they are, but how useful they (and therefore the brand) are. Maintaining a focus on the content, not the container. And that’s all good.

WHAT IS FLAT UI?

A minimalist approach where all ‘unnecessary’ design elements are removed. It is characterised (in part) by the use of block colour, 2D illustration, square edges and a lack of shadows, gradients and textures. Essentially anything that does not actually add any value to the use of the thing. Some say that means a greater focus on usability, but I would disagree. Part of the reason for all those accoutrements in the first place was to make things more usable.

DESIGN vs. USABILITY

It’s important to recognise that there are two things at play here. First a visual design trend influenced by geometric patterns, clean typography and simple 2D illustration. Its use is popularised through further trends for data visualisation, infographic and linear canvas executions.

And the other is a UX trend that moves away from physical metaphors and the mimicking of real-world textures to create simpler, cleaner experiences.

The two are clearly linked, and there is a valid argument to suggest that they are one and the same thing. The distinction for me is their intent and effect. One suggests the adoption of ‘flat’ design as a deliberate styling choice – nothing wrong with that. Equally there is nothing wrong with deciding on a more elaborate, real-world textured interface with all the bells and whistles if this is appropriate to the brand or experience to be delivered. It’s just a matter of taste.

But looking at this from a UX perspective, adopting a Flat UI is all about making sure there is a focus on the usefulness and value of the experience. It is a reflection of a change in the way we interact with and create digital products. [/eighttwenty_column]

 

WHAT’S DRIVING THE FLAT UI TREND?

Windows 8 is arguably making Flat UI the norm. Apple adopting a flatter approach with OS7 can only cement this. So the base line has changed.

Here’s how:

1. Familiarity – Our use and understanding of digital products has evolved. We know how stuff works, we don’t have to be told to ‘click here’ or have a ‘life-like’ button to click.

2. Touch – We’ve learnt a whole new way to navigate and interact with mobile and touch interfaces. Feedback mechanics like roll-over don’t work in the same way – natural gestures and scrolling dominate. The input device ‘evolving’ from the pixel accurate mouse, to less than standard finger, leans towards simpler patterns.

3. Not sure which is the chicken and which is the egg, but the prevalence to responsive, fluid, continuous scroll and front-end design patterns go hand-in-hand with Flat UI.

4. Process – The move to a lean, rapid prototyping, design-in-browser approach again steers to a flat UI approach.

EVOLVED EXPECTATIONS

We use skeumorphism, real-world metaphors and 3D textures for a reason – they make digital products more understandable by using familiar shortcuts and paradigms. It’s one of the things that made iOS work for people, and what made the iPhone and iPad default for so long. We made buttons and made them feel ‘real’ with shadows and light textures. This gave a sense that there is something to do, that this is the thing to interact with. We used roll-over and on-states together to give the user visual clues and feedback on interaction. We used real or skueomorphic references, like the shuttersound on the iOS camera to ground these clues and feedback in the real world.

As we have evolved our use and understanding of digital interface, the need for these clues and ‘real-world’ references has eroded. And for a whole generation, the new references are the norm. We don’t need to make a button 3D to know we need to click it, or text directions to tell us to click here. We don’t need a www to know something is a website. We just know it. It’s like changing gear in a car – you just know where they are and how to do it. This has shifted our expectations and norms for using digital products, and thus allows the Flat UI trend to evolve.

EVOLVED WORKFLOW

In a workflow where we created visuals from wireframes (the ultimate Flat UI!) there was an understandable desire and pressure to ‘add-value’ in the design process. The temptation to add more elaborate Photoshop shadows and filters to the design to make the flat visual more appealing was overwhelming. But as our workflow has evolved away from UX deliverables and the Photoshop visual, to a lean, rapid-prototype, design-in-browser approach – the opportunity (and pressure) to over design has gone away.

A NEW NORM

So the Flat UI, from a UX perspective represents more than a design trend or fad, but a new norm. As always, it is important to ensure that this is not taken in the extreme, there is a balance to be reached.

This is best illustrated by addressing a few Flat UI myths:

1. Flat UI doesn’t mean we don’t need to worry about giving visual clues, feedback or user direction if they add value to the experience and make it more useful. It’s an appreciation that the way we can do this has changed.

2. Flat UI is actually anything but flat. It’s a multidimensional experience where interaction patterns, movement and feedback are as important as static visual design.

3. Flat UI doesn’t mean dull, or a ‘non-design’. Flat designs can be just as elaborate and visually appealing.

4. Not everything has to be flat. Adding some elements of texture and dimension can create the cognitive dissonance that helps make a product even more useful.

For me, Flat UI reflects a shift in focus from making something ‘cool’, or even usable to being useful and relevant. And I like it.

Read more blog entries