1. 1 SY DE 542 Navigation and Organization Prototyping Basics Feb 28, 2005 R. Chow Email: chow@mie.utoronto.cachow@mie.utoronto.ca

2. 2 Navigation knowing where you are knowing where you need to go knowing how to get there

3. 3 Symptoms of Bad Navigation Users get lost Users don’t get to their objective Portions of the interface go unused Users quit in frustration

4. 4 Navigation is for Any complex multi-screen display Often the key aspect of website design Ask your interface –Where am I? –Where do I want to go? –How do I get there?

5. 5 Why Navigation Problems Happen Computer displays are limited in size They only allow small views of large worlds Multiple “virtual screens” behind the real screen Sometimes called the “keyhole” effect Lose connection to other views Lose sense of the big picture

6. 6 Visual Momentum Set of techniques drawn from film to provide continuity between scenes (Woods 1984) Visual Momentum is inversely proportional to mental effort required to place new display into context of overall database, and of current information needs High VM -> rapid understanding of data after transitioning to a new display

7. 7 VM Technique 1 Spatial Dedication Examples: –keep menus at top of screen –consistent place for “back”, “next” buttons Reason: User will know immediately where to find these functions

8. 8 VM Technique 2 Longshots “Overviews” Example –high level system display –show location in the entire system, site maps Reason: Users see the big picture and know their location in it.

9. 9 VM Technique 3 Establish landmarks across displays Examples –equipment pieces, geographic landmarks Reason: –User can orient off the landmark –Judge direction and distance

10. 10 VM Technique 4 Overlapping or Parallel displays Examples: –Bring information from 2 displays onto one Global vs. local Continuous vs. Intermittent Background vs. Foreground –Reuse information links from previous displays (filled form fields etc.) Reason: Adds continuity

11. 11 VM Technique 5 Smooth transitions between displays Examples: –let user know how new display is connected to the past –bread crumb trails

12. 12 Using your WDA for navigation Recall WDA organizes from purpose to components Purpose Components

13. 13 Option 1: Single Screen Purpose Components Abstract Function and Process levels

14. 14 Screen 1: Purpose Screen 2: Abstract Fn Screen 3: Processes Screen 4: Components Option 2: Multiple Screens

15. 15 Screen 1: Purpose/AF/Process Option 3: Single Screen with Pop-Ups Components

16. 16 AF/Process/Components Another option? … Purpose

17. 17 Technique: Use a Polar Star, or MDD for Navigation

18. 18 Develop your own navigation tool

19. 19 Example: www.amazon.com

20. 20 Navigation Techniques Tabs Menu bars –horizontal, vertical Search engine “Related items” (series / books) “Recently viewed items”

21. 21 Another example: http://historywired.si.edu/index.html Smithsonian Institution's HistoryWired: A few of our favorite things. Experimental website introduces visitors to some of the three million objects held by the National Museum of American History, Behring Center Rationale: Only 5% of collection can be exhibited at any one time This version includes 450 objects

22. 22 More on Techniques … A Site Map Also a Mass Data Display Shows entire data space Shows connections –Time –Same Category –Multiple Categories

23. 23 Design Exercise: Background You are designing a navigation display for a small screen situation (e.g. palm pilot or in vehicle computer). Your display system needs to: –Show a map of the place they are in –Accept a new location input –Provide a choice of routing (best time, scenic etc.) –Give route based as well as world based travel knowledge –Give options to display tourist attractions, restaurants, lodging –Give detailed information on those (e.g. rates, hours)

24. 24 Design Exercise: Your Task Map out your screens and develop a navigation structure. Develop a visual navigation tool for the system. How will you show the user where they are compared to where they need to be?

25. 25 Prototyping Basics

26. 26 What a prototype isn’t A complete product A fully working implementation

27. 27 What a prototype is A demo for the purpose of: –Confirming that a concept can work

28. 28 This means You prototype the area of greatest concern You leave other areas just lightly sketched in You may reduce your dataset to show it works on a limited set of data

29. 29 What is a working prototype in Interface Design? Not a working system It “looks right” It “acts right” It may respond right to user interaction (e.g. button presses or input)

30. 30 Looking right/acting right Can be largely faked Storyboards vs. interaction

31. 31 Software… Good choices Will let you be creative with your graphics Will let you mock in some user interaction (button presses, data entry or navigation) Will be easy for you to use

32. 32 Prototypes allow for testing In your case, user testing (report 2) This means: –You need 3 “tasks” or events to show in your prototype –You should think about how the user will move between the tasks or interact with them

33. 33 Describing your prototype (report 1) Justify the tool you used Explain how much of your design is prototyped Explain why you chose to prototype those parts Explain what the 3 tasks/events will be