The Essence of Interaction Design—Part I: Designing Virtual Contexts for Interaction

By Pabini Gabriel-Petit

Published: January 5, 2011

“Interaction design is absolutely central to the design of application user experiences
—whether for the desktop, Web, mobile devices, or other handheld devices….”

I’ve referred to the work I do as user experience design ever since Don Norman introduced the term at Apple in 1993—when I was a Human Interface Engineer there. But interaction design is absolutely central to the design of application user experiences—whether for the desktop, Web, mobile devices, or other handheld devices—and it is the core skill of application designers.

With this column, I’m introducing a multipart series on what I consider to be the essence of interaction design for application user experiences. First, I’ll lay the groundwork for this series by describing the role of interaction design, then I’ll embark on my exploration of the essence of interaction design by discussing the design of virtual contexts for interaction.

As I began thinking about this series, I realized I should describe the process of design first—or I’d end up constantly revisiting the same process issues—so I wrote my column “Design Is a Process, Not a Methodology.” Throughout this series, I’ll refer you to that column for details about steps of the design process that are especially important in solving particular types of design problems.

Interaction Design’s Role in Application Design

Since interaction design plays such a central role in the design of application user experiences, there is much that it encompasses. Good interaction design

  • effectively communicates the scope and nature of an application’s functionality through its primary contexts for interaction, as well as its menus or navigation system
  • defines and clearly presents both simple and complex workflows and, thus, facilitates users’ tasks
  • provides easily discernible opportunities for interactivity through visible affordances, or interactive elements
  • defines user interactions that are consistent with best practices or highly intuitable—and, thus, easy to learn—and easy to use
  • specifies behaviors that clearly communicate an application’s responses to user interactions
  • informs users about system state changes
  • actively prevents user error

Supporting Roles in Application Design

“Although information architecture, visual interface design, information design, and user assistance design are also essential aspects of user experience design, all serve supporting roles in the design of applications….”

Although information architecture, visual interface design, information design, and user assistance design are also essential aspects of user experience design, all serve supporting roles in the design of applications—that is, they are the means by which designers facilitate interactions, as follows:

  • information architecture—An application’s information architecture defines its overall structure, with the goal of supporting findability and usability; provides the basis for the application’s menus or navigation system; verbally communicates the application’s structure through the labeling of its menus or navigation system; and ensures users can easily navigate to related functionality and information from their current context.
  • visual interface design—An application’s visual interface design visually expresses its hierarchies, groupings, workflows, and affordances—thus, showing users how to interact with the application through effective visual communication; provides iconic representations of the application’s objects and actions; and ensures its user interface is both aesthetically pleasing and accessible to people with color-deficient or low vision.
  • information design—An application’s information design visually expresses the information the application provides to users—often through charts, graphs, information visualizations, and tabular reports. Another role for an application’s information design is to clearly communicate what information users need to provide to accomplish their tasks—typically, by filling out Web forms or editing options in dialog boxes.
  • user assistance design—An application’s user assistance design verbally communicates how users can interact with it—telling users both what to do and how to do it. Interactive user assistance communicates what users should do next when filling out forms. More traditional Help systems should communicate the concepts users must understand to use an application effectively, as well as provide step-by-step instructions for specific tasks.

In application design, the designers who are responsible for information architecture, visual interface design, information design, and user assistance design may be either different people who are specialists in particular aspects of UX design or UX designers who are capable of fulfilling all of these roles.

Now that I've described interaction design’s role in application design and how information architecture, visual interface design, information design, and user assistance design support interaction design, let’s begin our exploration of the essence of interaction design with the design of virtual contexts for interaction.

Designing Virtual Contexts for Interaction

“An application’s primary context for interaction should effectively communicate the scope and nature of its functionality—that is, what type of application it is.”

An application’s primary context for interaction should effectively communicate the scope and nature of its functionality—that is, what type of application it is. The virtual contexts that would be most appropriate for an application you’re designing depend primarily on the application’s type—and to some extent, on the platform for which you’re designing it. An application’s purpose, features, and the nature of its user experience determine its type, while its overall structure and characteristic frameworks, patterns, affordances, and behaviors express its type. Each virtual context comprises a single screen, Web page, or window. The platform on which an application runs and the size and resolution of its display—otherwise known as an application’s form factor—constrain the screen real estate that is available for each of an application’s virtual contexts.

Designing an Application’s Primary Context

When designing an application, it is important to initially concentrate on the big picture and make high-level design decisions, including what the application’s primary context for interaction should be. By focusing on users’ goals when designing an application’s primary context for interaction, you can establish a sound foundation on which to construct the entire application. Designing the overall structure for an application’s primary context for interaction is a key part of establishing what I call a conceptual model in my column “Design Is a Process, Not a Methodology”—or what Alan Cooper, Robert Reimann, and David Cronin refer to as a Design Framework, in About Face 3.

