<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>