Problem

Provide access in a glanceable manner, with many (possibly disparate) items... explain a home page.

Solution

Variations

Fixed icons - picture, and has to be good, visible, explain the product and not be lost in background, other page elements, or confused with others.

Status icon - Changes. As simple as an overlay on an icon that says you have new messages. Can be quite complex, and display summary weather info, for example.

Interactive icon - Also known as a "widget" but this has another meaning, and we use that one in this book, so don't call it that. Clicking the icon does something directly, which is reflected in the icon, and it does NOT launch an app, etc. E.g. change brightness or switch WiFi off and on.

Interaction Details

Default type clicks into an app, or person or page or whatever.

Describe interactive-icon style immediately acts, no delay, and the result is visible always in the icon, even if some other result is shown also (annunciator row, etc.)

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

Examples