Putting On Airs or Icons in Web Design

Putting On Airs or Icons in Web Design


This article explains why intelligible icons are so important for any user interface success. Common mistakes connected to icons design and application and several pieces of advice will also be discussed here.

Every web designer uses icons and considers them really essential elements of any UI (user interface). It’s natural as icons make the latter much more intuitive and user-friendly.

Actually, pictograms were used even by ancient people. By the way, some elements of such cave paintings are still in use in some cultures.

icons-1

Pictograms are used in public places as the signs of directions and certain places. This works especially good in multicultural and multi language environments. In subways or airports, for example. Here traditional text messages are less efficient than images.

icons-2

As time passed by, icons have been taking their place in UI designs. Here is the photo of the first commercial graphic UI of one of the first Xerox Star computers, created by David Smith.

icons-3

There is nothing unusual in the fact that icons gained such overwhelming popularity in UI designs. First of all, they make the interface sleek and comfy. Secondly, when used correctly, they add a personal touch to your website or application. But that’s not all, far from it. Very often icons are able to replace a few words or even a small sentence. Today, when mobile phones are so popular, but their screens are not too large this is a great advantage. But, beware; here is a trap: many icons are not totally clear for each and every user. They make people think… What good is in the interface that is difficult to understand? Nothing!

Here is a simple rule for you, just follow it and your interfaces will be ok. Use only the icons that are 100% understandable to everybody.

Here is a funny example of confusing icons. Do you always understand how to take care of your brand clothes?

icons-4

Discussing the usage of icons with a client, you probably hear the following words from time to time: “The visitors will exploit our software and get used to the icons we’ve selected sooner or later”. Maybe this makes sense, but is it a good solution? Do you use Apple mail? Have you ever got confused choosing which of the icons you should tap to write a new message?

icons-5

Bad icons and bad interfaces are synonyms. The customers won’t use the interface if they don’t understand it. Distrust to everything new is in human nature. When Google decided to hide other apps under the dubious icon (the one looking like the Rubik’s Cube placed near the bell icon) in their Gmail UI, they got plenty of inquiries into their tech support. All of the users wanted to know where they can find their calendar!

icons-6

Another example is connected with Twitter icon redesign. We are sure that Twitter users felt the inconveniences for a long time as the ‘New message’ icon purpose was not obvious enough.

icons-7

The next Twitter version made it much easier to write a new message.

icons-8

Do you know how to send a direct private photo message to your friend on the Instagram? Click the pictogram in circle.

icons-9

Surely, you know this icon’s meaning if you are an advanced Instagram user. But how many people don’t use the option because the icon is unclear? They just don’t know what to do with it.

The context is always important, especially when you use the icons. Some absolutely obscure pictograms become misleading in different contexts. Let’s make sure that we tell you the truth. Below is a standard Gmail window, which you see reading your primary messages. Do you see how similar are the two icons (the one on top of the page and the one you should click to reply the message). But they have absolutely different functions.

icons-10

We bet many users got into primary messages when they wanted to reply the email. Context should be taken into account.

Tweetbot icons may also seem not clear enough. They have accurate meanings only in Twitter context. The users of Tweetbot are the users of Twitter, so they understand the meaning of these icons. That’s why the usage of these pictograms is justified here.

icons-11

The same thing can be said about the Tumblr application for iOS. Some of the icons may seem weird to the majority of us, but in Tumblr context, their usage makes a clear sense.

icons-12

Rdio app for Mac looks approximately like that:

icons-13

Most of the icons, used there have extremely clear sense if we speak about musical player. (Though, some pictograms have double meaning. I.e.: the volume and the icon that shows the tune that is being played at the moment).

That’s why it’s important not to use icons that are not 100% clear to the users. If in doubt – use another one, simplify call to action. In some cases it’s better to use text. It may seem more understandable. You can also combine the icon with text to resolve the deadlock. Combining the advantages of both graphic solutions is a brilliant option. This is excellently realized in App Store as their icons by themselves wouldn’t have too much sense:

icons-14

Twitter does the same in its interface:

icons-15

Facebook is our final example. Please, have a look at it. Not so long ago they replaced their hamburger icon by a very functional navigation menu, which includes icons and explanatory texts. An excellent solution:

icons-16

icons-17

Do you agree with us that icons are utterly important in any user interface design? They can make or brake website’s usability. Please keep this in mind and test your UI regularly – this is the way to success.

+ There are no comments

Add yours