“The Design Framework defines the overall structure of the users’ experience, from the arrangement of functional elements on the screen, to interactive behaviors and underlying organizing principles, to the visual and form language used to express data, concepts, functionality, and brand identity. … The Design Framework is made up of an interaction framework, a visual design framework, and sometimes an industrial design framework.”—Alan Cooper, Robert Reimann, and David Cronin

As Kim Goodwin says in Designing for the Digital Age, visualizing concrete solutions “begins with defining the framework of the design: the supporting structures and underlying concepts upon which every detail depends.”

A Confusion of Terms

In the software development community within which most UX professionals work, there has been a proliferation of both definitions for and variants of the term framework.

Proponents of object-oriented software development originally adopted the term framework in the early 1990s. The book Design Patterns: Elements of Reusable Object-Oriented Software provides the following definition:

“A framework is a set of cooperating classes that make up a reusable design for a specific class of software. … You customize a framework to a particular application by creating application-specific subclasses of abstract classes from the framework. The framework dictates the architecture of your application … so that you … can concentrate on the specifics of your application. The framework captures the design decisions that are common to its application domain. Frameworks thus emphasize design reuse over code reuse…. … Not only can you build applications faster [with frameworks], but the applications have similar structures. They are easier to maintain, and they seem more consistent to their users.”—Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides—also known as The Gang of Four

In addition to such generic software frameworks, application frameworks that let developers implement applications that have standard user interfaces for particular operating systems became popular with the advent of Graphic User Interfaces (GUIs). Current examples include Cocoa for Mac OS X and Microsoft Foundation Classes (MFC).

Today, there is a multiplicity of Web application frameworks that support the development of dynamic Web sites and Web applications and are based on programming languages such as Java—for example, Google Web Toolkit (GWT)—Perl, PHP, Python, and Ruby. JavaScript frameworks include JQuery, MooTools, Prototype, script.aculo.us, SWFObject, Yahoo! User Interface Library (YUI), and many others.

In About Face 3, Alan Cooper, Robert Reimann, and David Cronin use the terms Design Framework, interaction framework, visual design framework, and industrial design framework. However, I’ve long been accustomed to using the term framework to refer to a software framework, so I prefer to use the term conceptual model rather than Design Framework. With the omission of the word design from interaction framework, their terms lack parallelism. They define an interaction framework, as follows:

“The interaction framework defines not only the high-level structure of screen layouts but also the flow, behavior, and organization of the product.”—Alan Cooper, Robert Reimann, and David Cronin

In their recent book Web Anatomy: Interaction Design Frameworks That Work, Robert Hoekman, Jr., and Jared Spool use the term framework in a more traditional sense, but with a focus on interaction design:

“Patterns, components, and interaction design frameworks each play a different, essential role in a team’s reuse strategy. … Whereas a design pattern is a common solution to a recurring problem, an interaction design framework is a set of design patterns plus other elements and information, used together to guide the design of a complete system or site context. … A framework … offers guidelines for the design of whole contexts. … Frameworks describe entire subsystems of patterns. … Frameworks are at a high level of abstraction. … Frameworks are the larger anatomical systems that help designers choose which patterns to use….”—Robert Hoekman, Jr., and Jared Spool

So, from two thought leaders in the UX community, we have two very similar terms—interaction framework and interaction design framework—with very different meanings. And, with people’s tendency to abbreviate long terms—which, in fact, Kim Goodwin does in her book Designing for the Digital Age when she describes a framework—we probably have people in different roles on multidisciplinary product teams using the term framework in very different ways.

Application Genres and Their Virtual Contexts

“For each application genre, there are different types of virtual contexts within which users typically work or play.”

There are three basic genres of applications. (When describing iPhone apps, Apple calls these genres application styles.) An application’s genre depends on its purpose, the tasks it supports and/or the information it provides, and its user experience—including both behavioral and visual characteristics. Some applications combine application genres. For each application genre, there are different types of virtual contexts within which users typically work or play. The three application genres are as follows:

  • productivity applications—This genre of applications enables users to accomplish their work and supports complex tasks like creating, editing, analyzing, or organizing information—such as documents, presentations, graphics, photos, videos, spreadsheets, databases; communicating via email, instant messengers, or social networking services; maintaining a personal calendar; searching; getting directions; shopping; or doing online banking. Virtual contexts for productivity applications focus on users’ tasks, often present detailed textual and visual information, and usually offer their functionality through fairly standard user interfaces.
  • utility applications—These applications let users either perform simple tasks that require only minimal user input or quickly look up specific types of information. Examples of utility applications include control panels, desktop widgets, and many mobile apps—for example, apps that provide current weather or traffic conditions, stock prices, or sports scores. Virtual contexts for utility applications display information in highly visual, easy-to-scan formats and let users easily modify simple settings.
  • immersive applications—This genre encompasses virtual worlds, personal computer games, online multiplayer games, ereaders, media players, and even virtual tools—for example, media capture tools that let users take photos or record video or sound. Immersive applications focus on users’ experience of primarily visual content—whether they’re playing games, watching media, taking photos using their phone’s camera, or using other simple tools. They present their capabilities via richly rendered, highly detailed, often full-screen virtual environments or objects that emulate their real-world counterparts.

