If you are interested in web design and web development, you are probably aware that Font Awesome received an update in last few days. It introduces 71 new icons and some syntax changes, but unless you have been extensively using default styling or come from version earlier than 4.0.2, you shouldn’t worry too much – icon names stay unchanged.

Enough about Font Awesome itself, I found this update (and couple of recent projects I was doing) to be wonderful topic for an user experience article. It will be continuation of the series I started with Aim, hold, action and how I got tricked to upvote, where I try to lay down some reasonable judgement about different practices and approaches when comes to designing web and how this design affects experience of a user.

Why are we using icons at all?

This question will partially define where and which icons we should be using, which are more of a cosmetic addition and which a great way of expressing actions.

Icons are part of a very old communication mechanism which is pictorial writing, where the biggest advantage is versatility of a message. If designed right, picture can carry a message through time – it’s very often culture, generation and evolution proof.

That’s exactly how icons should behave in web design, they should:

  • have universal meaning.
  • have practical purpose,
  • or at least cosmetic value.

This are three, key features and two of them is a bare minimum for your design.

Note: There is much more to icons, but will I cover ONLY use of them. If you would like to read more about icon design, head over to Mac OS X Leopard: Designer’s Guide to Icons by Smashing Magazine or 10 Mistakes in Icon Design by Turbomilk.

Universal message

Every icon carries a message, it can be additional thing, like a small tip; or a leading definition. No matter how big responsibility of an element is, its use should be executed carefully. After all, we are trying to achieve 100% understandability across group of people coming from different backgrounds – every single one of them should understand icon the same way, a perfect situation.

What’s more, icons you are using on your website are affected by icons introduced by other tools and services. For example, big companies which user experience design affects large amount of people, have a huge impact on the way people will treat certain sign.

Startups are another great example, very often they are creating new solutions which require introduction of fresh media among which we can very often find icons – as an introduction unit, they usually earn privilege of planting a new pair of icon and its meaning into user’s habits.

As you can see, one icon can reach very far, that’s why it needs to as universal as possible. Take a look at icons below and think how intuitive they are to you.

Let’s get throught these fast:

  • Printer – mostly used in office suites, symbol of printing material we are editing
  • Bold – can be found in all kinds of office suites, wysiwig editors etc., refers to increasing text’s weight
  • Star – As a single element, introduced by browsers for bookmarking favourite websites, very often used in web services to mark extraordinary content as alternative to . In group, can be a part of a grade system.
  • Comment bubble – Most popular on blogs and social websites where commenting is a big part of a service
  • Cogwheel – Indicates mechanism, behind the scenes operations and in most cases is associated with settings; sometimes instead of cogwheel you can see

Practical purpose

Sidenote: Practical and cosmetic use are very often connected, although cosmetic use can exist without practical use, for obvious reasons, it is uncommon to design the other way.

We love icons not only because they have universal message, but because it’s practical to use one. Probably, the biggest technical advantage over text is amount of space needed to deliver the same message. Of course each environment is different and pros of having more space, can become disadvantage if, for example, you have big amount of options and iconic representation will only lead to confusion of a user.

I won’t go too deep about bad use as this topic is pretty well covered, if you would like to read about mistakes with actual testing behind theories, you should check out Myth #13 by UX Myths where Zoltán Gócza covers Microsoft’s problem with MS Office tool-bar and couple other improvements done by companies.

Let’s focus on those who (in my opinion) nailed it with icon use.

github repo menu

GitHub did a great job with repository menu. If you just entered a “repo”, you have complete menu at your disposal, but after you go deeper into its [repository] structure (Issues, Pull requests etc.) menu transforms to icon-based navigation, giving more space for a left sidebar with sorting options (Issues) or for a tabbed content (Graphs, Pulse and so on).

In addition to that, there are tool-tips, just in case a new user didn’t learn it yet or someone just forgot an option behind a sign.

twitch menu

