If you’re a designer, you’re probably well aware that flat design in digital interfaces is having a moment. But according to the recent study by Nielsen Norman Group (NNG), the popularity of flat design coincides with a decrease in “clickability signifiers,” visual cues that tell users what’s clickable on a webpage or app and what’s not.
NNG recently conducted a study to find out how these signifiers affect the way we process and understand webpages. Using eye tracking equipment, researchers analyzed how users respond to “strong clickability signifiers” (like underlined or blue text) and weak/absent signifiers (linked text that appears no different than non-linked text, or ghost buttons).
Researchers started out by creating two identical versions of nine different web pages. For every pair, all user interface (UI) elements were exactly the same, except for the signifiers, which were either strong or weak/absent.
Each study participant saw a single web page and were instructed to perform a specific task. Participants were told to announce the moment they located the target UI element they needed to complete their task. In one example, participants were shown a hotel’s website and and given the task of booking a room. They’d announce “I found it” once they located the right button on the page.
The study measured the number of times a user’s gaze lingered on a different part of a page and the time it took for the participant to complete the task.
The result? Both the average number of fixations and average amount of time was significantly higher on the weak-signifier versions compared to the stronger ones.
"On average participants spent 22 percent more time (i.e. slower task performance) looking at the pages with weak signifiers," the study finds.
What’s more, on the weak-signifier versions, the problem wasn’t that the users couldn’t find the target element. In fact, the study showed that they fixated on the right button or link. They saw it, but they moved on to other elements because they didn’t understand that what they saw was the solution to their task.
Pump the brakes NNG. This is a UX issue, not a flat UI issue.
Generally, we want users to be able to find what they’re looking for, fast — and to know their target when they see it. This study suggests that designs with weak clickability signifiers waste users’ time and lead to uncertainty, which detracts from a positive user experience. But, that is a tell-tale sign of bad UX design.
At Very, our designers approach UX and UI design from a user-centric perspective. This means that we design with accessibility, legibility, and overall usability in mind. Here's a reaction on this study from one of our Senior UX Designers, Andrew Frank:
"It’s more of a question of how, and more importantly why, you choose to add depth in the actual UI or the atmosphere it lives in. Every project is going to have some major differences, and when working with established brands that skew towards the flat spectrum, you should create a connected narrative between brand and UI. Flat is useful when it is called for. Skeuomorphism is useful when it’s called for. A hybridization of the two is useful when it’s called for. No visual UI is useful when called for. We aim to create best experiences, not cookie cutter experiences."
Don't trash your flat UI just yet
The good news: even though flat UIs are typically associated with weak signifiers, they can still work well, as long as specific conditions are present. The study showed that pages with weak signifiers don't negatively impact user experience as long as:
- The pages contain smaller amounts of content and ample white space (so that elements aren’t competing)
- The page has a traditional layout, so elements are in places where users expect them to be
- The target elements are high-contrast compared to the items around them
In other words, following UX design best practices can help you create an engaging and intuitive flat UI.
Not sure whether users are getting tripped up by your product’s design? A UX Audit can help identify areas for improvement.