Presentation of Applications’ Virtual Contexts

“A key factor in designing an application’s primary context for interaction is deciding how best to present the functionality and information the application provides.”

A key factor in designing an application’s primary context for interaction is deciding how best to present the functionality and information the application provides. What should its overall structure be? To what do you want to draw users’ attention? How do you want users to respond? These decisions are wholly dependent on the goals and needs of users and the kinds of tasks they can perform using an application. In About Face 3, Cooper, Reimann, and Cronin refer to an application’s presentation as its posture, but that term doesn’t resonate with me.

An application’s presentation encompasses the structure, hierarchy, look, and affordances of each virtual context within the application. Presentation also communicates a great deal about what users can do with an application, as well as how they should relate to the application.

The nature of particular features in an application and the virtual contexts in which they reside may require presentations that differ significantly from that of the application’s primary context. So, consider the desirable similarities and necessary differences between the presentations of the various contexts within an application, keeping in mind the purpose of each context.

Presentation Patterns for Contexts by Application Genre

“Applications that run on specific platforms and belong to specific genres tend to employ particular presentation patterns.”

Some familiar presentation patterns for virtual contexts of interaction occur in numerous applications, on various platforms. Applications that run on specific platforms and belong to specific genres tend to employ particular presentation patterns. A single application’s complexity can range from just one context and one presentation pattern to any number of contexts and the use of several different presentation patterns.

Here are some common presentation patterns for applications’ virtual contexts in each of the following application genres:

  • productivity applications
    • simple list
    • tabular list
    • columnar list
    • grid
    • master and detail
    • detailed data
    • canvas
    • canvas and palettes
    • worksheet
    • dashboard
  • utility applications
    • control panel
    • dialogue
    • wizard
    • tabular list
    • grid
    • master and detail
    • detailed data
  • immersive applications
    • virtual world
    • browser
    • ereader
    • media player
    • virtual object/tool

Presentation Patterns for Productivity Applications

“Productivity applications let users accomplish tasks that are important to them, and their functionality tends to be complex….”

Productivity applications let users accomplish tasks that are important to them, and their functionality tends to be complex; therefore, they usually consist of multiple contexts for interaction. Today, productivity applications on desktop computers and the Web share similar capabilities and presentation patterns. However, the presentation patterns for productivity applications on mobile devices are somewhat limited, because of their small screens. Productivity applications generally employ standard user interface elements, and many organize data in hierarchical structures that progress from the general to the specific. In mobile apps, this typically means starting with simple lists and progressing to detailed data users can view or edit, displaying only one level in the hierarchy per context. What are some examples of presentation patterns for productivity applications?

Simple List

Many desktop, Web, and, especially, mobile productivity applications present data as simple lists that comprise a single column of data. For example, email applications, instant messengers, and mobile devices provide lists of contacts. Skype’s primary context is a list of contacts, as shown in Figure 1.

Figure 1—Skype contacts in a simple list

Skype contacts

I designed the Address Book page shown in Figure 2—another simple list—for the scanR mobile Web application. Figure 3 shows a simple list of contacts in the iPhone Contacts app. As is usual in iPhone productivity apps, tapping an item in the list lets a user drill down to a detailed data view—in this case, the detailed data for a contact.

Figure 2—Address Book page in scanR mobile Web app

scanR Address Book

Figure 3—iPhone Contacts app’s list of contacts

iPhone Contacts app's list of contacts

The Inbox in iPhone Mail, shown in Figure 4, is another example of a simple list that lets users drill down to detailed data.

Figure 4—A simple list of messages in iPhone Mail’s Inbox

iPhone Inbox

Even activity streams—to which users can add microblog posts—take the form of simple lists. The Twitter Web application, shown in Figure 5, provides another example of an application whose primary context is a simple list.

Figure 5—Twitter stream lists tweets

Twitter stream

Search results pages offer another common example of the simple list. Figure 6 shows iPad Search; Figure 7, a search results page on Bing.

Figure 6—iPad search

iPad Search

Figure 7—List of search results on Bing

Bing search results page

Tabular List

Desktop, Web, and, occasionally, mobile productivity applications present data in tabular lists, comprising multiple columns of data. Each column in a tabular list has a header, and it is often possible to sort such a list by clicking a column header. Displaying reports and the contents of file systems are two common uses of tabular lists. Figure 8 shows a Google Analytics report on the Top Content on UXmatters that combines a sortable tabular list with a graph.

Figure 8—Top Content report in Google Analytics

Top Content report in Google Analytics

In Movable Type, the Manage Entries page displays a tabular list, with a few filters to the right, as shown in Figure 9.

Figure 9—Movable Type Manage Entries page

Movable Type Manage Entries page

Figure 10 shows the tabular list view of the Mac OS X Finder, which is sortable.

Figure 10—Tabular list view of Mac OS X Finder

