Problem
Provide access to disparate items or functions, in a glanceable manner.
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:
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:
- Overlay: A brightly-colored or highly-contrasting badge overlapping the corner of the icon may denote a condition change alone, or carry embedded messaging such as a count of new messages.
- Color or contrast: An existing part of the icon, or several parts, can change color or contrast to represent the current condition indicated. More than one element can change.
- Change: The basic icon or icon background will remain the same, so it can be recognized, but an element will clearly change. This may be as simple as a cartoon character's eyes closing to indicate the service is "sleeping," or as complex as displaying the current weather conditions and temperature.
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.
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.
Presentation Details
Ways to vary: Don't always use the same background shape (if competition is in a circle, consider a special shape, or a square).
Give other hints as far as good icon design... look em up.
Text Labelling of icons, and sometimes of functions inside the icon for interactive types
Functions should imply functionality. Switches, buttons should have 3D effects or look like standard on-screen controls. Simulted glowing lights and meters, etc.
Antipatterns
Avoid confusing thumbnail or Avatar images for Icons. WHY... NOT THE SAME, BUT MOSTLY CONFUSING E.G. ONE WEBPAGE LOOKS VERY MUCH LIKE ANOTHER AT THUMBNAIL SIZES
NO TO THE APPLE FIXED DATE IN AN ICON... IF IT LOOKS LIKE DATA, USE THE STATUS ICON STYLE AND MAKE IT DATA, ELSE COME UP WITH ANOTHER ICON!!!!!