Interaction design is different from information design. This is often a major point of confusion for people new to Web design. While information design deals with the overall structure of a Web site and the best way to organize content, interaction design is the actual flow that users follow to complete tasks such as signing up for a site's newsletter, navigating from one page to the next, or buying a number of products and going through the checkout process.

As a designer, you must think through all the possible steps someone needs to take to complete or abandon a task. You can then design a user interface that facilitates the task, reduces abandonment, and optimizes a user's time spent on your site. In addition to deciding on the appropriate use of widgets like check boxes, menus, links, icons, and buttons, the visual design and physical location of the interface elements can both enhance and detract from the user's ability to navigate successfully through a task.

Going with the flow

Most tasks are unique to your Web site, requiring you to create user flows and figure out the best interface design to get someone through a task. However, your Web site includes a number of common tasks such as logging in, navigating to the home page, and searching. For these everyday tasks, you can use standard interaction models that have emerged as the Web has matured over the last few years.

Here are a few common conventions to keep intact, or at least understand fully before you tweak them into new variations:

Search function. If you're providing a search function on your site, keep in mind that most search functions are located on the left side or on the top of the Web page. People look for search functions in these locations so if you place it elsewhere, your visual design really needs to call it out (unless searching is a low priority task for your site).

Additionally, as Figure 1 illustrates, search functions have a common 1-2-3 punch formula: The word search followed by an input field (sometimes with a modifier drop-down menu), and a Go button. If you use a word other than search (such as find), or provide just a simple Search text link, people might second-guess the functionality because it's not what they were expecting.



Figure 1

Place the search function in the top or left top portion of the Web page.

Link to the home page. For some reason, it has evolved that the company logo on a Web page (usually located in the upper left, less often located in the upper right) is typically the official link to the home page. To accommodate newcomers, however, most sites also provide an explicit Home link as part of their global navigation scheme.
Log in link. Unlike the search function, most Web sites do not provide text input fields on every page for the login function. Instead, they provide a single link called Login, Log in, or Account somewhere at the top (usually top right) of the page that also doubles as the registration link (even though nothing says registration on the link, although often I see sites that show a combined Login/Register link). The link takes people to a login page where they can either log in with their user names and passwords or sign up to be a new user (with that function falling below the login area).

This login page often has other features like a Remember Me link, which sets a cookie (a wee bit of data stored on your computer) so that users don't need to log in the next time they visit the site and a Forgot Password link for those users who continually forget their passwords.

Creating user flow diagrams

In order to work out the most logical path users should take to complete a task, interaction designers often create user flow diagrams like the one shown in Figure 2. These diagrams anticipate all the possible paths someone could take through a task. As you can see, each decision junction can go in a couple of directions, oftentimes looping back to a prior step in the task.

After you account for all the possible outcomes, you can figure out how best to design the interaction. For example, you might decide to do the following with your design:

Present the initial set of options in a drop-down menu that updates the page with the appropriate content.
Include a Forgot Password link on the first page of the login sequence.
Include a Register Me check box at the close of an online sales process to encourage registrations because you've already captured more than half the data you need.
Provide users with feedback letting them know they are on step 2 of 5.

Figure 2

A user flow diagram maps all the possible routes a user can take towards completing a task.

Visual Design's Role in Usability

Working out the interaction design for a task is one part common sense and one part logic to figure out the widgets to use and the flow to arrange them in. The rest is all visual design. The very placement, grouping, relative arrangement, and design of your interactive components can go a long way toward making a task flow nicely or stop in its tracks.

Compare the two examples in Figures 3 and 4. Figure 3 shows all the same interactive components as Figure 4. Figure 4, however, is better organized from a visual perspective with added helper text, headlines, and examples of how to fill out the form. The example in Figure 4 is clearly easier to use than the example in Figure 3. You can use a number of visual design strategies to aid in the usability of your interaction design.

Figure 3:

This form example lacks visual design and organization, which makes it confusing to follow.

Figure 4:

This example has clearer visual organization, slightly better design, and helper text that makes this form much easier to use.