I'm Kate Meyer, a researcher at Nielsen Norman Group.
In digital products, signifiers are perceptible clues that tell users what they can do, what
actions are available to them, within an interface.
Interfaces that use flat visual designs often have weak or absent signifiers.
A weak signifier is a clickability clue that is reminiscent of older, more traditional
clickability clues.
Designers like using these weak signifiers in interfaces because they help to keep the
interface looking clean and light.
The problem that we started to notice in our qualitative studies is that those weak signifiers
also seemed a little bit less noticeable, and that users would sometimes struggle to
identify them as clickable or tappable.
So, we decided to investigate how these different kinds of signifiers impact the ways that users
process and understand web pages.
We took 9 webpages from live sites and modified them to create two nearly identical versions of each page.
The two versions were different only in the use of strong, weak, or absent signifiers on the interactive elements.
We conducted a quantitative experiment with 71 general web user participants, and we showed
each participant a different version of each web page; and then gave them a small, findability task.
This example is from a landing page on a jewelry store's website.
It's a closeup of the intended targets, which are these "Shop Pearl" links.
We asked participants to find the pearl jewelry that was sold on this website.
As soon as participants saw what they wanted to click on to complete the task,
they said, "I found it," and stopped.
There's a high contrast, traditional, blue underlined link for the strong version on the left.
And then on the weak version on the right, we took inspiration from what many ultra-flat sites
do in real life, and we styled the link just like static text.
We found that people spent more time looking at the weak signifier pages -- those flat pages,
and that they had to look at more of the elements on the pages.
In this case, more time and more looking are not a good thing, because this was a findability task.
They weren't spending more time on the flat designs because they were more engaged.
We also looked at heatmap visualizations, which show where many users looked at an interface.
The red areas indicate where people looked the most frequently and the longest.
In 6 out of the 9 pairs, we saw differences in the heatmaps.
The weak signifier versions had broader, more outspread distributions of fixations.
For example, here are the two heatmaps for the jewelry e-commerce pages that we just saw a closeup of.
On the left, in the strong signifier heatmap, we can see most of the red areas are focused
around the pearl heading and the pearl link.
We can see more red areas, which indicate the most and longest fixations, spread out further
in that weak version.
And then, when we watched the replays of the individual sessions, that's what we saw.
In the strong version, users mostly focused on the heading, and then the link caught their
eye, and they identified that as the target.
We saw that 86% of the participants who saw the strong version fixated first on that heading
and then on the link.
But then in the weak version, only 50% followed that pattern, and that's a statistically significant difference.
We can see that in the heatmap, so much more red is focused around the heading and very
little is on the "Shop Pearl" link.
I'll show you one of the gaze replays of one user doing this task on that Brilliant Earth,
weak version of the page.
This is going to be slowed down to half-speed, so that we can see the path of the gaze.
We can see her taking in the page, looking at what's available.
She's checking out the navigation options.
And then she scrolls down the page.
She sees the pearl image, and then she sees "3 Year: Pearl," that subheading.
That's what she fixates on, and that's what she identifies as her target.
She never looks at or considers the "Shop Pearl" link.
And we saw the same pattern over and over again on the weak version.
The link styled like static text is just not noticeable.
But, if this "3 Year: Pearl" subheading is linked, then there's no problem, right?
She' finished the task successfully, even if she never noticed the "Shop Pearl" link.
But the problem isn't really that people can't use flat UIs.
Except for when they're really, really bad, people can generally figure them out.
The big problem is that weak signifiers and flat user interfaces are just that:
They're weak.
They often aren't very good at doing their job, which is telling people which elements
are interactive and which aren't.
For more information about our study, and more analysis of the results, be sure to
check out my article, "Flat UI Elements Attract Less Attention and Cause Uncertainty."