Your SlideShare is downloading. ×
Lesson 4
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Lesson 4

360
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
360
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Interaction Design Robert Benard Mott Community College
  • 2. Interaction Design
    • Interaction 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 ).
  • 3. Storyboard
    • In 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?
  • 4. Context Devices
    • Where we start:
    • Where do we start on most web sites?
    • What do we expect on this page?
  • 5. Context Devices
    • Where 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.
  • 6. Context Devices
    • Other 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 )
  • 7. Refining Your Navigation
    • Ever 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.
  • 8. 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.