Problem

You must provide access to disparate items or functions, in a glanceable and easy-to-select manner.

Icons for selection and display are common, and will be easy to implement on all mobile platforms.

Solution

The word "icon" has been used throughout this book to denote graphical representations of functions or destinations. Here, an Icon can be considered to represent an "Iconic Link," and differentiates itself from other related drilldown items such as the Indicator link pattern because the icon part is 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 Home & Idle Screens, both when used as full grids of Icons, and as small lists of key applications on a more general-purpose Idle Screen.

Icons are most often encountered as the elements in a Grid but you can also use them in other ways, such as in a Carousel when used as part of the page (and generally without 3D effects), for Fixed Menus, for certain types of Tabs and many other presentations and interactions.

Variations

There are several types of Icons, with varying degrees of interactivity:

Fixed icons are composed of an image of the function or target destination. The icon must clearly explain the function or target 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 the result of an external change such as the current weather, a system change like inbound messages, or a user-initiated state change such as switching from grid to list view.

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. This is typical of status messages, such as the degree of brightness.
• 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. You can even combine these 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, the focus condition is indicated, but has no other interactive behavior. Feedback should be provided by any other available methods, such as Haptic Output, when available and enabled.

When using an interactive icon, you must immediately display a change, 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 provide some sort of interim condition before the "on" condition is switched to. These will usually take the form of a small Wait Indicator.

If additional information or settings are available for an Interactive Icon, double-tap 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.

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.

All your Icons should be very similar in size to each other. You may have to follow existing standards, but 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. In certain cases, it may work to have the labels truncate instead of taking up additional room. When the icon is in focus, this label may "marquee" or scroll to reveal the entire label.

Functions should imply the functionality. Switches, buttons and other actions contained within the icon should have 3D effects or look like standard on-screen controls. Use form-like controls (e.g. radio buttons) or simulate Mechanical Style Controls, such as 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 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.

Next: Stack of Items

Let's talk about the design of icons, closed vs. open, bound vs. unbound areas, and so on. And then, about labeling, and how you can get away with very small labels, how language is not as quantum an issue as you might think (quote article on empathy for the rest of the world) and link to the Menu translation document.

Using OS standard icons when possible. Provide examples and discuss revising them to change color, etc. but keep meaning.

Tips: Material icons.

Here's some guidelines for app naming as well, which would be a nice subsection along with how to make an app icon (simple! for Android make it clear not on a box so the shape is recognizable, not on a box like iOS requires!)

Icons are always accompanied by a text name. If you have multiple products, the form is: [Brand] [Distinct Product Name]

Unless it's the only app your BU will ever make, do not simply name it for your business unit. Describe the application, it's functions, or re-use an existing brand name for the product set the application extends or associates with. Do not use codenames for projects or other terms your users will not be familiar with when glancing at the online stores where they find and download apps.

This is the app's long name, as used in the store, in app lists, and other places where there is room. Short names are used on the desktop, and inside the app.

Short names should remove the corporate name as the logo is read as that word, so is not needed. The distinct product name should be able to make sense just by placement adjacent to the brand mark.

Think hard about your future plans. Are you really only ever going to launch one product. Do you ever get confused by the Facebook app, and the Facebook Messenger app, and so on? Try not to be that guy, and plan ahead.

•Do not use "mobile" or other related technical names. It is obvious by context that this is a mobile or tablet app. •Shorter is always better. Make sure your app name will fit on the screen. Since not all characters are the same width, there is no maximum character count, but you can still check roughly with comparing sizes. Find a long app name, write it in Word or something and write your name below it. Longer? Won't fit. •If your brand name requires additional length, try to communicate key information at the front, so anything truncated doesn't eliminate key information the user needs to know