Problem

Provide access to disparate items or functions, in a glanceable manner.

Icons are used as shortcuts to highly-used items, even within interfaces that are otherwise not icon-centric. This is a typical idle screen for previous generation smartphones and many current featurephones.

Solution

The word "icon" has been used throughout this book to denote graphical representations of functions or destinations. Here, it can be considered to represent an "iconic link," and differentiates itself from other related drilldown items such as the Indicator link pattern with the icon as the most prominent item.

Well-designed icons serve as an easily-understandable, easily recalled representation of an action or target destination, such as a website or application. They are particularly suitable for

Icons are most often encountered as the elements in a Grid but may also be used in other ways, such as a Carousel (as a sub-component of the page, generally without 3D effects).

Variations

Icons may be of several types, with varying degrees of interactivity:

Several ways of using icons in a grid, for Idle or menu screens. The right-hand example includes Interactive icons as well (note that this example is snagged from http://androidheadlines.com without permission; I will change it as soon as I can figure out how to). Fixed icons are composed of an image of the function or target destination. They must clearly explain the function or target product and not be lost in background, other page elements, or easily confused with other icons.

Status icons change with the current conditions. This may be an external change, such as the current weather, a system change like inbound messages or a user-initiated state change such as switching from scroll to select mode.

This change can take any form, but the Fixed Icon must be preserved as a recognizable basis at all times. Typical methods to accomplish this are:

Interactive icons have functionality themselves, and do not provide immediate access to any target application, site or information. Selecting the icon will carry out some behavior directly, such as changing screen brightness or enabling WiFi. These may be combined with Status Icons to provide a way to view more information in the same space; a tap will reveal another icon's worth of information. Tapping an icon with the current weather iconically could reveal numerical information on temperatures and rainfall.

These types of icons are a subset of the sub-screen interactive element known in some circles as "widgets," but this word has other meanings, and in this book we use one of those.

Simple fixed icons (left) can have status information, such as the notification of five new messages to the right, simply laid on top.

Interaction Details

Most Icons will load an application, website, settings panel, or detailed information of some sort when simply selected or clicked on. For scroll and select devices, or others with hover states, the focus condition is indicated, but has no other behavior. Feedback should be provided by any other available methods, such as haptics, when available and enabled.

Interactive icons must immediately display a change in the icon, and provide any other relevant feedback. If the actual state change will take time, such as enabling WiFi taking time to power up and find a network, then some sort of progress state should be displayed before the "on" condition is switched to.

If additional information or settings are available for an Interactive Icon, double-tapping or press-and-hold behaviors may be used to provide access to these screens.

Some types of Status Icons will also not load a new page, but will simply change the state and indicate this immediately by the Icon changing state. Any other state changes, such as a mouse pointer or cursor changing state, must occur at the same moment as the Icon.

Status Icons may also behave as normal, Fixed Icons, displaying current conditions but loading the target page when selected. For example, a calendar icon with the current date and an overlay with the count of remaining appointments is very much a Status Icon, but selecting it simply loads the calendar application.

Interactive icons must immediately appear to be interactive, with clear controls and an obvious indication of the state change.

Presentation Details

The design of icons is an entire topic, with entire books dedicated to these principles. There is very little difference between the use of icons on desktops, kiosks and workstations for the past several decades, and their use on mobile devices. Do keep in mind typical mobile requirements such as visibility in all lighting conditions, or under movement.

Icons should be very similar in size to each other. If developing the framework, try to restrict what sizes can be used. When making icons for your application, follow best practices for the platform even if not technically restricted.

Icons should generally carry a text label. This will usually appear centered, below the icon, and should not wrap to a second line. Labels to the right or left of the icon will often fall into the Indicator pattern instead.

Functions should imply functionality. Switches, buttons and other actions should have 3D effects or look like standard on-screen controls. Use form-like controls (e.g. radio buttons) or simulate physical dials, switches and buttons. Indicators often work best with shadows and simulated bleed and glow effects as well.

Antipatterns

Avoid automatic thumbnail or Avatar images for Icons. One web page or person will look very much like another at thumbnail sizes, and a key part of icon design is the design of the outer bounding shape. These may be used in Thumbnail List and other places where the image supports a text label, but are not generally suitable for Icons.

Information in an icon that looks like data must be real data. Do not, for example, make an icon for a calendar or clock with fixed values for the date or time. Use the Status Icon style and indicate actual data, or use another icon style.

Try to label each Icon, in all vision conditions. Even if used in a carousel, where additional information may be presented with the in-focus item, use short labels for each visible icon whenever possible. Not all icons are clear on first use, so users will have to take time to bring each item into focus before selecting anything.

Examples