[Sugar-devel] Flat design causes uncertainty

[Sebastian Silva]

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



-------- Forwarded Message --------
Subject: 	Jim Hall: Flat design is harder to understand
Date: 	Sat, 09 Sep 2017 22:06:00 +0000
From: 	Jim Hall <noreply at blogger.com>



Jim Hall: Flat design is harder to understand Interesting research from
the Nielsen Group shows that a flat web design is harder for people to
understand
<https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/>.
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 <https://www.google.com/>

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 <https://www.google.com/>
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.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.sugarlabs.org/archive/sugar-devel/attachments/20170909/e5b2c8b6/attachment.html>