Illustrated Choices

Problem

Choosing from plain-text-only lists can be boring and hard.

Solution

Provide illustrations to accompany or replace text choices in lists.

Context

• You can provide illustrations that are distinct and meaningful for the options you have.
• You have sufficient space in your view to allow for illustrated choices.

Rationale

Often plain text is enough in lists, and sometimes you just can’t illustrate an option. But for those times when you can, using illustrations can help to bring out the differences between items in the list and thus help people more quickly identify the option that they want. In fact, sometimes an illustration is far more appropriate than text--e.g., when the choice in question is visual to begin with. Icons were developed for just this purpose.

Also, a lesser reason to illustrate is simple to break up the monotony of a list and add visual interest. You shouldn’t illustrate just for this reason; however, it can be that extra something if you’re on the edge.

Implementation

The first thing to do is determine if illustrating your choices is both appropriate and supportable, which means that you can provide meaningful illustrations for most, if not all, of your options. If the list is open-ended or crowd-generated, be sure that there is sufficient motivation and ability to provide illustrations for new options; otherwise, you end up with a list of all the same (default) illustrations (or none at all for many of them).

Sometimes, creating a simple thumbnail image of the item is sufficient; however, this can be problematic if either the larger version is so large that the thumbnail is too distorted to be understandable or if the large versions differ by small details (and so the scaled miniaturizations would not be distinct enough from each other to add value). A good alternative in these cases is to be selective in choosing less-scaled thumbnails of parts of the larger item.

If your options are not visual to begin with (or if they are but you want a different alternative), you have to design illustrations to represent the options. This is typically the case with what most think of as icons or avatars. Sometimes there are ready-made illustrations you can reuse (for instance, copy and paste are well known and widely available); you should generally prefer these due to familiarity.

If you are making a new illustration, you should strongly consider supporting it with text. Research done by the Microsoft Office team found that even for their broadly disseminated icons, users still would mistake them (such as the Reply button); their conclusion was to add/keep text labels with the icons for the more important options. Once an illustration becomes well known enough and/or your own user testing shows the icon is well recognized, you can consider leaving off the accompanying.

In creating illustrations, it’s important to remember that you don’t always have to be picture-perfect or reflect reality exactly, if you are modeling the illustration off of something real. In fact, it can actually help to reduce the number of visual elements to the essentials and even exaggerate the aspects that would aid recognition. That’s really the key—to create illustrations that will aid recognition and disambiguation.

Once you have the illustrations, depending on the tool you’re using to display the list, it may be appropriate to display them with the text on any side—try different placements for what works best. You can also consider overlaying text on the choices if obscuring part of the illustration would still result in enhanced disambiguation and recognition.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Illustrated Choices pattern can be implemented using the following ASP.NET controls: WebDataGrid, WebGrid, WebDropDown, WebDataMenu,WebToolbar, WebDataMenu. Check out the samples browser to see it in action.

Silverlight

You can use the NetAdvantage for Silverlight xamWebMenu control for this.

Windows Forms

You can use the NetAdvantage for Windows Forms controls: WinToolbarsManager, WinTree, WinListView, WinCombo, WinComboEditor, WinFontEditor, WinColorPicker to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called Ribbon with FormattedTextEditorto see it in action.

WPF

You can implement this pattern using the NetAdvantage for WPF controls: XamDataGrid, XamDataCarousel, and XamRibbon. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamFeatureBrowser called Defining a Gallery to see it in action.

Sources

Jennifer Tidwell, Illustrated Choices

Jensen Harris, I'm In Louvre!

Tags

Navigation, Data Entry, Visual Design.