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