Flat UI Elements Lack Clickability Clues and Cause Confusion

Interfaces that use flat visual designs often have weak or absent signifiers. A weak signifier is a ability clue that is reminiscent of older, more traditional applicability clues designers like using these weak signifiers and 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 topical. So we decided to investigate how these different kinds of signifiers impact the ways that users process and understand Web pages.

So we took nine Web pages 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 seventy-one 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 examples from a landing page on a jewelry stores website. It’s a close up of the intended targets, which are these shop Perl 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 there were more engaged. We also looked at heat map visualizations, which show where many users looked at an interface. The red areas indicate where people looked the most frequently and the longest in six out of the nine pairs we saw differences in the heat maps. The week signifier versions had broader, more outspread distributions of fixations. So, for example, here are the two heat maps for the jewelry e-commerce pages that we just saw close above on the left in the strong signifier heat map, we can see most of the red areas are focused around the purple heading and the purple 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 eighty six percent of participants who saw the strong version fixated first on that heading and then on the link, but then in the weak version, only fifty percent followed that pattern. And that’s a statistically significant difference. And we can see that in the heat map. So much more red is focused around the heading and very little is on the shot permalink. I’ll show you one of the gaze replays of one user doing this task on that brilliant Earth Week version of the page.

This is going to be slowed down to half speed so that we can see the path of the gaze.

So 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 three 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 shot 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 three year pearl subheading is linked, then there’s no problem, right? She’d finish the task successfully even if she never noticed the shot.

Leave a comment

Your email address will not be published. Required fields are marked *