Interaction Design

1
Lesson 4

• Interaction Design

2
Objectives

• Upon completion of this lesson, you should be
  able to
• Create a storyboard that represents the
  information available on your Web site.
• Identify the welcome page of your Web site.
• Show your visitors where they are while
  navigating your site.
• Decide how your visitors will move around your
  site.
• Use context devices to organize the user
  interface for your Web site.
• Test your Web sites content and navigation.

3
Two Elements of Interaction Design

• Interaction design is concerned with
• Navigation How visitors to your Web site will
  find their way around.
• Interaction How visitors will play with and use
  the material presented on your Web site.

Step-by-Step 4.1
4
Two Elements of Interaction Design

• A storyboard an intellectual model that gives
  you the opportunity to visualize the
  organization, content, and flow of your Web site
• Technique developed by Walt Disney to help
  animators make cartoons.
• Allows you to visualize the big picture and to
  make specific decisions.

Step-by-Step 4.1
5
Two Elements of Interaction Design

• To create a storyboard, start by placing draft
  information and key ideas on 3x5 cards
• Cards will change as you improve your design.
• Cards are often arranged on cork boards using
  tacks.
• Cards can be moved around as needed.

Step-by-Step 4.1
6
Context Devices

• A context device visual art and text effects
  that help the user know where they are on a Web
  site, including
• Banners.
• Headings.
• Backgrounds.
• Navigation bars.
• Other content, pictures, and text.

This banner is found on every page at
www.SpeakingSolutions.com to let their customers
know they are in the right place.
Step-by-Steps 4.2 4.3
7
Context Devices

• A welcome page the starting page that visitors
  will see when they first enter a Web site
• Usually the first page in a linear structure.
• Usually the top page in a hierarchical structure.
• Usually the center page in a random access
  structure.

Step-by-Steps 4.2 4.3
8
Context Devices

• The Corporate View Web site uses a variety of
  context devices
• A banner
• A heading
• Graphics
• A navigation/color bar
• Hypertext links and search tools

Step-by-Step 4.3
9
Refining Your Navigation

• A navigation system helps visitors to a Web
  site
• Know exactly where they are right now.
• Know where they can go to learn more

Step-by-Step 4.4
10
Refining Your Navigation

• A navigation system can include the following
  elements
• A list of links to other pages.
• Hyperlinked pictures.
• A navigation bar with buttons.
• Clickable areas (text, graphics, or buttons).
• A link back to the welcome page.
• Hypertext links.
• A navigation bar.

Step-by-Step 4.4
11
Knowing Where You Are

• A wayfinding device helps Web site visitors
  track their travels in a Web site
• Linear sites can have page numbers.
• Some sites use titles.
• Hierarchical sites can provide a path.

Step-by-Step 4.5
12
Testing Your Design

• Every great Web page has been tested in a variety
  of ways. Methods of testing include
• Having experts review for completeness.
• Having proofreaders check for accuracy.
• Having a focus group give their impressions.

Step-by-Steps 4.6 4.7
13
Summary

• In this lesson, you learned
• How to create a storyboard that represents the
  information of your Web site.
• How to identify the welcome page of your Web
  site.
• Ways to show your visitors where they are while
  navigating your site.
• To determine how your visitors will move around
  your site.
• To use context devices to organize the user
  interface for your Web site.
• To test your Web sites content and navigation.