ui foibles - york university...8 interaction with features - 4 keyboard mnemonics (underline) always...
TRANSCRIPT
1
UI Foibles
What when wrong?
Outline
Four characteristics of a good user interface: Consistency
Use of hierarchy and grouping
Explicitly show states and state changes
Avoids overload
2
Consistency
Consistency refers to…1. Presence of features
2. Location of features
3. Appearance of features (widgets, text, icons)
4. Interaction with features
1. Required within applications1 and across applications2
1 Easy (You are in charge!)2 Hard (Who’s in charge? Standards? Baseline? Legacy vs. New?)
Presence/Absence of Features - 1
Word Power Point
Customize keyboard Can’t customize keyboard
3
Presence/Absence of Features - 2
Recently usedfile list Not available
Word StatView
Location of Features - 1
Power Point:
Word:
Bottom of list
Top of list
“All files” option indifferent locations
Fixed!(now at top)
4
Location of Features - 2
View and Format menus indifferent locations
Location of Features - 3
Progress Indicators
Next page Click link
Print file
Note: The user’s attention (i.e., location of last click) is in a different location from the progress indicator. Suggestion: A consistent, translucent, non-blocking, PI in the centre of the screen
FTP transfer
5
Appearance of Features - 1
Windows is searching for a file
Windows is searching for a file
Windows:
Appearance of Features - 2
Consistent (i.e., same) size within a group is aesthetically pleasing
6
Interaction with Features - 1Insert Page Numbers
Word: From INSERT menu:
From VIEW menu:
Two ways to insertpage numbers!Are they the same?
Interaction with Features - 2
Application on the desktop:launch by double click
Application on the toolbar:launch by single click
Launch application
7
Single Click or Double Click?Eudora
MS Word
Go to link with Double click
Go to link with Single click
Interaction with Features - 3Print from alternate tray
8
Interaction with Features - 4
Keyboard mnemonics(underline) always visible
Keyboard mnemonics(underline) hidden untilALT key is pressed
Note: There is a system parameter to control this, but it does not work on all applications.
Interaction with Features - 5
Task: Spell check a single word
A dialog asks if you wish tospell check the rest of thedocument
MS Power Point – No dialog! Just continues checking the rest of the document
9
Interaction with Features - 6
When closing an application, should we be asked… Save changes?
Discard changes?
If you are in a bit of a hurry, you might answer “yes” before carefully reading the dialog
(This example is in Cooper, page14)
Interaction with Features - 8
Task: Scroll with mouse wheel
Eclipse: Windows Explorer:
1. Mouse-over2. Scroll
1. Mouse-over2. Click3. Scroll
10
Interaction with Features - 9
Task: Enter data, advance to next fieldAeroplan.com: http://www.ontario.ca/serviceontario:
1. Enter data
1. Enter data2. Tab
(focus advances automatically)
NOTE: This example appears in Chapter 3 (Interaction Elements, Figure 3.45, p. 114) of…
Human-Computer Interaction: An Empirical Research Perspective
https://www.library.yorku.ca/find/Record/3125792Free access to York University Students (click here)
Interaction With Features - 10
What does this button do?
1. Click “Clear Now”
2. Click “Cancel”
Remember…“Appearance of Features”
11
Outline
Four characteristics of a good user interface: Consistency
Use of hierarchy and grouping
Explicitly show states and state changes
Avoids overload
Hierarchy and Grouping
Make relationships obvious
Provide “headings” to categorize groups of related items
Use Horizontal separators
Borders
Labeled borders
Alignment
12
ICQ:
Hierarchy isambiguous
Online” and “Offline” entries are indented.
CBC Television Guide:
13
Or…
NHL Schedule
How would you improve this?
14
Yamaha OPL Sound Driver:
Good sense ofhierarchy andgroupings via
labeled borders
Google Earth:
15
Outline
Four characteristics of a good user interface: Consistency
Use of hierarchy and grouping
Explicitly show states and state changes
Avoids overload
States and State Changes
The user must Know the state of the system at all times
Be informed of state changes
16
Progress Indicators
Has my command started?
Is my command completed?
Is the system hung?
What’s happening?
(examples shown earlier)
Caps Lock StateIf would be nice if CapsLock were indicated!
What if Caps Lock is on?
17
Caps Lock State (2)Caps Lock off Caps Lock on
CIBC
XP
State Uncertainty
Cable modem…
18
What is “Receive Data”?
Outline
Four characteristics of a good user interface: Consistency
Use of hierarchy and grouping
Explicitly shows states and state changes
Avoids overload
19
Overload
From Miller’s famous essay…
The magical number seven plus or minus two!
Refers to the number of items a human can reasonably process at once
Reference: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.
Eudora:
Too much todigest withoutgroupings
Feature/option Overload:
20
Colour Overload!ICQ:
The followingpeople are "offline"
Painted in red to indicate"offline" (but we alreadyknow that!)
Colour Overload! (2)ICQ:
Why is this blue?
Why is this purple?
Why is this yellow?
21
Colour Overload! (3)Eudora:
Good use ofcolour
Windows Media Player -Progress While Burning a CD
Can you read this?(I can’t!)
22
Color Example
Post Script – a few quibbles!
23
No ConfirmationWS-Ftp:
Are the changes saved?
Click here to“save Windows location”(for next ftp login)
Then what?
What Do I Do Now?
Where?
24
Design Challenge
Design a display to present the scores of sportsmatches. Things to consider: the score, teamsnames, home/visitor status, informationalignment, use of colour to provide a visual clueon “win” vs. “loss”.
Leafs 3 vs. Canadiens 0
Bruins 3 vs. Rangers 7
Black Hawks 1 vs. Red Wings 0
Avalanche 4 vs. Flyers 5
Speak the User’s LanguageFrom Environment Canada’sweb site…
Case StudyTask: Determine weather conditions. Mostlylikely you want to know the current weather inyour present location.
But…When were these weather conditionsgathered? 11:00 UTC, apparently.What is UTC? (The answer is in theirFAQ page!)
25
Speak the User’s Language (2)
Preserve existing volume mount points!!!
(Not so) Intelligent Dragging
Case StudyTask: In an editor, select a regionof text by dragging
Select this region
26
Time-dependent Foibles
Many UI problems are aptly revealed in static imagines (see previous slides)
But many UI problems are time-dependent; i.e., they are revealed in examining a sequence of events (actions and responses)
Some follow
The Dead Zone!(no feedback)
Case Study – When a file is copied to a folder, feedback in the form of aprogress bar is presented during copying – but only if the file is large and theoperation takes several seconds, or more. This is fine. However, the progressbar only appears when copying begins. If the source file is on a local harddrive, copying begins “immediately” because the seek time – the time the findthe 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. Thisoccurs because there is no progress bar during the seek time. The designersassumed the seek time is negligible (true most of the time) and, therefore, noprovision was made to include a progress bar when seek time is substantial..
27
Kangaroo EffectsCase StudyTask: In a paint program select a region of animage, 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, theviewport 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 directproduces the same problem but in the opposite direction. I endup hopping – like a kangaroo – back and forth trying to get thedesired region selected.
Jump Scrolling
Jump scrolling: There is a minimum scrolling distance when using themouse wheel (see above). Reading a document is very difficult.Smooth scrolling is possible by dragging the scroll bar elevator.
28
Can’t Follow Instructions
?
Answer a Call
Answer a call on my cordless phone at home: Pick up the phone
Press the “big button”
Answer a call on the cordless phone at my sister’s cottage: Pickup the phone
(Press the “big button” and the call is terminated!)
29
Can’t Find Things
I would like to turn off “automatic hyphenation” in MS Word
Where is it? Tools | Options | Edit (sounds reasonable)
Tools | Language (Hmmm, why there?)
Focus Advancement
When entering data in multiple fields with constrained input, does focus automatically advance, or must the user press TAB?
Answer: ???
(www.aeroplan.com) (www.sunlife.ca)
Focus automatically advances User must press TAB
30
Wouldn’t it be nice if…
… when I open a file, the dialog does *not* start at a directory that I’ve never used!
31
Thank you