Tabular list view of Mac OS X Finder

For the scanR mobile Web application, I designed a tabular list that displays the contents of a folder, as shown in Figure 11.

Figure 11—Tabular list of items in a folder, in the scanR mobile Web app

scanR folder

Columnar List

Columnar lists display hierarchies, with each level of the hierarchy displayed in a column, from left to right, so users can easily start browsing at any level in the hierarchy. Figure 12 shows the columnar list view of the Mac OS X Finder. Columnar lists typically provide alternative views of data that might also appear in hierarchical lists, tabular lists, grids, or Cover Flows.

Figure 12—Columnar list view of Mac OS X Finder

Columnar list view of the Mac OS X Finder

Grid

Grid presentations comprise rows and columns of items and take many different forms—from the Mac OS X Finder’s grid view, shown in Figure 13; to the iPhone home screen’s grid presentation of application icons, in Figure 14; to iPhoto’s presentation of photos in a grid, as shown in Figure 15; to the grids of the monthly view in Google Calendar and the daily view in iPad Calendar, shown in Figures 16 and 17, respectively. Applications’ primary contexts of interaction sometimes employ grid presentations.

Figure 13—Grid view of Mac OS X Finder

Grid view of Mac OS X Finder

Figure 14—iPhone home screen

iPhone home screen

Figure 15—iPhoto’s grid of photos

iPhoto's grid of photos

Figure 16—Google Calendar’s monthly view

Google Calendar

Figure 17—iPad Calendar’s daily view

iPad Calendar's daily view

Master and Detail

Applications’ primary contexts for interaction often employ master-and-detail presentations. They comprise one or two master panes or areas—which, in the latter case, may appear either side by side or sequentially—and a detail pane or area. A master pane contains items at an upper level of an application’s hierarchy, which may be in a simple list, a hierarchical list in the form of a tree view or drawers, a tabular list, thumbnails, or a set of filters. The master pane can reside on the left side, at the top, or on the right side of a window, page, or screen. The detail pane contains detailed data, or content, which might include text, lists, tables, charts, graphs, diagrams, images, Web forms, or property sheets. Placing the master pane above the detail pane allows the master pane to accommodate list items with longer labels and, especially, tabular lists.

There are many different variants of the master-and-detail presentation. For example, the similar 3-pane, master-and-detail views of Mac Mail, shown in Figure 18, and Yahoo! Mail, shown in Figure 19, display the applications’ entire hierarchy through a simple list of mailboxes, a tabular list of messages, and a detailed data pane that contains the message that is currently selected in the tabular list. iPad Mail has a 2-pane, master-and-detail presentation, as shown in Figure 20.

Figure 18—Mac Mail master and detail view

Mac Mail master and detail view

Figure 19—Yahoo! Mail master and detail view

Yahoo! Mail

Figure 20—iPad Mail Inbox and message pane

iPad Mail

Figure 21 shows the Cover Flow view of the Mac OS X Finder. The Cover Flow is in the top pane and provides an animated, 3D user interface that can successively display previews of documents. A tabular list of files resides in the bottom pane. A user can select a file in the list to display it in the Cover Flow.

Figure 21—Mac OS X Finder Cover Flow view

Finder Cover Flow view

The Google search results page, shown in Figure 22, has a column of filters on the left—in the master pane that controls the display of Web search results in the simple list on the right.

Figure 22—Google search results page, with filters on the left

Google search results

Zillow, shown in Figure 23, also has a column of filters on the left, which control the display of search results in the map and the simple list on the right.

Figure 23—Zillow has filters on the left

Zillow

iPad Contacts displays a user’s contacts in a virtual address book, shown in Figure 24. A user can tap a contact in the simple list on the left to display the contact’s detailed data on the right.

Figure 24—iPad Contacts

iPad contacts

Figure 25 shows iPad Notes, which displays a simple list of notes on the left and a notepad on the right. Tapping a note in the list displays its detailed data on the notepad.

Figure 25—iPad Notes

iPad Notes

iPhone Calendar’s master-and-detail presentation displays a calendar in a List, Day, or Month view at the top and the detailed data for a selected event at the bottom, as shown in Figure 26.

Figure 26—iPhone Calendar

iPhone Calendar

When a productivity application has sufficient available screen real estate to accommodate a master-and-detail presentation, its use of adjacent panes to navigate the application’s hierarchy provides highly efficient workflows within the scope of a single virtual context.

Detailed Data

Most productivity applications display detailed data in a separate window—as Mac Mail does—or on a subordinate page or screen—like iPhone Mail. Figure 27 shows the window that appears when a user clicks a message in the Inbox’s master list in Mac Mail; Figure 28, the corresponding screen in iPhone Mail.

Figure 27—A message’s detailed data in a separate window in Mac Mail

A message’s detailed data in Mac Mail

Figure 28—A message’s detailed data on separate screen in iPhone Mail

iPhone Mail

Figure 29 shows the detailed data that appears when a user taps a contact’s name in iPhone Contacts’ simple list of contacts.

