Designing for HumansDesigning for Humans

Nov 20

2

OutlineOutline

Four characteristics of a good user interface:

ConsistencyUse of hierarchy and groupingExplicitly shows states and state changesAvoids overload

Nov 20

3

ConsistencyConsistency

Interface components and layout should be consistent within and across applicationsConsistency refers to…

Presence and absence of featuresPhysical location of featuresAppearance of features (widgets, text, icons)Method of accessing features

Nov 20

4

Presence and Absence of Presence and Absence of FeaturesFeatures

Word:

Customize keyboard

Power Point:

Can’t customize keyboard

Nov 20

5

Recently usedfile list

Word

Not available

StatView

Presence and Absence of Presence and Absence of Features (2)Features (2)

Nov 20

6

Power Point:

Word:

Bottom of list

Top of list

Netscape:

Middle of list

“All files” in different locations

Physical Location of Physical Location of FeaturesFeatures

Nov 20

7

Windows:

Windows is searchingfor a file

Windows is searchingfor a file

Appearance of FeaturesAppearance of Features

Nov 20

8

Consistent (i.e., same) size within a group is aesthetically pleasing

Appearance of Features Appearance of Features (2)(2)

Nov 20

9

Word:

From INSERT menu:

From VIEW menu:

Two ways to insert page numbers!Are they the same?

Method of Accessing Method of Accessing FeaturesFeatures

Nov 20

10

Application on the desktop:launch by double click

Application on the toolbar:launch by single click

Method of Accessing Method of Accessing Features (2)Features (2)

Nov 20

11

OutlineOutline

Four characteristics of a good user interface:

ConsistencyUse of hierarchy and groupingExplicitly shows states and state changesAvoids overload

Nov 20

12

Hierarchy and GroupingHierarchy and Grouping

Make relationships obviousProvide “headings” to categorize groups of related itemsUse

Horizontal separatorsBordersLabeled bordersAlignment

Nov 20

13

Hierarchy isambiguous

ICQ: “Online” and “Offline” entries are indented.

ExamplesExamples

Nov 20

14

Good sense ofhierarchy and groupings via labeled borders

Yamaha OPL Sound Driver:

Examples (2)Examples (2)

Nov 20

15

OutlineOutline

Four characteristics of a good user interface:

ConsistencyUse of hierarchy and groupingExplicitly shows states and state changesAvoids overload

Nov 20

16

States and State States and State ChangesChanges

The user mustKnow the state of the system at all timesBe informed of state changes

Nov 20

17

Caps Lock StateCaps Lock State

If would be nice if Caps Lock were indicated!

Caps Lock

What if Caps Lock is on?

Nov 20

18

Click here

Eudora:

State changesState changes

Nov 20

19

Click here

Notes:1. Compromise:

Bad: position changesGood: all entries appear

2. Animation helps

Eudora:

State changes (2)State changes (2)

Nov 20

20

State UncertaintyState Uncertainty

Cable modem…

POWER CABLE PC TEST RD TD

Receive Data(from where?)

Nov 20

21

What is “Receive What is “Receive Data”?Data”?

Cable Modem

My PC

Network Server

Receive data

Nov 20

22

OutlineOutline

Four characteristics of a good user interface:

ConsistencyUse of hierarchy and groupingExplicitly shows states and state changesAvoids overload

Nov 20

23

OverloadOverload

From Miller’s famous essay…

Refers to the number of items a human can reasonably process at once

Miller, G. A. (1956, March). The magical number seven plus or minus two: Some limits on our capacity for processing information. The Psychological Review, 63(2), 81-97.

The magical number seven plus or minus two!

Reference:

Nov 20

24

Too much to digest without groupings

Eudora:

Overload exampleOverload example

Nov 20

25

Colour OverloadColour Overload

The following people are "offline"

Painted in red to indicate"offline" (but we alreadyknow that!)

ICQ:

Nov 20

26

Why is this blue?

Why is this purple?

Why is this yellow?

ICQ:

Colour overload (2)Colour overload (2)

Nov 20

27

Good use ofcolour

Eudora:

Colour overload (3)Colour overload (3)

Nov 20

28

Coffee Maker on/off Coffee Maker on/off SwitchSwitch

On or off? On or off?

Discussion:On the left, the switch appears similar to a North American wall switch in the up, or on, position, whereas the reverse observation applies for the picture on the right. However, the label 0 appears above the label 1. So, some confusion exists. The top part of the switch is immediately beside the label 0; so, perhaps pushing the top part of the switch is associated with the label 0. Also, the use of the colour red may be misleading. Does red mean on or off? When colour is used, sometimes red/green pairs exist, typically with green implying on and red implying off.

Nov 20

29

No ConfirmationNo Confirmation

Click here to “Save Windows Location” (for next ftp login)

Then what?

Are the changes saved?

WS-Ftp:

Nov 20

30

The Dead Zone! (no The Dead Zone! (no feedback)feedback)

