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 PreviousNext Welcome

Interaction Design A simple page title is usually enough, or you could use an illustration, picture or graphical text PreviousNext Welcome 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?