Mind Your Step: Flat Design Could Have Your Head
Huh? Wasn't flat design supposed to be the best thing since canned beer? A new study shows that the opposite can be the case. And it makes perfect sense.
Who Can Spot The Button First? (Screenshot: Noupe)[/caption]
Other UI elements, like tabs, sliders, and form elements, have become a part of the more aesthetically pleasing flat design as well. Even when coloring a website, a real designer pays attention to harmonious symmetry, instead of awkward accentuations.
All of that is pretty to look at, making it the current state of the art. Sadly, the Nielsen Norman Group (NN/g), and we can't claim they were incompetent, ruin the whole thing, once again. They've dealt with the question if and how modern design leads visitors to the goal. The results are evident.
Fortunately, that's not necessary. The study also shows that there is an area, where there is no significant difference between flat design and conventional approaches. The usability scientists come up with some recommendations based on these results:
Are you a designer? If so, the results of the rather new study on flat design may hurt you. Learning and accepting that webdesign is no form of art, but a form of communication before reading on will definitely help. The right way is the one that reaches the visitor, not the one that gets you the most applause on Dribbble.
The Good Old Days
Blue, underlined text is what a link used to look like. Admittedly, that's not pretty, but recognizable. Nowadays, a link can be anything. But it's almost never a blue, underlined text anymore. Buttons used to look monolithic. Big buttons with an unsubtle 3d feel were the standard for websites. Today, ghost buttons are considered the way to go. You can only tell that they're buttons as long as you are able to identify ghost buttons as such. They consist of thin line frames around a more or less crisp text. Most of the time, the ghost button has a transparent background. One thing that it never has, though, is a 3D feel, an obvious look. The opposite is the case, as people try to blend the button and the background. [caption id="attachment_87738" align="alignnone" width="1030"] Who Can Spot The Button First? (Screenshot: Noupe)[/caption]
Other UI elements, like tabs, sliders, and form elements, have become a part of the more aesthetically pleasing flat design as well. Even when coloring a website, a real designer pays attention to harmonious symmetry, instead of awkward accentuations.
All of that is pretty to look at, making it the current state of the art. Sadly, the Nielsen Norman Group (NN/g), and we can't claim they were incompetent, ruin the whole thing, once again. They've dealt with the question if and how modern design leads visitors to the goal. The results are evident.
Mnemonic: Target-oriented Websites Should Not be Subtle
In a very detailed, and carefully illustrated article, NN/g's Kate Meyer concludes that flat design attracts less attention, and even causes insecurities. Take that in. That's something no designer should want. This conclusion is mainly based on observations gained by eye-tracking technology. NN/g had different focus groups use a computer and gave them different tasks to do. NNG/g measured the time it took the participants to solve the tasks, as well as all actions the users took on their way to the goal. NN/g presented two versions of the same website. One version with flat design, which was beautiful above all else. And one that highlighted the interaction elements a lot more, using blue underlined text, or obvious buttons, for example. The scientists also experimented with different colors, by using certain colors exclusively for interactive elements. The apparent result was that all test subjects took a lot longer to get done with the given task when dealing with flat design, while the more visible signs of the conventional design allowed the users to get to the goal faster. The participants were asked to complete the task in any case. The regular website visitor is not that resilient. He could head over to the competition a lot faster than you'd think. At that point, your flat design would have cost you more than you expected. Thus, there's an obvious conclusion to be drawn for commercially oriented websites: If your site is supposed to make money, don't make it subtle.We Shouldn't Overdo it, Though
Now, do we need to go back to the beginning of the web? Shouldn't we make our buttons blink, and have important text move along the top of the website in a ticker? Should we turn the "purchase" button green, and animate it?
Fortunately, that's not necessary. The study also shows that there is an area, where there is no significant difference between flat design and conventional approaches. The usability scientists come up with some recommendations based on these results:
- The information density per page should be at a moderate level, at most. If the user is not battered by a wall of text, he will have an easier time to find what he's looking for. Making use of white space is a good way to make sure that individual elements can be recognized as such.
- Don't toy around with unusual layouts. Finding interactive elements is a lot easier for users if these elements are located in common spots. This reminds me of "Don't Make Me Think," and also includes the aspect of consistency in your designs.
- Go for high contrasts between the environment and the interactive elements. For example, you could give your buttons a crisp color, similar to the effect of a big 3D button. In general, essential elements should always have a significant contrast to the rest of the design.
- Instead of the, often not fitting, blue underlined text as a link highlighter, you could go for colored versions without underlines. What matters is that the used color has a distinctive contrast to the rest of the text.