Instructor Lead On-Demand Learning Courses - Learning Extravaganza All Pro Web Designs and Udemy are happy to offer this special to you. Act Now!

What if Your Icon Choices Ruined Your Work?

With the explosion of small-screen mobile computing across the world, iconography is often the most space-efficient technique to use in your UIs.

Icons are a visual representation of an object, an action or even an idea and using them, instead of a word, button, label or hyperlink, often affords you a spacier, cleaner interface.

Icons also let you simplify your messaging to the user by using ‘visual metaphors’. Common examples include:

  • Pencil iconThe pencil icon to edit a field;
  • CameraThe camera icon to take a picture;
  • Floppy disk The floppy disk to save your work.

Icons are simple, practical, and you probably use them on a daily basis. And they make complete sense, right? What if your users felt no connection to those icons – or worse, simply didn’t understand them at all?

Icons: Metaphors and redundant context

So, let’s think a bit about the meaning of icons you use in a typical interface. Most icons have functions that are clearly identifiable to most users. But there are a few common icons that are less clear.

Instructor Lead On-Demand Learning Courses All Pro Web Designs and Udemy are happy to offer this special to you. Act Now!

In fact, it turns out that there are only a handful icons that can be defined as ‘universal’ – that have the same meaning in every context that we see them.

Nielsen Norman Group (https://www.nngroup.com) tested this theory and they defined that the only icons that can be considered universal are:

Universal Icons by Nielsen Norma Group.

I can’t overstate how important this is for each and every single implementation of a user interface. When we’re designing a UI for another culture/country with a different native language (or multi-languages even) and other cultural patterns, their iconography understanding may be very different.

Let me show you some quick examples.

The Save Icon

The save icon metaphor was born with the early days of the Graphical User Interface (GUI) with the drawing of a floppy disk. In general, it is an icon that works well for its purpose.

Macintosh Desktop (1984)

But let’s try switching our perspective for a moment.

Sam Churchill - African cell phone
Photo: Sam Churchill – African cell phone

There are new emerging markets – large parts of Africa, India, China, and South America – riding a recent technological boom. While the majority of their populations have no easy way to a computer, they’re almost guaranteed to have a smartphone in their pockets. These populations have never seen a floppy disk and may not have even used an object with a similar function.

So, how will these users understand and feel connected with this visual representation of “save” function?

Personally speaking, I’ve already faced this issue once on a professional level, in a very similar environment, where the “save” action was a crucial step for a task completion. The end-users were having more difficult than we expected since the floppy disk icon had no label associated with it.

The Favorite Icon

For gathering items and saving them to see later many user interfaces allow you to mark them as favorites.

Examples Favourite Icon
Examples: Favourite Icon

This is most often represented by one of three symbols – a star, a heart or a bookmark icon. The bookmark concept dates back to the earliest versions of the Netscape Navigator browser.

Microsoft Internet Explorer instead called their bookmarking systems ‘Favorites’, and used a ‘starred folder’ icon.

@jack showing Twitter using the star in 2006.
@jack showing Twitter using the star in 2006.

Twitter employed the five-pointed star for favoriting tweets for 10 years, until last year, when they switched to the heart icon.

All of these icons naturally compete with each other. The star icon is often applied to rating systems and feature items, the heart icon for wishlists and sharing your feelings about something and the bookmark icon for labeling contexts.

Continue reading %What if Your Icon Choices Ruined Your Work?%

Instructor Lead On-Demand Learning Courses All Pro Web Designs and Udemy are happy to offer this special to you. Act Now!

Leave a Reply