Poor iconography

Read time: 2 min

When designing interfaces or  iconography, stick to common conventions.

What is  it?

Quick! What does this icon represent?

If you said anything other than volume you are wrong. That's right. This is the icon and interface that Vimeo uses for its volume control. (Seen in bottom-right of image below)

Why  is  it bad?

The  problem here is that Vimeo chose to use an icon that has  more widespread use indicating something other than volume. In the above test, if you said something along the lines of "signal strength" or "service bars" you'd likely be in the  majority. Here's a little test to verify that result.

I performed two Google image searches. One for "signal strength icon" and one for "volume icon".

See what I mean? 

Of course discerning readers may have noticed that in the "volume icon" image results, there was one icon that somewhat approximates the same design that Vimeo chose. This proves that Vimeo wasn't completely off-base, but this still leads us to our bottom line:


When choosing iconography (or designing any UI  element) choose the one that is most common or has the most likely chance of being recognized for what it is.

How could it be improved?

The principle being violated here is what's known as Jakob's Law.  It states that   "users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know." This law mentions websites specifically but the principle stands for any design element really. 

The takeaway is that when designing, you should always strive to use   common conventions ; things that people are used to seeing in a certain way.

Inexperienced designers often try to come up with  outside-the-box ideas, or new "innovative" features. This is usually a mistake. Although the new design may be neat or possibly truly innovative, the fact remains that most of the users will not be familiar with it and usability will suffer.