Differences between revisions 16 and 17
Revision 16 as of 2011-01-11 17:45:22
Size: 7629
Editor: localhost
Comment:
Revision 17 as of 2011-07-04 19:48:33
Size: 8357
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
"What you call “ Status Icons” are also frequently called “ Badges” in practice."
Probably overly iOS, but maybe refer to it as an AKA one time.

----
Line 64: Line 69:


----
= Discuss & Add =
Please do not change content above this like, as it's a perfect match with the printed book. Everything else you want to add goes down here.
Line 65: Line 76:
If you want to add examples (and we occasionally do also) add them here.

== Make a new section ==
Just like this. If, for example, you want to argue about the differences between, say, Tidwell's Vertical Stack, and our general concept of the List, then add a section to discuss. If we're successful, we'll get to make a new edition and will take all these discussions into account.

"What you call “ Status Icons” are also frequently called “ Badges” in practice." Probably overly iOS, but maybe refer to it as an AKA one time.


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 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 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:

  • 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.

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.


Discuss & Add

Please do not change content above this like, as it's a perfect match with the printed book. Everything else you want to add goes down here.

Examples

If you want to add examples (and we occasionally do also) add them here.

Make a new section

Just like this. If, for example, you want to argue about the differences between, say, Tidwell's Vertical Stack, and our general concept of the List, then add a section to discuss. If we're successful, we'll get to make a new edition and will take all these discussions into account.

Icon (last edited 2015-12-28 15:44:08 by shoobe01)