The fad of flat design
Recently I struggled to change my settings on a website I was using. I could find the page for setting the options I wanted to change, but was stumped by the lack of a Save button. There was a Save button of course, but it was located in the top left of the screen, and I was looking in the bottom right.
User interface design is about a lot more than how pretty something looks. It is also about ergonomics, and making things fit the mind map of the user, making it simple to understand, easy to use. It doesn't matter how great the graphics are on a website if the user cannot find the right page or cannot understand the form you want them to complete. In the past, poor user interface design could be masked by saying users needed training, but in this age of the website, the interface has to be immediately accessible.
In recent years, computer interfaces have become much flatter. We see this in operating systems, where both Windows and Apple have switched from sculpted button designs to flat areas of colour, mimicing modern magazine layouts, and the same design elements have also found their way through to web page design. But does it work? Researchers at Nielsen Norman Group have put this to the test.
The researchers took nine web pages and tested a number of people to see how well they could perform specific simple tasks on those web pages, such as finding a piece of information about a product, cancelling a reservation, filling in a form, etc, and how long it took them to complete the tasks. They also used eye-tracking systems so that they could objectively measure what the user was doing. Each page came in two versions, with the same layout and same content on both versions, but one had more 3D emphasis on tabs, buttons, etc, whilst the other was a more elegant, stylish, modern, flatter design. The participants were randomly assigned one of the two designs for each page so that the researchers could objectively measure the effect of visual representation of navigational elements.
The results are startling. The researchers found that the subjects spent 22% more time looking at pages with modern flat design than they did on pages with more traditional shading. Proponents of flat design will hail this as a great victory, proving that users engage more with pages of flat design. However, the eye-tracking data shows a very different story. For both page designs, the users spent the same amount of time performing the task on the page, and the difference comes from the time the user's eyes darted around the screen trying to find the navigation elements. That is a significant difference that cannot be ignored, and the results are clear. Even just a small amount of shadow and differentiation gives a much more productive user experience than the completely flat designs. And a better experience for the user means more user responses, more interactions, more sales.
Eye tracking reveals other interesting things about how users work out the navigation and structure of a page. The first thing that is noticable is the way the eyes skip from subhead to subhead as a way of quickly assimilating the page layout, dwelling little on the graphics or blocks of text, and reaffirming that the way people use a web page is nothing like the way people use a printed page. The eye tracking also shows that if links in the page are not clearly differentiated, e.g. by underlining, users tend to move the mouse over things to see if they turn into links. Of course, this strategy doesn't work on mobile devices and instead you just have frustrated users. The study also found that flat designs could work very well, but only if the layout of the page was itself simple, well structured, and logical.
A clean elegant design is certainly important, but not if it is taken so far that it impacts usability.
29th September 2017
This article comes from the SKILLZONE email newsletter, published monthly since January 2008, and covering topics related to technology and the internet. All articles and artwork in the SKILLZONE newsletter are orignal content.