Embed Size (px)
Citation preview
Web Development
Interaction Design
How is information organized?
How will people find their way around the site?
How will people work with the information?
Concerned with the clues or guidelines we give our audience for getting around without getting lost.
Interaction Design
Storyboard Model
First Step:
Get a number of 3x5 cards or small pieces of paper
Interaction Design
Storyboard Model
Second Step:
Open your design.doc and find the Flowchart
Interaction Design
Storyboard Model
Third Step:
Copy the words or titles from the flowchart to each of your index cards, use one card for each box, leave plenty of room on the index card for more writing
Interaction Design
Storyboard Model
Fourth Step:
Arrange the cards on a poster board or table, but don’t fasten them yet, you need to be able to move them
around.
Arrange them according to their position in the flowchart
Interaction Design
Start at the Beginning:
Every web site has a starting point we call the Welcome Page or the Home Page
(Index Page)
Interaction Design
Start at the Beginning:
First Step:
Identify your welcome page. Which card would be the best starting point for your visitors.
Write WP in the top right corner of the card.
You may need to add a card if none of them are good candidates for a welcome page.
Interaction Design
Start at the Beginning:
Second Step:
Start designing your welcome page. Sketch on the card what you have in mind for your welcome page
(rough sketch is all that is needed here)
Put the title of your welcome page at the top of the card. Design a banner if necessary.
Interaction Design
Start at the Beginning:
Third Step:
Put the welcome page card back in the storyboard
Interaction Design
Start at the Beginning:
Fourth Step:
Open your design.doc and write the heading Welcome Page and add a one paragraph description (about 75 words) as to the purpose and content of this page.
Interaction Design
Start at the Beginning:
Fourth Step Example:
Welcome Page
The banner of this page will read, Fish Used for Sushi. The page will welcome the visitor to the web site, explain the purpose of the site in a short paragraph, and list several links to the various kinds of fish that
can be used to prepare sushi.
Interaction Design
Start at the Beginning:
Fifth Step:
If you are talented with graphic software, draw a sample of what your welcome page may look like and
copy it to your design.doc.
Interaction Design
Start at the Beginning:
Sixth Step:
Save your design.doc
Interaction Design
Organizing your pages into a uniform context
Context devices are used in television, radio, and printed media
They tell us what is coming up like a commercial, or paper heading.
Interaction Design
Web Context Devices
A Banner tells users what the page is about (like a headline in a newspaper)
A Heading describes portions of the content
Pictures and Text makeup our content
Interaction Design
Web Context Devices
Pictures, texts, and backgrounds tell our visitors what web site the pages belong to.
A Logo can be placed on each page if appropriate for the site
Navigation bars can also tell visitors what web site they are visiting
Interaction Design
Web Context Devices
First Step:
From your storyboard select a page other than the welcome page
We call this the content card, all cards but the welcome page card are content cards
Interaction Design
Web Context Devices
Second Step:
On the content card, sketch a rough idea of what you think this page should look like.
Block out squares where you intend to display text, and sketch in the graphics also
Interaction Design
Web Context Devices
Second Step: Cont’d
Now list 2 context devices for this page on the card.
A picture or navigation bar, or etc.
These are rough sketches not final product
Interaction Design
Web Context Devices
Third Step:
Create additional variations of this card on two or three blank cards
Make the layouts different
Interaction Design
Web Context Devices
Fourth Step:
Share your sketches with someone, and get help deciding which one is best for the content, place the
winning card back on the storyboard
Interaction Design
Web Context Devices
Fifth Step:
Quickly sketch the context devices from the winning card on each of the other content cards, as this will be
used throughout your site
Interaction Design
Web Context Devices
Sixth Step:
Open the design.doc and create a heading Context Devices
Write a short paragraph describing the context devices (100 words or less) and why you selected them
Interaction Design
Web Context Devices
Seventh Step:
If talented draw a sample of your context devices in a graphics program. Copy them to your design.doc
Interaction Design
Web Context Devices
Eighth Step:
Save your design.doc
Interaction Design
Where are your going?
Good navigation in a web site should show you where you can go, and where you are right now.
Interaction Design
Where are your going?
A welcome page can include the following:
A list of links to the other pages
Hyperlinked pictures scattered on the page
A navigation bar with buttons to the most popular parts of your site
Clickable areas (text, graphics, or buttons) to take users elsewhere, usually to navigate the site
Interaction Design
Where are your going?
We need to also decide how users will get back to the starting point of the page or site, also how to move
onto other pages from the current page they are viewing
Interaction Design
Where are your going?
A button or link that takes them back to the welcome page
Hypertext links allowing them to jump around the site
A navigation bar with buttons
Interaction Design
Where are your going?
First Step:
Given the structure of your web site, determine the navigation method you will use
Sketch this method on your welcome page card
Interaction Design
Where are your going?
Second Step:
Select a method to get from your content pages back to the welcome page and elsewhere on your site
Sketch this method on your content cards
Interaction Design
Where are your going?
Third Step:
Share your methods with others to make sure they are easy to understand
Make changes as necessary
Interaction Design
Where are your going?
Fourth Step:
When your methods are finalized sketch them on all your content cards
Interaction Design
Where are your going?
Fifth Step:
Open your design.doc and explain your navigation system
Make a heading Navigation and Interaction
I chose a navigation bar, which serves as both a context device and as an interactive navigation tool. I also have a picture
that will appear on each page that, if clicked on, will take the visitor back to my welcome page. Interactivity is enhanced by
…
Interaction Design
Where are your going?
Sixth Step:
Create the navigation bar or buttons in a graphics program and copy them to your design.doc
Resave your design.doc
Interaction Design
Knowing where you are?
Give your visitors clues to where they are in relation to the rest of your web site.
This will differ depending on your structure
Interaction Design
Linear Structure Navigation:
Usually don’t have menus or table of contents
The navigation is by simple buttons or links from one page to the next
Previous NextWelcome
Interaction Design
A simple page title is usually enough, or you could use an illustration, picture or graphical text
Previous NextWelcome
Page 3 of 12
Interaction Design
Knowing where you are?
First Step:
Given your structure select a method to use to show your viewer where they are in your web site
Use a previous technique or make up your own
Sketch your ideas on your content cards for future reference
Interaction Design
Knowing where you are?
Second Step:
Share your ideas with others for feedback
Make corrections if necessary
Interaction Design
Knowing where you are?
Third Step:
Write a brief description of how you are going to help people through place finding, add this to the design.doc under the heading Place Finding
Resave your document
Interaction Design
Questions?