As you can see above, Twitch has similar to GH’s approach, they replace native, full-scale menu with icon-based bar. In this case it’s more of a responsive action as it takes place only if viewport size reaches certain point – allows to save space on mobile devices and low-res screens for main content.

Again, minified version is supported by tooltips with descriptions where contains tooltip-style footer menu.

What you should take from this two examples and keep in mind when designing your own iconic menus is:

  1. These menus are relatively small, less than 10 options
  2. There is a point when whole menu is visible – a point when user is able to “learn it”
  3. Menu is not removed for the sake of it, there is a reason – more space for content, additional options etc.
  4. Always leave place for hints – like tooltips in examples above

There are areas where total text replacement with icons is very popular practise like:

  • prev/next slide replaced with arrow
  • social media links
  • search buttons
  • open/closed represented by chevrons
  • remove with – usually in lists ex. tags

Cosmetic value

Final category of icon use is “cosmetics”. Sometimes you can’t pass on text, you need everything described – written for good understanding, but icons are being added to introduce a small touch of graphics. Usually, when use [of icons] is focused on appearance, technical value is smaller, like:

  • split text blocks
  • describe paragraph’s content replacing images and title
  • mimic labels of menu options in full menu (with responsive menus it’s important as it’s prepares user for next stage, but in other cases it’s pure cosmetics)

Font Awesome icon blocks

Font Awesome (icon library), except using their own product, use icons in paragraph blocks to improve its homepage look. They are not too descriptive, unless spyglass [] reminds you of screen reader and ban sign [] brings JavaScript to your mind, but they split wall of text into chunks, add a vibe to paragraph (with title, icons actually make a bit of sense) – it’s more pleasing and that’s what cosmetic value does.

To counter previous example, let’s take a look at Brad Frost’s homepage.

Brad Frost no icons

There are no icons and pure text does the job, mostly controlling the balance with font weight and size. Would he benefit from icons? I leave it up to your judgement.

Different communities, different icon tolerance

Final factor I want to bring, to basic things you should consider when using icons, is environment. That may seem obvious, but conspicuous things are those people usually miss or just skip.

Long story short, different communities, cultures and age groups have different tolerance to icons. Great example are video game players who mostly belong to group of young people, usually under 35 and are accustomed to icon-based environments – different kinds of games like, very popular in past 3 years, League of Legends, the biggest MMORPG, World of Warcraft or one of the greatest FPS games, Quake – icons are everywhere. Below you can see an example of action bar and trust me that it’s not a big deal for intermediate level player, version below isn’t actually anything extreme.

World of Warcraft action bar

Now imagine someone older, let’s say around 50s, not too technical person (average, capable of turning on DVD player); who in contact with Windows Phone and Metro UI, wonders what’s the square with a talk bubble (another real life example is “How do you add contact?”). I’m certain (and various tests proved it) that it will be harder for her/him to realize what’s going on on a screen, and actual label “Messages” does wonders.

Both rules apply to web design; if your design needs to be versatile, you should consider every group (focus on your target group, but don’t be ignorant), player, grandfather, single mother on peak of her career, lonely traveller with internet access every 2 months, everyone. Are you targeting certain group? Adjust it to their needs, can they handle text-less and focus on primary content? Go this way, but fill with details like mentioned multiple times tooltips, you can always test it.

Always mind your surroundings

Finally, all of this may not be true

In certain cases, every UX article can be wrong, because there is always factor that can change everything. For example, smartwatches will push our space-managing skills with their tiny screens, are you going to rely on text with only 320×320 res area? I don’t think so. What I want to say is – Don’t trust every concept, because they work differently for different websites and the fact that icon-only navigation works for Twitch, doesn’t mean you will get away with it on your website. Test.

Handy links
Mac OS X Leopard: Designer’s Guide to Icons by Smashing Magazine
10 Mistakes in Icon Design by Turbomilk.
Myth #13: Icons enhance usability by Zoltán Gócza
GitHub
Twitch
Font Awesome