Home Design Icons and UX

Icons and UX

3 min read
0
0
79
image The Tripadvisor app uses icons with text labels on their startpage and on their tab navigation menu.

ICONS COULD MEAN A LOT OF THINGS

The icons are given meaning by the user, in regard to the task they’re carrying out at the moment.

Icons are like abstract paintings. They get different meanings for different people. It’s all through the eyes of an observer. And that ambiguity is really exciting with art. But not so much in user interfaces.

Abstract art. Painting.
Abstract art. Painting.

What’s the icon for offline downloads? It could be a folder, star,  heart, down arrow. Or even a profile icon. It’s very hard to rule out any one icon.

ICONS SHOULD HAVE LABELS

When icons are used to save space, things go wrong. Icons should not be used in that way. To a designer of tight mobile interfaces, using an icon to save space is really compelling. At first glance, the interface looks so clean and tidy!

However, for the user it’s usually the second glance that counts. The one where they look at the icon when they are carrying out a task.

Icons + labels = Happy users

If you label icons, they suddenly become awesome, accessible and understandable. An icon with a label:

  • makes it easier for the user to find the most important features – the ones with icons.
  • makes it easier to remember where you clicked the next time you come back.
  • makes the interface more aesthetically pleasing than if there were just text buttons.

A text and icon combination also improves the experience for people who have a hard time reading, like many users with dyslexia, autism, aphasia or other reading impairments.

This article first appeared in Axess Labs 30 August 2017

 

 

Rate this!
Summary
0 %
User Rating 0 Be the first one !
  • recipe complete

  • recipe grid phone

    browser reduced …
  • using grid

    recipe page experimenting with grid layout …
Load More Related Articles
  • recipe complete

  • recipe grid phone

    browser reduced …
  • using grid

    recipe page experimenting with grid layout …
Load More By JD
  • recipe complete

  • recipe grid phone

    browser reduced …
  • using grid

    recipe page experimenting with grid layout …
Load More In Design

Check Also

recipe complete