HTML and CSS Reference
FIGURE 6.6 Icons in a menu.
Icons are a great addition when used in the right contexts, and you should give this
some careful thought when considering them. If they solve a problem along the
lines of allowing users to find what they want or where they want to go faster and
more intuitively, and consume less space, you have a good case for using an icon.
But if you are just using icons everywhere with wild abandon, their effectiveness
is greatly diminished, and you end up with a horrible Christmas tree-type effect!
Places to consider using icons include:
FIGURE 6.7 Intuitive function-
ality icons: play and zoom in.
Navigation. Icons can make great signposts to help direct users to where
they want to go. For example, you'll learn how to build the example shown
in Figure 6.6 in the next section “The Basics of Icon Implementation.”
Functionality. Intuitive icons allow users to find functionality easily, for
example, playing a video or zooming in ( Figure 6.7 ).
Status. You need only to look at programs like Skype and messenger appli-
cations for good status icon usage, for example, “I'm here,” “I'm away,” “I'm
asleep.” See Figure 6.8 for some examples.
FIGURE 6.8 User status icons
(taken from Skype).
Comparison. Using icons to compare product features is a good way to give
users at-a-glance summaries ( Figure 6.9 ).
User feedback. Form icons are the classic example for user feedback
( Figure 6.10 ): “The format is incorrect,” “Missing information,” and so on.
Emotion. People use emoticons more and more in communications
these days—in text messages, email, chat applications, IRC, and so forth
( Figure 6.11 ).