The latest buzz around the design ecosphere lately has been this concept called flat design. If this term is new to your vocabulary, it is a newer concept that on the surface asks the designer to rely upon a very simplistic visual design to accomplish the user experience design. One of the latest examples of flat design is the release of iOS7. Have you played with flat design yet?
For me, flat design has a much deeper meaning (which is why I personally like it) for the design team. Here’s my critique on what flat design brings to the table.
Simplicity and the core experience
Have you noticed that there isn’t much “stuff’ in flat design? On the surface, there are a lot of simple colors and boxes. Underneath this visual treatment, though, lies an opportunity: removing all that is unnecessary. What makes something simple to do? It means focusing in the core experience and the content of the experience and making sure that that one particular task/experience is done exceptionally well.
I’ll provide an example: the weather app on iOS7. What is the core experience? Some might say knowing what the weather is right now, and some might say it is seeing what the weather conditions are at many locations. How does flat design achieve this experience? Looking at the new version, all of the most salient information – location, current temperature, current type of weather, and what is coming up in the week – is presented without any additional interactions. All of this is conveyed through visual hierarchy, along with a minimal use of icons and text. Using a flat design allowed the app to iterate to this version, allowing for a better experience than before, as it is more visually compelling, and I don’t have to look through as much “stuff” to find the weather.
Flat design and usability
Just because the app is presented with the appearance of a small amount of information (e.g. with flat design), it doesn’t mean that there shouldn’t be as much care taken with the usability for the application. The factors going into an app are still just as prevalent with flat design:
- Touch targets of buttons (just because a button is simply designed or appears flat doesn’t mean it can’t be pressed or clicked)
- Whitespace is now even more important to help separate content and show how items are related to each other
- A flat design still needs to provide readable and understandable content
- Buttons and links still need to stand out to help people find actions
- The simpler content still needs to help people complete their objectives
- The multi-device nature of our interactive world, and the quirks of each device
- A flat design should be accompanied with simpler and subtle animations in order to not disrupt the flow while using the application
- Working with visual designers and usability practitioners is more critical, as the visual nature of flat design (e.g. whitespace, color, contrast, minimal icons) are key aspects of how people understand their manipulation of technology, especially with emerging new form factors
Overall, for me as a user of flat design, I can see and play with some of the strengths and tradeoffs of these usability principles in action. For the clock application, I can now see my alarms better through the use of the strong green color accompanied by a white (instead of a grey) background with black (instead of grey) text. The tradeoff that I see is that the labeling of “on/off” is removed, and now my only clues of an active alarm are the switch’s location, and the coloring of the active alarm. Without any labels, my intuition has to rely upon these points to make the design accessible (but I am assuming the accessibility functionality reads the green state as “on” and the red state as “off”).
A strong use of the flat design comes in with the calendar application. In its year mode, whitespace is the main element for grouping all information: year, month, and week. Simpler icons are used for searching and adding events. Pressing on the today label moves the current view today with a subtle animation that grows and shrinks the current day. The tradeoff I see within this application is a matter of styling: the labels for each month look very similar to the treatments of each action and may not appear to be “touchable” at first glance. While I don’t use this application very much, I didn’t realize the month labels were touchable until writing this post.
Development tradeoffs OF flat design
A hidden benefit I see about choosing to use flat design is that the design is much more conducive to help remove some of the burden of translating an image into developed code.
More teamwork is needed
To successfully pull off a flat design, teamwork is essential to pull off a professionally done flat design like iOS7:
- The core experience design team should work in tandem with visual designers to ensure that a flat design works with the content and user’s objectives
- The user research teams should have a bigger say in design choices, as they can directly see how flat design impacts user’s expectations and usability of an application
- Flatter designs usually mean fewer styling rules, which can help the prototyping teams focus on what is technically possible to achieve. This has a side effect of making the style guide rules easier to implement, giving developers more time to focus on business logic
- Above all, the use of flat design is a big change for many businesses and users. While flat design appears to be easy to implement, there should be just as much time, if not more, for the design teams to successfully figure out what users need and how to use flat design to help achieve these goals. This decision shouldn’t be left up to the design team – a flat design affects everyone.
What do you think about flat design? How has it helped or changed the way you work and think about design? For me, I find it as a valuable opportunity to engage with visual designers to provide a simplistic experience, in the simplest manner possible. I also find it a business opportunity to provide more with less, and to help development not have to concentrate on large amounts of front-end styling.
(Screenshots taken from an Apple iPhone 4s running iOS7)