Suppose you are a veterinarian. You have an insanely popular Instagram account because you savagely exploit people’s affection for cute and vulnerable animals. But that’s not enough for you. That’s why you decide to expand your zoo empire by making a mobile app. An app that morphs people’s faces into cat faces and dog faces. (Admit it, at least 14 of you probably just decided to create similar apps with horse faces and pigs faces. Not judging.)

And for your world-changing app you’re going to need icons. Cat icons. This is where Icons8 comes into play.

cat-search

Type “cat” into the search field, download the icon you like in “iOS” style, because you think Appstore is not overcrowded yet, and that’s pretty much it.

Then you can release your app, get standing ovations from your secretary, and from that moment on your name is ingrained in the veterinarian history of the world.

My point? Veterinarians have easy lives. Just kidding…

More often than not people have more peculiar needs. They search for vague icons, like “news”, “work”, etc. for their apps websites t-shirts.

Try searching for work icons, and you’ll get a taste of how terribly good our search algorithm is at slipping in almost anything remotely related to the “work”.

work-search

The thing is, every living soul has their own understanding of what is relevant and what is not. Better yet, even the same person can perceive the same icon as relevant or irrelevant based on a multitude of factors. For example, text labels. Simply adding a text label to an icon changes the way it is perceived.

And we had no idea what to do with that because we have two different display modes:

icon-with-without-label

I will refer to them as “icons only” mode and “icons + label” mode throughout the article.

Which mode is better, icons or icons with text? Which mode is preferable by default? Do people get frustrated if they see too many irrelevant search results?

Asking these questions was my main motivation to do a usability study.

I had 5 participants (actually 7, but the first two were colleagues who I was testing my script with). I simply asked each of them to search for icons

Search box icon…
Search dog icon…

…and point out any irrelevant search results:

dog-irrelevant

The catch was that I asked some people to search in “icons only” mode, and others in “icons + label” mode. I started a table where I would put all the numbers – how many irrelevant searches participants pointed out for every icon in different modes.

table-results

That quickly got out of control. Numbers couldn’t help me at all. The difference between every participant and their perception was so dramatic that I would need hundreds of participants to start trusting numbers and see patterns.

Instead, I focused on small insights. Something that would reveal itself in different forms with different icons, but still has one simple pattern behind it. Here I present my observations.

Do Text Labels Matter?

Suppose you search for the Box icon, and in the search results you get something like this:

box-icon-no-label

Whether you consider it relevant or not highly depends on if there is a text label next to it.

box-icon-label

Because with text label participants consider it relevant. Same for Line search:

line-search-1

People perceive command line icon as a relevant one if it’s labeled.

So “icons + label” mode is preferable because people perceive more results to be relevant and are overall more satisfied with the search, right? Wrong.

Visual Perception vs. Verbal Perception

Let’s search for Box icon again. Among search results we see this icon:

monitor-icon-no-label

Most participants consider it relevant because of its box shape. Not with the text label, though:

monitor-icon-label

If they see this monitor icon with a text label “monitor,” they immediately consider it irrelevant.

That means that text labels make half of the icons relevant and the other half irrelevant. Which is a disaster, because you never know which half you get when. However…

What Is Good About Each Mode?

Of course, we could focus on the negative side of things, but that’s not productive.

Here are some positive aspects of every mode:

Icons only mode

  • More icons can fit on the screen so that we can scan through them faster
  • We choose based on our visual perception, whether we like the design of an icon more than its meaning. Designers in search of inspiration like this mode more. Also, this mode works best for logos ideas and non-UI related stuff (mugs, t-shirts, etc.)

Icons + label mode

  • Text labels can advance your search; e.g., if you are looking for “phone” icons and see a “message” icon that is related to your search. From that moment, you can start searching for “message” or other related words, constantly expanding your initial pool of search words
  • Sometimes our labels are not that obvious, and high-demanded icons can have very specific names. Like Symlink File or Keyhole Shield. It’s easier to remember such icons with a label in mind, so you can easily find them later. Handy for people who constantly work with our library

So Which Mode Do People Prefer More Often?

To be honest, it’s a tie. 3 participants liked the first mode, the rest – the second, with labels. However, all parties find benefits in both of these modes.

Last Thoughts

It is funny to conduct a usability study to determine which mode is the winner, yet come to a conclusion that there is no clear winner in this case.

The good thing is that now we understand that every search mode has its benefits, and we did the right thing presenting all of them so that people could choose something to their taste.

Hope you enjoyed this article, and if you have any questions regarding this study or maybe your own insight, feel free to leave a comment below or contact me via Twitter.


About the author:
Andrew started at Icons8 as a usability specialist, conducting interviews and usability surveys. He desperately wanted to share his findings with our professional community and started writing insightful and funny (sometimes both) stories for our blog.