Figure 29—A contact’s information in iPhone Contacts

iPhone contact info

iPhone Maps presents detailed data in the form of maps, as shown in Figure 30, and directions.

Figure 30—iPhone Maps

iPhone Maps

Canvas

Simple productivity applications often employ canvas presentations that comprise a single window, page, or screen. Such applications support the creation and editing of simple documents such as notes and email messages. Figures 31 shows iPad Notes. Figures 32, 33, and 34 show the screens for composing email messages in Mac Mail, iPhone Mail, and iPad Mail, respectively.

Figure 31—iPad Notes

iPad Notes

Figure 32—A New Message window in Mac Mail

A New Message window in Mac Mail

Figure 33—iPhone Mail screen for composing messages

iPhone Mail screen for composing messages

Figure 34—iPad Mail screen for composing messages

iPad Compose Mail

Canvas and Palettes

In applications with canvas-and-palette presentations, the canvas is the space in which users create content, while the palettes provide tools that let them format and style the content. Many applications’ primary contexts of interaction employ master-and-detail presentations. In fact, a lot of the applications UX professionals use daily in their work have presentations comprising a canvas and palettes, including Dreamweaver, which is shown in Figure 35, Microsoft Word, InDesign, Visio, OmniGraffle Professional, Photoshop, Illustrator, Fireworks, Keynote, and PowerPoint.

Figure 35—Dreamweaver canvas and palettes

Dreamweaver canvas and palettes

In Movable Type, the canvas area on the Edit Entry page, shown in Figure 36, lets users create blog posts, and the palettes on the right let them set publishing parameters and define metadata for a blog post.

Figure 36—Movable Type Edit Entry page

Movable Type Edit Entry page

Worksheet

Spreadsheet applications simulate the presentation of the paper accounting worksheets people used in the days before personal computers. A worksheet comprises rows and columns of cells that form a grid. Each cell in a worksheet can contain either text, a numeric value, or a formula. Excel and other similar applications let users create spreadsheets. Figure 37 shows a worksheet in Excel.

Figure 37—A worksheet in Excel

Excel worksheet

Dashboard

Dashboards provide an overview of information that is essential to completing the tasks users perform using an application and let users drill down to view or edit more detailed information. Much of the information on dashboards takes the form of lists, charts, graphs, information visualizations, and tables.

Stephen Few, author of Information Dashboard Design, has defined a dashboard, as follows:

“A dashboard is a visual display of the most important information needed to achieve one or more objectives; consolidated and arranged on a single screen so the information can be monitored at a glance.”—Stephen Few

For more detailed information about dashboard design, read my review of his excellent book.

Figure 38 shows the Google Analytics Dashboard; Figure 39, a Dashboard I designed for the GetJar Developer Zone.

Figure 38—Google Analytics Dashboard

Google Analytics Dashboard

Figure 39—GetJar Developer Zone Dashboard

GetJar Developer Zone Dashboard

Presentation Patterns for Utility Applications

“Since the purpose of utility applications is to let users perform simple tasks requiring minimal user input or quickly view summary information, most are simple applications with a narrow focus.”

Since the purpose of utility applications is to let users perform simple tasks requiring minimal user input or quickly view summary information, most are simple applications with a narrow focus. Utility applications typically have only a few simple virtual contexts, which let users easily modify settings or obtain the information they need. Effective information design is an essential aspect of the design of utility applications, which should be visually pleasing. Most utility applications have either a flat structure—especially those on mobile devices—or a very shallow hierarchy. They generally employ standard user interface elements. Here are some examples of presentation patterns for utility applications.

Control Panel

Control panels are simple utility applications that let users view and modify basic settings for an operating system or application. For example, Mac OS X System Preferences, shown in Figures 40 and 41, let users view and configure system-wide settings for a Mac.

Figure 40—Mac OS X System Preferences

Mac OS X System Preferences

Figure 41—Mac System Preferences for Sound

Mac System Preferences for Sound

The Control Panel, shown in Figure 42, displays and lets users configure system-wide settings for a PC running Windows.

Figure 42—Windows Control Panel

Windows Control Panel

Figure 43 shows system-wide settings for iPad; Figures 44 and 45, for iPhone.

Figure 43—iPad Settings

iPad Settings

Figure 44—iPhone Settings

iPhone Settings

Figure 45—iPhone Settings for Wi-Fi Networks

iPhone Wi-Fi Settings

Figure 46 provides an example of application-specific settings—General Preferences for Skype.

Figure 46—Skype Preferences

Skype Preferences dialog box

Dialogue

Through dialogues between applications and their users, applications can obtain the information they need from users and users can communicate what they want to applications. For example, in desktop applications, such dialogues take place through dialog boxes; in Web applications, through Web forms or overlay dialog boxes; in iPhone apps, through settings on the backs of applications’ main views.

