Usability Issues in Flat Design

By Mohammad Rehaan

Flat design is the latest trend in the field of website design and it is being widely used by freelance designers and big name companies like Microsoft. Flat design is a style in which a sense of three-dimensionality is absent. This enables the designers, including myself, to create beautiful UI designs which are minimalistic in nature. But the overuse of the flat design can cause serious usability issues and I am going to share my observations where I believe flat design, despite of having beautiful presentation, is actually abusing the user experience.

1.     Absence of familiar patterns (underlined text for links, borders for buttons etc.):

VWO is one of the websites which is heavily based on the flat design concept. Although they have tried to solve the usability issues to a great extent, there are few places where components totally fail to convey their actual meaning. One of the places is when we go to create a new AB test campaign. It provides a functionality of switching between two different modes of working i.e. ‘SIMPLE’ or ‘ADVANCED’. This feature was the first ever feature I developed when I used to work on this product at the company. Since then, I always wanted to change the way this button looked. There was only a text like button which actually does the job of switching modes and it is pretty hard to say by only looking at it that it’s actually a button.

Fig 1 : Create new campaign view with a button component with no important signifiers

Suggestions: Although it is clear that having a button with dark background above the search bar would hurt the aesthetics but having a thin border around the text or a line under the text would have successfully delivered the meaning of this button, thereby enhancing the user experience.

2.     Absence of important signifiers (gradients, shadows, highlights etc.):

Another instance where flat design came in the way of smooth user experience would be the home page itself. This is a special example where in spite of solving the problem of flat design, it still somehow failed to deliver the actual meaning of the components. The list item contains a lot of components including links, and buttons, which are consistent with other part of the website. The list item also has a thick border at the bottom giving it a three-dimensional feel. Still, it is not clear at the first glance that the complete list item is itself a clickable area and the whole list item has a uniform clickable area. Also, few components inside the list item individually represent clickable items if we assume them as consistent with other areas of the website, but they are also disabled which creates a huge sense of confusion at first.

Fig 2 : Home page with list item and possible sub components

Suggestions: Traditional methods (background highlight on hover) of delivering the actual meaning of actionable items would have easily saved the confusion of clickable list. Changing the styles of individual items inside the list can also help to reduce the initial traction.

3.     Absence of contextual Indications (CTA placement, actionable copy etc.):

The approach of minimalism might also affect negatively on the conversion rate of a website by hurting the positive impact of a button on a user who might be a potential customer. Flat design, if done wrong, could result in to designs which may look minimalistic and free from all the clutter, but they actually render the whole design as boring. One such example is shown below where conversion rate dropped by 12.29% [3], just by removing the green arrow icon on the button.

Fig 3: Results showing the considerable decrease in conversion rate [3]

One more example is the ignorance of CTA buttons that are supposed to be the first point of contact for the potential customers. While following minimalism, often times designers tend to ignore CTA buttons on a page. However, ignoring the power of CTA buttons should not be underestimated which is demonstrated by the following experiment. In this experiment, the button text changed having more words. Clearly, the attempt to make the button smaller and having less text was not proving as fruitful as it it was expected to be. It is necessary to convey more value and relevance via CTA buttons to achieve more conversion [4].

Fig 4: Results showing the increase in conversion rate with more meaningful text on the button [4]

4.     Conclusion:

Flat design has changed website design completely by implementing minimalistic design and beautiful user interfaces. Flat has enabled the developers to create more efficient pages (case study) with comparatively smaller loading times.  But the current flat design has some serious usability issues that needs to be addressed. One of the major drawback of flat design is the lack of the sense of three dimensional components which makes it hard to notice the actionable components. A possible solution could be to implement flat shadows that solves the problem of adding z-axis while maintaining the aesthetics of the flat design. One such example can be seen in the latest Flat 2.0 approach introduced by the Google material design.

Fig 5: An example of google material design [5]

5.     References:

[1] Design Trends: Flat Design 2.0, http://www.webdesignerdepot.com/2016/02/design-trends-flat-design-2-0, Accessed: 09/02/2016

[2] Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users, https://www.nngroup.com/articles/flat-design/, Accessed: 05/02/2016

[3] How To Design Call to Action Buttons That Convert, http://unbounce.com/conversion-rate-optimization/design-call-to-action-buttons/, Accessed: 12/02/2016

[4] How To Write Call To Action That Converts With Case Studies, http://unbounce.com/conversion-rate-optimization/how-to-write-a-call-to-action-that-converts-with-case-sudies/, Accessed: 12/02/2016

[5] Material Design, https://en.wikipedia.org/wiki/Material_Design, Accessed: 14/02/2016