5

Our app has many tools and we have a navigation of about 10 tabs. Tabs can be re-arranged and this forces the user to find them by reading the label. Would icons make it more usable?

3 Answers 3

9

Icons can improve readability and findability in sense that users, that a familiar with interface, usually don’t read the labels in common way, but search for visual markers, that help identify item.

It happens due to visual form, that we percieve before “read” — for instance, in peripheral vision we don’t read, only percieve the form and colour of item, so when using only text labels it looks only as formless lines of gray (in sense of contrast) colour. Icons help to distinguish one element from another (by colour and shape), so increase the ability to read them faster.

Such perception can be simulated by using blur effect:

Example of perception

1
  • Excellent example of pseudo-peripheral vision; our peripheral vision's a lot worse than it seems, so simple, recognizable shapes really help
    – Zelda
    Commented Aug 29, 2012 at 20:22
3

Icons would only make it more usable if the iconography was THAT obvious that it's just apparent to the user as he word itself.

TLDR - Keep the words. Yes there's more physical data there in terms of character count, but for usability stick with words! If you're really stuck for space consider having an icon which when hovered reveals the word too. If you can do that when you hover the menu even better!

mockup

download bmml source – Wireframes created with Balsamiq Mockups

EDIT:

If you are going to use icons this is worth buying - ISO/IEC 11581-5:2004

If you're looking for further reading the Texas Uni site has a great little resource by Sheng-Cheng Huang: http://www.ischool.utexas.edu/~huangsc/files/home/qualifying_paper_hsc_10312008.pdf

2

I don't know if an icon can improve readability as much as it might aid in the discoverability and affordance of the item. Of course this is dependent on the relation between the navigation/action and the text accompanied with it. Example. If a user is moving forward (next) or back; an icon helps convey that idea better by adding the arrow.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.