Figure 47 shows the Page Setup dialog box on the Mac; Figure 48, Twitter’s sign-up form; Figure 49, the Reset Your Password overlay dialog box, which I designed for scanR; Figure 50, the Set Date Range overlay dialog box, which I designed for the GetJar Developer Zone; and Figure 51, settings on the back of the main view for the Weather iPhone app.

Figure 47—Mac Page Setup dialog box

Page Setup dialog box

Figure 48—Twitter’s sign-up form

Twitter's signup form

Figure 49—Reset Your Password overlay dialog box on scanR

Reset Password overlay dialog box

Figure 50—Set Date Range overlay dialog box on GetJar

Set Date Range overlay dialog box on GetJar

Figure 51—Settings on the back of the main view for the Weather iPhone app

iPhone Weather Settings

Wizard

Wizards lead users through complex tasks, step by step, providing the user assistance they need to successfully complete a task. They provide an effective way of guiding users through complex tasks in which they lack expertise, so would require assistance; that users perform only infrequently, so would be unlikely to learn; or that have discrete steps users must follow that make more efficient approaches to completing a task impractical. Wizards consist of a series of pages or screens, each of which covers one step in a task. A pane on the left should list all of a wizard’s steps, highlighting the current step, while that on the right displays whatever input fields and user assistance the current step requires.

Figure 52 shows a wizard I created for scanR to help users bridge the communications gap between the Web application running on their computer and the application running on their mobile phone.

Figure 52—scanR Getting Started with Scanning wizard

scanR Getting Started wizard

The most common use of wizards is to assist users with software and hardware installations. Figure 53 shows the Wacom Tablet Installer wizard.

Figure 53—Wacom Tablet Installer wizard

Wacom Tablet Installer wizard

Tabular List

Many mobile utility applications that present summary information for quick reference display data in tabular lists—as do some desktop and Web utility applications. For example, Figure 54 shows the iPhone World Clock, which displays times around the world in a list; Figure 55, the iPhone Weather app. In utility applications, tabular lists commonly do not have column headers, nor are they sortable.

Figure 54—iPhone World Clock

iPhone World Clock

Figure 55—iPhone Weather app

iPhone Weather

Grid

Grid presentations are common in a range of different utility applications, on various platforms. Sometimes they are useful for utility applications’ primary contexts of interaction, as in the Xfinity TV Listings Web application, shown in Figure 56, which displays its data in a complex grid.

Figure 56—Xfinity TV Listings Web application

Xfinity TV Listings Web application

The Mac Dashboard’s calendar and weather widgets, shown in Figures 57 and 58, employ a grid presentation.

Figure 57Mac Dashboard’s calendar widget

Date widget

Figure 58Mac Dashboard’s weather widget

Mac OS X Weather widget

Detailed Data

Since few utility applications have a hierarchical structure, their use of detailed data presentations is fairly uncommon. But the iTunes Ping app on iPhone, shown in Figure 59, includes a detailed user profile.

Figure 59—User profile in iTunes Ping on iPhone

User profile in iTunes Ping on iPhone

Master and Detail

Because most utility applications are very simple applications, few employ a master-and-detail presentation, but the Stocks iPhone app, shown in Figure 60, is the exception to the rule. It has a master pane at the top that lists stocks a user is tracking, while a detail pane at the bottom displays a graph of the price for the stock that is currently selected in the master pane.

Figure 60—Stocks iPhone app

iPhone Stocks

Presentation Patterns for Immersive Applications

Most immersive applications are recreational in nature, including virtual worlds, games, ereaders, and media players. However, there are also some immersive applications that offer useful virtual tools.

Most immersive applications are recreational in nature, including virtual worlds, games, ereaders, and media players. However, there are also some immersive applications that offer useful virtual tools. These tools emulate their real-world counterparts and can help users accomplish their tasks. Immersive applications are highly experiential, and their design focuses on their rich visual form and content. Here are some examples of presentation patterns for immersive applications.

Virtual World

Both virtual worlds and many games offer completely immersive experiences. For example, the fanciful virtual worlds of Second Life provide unique and social experiences. Figures 61 and 62 show two virtual worlds on Second Life: AIRE Ville Spatiale and Firefly.

Figure 61—AIRE Ville Spatiale on Second Life

AIRE Ville Spatiale on Second Life

Figure 62—Firefly on Second Life

Firefly on Second Life

Zynga offers numerous games users can play on the Web—like CityVille, shown in Figure 63—and they’re just one of many vendors in the game market.

Figure 63—Zynga’s CityVille

Zynga CityVille

There are many games for iPhone. One of the most popular is Spider, shown in Figure 64.

Figure 64—Spider for iPhone

Spider for iPhone

Browser

Browsing the Web and other media is extremely absorbing, so highly immersive. Figure 65 shows Safari on the Mac; Figure 66, Safari on iPhone.

Figure 65—Safari on the Mac

Safari on the Mac

Figure 66—Safari on iPhone

Safari on iPhone

Photo viewers offer another type of browsing that is highly immersive. Figures 67 and 68 show iPhone Photos, in which users can view their photo albums on their iPhone.

