1. Navigation Design

2. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page and Interior Pages

3. Focus on User Know your users –Demographics (age, gender, culture) –Skill level –Equipment and Bandwidth Design in “mind set” of user –Why are they visiting/using your product? –What do they care about? –Consider the user's experience of "moving through" the site –Tools User Interview/Focus groups early in design User testing as design progresses Balancing competing goals –User vs. personal vs. client

4. Build the Information Architecture

5. Taking Inventory Determine –Information –Functionality –Communication goals Research the users Write it down –Ex: List of what should be in project

6. Organization Structure Linear 1.Mammal 2.Reptile 3.Microbe 4.…

7. Organization Structure Hierarchy 1.Mammals A.Primates I.Human II.Gorilla III.… B.… 2.Reptiles 3.Birds CAS example

8. Organization Structure Tabular Gators vs. Clams Curling Weasels vs. Llamas Broomball MSU vs. Iowa Basketball MSU vs. UofM Hockey SunSatFriThuWedTueMon

9. Design the Navigation

10. Goals in Navigation Design Reduce Disorientation Reduce “cognitive load” Minimize navigation Promote desired message/meaning

11. Reduce Disorientation Fundamental Navigation Questions –Where am I? –Where have I been? –Where can I go?

12. Where am I? Relative to the Web? –Site is part of web –Differentiate without alienating Relative to your site? –Clear Navigation –Clear Headlines and Titles

13. Where have I been? “Back” button Link and Visited colors Browser History

14. Where can I go? Logical site structure Clearly display structure/interface

15. Reduce the “cognitive load” Make the choices available onscreen –WhatisTheMatrixWhatisTheMatrix Use “repetition” in navigation design Follow standard web conventions

16. Minimize Navigation Minimize “travel steps” –Especially to common locations Minimize “difficulty” in navigation Minimize “amount” of navigation –Try to maintain 80/20 rule –80% content –20% navigation

17. Promote Desired Message/Meaning Design for target audience Prioritize based on your message

18. Presentation of Navigation (aka Interface Design)

19. Planning the Interface Page/Screen Diagrams –Aka “storyboards” or “wireframes” –Focus in on functionality and rough placement, not on graphic design

20. Planning the Interface User Scenarios –Aka “flowcharts” –Show the paths a typical user may take through a site AboutHomeProductsServicesContactProduct X Link to Amazon.com

21. Presentation Pointers Visually distinguish navigation from other elements –Spatial location –Color coding –Graphic style Group like elements of navigation Avoid long list of choices –“Seven is the magic number” (7 + or - 2) Be careful with metaphors (or avoid) –Shopping Carts

22. Navigation Elements Plain text links (tips)tips Graphical Buttons “Form” elements Arrangements of elements –Lists –Toolbars and panels –Pull-down menus –Tabs –Image maps (or sliced images)

23. Navigation Elements “Breadcrumb trails” Site Maps Site Index Searching Tools (tips)tips Scrolling

24. The Home Page Must answer questions –“Where am I?” –“What does this site do?” Should introduce –Navigation scheme –Site Structure –Branding (name and logo) –Summary of most important news or promotions

25. The Home Page Splash Screens –Thought: Splash sets tone of site and welcomes user (ex)ex –Reality: Annoying impediment to actual content Wasted bandwidth (=time) Most users click off as fast as they can –“Splash Screens Must Die” Jakob Nielsen Any useful purpose? –Splash as filter (ie. warning on adult sites) –Splash for choice? (ie. high/low bandwidth) –Splash while loading? (something to watch) –Instructions? (kidstour)kidstour

26. Interior Pages Focus on content –Not welcome and overview to site Should include –Site branding (logo and name) –Unique page title and header –Primary navigation “Home” button Link to main areas (breadth) Link to children/siblings (depth)