Designing for Humans. Nov 202 Outline Four characteristics of a good user interface: Consistency Use...
-
Upload
cornelius-mcdaniel -
Category
Documents
-
view
213 -
download
0
Transcript of Designing for Humans. Nov 202 Outline Four characteristics of a good user interface: Consistency Use...
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
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
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
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
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
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
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
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.