Figure 67—A grid of photos in iPhone Photos

A grid of photos in iPhone Photos

Figure 68—A photo in iPhone Photos

A photo in iPhone Photos

iPad Photos, shown in Figures 69 and 70 lets users browse their photos on their iPad.

Figure 69—Browsing photos by Events in iPad Photos

Browsing photos by Events in iPad Photos

Figure 70—iPad Photos browser

iPad Photos browser

The Windows Photo Viewer, shown in Figure 71, provides a similar browsing experience.

Figure 71—Windows Photo Viewer

Windows Photo Viewer

eReader

There are ereaders available for every major platform. Figures 72 and 73 show iBooks for iPad. Preview, shown in Figure 74, is a PDF reader for the Mac. Figure 75 shows Kindle for Mac. The New York Times iPhone app is shown in Figure 76.

Figure 72—iBooks for iPad

iBooks for iPad

Figure 73—Winnie the Pooh in iBooks for iPad

Winnie the Pooh in iBooks  for iPad

Figure 74—Preview, PDF reader for the Mac

Preview

Figure 75—Kindle for Mac

Kindle applicaton for Mac

Figure 76—New York Times iPhone app

New York Times iPhone app

Media Player

Media players let people enjoy video and music online. Figure 77 shows the ABC Player, the network’s video player on the Web. Figure 78 shows one of the many channels available on YouTube—Above&BeyondTV. YouTube provides an endless supply of video entertainment.

Figure 77—ABC Player

ABC Player

Figure 78—Above&BeyondTV on YouTube

YouTube

The iPod app for iPad, shown in Figures 79 and 80, lets users browse their music library and listen to their favorite tunes.

Figure 79—Music library in the iPod app for iPad

Music library in the iPod app for iPad

Figure 80—Music player in the iPod app for iPad

Music player in the iPod app for iPad

Last, but not least, Last.fm for the Mac, shown in Figure 81, streams music on myriad channels.

Figure 81—Last.fm

Last.fm

Virtual Object/Tool

Virtual objects that emulate real-world tools include the cameras in our mobile phones; the incredibly realistic BubbleLevel and Compass iPhone apps, shown in Figures 82 and 83, respectively; and microphones that let us record notes.

Figure 82—iPhone BubbleLevel app

iPhone BubbleLevel app

Figure 83—iPhone Compass app

iPhone Compass app

The Mac and iPhone Calculators, shown in Figures 84 and 85, respectively, emulate the real thing and let people get work done.

Figure 84—Mac Calculator

Mac Calculator

Figure 85—iPhone Calculator

iPhone Calculator

Another handy tool is the iPhone Stopwatch, shown in Figure 86.

Figure 86—iPhone Stopwatch

iPhone Stopwatch

The Process of Designing Virtual Contexts for Interaction

“It is essential that you understand what the application’s potential or current users’ motivations and goals are and how they approach the work or play that is their reason for engaging with the application.”

To create an effective design solution for an application’s primary context for interaction, first and foremost, it is essential that you understand what the application’s potential or current users’ motivations and goals are and how they approach the work or play that is their reason for engaging with the application. Once you have a good understanding of the users and their tasks, you can conceive of an optimal virtual context within which they can accomplish their primary goals.

When designing an application’s primary context for interaction—or, in fact, any virtual context for interaction—there are some key steps you should follow in the user-centered design process I described in my column “Design Is a Process, Not a Methodology.” In the following outline of this design process, I’ve highlighted the key steps to follow when designing virtual contexts by making them bold.

Discovery Phase

  1. Learning about your users—You’ll need to get answers to these questions to design an application’s primary context for interaction so it really meets users’ needs: What are users’ motivations and goals for using the application? Are they different for users in different roles? Should the application’s primary context differ depending on users’ roles? Would users need to be able to customize its user interface? What are the main goals for users in each role? An application’s primary context for interaction must serve the needs of target users, so you must have a deep understanding of their needs, which also serves you well in designing an application’s other virtual contexts.
  2. Modeling your users—This step may not always be essential to the design of virtual contexts. However, when an application’s users have different roles and you’re preparing to design its primary context for interaction, user modeling takes on greater importance.
  3. Analyzing your users’ tasks—To understand what tasks and activities an application’s primary context for interaction must support, consider these questions: What key tasks or activities do users—or users in particular roles—need the application to support? Users perform these key tasks to achieve their main goals—and, in many cases, must perform them frequently. What are users’ mental models of their key tasks or activities? Do users in different roles interrelate and, if so, how? What relationships exist between users’ various tasks? What related capabilities or ancillary information do users need to have close at hand when performing key tasks? An application’s primary context for interaction serves as the starting point for many of its workflows, which often take users to other virtual contexts in the application. Your task analysis helps you to design efficient workflows and determine what other virtual contexts your application requires.
  4. Eliciting and defining clear product requirements—Clearly defined user requirements provide essential information on which to base your decisions when designing an application’s virtual contexts for interaction. Requirements should answer these questions: What key capabilities and features should the application provide to satisfy its target users? On what platforms should the application be available, and what are their form factors? For example, should you create a desktop application, a Web application, or an iPhone app? What capabilities do the target platforms offer and what constraints do they impose? What goals and tasks dotarget users need to be able to accomplish most efficiently? What information needs do they have? Is obtaining information a key goal for them? What tasks should the application’s primary context for interaction support, and what information should it provide?

