First, each thumbnail (or color swatch or whatever) should be
accurate. The user should get what he sees on the illustrated
choice. Beyond that, show the differences that matter, and little
else; there's no need for perfect miniature reproductions of the
choices' effects. Show a simplified, streamlined, and exaggerated
You can use illustrated choices in many controls: dropdown lists,
radio boxes, scrolled lists, tables, trees, and specialized dialog
boxes like color choosers. Ideally, you can show the user a set
of illustrated choices all at once, in one single dropdown, list,
or toolbar. A user can then compare them to one other immediately
and easily. If you show them one at a time -- which sometimes
must be the case, as with the Preview pattern (see Chapter
5) -- the user sees them sequentially over time, which isn't as
good for comparing one to another.
Sometimes it's appropriate to show both the picture and the
item's name. If the user would benefit from seeing both of
them, do it -- they'll learn to associate the name with the
picture, and thus the concept. Interfaces can teach.
If you need custom icons or thumbnail pictures, consider getting
a good graphic designer to do the artistic work. Make sure she
is sensitive to the visual vocabulary of the whole application,
and that she understands what the choices mean.