<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body text="#000000" bgcolor="#FFFFFF"> Hi, This article, and the related research, made me think of Sugar and how sometimes it's unclear which parts of the UI are clickable. It might be we're up for a redesign? ;-) Sebastian <div class="moz-forward-container"> -------- Forwarded Message -------- <table class="moz-email-headers-table" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <th valign="BASELINE" align="RIGHT" nowrap="nowrap">Subject: </th> <td>Jim Hall: Flat design is harder to understand</td> </tr> <tr> <th valign="BASELINE" align="RIGHT" nowrap="nowrap">Date: </th> <td>Sat, 09 Sep 2017 22:06:00 +0000</td> </tr> <tr> <th valign="BASELINE" align="RIGHT" nowrap="nowrap">From: </th> <td>Jim Hall <a class="moz-txt-link-rfc2396E" href="mailto:noreply@blogger.com"><noreply@blogger.com></a></td> </tr> </tbody> </table> <title>Jim Hall: Flat design is harder to understand</title> <base href="http://opensource-usability.blogspot.com/2017/09/flat-design-is-harder-to-understand.html"> <img src="http://planet.gnome.org/heads/jhall.png" alt="" moz-do-not-send="true" align="right"> Interesting research from the Nielsen Group shows that a <a href="https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/" moz-do-not-send="true">flat web design is harder for people to understand</a>. 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: <div style="color: black; font-family: sans-serif; margin: 2em; padding: 1em;"><a href="https://www.google.com/" style="color: #333333; font-size: 1.2em; font-weight: bold; text-decoration: none;" moz-do-not-send="true">Title text</a> 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. <a href="https://www.google.com/" style="color: #333333; font-family: serif; text-decoration: none;" moz-do-not-send="true">Click here for more</a></div> 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. </div> </body> </html>