Summary: Flat Design has become an industry-standard approach to UI/UX Design with Microsoft, Apple and Google all backing Flat UI styles. Flat Design’s minimalism aims to bring visual breathing room to a design by eliminating visual clutter and chrome (UI extras). The problem with this approach is it is easier to imagine than to execute with maximum usability intact. In this post we will discuss some of the common pitfalls in designing Flat or Flat 2.0 Design.
Minimalism needs to balance with function. This is particularly challenging for Visual or Graphic designers who can embrace minimalism at the cost of hiding UI signals, “information scent” or triggers for user action. A few years ago this led to the “Flat 2.0” update to the approach, which seeks to minimize yet allow UI’s to be perceived and used.
The 5 most common pitfalls of Flat Design including many hybrids of Flat 2.0 include:
Pitfall: Contrast is the biggest offender with Flat Design. Dark on light or light on dark allows targets like buttons and call to actions like links, text or icons to be perceived. If users cannot see it they will not easily find it. Bad example (image below).
Instead: Good Flat design seeks to make use of strong color contrasts, including backgrounds, font and button colors– all to guide, not hide the user’s eye.
Image: In this scheduling web app, gray and gray fade together making it seem like Submit is the only button available.
Pitfall: Prioritizing UI elements with layout, color to impact ‘visual hierarchy’ or weighting (important stuff at the top) is critical. Good example (image below).
Instead: Good Flat design seeks to heighten priority visually based on task urgency– all to guide the interaction and task completion.
Image: Google’s document web app calls dramatic priority to document collaboration by accenting the area around the commenting icon with a large circle.
Pitfall: Placing valuable links, tools or icons next to key content without providing visual differentiation can cause users not to see the helpful items. Good example (image below).
Instead: Good Flat design seeks to follow good UX design principles such as placing like controls together, in context, with the added benefit of being able to identify the tools just in time.
Image: In this ecommerce site, helpful tools are placed next to key tasks, differentiated valuably with consistent link color.
Ptifall: Affordances embody the actions of an object (UI, CTA or a control). But once your affordance is in place you need UI ‘signifiers’ to reduce interpretation. Flat design often accidently mutes signifiers or hides affordances altogether reducing usability critically. Good example (image below).
Instead: Good Flat design seeks to reveal affordances and highlight signifiers. This is to call attention to UI controls, and, aid the intuitiveness of interaction.
Image: In this utility mobile app, choosing a grid layout is aided by a visual helper and color around the selection for row & height.
5. Brand Style
Pitfall: Flat design can lead to novel designs on the plus side, but may clash with the rest of your brand or style guide.
Instead: Think about separate branding between your products, or if that will not work, use the potential playfulness, bright colors or open spaces to create your own Flat design style within the boundaries of your existing style guide.
Image: In this travel mobile app, Flat design helps differentiate in the travel space. It also calls to attention important actions (not pictured).
Conclusion: Flat Design or Flat 2.0 can enhance the usability of your UI by adding contrast, helping prioritize user tasks, highlighting tools in context, giving affordances definition, and even by helping you expand or better articulate your brand style. Getting the UX right for your Flat Design is critical. This is at the risk of cool-looking designs that users gloss right over.