Interaction DesignInteraction DesignInteraction DesignInteraction DesignRobert BenardRobert Benard

Mott Community CollegeMott Community College

Interaction DesignInteraction design is concerned with two things: how

visitors move around your site (navigation) and how they will play with the material on your site (interaction)

Navigation is the key to every site. Have you ever gone to a companies web site just wanting a telephone number and have not been able to find it? An example of good navigation is Mott’s web site (www.mcc.edu)

Interaction is getting visitors interested in what your web site is saying. A great example of this is Disney’s web site (www.disney.com).

StoryboardIn the past, we have referred to blue prints when referring to the

design of a web site. Web designers use a similar tool called a storyboard.

Storyboards were originally designed by Walt Disney. He required his cartoon artists to make a storyboard detailing what the cartoon was about before drawing the individual cells.

Storyboards are similar to flowcharts, but are made of index cards (in our case). Each index card represents a page in your site. You can move the index cards around until you are happy with the sequence.

Question: What is another area (in college) that you could use a storyboard?

Context DevicesWhere we start:

Where do we start on most web sites?

What do we expect on this page?

Context DevicesWhere we start:

Where do we start on most web sites?

On most web sites, I expect to see a welcome page that welcomes me to the site.

What do we expect on this page?

I usually expect the page to tell me who the site is, what it is about, and some navigation to continue on.

Context DevicesOther context devices are:

• Banner – a graphic across the top or side that tells users what the web site is. (like a banner in a newspaper)

• Heading – a one to eight word description in bold or large type above a block of content. (like headings in a text book)

• Backgrounds – visual cues that lie underneath the content that tell users what web site this is (common throughout the web site)

• Navigation bars – appear on each page of the site. They should always be the same and have a unique look. (checkout www.rockfinancial.com)

Refining Your NavigationEver get lost in a mall?

Malls and many other places provide maps that include a “you are here” arrow pointing to where you are on the map.

Web sites need maps too. This does not necessarily mean creating a true map outlining your structure, but easy to use navigation and a hint as to where a user currently is.

Refining Your Navigation(easy navigation)

One thing that I have done is make the page link that I am on bold in the navigation bar. This way, users know what link they are on.

Also, make sure you always have a link to the home page. Many web developers do this by allowing the web site (or company) logo to be clicked. This will always take the user to the start page.

Being able to go to the start page is crucial because that is the first impression users got and they had to click from there.