Case Study – When a file is copied to a folder, feedback in the form of a progress bar is presented during copying – but only if the file is large and the operation takes several seconds, or more. This is fine. However, the progress bar only appears when copying begins. If the source file is on a local hard drive, copying begins “immediately” because the seek time – the time to find the file – is negligible. If the source file is on a remote drive or a tape drive, there may be a dead zone – a prolonged period of time without feedback. This occurs because there is no progress bar during the seek time. The designers assumed the seek time is negligible (true most of the time) and, thus, no provision was made to include a progress bar when seek time is substantial..

Nov 20

31

Missed Button ClicksMissed Button Clicks

Case Study Task: Using a paint program, zoom in and crop imageStep 1. Click Zoom toolStep 2. Click in image (zoom)Step 3. Click Selection toolStep 4. Click and drag in image Step 5. Crop

Zoom

Selection

But…Button clicks are frequently missed. I get zooming when I want selection, or selection when I want zooming.

Nov 20

32

Kangaroo EffectsKangaroo EffectsCase Study Task: In a paint program select a region of an image, part of which is outside the viewportStep 1. Click Selection toolStep 2. Click and drag

Select to off-screen region

But…When the selected region hits the edge of the window, the viewport automatically scrolls. But the scroll rate is too fast. The selected region extends far beyond the desired end-point. Attempting to correct this by moving in the reverse direct produces the same problem but in the opposite direction. I end up hopping – like a kangaroo – back and forth trying to get the desired region selected.

Nov 20

33

Speak the User’s Speak the User’s LanguageLanguage

From Environment Canada’s web site…

Case Study Task: Determine weather conditions. Mostly likely you want to know the current weather in your present location.

But…When were these weather conditions gathered? 11:00 UTC, apparently. What is UTC? (The answer is in their FAQ page!)

Nov 20

34

(Not so) Intelligent (Not so) Intelligent DraggingDragging

Case Study Task: In an editor, select a region of text by dragging

Select this region

But…I can’t select the desired region.

I get

Or

Designing for HumansDesigning for Humans

SR Compatibility

Nov 20

36

SR Compatibility – What SR Compatibility – What is it?is it?

S = Stimulus, the input device that is being manipulated or stimulatedR = Response, the visual, aural, or kinesthetic sense that is affected by the stimulusCompatibility refers to the correctness of the match between the stimulus and the response

Nov 20

37

SensesSenses

Visual

Aural

Kinesthetic

Sensory experience derived from bodily movements and tensions

Nov 20

38

Example – Cursor Example – Cursor Control (1D)Control (1D)

Stimulus Response

Wrist and/or arm movement

Nov 20

39

Example – Object Example – Object Manipulation (1D)Manipulation (1D)

Stimulus Response

Nov 20

40

Example – Object Example – Object Manipulation (2D)Manipulation (2D)

Stimulus Response

Stimulus Response

Nov 20

41

The IssueThe Issue

In 2D there are 3 dof (degrees of freedom)x position or displacementy position or displacementZ – z-axis angle or rotation

A mouse is a 2 dof deviceSenses x displacementSenses y displacementDoes not sense z-axis rotation

The problem: generating z-axis rotation data with a mouse

Nov 20

42

Solution #1 – Rotate Solution #1 – Rotate ToolTool

Step #1 – acquire object, move mouse

Step #2 – click on rotate tool (enable rotate mode)

or

?Step #3 – acquire object, move mouse

Nov 20

43

Solution #2 – Build a 3 dof Solution #2 – Build a 3 dof MouseMouse

Stimulus Response

Step #1 – acquire object, move mouse

Nov 20

44

Solution #2 – There it Solution #2 – There it is!is!

(MacKenzie, Soukoreff, & Pal, 1997)

Two-ball mouse with 3 degrees of freedom

Nov 20

45

Design Issues for 3 dof Design Issues for 3 dof mousemouse

Switching between 2 dof and 3 dof modes

Solution: use a modifier key (e.g. SHIFT) to enable 3 dof mode

Yielding 360° of rotation from limited wrist movement

Solution: use a modifier key (e.g. CTRL) to “amplify” rotational mapping

Nov 20

46

3D Interaction (6 dof) 3D Interaction (6 dof)

?

Nov 20

47

SR Compatibility & SR Compatibility & Cultural BiasCultural Bias

Stimulus (switch) Response (switch)

Question:• Is the light on or off?

Answer: • Off (in England)• On (in Canada)

Nov 20

48

SR Compatibility in User SR Compatibility in User InterfacesInterfaces

Press me

Visual feedback?Aural feedback?Kinesthetic feedback?

Visual feedback?Aural feedback?Kinesthetic feedback?

Worksprettygood, eh?

Nov 20

49

Stimulus vs. Response – Stimulus vs. Response – settingsetting timetime

What does this button do?

Answer:• moves the selected field “backwards” in time.

Nov 20

50

Yes, but…Yes, but…

“up” = earlier

“down” = later