IXD104 – Getting Iconic – Alanna Lee McKenna's IXD blog

Icon Usability

A users understanding of an icon comes from previous experience with it or when it the icon is easily recognisable as the real world object is it based on. An icons main use is to communicate meaning or to replace words when used in an interface as a visual representation of an idea, action or object. When an icon is not immediately clear to users it may become confusing and therefore does not do its job properly.

Icons have many benefits when used in a user interface, for example, icons make good targets as they are typically sized large enough to be easily touchers in a finger-operated UI but equally work just as well with a mouse curser. They are more visually appealing and convey the message quicker than words, icons are compact enough to be used on toolbars and so can display large amounts of information in a relatively small space, saving screen real estate. At a glance, icons can be recognised when designed well and this is particularly true for standard icons that are used most frequently such as;

Search Icon

Home Icon

Settings Icon

Icons are universal, as they aren’t made from words there is no need to translate. However, cultural differences must be considered as, for example, letterboxes look different around the world, therefore an envelope itself is a more international choice for an email or message icon. Icons can also be created to tie in with the style of branding and this can also enhance the aesthetic appeal of design, reinforcing the brand when consistently used throughout several different aspects of a product.

The star and the heart icon are often used to represent favourites, bookmarks or ratings from users. This application varies from site-to-site where these icons compete with one another. For this reason, users may find it hard to interpret exactly what the icon represents and even a slight difference in the functionality of an icon may hinder future understanding.

Icons with multiple meanings

Sizing and Application of Icons

Responsive icon usage can be easily overlooked when and icon functions well on a mobile setting that it will also translate to desktop. However, on mobile screens, there are less elements that try to compete for the users attention. On a desktop, which is usually a bigger screen, there is more information contained and this may cause users to miss an element if its sizing cannot compete with its surroundings. This is where the consideration of the relative size of the icon compared to the other elements is important and the usual hamburger menu that contains navigation headings on mobile may be made visible without the need of an expandable hamburger menu.

Some tips for designing icons;

Conduct thorough research on icons used by your competitors and icons commonly used on the platforms you target as this will be the most recognisable to your users.
Keep designs simple and schematic with as little graphic details as possible by focusing on the basic characteristics of the object.
Use the 5 second rule – if it takes longer than 5 seconds to recognise what an icon represents, it may not be effective.
Ask others what they think the icon represents to see if it has recognisability.

Labelling Icons

For more unique icons the best course of action would be to label them as users are often intimidated by unfamiliar interfaces. Successful icons should set clear expectations for users before they click or tap on them. A good user experience can be measured in a number of ways, one of which being how much it frees the user from having to think. Clarity is one of the most important characteristics of a good interface. USERTESTING conducting a series of test comparing labelled and unlabelled icons found that;

Users were able to correctly predict what would happen when they tapped a labelled icon 88% of the time.
That number dropped to 60% for unlabelled icons. For unlabelled icons that were unique to the app, users correctly predicted what would happen when they tapped an icon only 34% of the time.

With this in mind, experienced users may find an interface with labelled icons to be cluttered. How do you as an interface designer keep everyone happy? Michael Zuschlag, an engineering psychologist at Cambridge who is trying to find solutions for usability and user interface design explains that icons alone can suffice when at least two out the following three conditions are met:

Space is very limited (i.e. too small for text alone).
The icons are standardised (e.g. they are universal).
The icons represent objects with strong physical indicators or visual attributes (e.g. a red rectangle to set the page’s background as red).

Placement

Icons with accompanying labels work well when they placed in the right spot. UX Movement states that icons should be placed according to the natural reading order and that there are two important considerations for an icons location.

In order for icons to serve as a visual scanning aid, users need to see them before they see the accompanying label. Place icons to the left of their labels so that users see them first.
Align the icon with the label’s heading, instead of centre aligning it with the heading and body. Seeing the icon first will help users to scan the page more easily.

Iconic Creators

Susan Kare

Susan Kare is responsible for the first set of icons to be used on Apples Macintosh computers. She is widely recognised ‘the woman who gave Macintosh a smile’ and is considered a pioneer the graphic design industry with her pixel art. She worked with 16×16 and 31×31 pixel grids to create her icons first on paper then had an icon and font editor made so she could design using the Mac.

“Bitmap graphics are like mosaics and needlepoint and other pseudo-digital art forms, all of which I had practiced before going to Apple.”

Vic Bell

Vic Bell was approached by Burberry to create a stylised icon set for their recent website redesign. Vic also created a set of specific guidelines for future iconography. The Burberry team discussed that they wanted to convey the classic Burberry aesthetic. Bell created multiple different sizing options of the icons and began with the famous vintage Burberry delivery van.

He details his next step as moving to the icon set where he started by gathering the more important icons, then applying the style and guide he created to them, in 2 different sizes.