Navigation: Labels and Icons

Standard

[exerpts from http://www.smashingmagazine.com/2012/03/20/the-elements-of-navigation/]

USER-TESTING LABELS

So what is the easiest way of doing a sanity check of the way you express the information space? A really cheap and well-proven technique is Card Sorting.

cardsorting

 

Take all potential labelings of your navigation design and try them out on users asking them to “say the first thing that comes to mind”. For example, you could say “Products” and the participant might respond with “Price, description, information, stock”.

In what way have others solved their navigation design? Just spending some time looking at what others have done will help you reach valuable conclusions. This can be really time efficient and a good way to increase product usability.

ICONS

Studies have given evidence suggesting that user interfaces have less favorable perceptions of usability and usefulness when only relying on textual expressions.

A symbol is typically defined as an abstract representation that requires conventional knowledge amongst the users for them to fully understand their meaning. Ex: a red octagon = stop in some cultures.

A pictogram on the other hand is usually defined as simplified pictorial representation.

Test your icons

Use this awesome site to see what people like: https://www.iconfinder.com/

You can perform tag-that-icon in one of two ways:

  • Method 1:
    Give several icon suggestions to the participants and ask them to tag them with whatever comes to mind within three minutes.
  • Method 2:
    Randomly show the participants one icon at a time during a day and ask them to come up with tags for each icon during 20-30 seconds.

The latter has most probably proven itself to be really good and better for testing different metaphors for one specific icon when the number of participants are low.

Connect-the-dots

When you have a set of icons and labels that are closing in on finalization, you can then do connect-the-dots testing. All you need to for the test are printouts with one section of all your suggested icons (in a random order) and one section with all your labels (in a different random order). Then, give the printouts to the participants and ask them to draw a line between an icon and the label they think it is coupled with.

 

Of course, not all types of navigation design contain both labels and icons. Some just use icons and some just use labels. you have roughly three cues for guiding your users: One factual (the label), one helpful (the icon) and then—the sometimes subliminal—character (color, typography and form). They do not always need to co-exist since different context requires different solutions.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s