Saturday, September 9, 2017

Flat design is harder to understand

Interesting research from the Nielsen Group shows that a flat web design is harder for people to understand. The usability study was conducted against web pages, but the results apply equally well to graphical user interfaces.

First, let me define the "flat" web design: Websites used to use colors on links (usually blue) with underline, and 3D-style buttons. Web designers really didn't have to do anything to make that happen; the standard web styles defines blue as a link color (purple as a visited link color) and any button element will appear in a 3D style (such as beveled edges).

In recent years, it has become fashionable for web designers to "flatten" the website design: links appear like normal paragraph text, and buttons are plain rectangles with no special decoration. Here's a trivial example of a flat web design:
Title text

Hi there! This is some sample text that you might find on a website. Let's say you are on a shopping website, this text might be an item description. Or if you're on a news website, this might be the summary for a news article. And below it, you might have a link for more information.

Click here for more
Looking at that example, do you know what to click on? Do you know that you can click on something? Actually, you can click on the title text or the "Click here for more." Both are links to Google.

These flat user interface elements attract less attention and cause uncertainty, according to Nielsen's research.

The Nielsen article is very interesting, and if you are interested in usability or user interface design (or web design), then I encourage you to read it. The article includes "gaze maps" (heat maps that show where testers looked on the web page) on web pages that used a flat design (weak signifiers) versus a more traditional design (strong signifiers).

It's not all bad, though. A flat design can work in some specific circumstances. From the article: "As we saw in this experiment, the potential negative consequences of weak signifiers are diminished when the site has a low information density, traditional or consistent layout, and places important interactive elements where they stand out from surrounding elements." (emphasis mine) And, "Ideally, to avoid click uncertainty, all three of those criteria should be met, not just one or two."

So your best bet in user interface design is to make sure clickable items look clickable: buttons should have a 3D design, and links should be styled with a different color and underline to look like clickable links instead of regular text.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.