Merging controls and content

Much of this article has discussed how to design content without the use of controls, and has even actively discouraged their use. However, almost all applications will require the familiar interaction patterns made available through traditional application controls. How, then, can you employ controls in a way that doesn't overwhelm your content?

First, consider whether a full-on control is necessary to satisfy your users' goals. Often elements within the content itself can become interactive and respond to hovers, clicks, drags, and other user input to display additional or new information. The downside of such "chromeless controls" is that they can be difficult to discover; they don't look like they should be interactive, so users might assume they aren't. The way around this difficulty lies in using affordances to distinguish interactive elements of the screen from static ones.

An affordance is a visual treatment applied to an interactive screen element that suggests what users can do with it. The most common example of an affordance is hover highlighting, which should almost always be employed for the sake of consistency. Depending on the situation, you may want to employ other affordances to communicate not just that an element is interactive but also what users should do with it. A common example is knurling: the small ridges added to, for example, scrollbar thumbs. Knurling affords grabbing and moving in the direction of the knurling itself, since in physical objects knurling actually helps users turn or slide smooth surfaces by providing additional friction.

Figure 10a. Adobe Media Player uses hover highlighting to indicate that the thumbnails of shows are clickable. This helps users discover that the thumbnail is interactive and not just a static information display.

Figure 10b. Google Maps is also interactive content. Users may drag the map to view portions that appear of the screen. In this case, the form of the content itself affords dragging; maps are usually larger than what appears in the limited viewport, and this fact plus the presence of the zoom and pan controls helps users understand that dragging is an option. The open hand cursor also helps, but imagine if the content were a tiled group of photos instead of a map; fewer users would discover the drag operation since dragging usually does not accompany thumbnail lists.

When controls are necessary, consider displaying them in the context of the content itself. For example, say that you have a list of websites on a server and the user might generate a report on the usage statistics for any one of them. Instead of requiring the user to select an item and then locate a toolbar button to generate the report, provide the generate report button along with all the rest of the appropriate functionality alongside the list item itself. (Note that this pattern does not work well when users wish to multi-select items and apply an operation to all of them at once.)

Oftentimes having all controls visible alongside all content elements on the screen leads to a very cluttered interface design. Instead of displaying all controls all the time, consider showing an item's controls only when the user has expressed interest in operating on it by hovering over or selecting it. You might put the relevant controls in an overlay on top of the item. Another option, especially popular in managed layouts such as lists, is to expand the item to show additional controls and content on selection. However, use this idiom with caution. Hiding controls behind selection or hover actions can make them much harder for casual users to discover. Only employ this idiom if users naturally select or hover over the content of interest before they need the controls. Perform adequate user testing to ensure this is the case.

Figure 11a. Picnik uses in-context controls throughout their UI. For example, when users apply an effect the configuration options appear directly underneath the filter within the filters list. This makes it much easier for users to customize their filters right after applying them.

Figure 11b. Flex Store employs in-context controls when hovering over an item to allow users to add it to their shopping cart, compare it with another item, or view the item's full details.

In information structures, controls are not the primary focus of the user and should be minimized, but they must be discoverable if the user's goals involve navigating or manipulating the information display. By making these controls contextual, you can have your cake and eat it too; the controls will appear exactly when the user needs them, but won't clutter the screen and interfere with viewing the information itself when he does not.

Page 5 of 6

Previous Page

Next Page