You may have read about a recent study that came out in early September 2017 by the Nielsen Norman Group. It had a headline grabbing title about how Flat UI designs cause uncertainty in users. The headline alone had product managers questioning their designers and developers.

However, if you read deeper into the article, you’ll find that the eye tracking research actually confirmed the importance of a number of key UI design guidelines.

If you are building user interfaces and you haven’t embraced the acronym CRAP yet, then I highly recommend that you look into it.

It stands for Contrast…. your important, interactive UI elements need to stand out.

Repetition… consistent UI patterns train user’s brains where to look.

Then you build a clear visual hierarchy through the use of Alignment and Proximity. This includes intelligent use of negative space (or whitespace) along with grouping items that belong together near each other.

This study hits on a key human factors issue. Complex, high density user interfaces cause users uncertainty and delay their ability to take action.

Now let’s take a look at some details of the study and how Material Design is already built to address these challenges.

“Flat UI” vs Material Design

On the left, we see a traditional link with the blue color and underline. The right side shows an example of an ultra-flat UI where positioning is the only signifier that the element may be interactive.

The eye tracking results showed that users of the flat design would try to click on the header first and often ignore the flat button completely because it’s click ability signifiers were too weak.

Material Design provides a number of different button types to address this type of situation. First there is the flat button. It stands out through the use of a contrast color in addition to capitalization. However, these buttons are not designed to be used for your more important actions.

In this case, taking the user to your pearl storefront is a primary action.

Material Design provides raised buttons for the cases where you want a strong click ability signifier, and the user’s gaze to be attracted by the color and height of the button.

In my next post, I’ll discuss the basic concepts of Material Design and try to distill the marketing and design language into something that a developer can make sense of.

If you don’t want to wait, you can start reading the Material Design Specifications now.