<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body text="#000000" bgcolor="#FFFFFF">
<p>Hi,</p>
<p>This article, and the related research, made me think of Sugar
and how sometimes it's unclear which parts of the UI are
clickable.</p>
<p>It might be we're up for a redesign?</p>
<p>;-)</p>
<p>Sebastian<br>
</p>
<div class="moz-forward-container"><br>
<br>
-------- 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>
<br>
<br>
<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.<br>
<br>
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).<br>
<br>
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:<br>
<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><br>
<br>
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.<br>
<br>
<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 <i>can</i> click on something? Actually, you can click
on the title text or the "Click here for more." Both are links to
Google.<br>
<br>
These flat user interface elements attract less attention and
cause uncertainty, according to Nielsen's research.<br>
<br>
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).<br>
<br>
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 <b>low information density</b>, <b>traditional
or consistent layout</b>, and <b>places important interactive
elements where they stand out</b> from surrounding elements."
(emphasis mine) And, "Ideally, to avoid click uncertainty, all
three of those criteria should be met, not just one or two."<br>
<br>
So your best bet in user interface design is to <i>make sure
clickable items look clickable</i>: 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>