View
214
Download
1
Category
Preview:
Citation preview
1
SY DE 542
Navigation and OrganizationPrototyping Basics
Feb 28, 2005
R. ChowEmail: chow@mie.utoronto.ca
2
Navigation
• knowing where you are
• knowing where you need to go
• knowing how to get there
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
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
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
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
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
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
VM Technique 3
• Establish landmarks across displays
• Examples– equipment pieces, geographic landmarks
• Reason:– User can orient off the landmark– Judge direction and distance
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
VM Technique 5
• Smooth transitions between displays
• Examples:– let user know how new display is connected to
the past– bread crumb trails
12
Using your WDA for navigation
• Recall WDA organizes from purpose to components
Purpose
Components
13
Option 1: Single Screen
Purpose
Components
Abstract Function and Process levels
14
Screen 1: Purpose
Screen 2: Abstract Fn
Screen 3: Processes
Screen 4: Components
Option 2: Multiple Screens
15
Screen 1: Purpose/AF/Process
Option 3: Single Screen with Pop-Ups
Components
16
AF/Process/Components
Another option? …
Purpose
17
Technique: Use a Polar Star, or MDD for Navigation
18
Develop your own navigation tool
19
Example: www.amazon.com
20
Navigation Techniques
• Tabs
• Menu bars – horizontal, vertical
• Search engine
• “Related items” (series / books)
• “Recently viewed items”
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
More on Techniques …
• A Site Map
• Also a Mass Data Display
• Shows entire data space
• Shows connections– Time– Same Category– Multiple Categories
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
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
Prototyping Basics
26
What a prototype isn’t
• A complete product
• A fully working implementation
27
What a prototype is
• A demo for the purpose of:– Confirming that a concept can work
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
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
Looking right/acting right
• Can be largely faked
• Storyboards vs. interaction
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
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
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
Recommended