March 29, 2013
Flat versus Rich Usability Design
For about a year now, debate has been raging in the design community regarding the virtues of a “flat” design aesthetic versus a “rich” design style that makes greater use of bevels, reflections, drop shadows, gradients, textures, etc. This second design style is often incorrectly equated with skeuomorphism and attributed to Apple, while “flat” design has been more recently popularized in user interface (UI) circles by Microsoft.
Flat usability design has certainly been trending. Google’s recently redesigned web and phone applications certainly seem to be moving in that direction, and, as independent designers from all corners of the globe rush to try their hand, even Apple is rumored to be getting on board. Regardless of its other qualities, flat design certainly seems to be in vogue.
As many bloggers are quick to note, rich design can be helpful in defining interaction metaphors on an interface: a user knows that a button is a button because it looks like a button, gradients and all. Flat design, especially on touch surfaces, can easily suffer from a hiding of obvious affordances due to the lack of consistent visual treatment.
But this lack of ornamentation can also be a blessing to usability. Stripped to the bones, a good designer is forced to make decisions in favor of simplicity and consider every design decision without the advantage of richer styling to distract critics from interaction problems. As it were, designers have been leveraging this particular aspect of a flat design aesthetic for years without even realizing it — in wireframes.
Flat usability design starts from a similar place as wireframing. The designer is forced to rely on simpler visual cues like placement, shape or even labeling to convey their intention. Wireframes are a favorite artifact in various types of usability tests, where a non-designer person is asked to view the wireframe and comment on how they would use the design to accomplish a specific task. By removing ornamentation, designers can focus on usability and get to the heart of interaction problems quickly.
Flat design as a final aesthetic would seem to have these advantages, as well. In the hands of an experienced designer, and given the proper context, it can be used to create a sense of clarity and simplicity for the user and remove the need for distracting ornamentation. On the flip side, an untrained designer who does not test their interfaces regularly with non-designers is likely to use flat design to create new and confusing interaction patterns that hide necessary affordances under colored tiles.
In my next post, I’ll examine flat versus rich design from an historical perspective.