Design Phase

  1. Developing conceptual models—When you’re doing conceptual modeling for an application’s primary context for interaction, you should consider these questions: What is an application’s core functionality? What should be at the center of the application’s structure? In other words, on what features and information should the application’s primary context focus? What concepts from the application’s task domain should its primary context reveal to users? What kinds of data objects would users need to work with? When conceptualizing an application’s primary context, stay focused on the application’s core value proposition. Follow a similar process for all of the application’s key virtual contexts.
  2. Solving key design problems through ideation—How should the design of an application’s primary context for interaction reveal concepts that are unique to the application’s task domain? Are there appropriate metaphors for these concepts? Should the application’s primary context reflect users’ real-world context? How should the user interface for the application’s primary context best represent the functionality it provides? Should some elements of the user interface be subordinate to or contained by others? How should you present and group the application’s core features within its primary context to facilitate users’ workflows? During ideation, make sure the application’s primary context for interaction focuses on supporting users’ main goals. Again, follow a similar process for the application’s other key virtual contexts.
  3. Doing detailed design—At this point, you’ve already made your key decisions regarding the design of an application’s virtual contexts for interaction, and it’s time to implement them through a design that is both clear and engaging.

Development Support Phase

  1. Providing development support—There’s nothing special to do that’s specific to designing virtual contexts. Just do what you usually do to support the development effort and make sure what you’ve designed gets built.

In Conclusion

Optimal designs for an application’s virtual contexts depend on what type of application it is, the platforms for which you’re designing the application, the application’s genre, [and] the purpose [and presentation] of each virtual context….”

With this column, I’ve launched my series on the essence of interaction design by discussing the design of virtual contexts for interaction. To summarize, the optimal designs for an application’s virtual contexts depend on what type of application it is, the platforms for which you’re designing the application, the application’s genre, the purpose of each virtual context and, consequently, its appropriate presentation, and how the application’s various virtual contexts interrelate. I’ve also described how some key steps in a user-centered design process support the design of an application’s contexts for interaction.

An application’s primary context for interaction provides the starting points for many of its key workflows; subordinate contexts often complete those workflows. Together, an application’s primary context for interaction and its menus or navigation system should effectively communicate the scope and nature of the application’s functionality. An application’s menus or navigation system should provide access to all of its virtual contexts and the full scope of its functionality. The design of an application’s menus or navigation system is the next topic in this series.

References

Apple Inc. iOS Human Interface Guidelines. Cupertino, CA: Apple Inc., September 1, 2010.

Apple Inc. iOS Human Interface Guidelines. Cupertino, CA: Apple Inc., November 15, 2010.

Cooper, Alan, Robert Reimann, and David Cronin. About Face 3: The Essentials of Interaction Design. 3rd ed. Indianapolis, IN: John Wiley & Sons, Inc., 2007.

Few, Stephen. “Dashboard Confusion Revisited.” Perceptual Edge, March 22, 2007. Retrieved December 31, 2010.

—— Information Dashboard Design: The Effective Visual Communication of Data. Sebastopol, CA: O’Reilly, 2006.

Gamma, Erich, Richard Helm, Ralph Johnson, and John Vlissides. Design Patterns: Elements of Reusable Object-Oriented Software. Boston: Addison-Wesley, 1995.

Ginsburg, Suzanne. Designing the iPhone User Experience: A User-Centered Approach to Sketching and Prototyping iPhone Apps. Boston: Addison-Wesley, 2010.

Goodwin, Kim. Designing for the Digital Age: How to Create Human-Centered Products and Services. Indianapolis, IN: Wiley Publishing, 2009.

Hoekman, Robert, Jr., and Jared Spool. Web Anatomy: Interaction Design Frameworks That Work. Berkeley, CA: New Riders, 2010.

Neil, Theresa. “12 Standard Screen Patterns.” Designing Web Interfaces, January 17, 2009. Retrieved December 31, 2010.

—— “Screen Layouts for Rich Internet Applications.” Designing Web Interfaces, February 10, 2010. Retrieved December 31, 2010.

—— “Standard Screen Patterns,” v3.0. TheresaNeil.com. January 17, 2009. Retrieved December 31, 2010.

Tidwell, Jenifer. Designing Interfaces: Patterns for Effective Interaction Design. Sebastopol, CA: O’Reilly, 2006.

Wikipedia. “Application Framework.” Wikipedia, December 11, 2010. Retrieved December 31, 2010.

—— “List of Ajax Frameworks.” Wikipedia, December 30, 2010. Retrieved December 31, 2010.

Join the Discussion

Asterisks (*) indicate required information.