How to Create a Navigation Bar
Web Design: How to Present Content on a Web Page
Designing the Navigation of a New Website

Interaction Design and User Flow of a New Website

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 website 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 your users have to take to complete a task. You must anticipate their questions and concerns each step of the way, and think of how you can facilitate successful completion. If the steps are too complex or the interface is unclear, the users will get frustrated and abandon the task. In addition to deciding on the appropriate use of widgets like check boxes, menus, links, icons, and buttons, the visual design and physical placement of the interface elements can either enhance or detract from the user’s ability to navigate successfully through a task.

Creating user flow diagrams for websites

In order to work out the most logical path users should take to complete a task, interaction designers often create user flow diagrams. These diagrams anticipate all the possible paths that users could take to make their way through a task. As you can see, each decision junction can go in a couple of directions, often 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 menu that dynamically updates the page with the appropriate content.

  • Include a Forgot Password link, and ability to create a new account, 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 anyway.

  • Provide users with feedback, letting them know they’re on (say) Step 2 of 5.

    A user flow diagram maps all the possible routes a user can take toward completing a task. [Credit:
    Credit: © Gateway
    A user flow diagram maps all the possible routes a user can take toward completing a task.

Going with the flow

Most tasks are unique to your website, requiring you to create site-specific user flows and figure out the best interface design to get someone through a particular task. However, your website includes a number of common tasks such as logging in, getting back 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 top right of the web page. People look for search functions in this general location so if you place it elsewhere, your visual design really needs to call it out.

    Veer.com is a media resource for designers, so search is an important feature of the site. Here you
    Credit: © Veer, a Corbis Corporation Brand
    Veer.com is a media resource for designers, so search is an important feature of the site. Here you can see the search function featured prominently.
  • Link to the home page. For some reason, it has evolved that the company logo on a web page (usually located at the upper-left) is typically the official link to the home page — especially for Western cultures. To accommodate a more global audience, however, most sites also provide an explicit Home link as part of the overall navigation scheme.

  • Login link. Unlike the search function, most websites do not provide text-input fields on every page for the login function. Instead, they provide a single Login text link, somewhere at the top of the page, which doubles as the registration link. The link takes people to a login page where they can either log in with a user name 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 or re-enter their credentials the next time they visit the site. There should also be a Forgot Password link for people who continually forget their passwords.

    Place the search function at the top-right on the web page, where users generally look for this fea
    Credit: © Target Brands, Inc.
    Place the search function at the top-right on the web page, where users generally look for this feature.
blog comments powered by Disqus
Change the Navigation Menu on Your iWeb Site in iLife '11
Streamlining Your Web Site's Navigation
Web Design Tips for Navigation Tools
How to Create an HTML Site Map in Dreamweaver
How to Create a Text Navigation Bar in HTML
Advertisement

Inside Dummies.com