1

UI Foibles

What when wrong?

Outline

Four characteristics of a good user interface: Consistency

Use of hierarchy and grouping

Explicitly shows 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

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

Interaction with Features - 1Insert Page Numbers

Word: From INSERT menu:

From VIEW menu:

Two ways to insertpage numbers!Are they the same?

6

Interaction with Features - 2

Application on the desktop:launch by double click

Application on the toolbar:launch by single click

Launch application

Single Click or Double Click?Eudora

MS Word

Go to link with Double click

Go to link with Single click

7

Interaction with Features - 3Print from alternate tray

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.

8

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

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)

9

Interaction with Features - 8

Task: Scroll with mouse wheel

Eclipse: Windows Explorer:

1. Mouse-over2. Scroll

1. Mouse-over2. Click3. Scroll

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)

10

Interaction With Features - 10

What does this button do?

1. Click “Clear Now”

2. Click “Cancel”

Remember…“Appearance of Features”

Outline

Four characteristics of a good user interface: Consistency

Use of hierarchy and grouping

Explicitly shows states and state changes

Avoids overload

11

Hierarchy and Grouping

Make relationships obvious

Provide “headings” to categorize groups of related items

Use Horizontal separators

Borders

Labeled borders

Alignment

ICQ:

Hierarchy isambiguous

Online” and “Offline” entries are indented.

12

CBC Television Guide:

Or…

13

NHL Schedule

How would you improve this?

Yamaha OPL Sound Driver:

Good sense ofhierarchy andgroupings via

labeled borders

14

Google Earth:

Outline

Four characteristics of a good user interface: Consistency

Use of hierarchy and grouping

Explicitly shows states and state changes

Avoids overload

15

States and State Changes

The user must Know the state of the system at all times

Be informed of state changes

Progress Indicators

Has my command started?

Is my command completed?

Is the system hung?

What’s happening?

(examples shown earlier)

16

Caps Lock StateIf would be nice if CapsLock were indicated!

What if Caps Lock is on?

Caps Lock State (2)Caps Lock off Caps Lock on

CIBC

XP

17

State Uncertainty

Cable modem…

What is “Receive Data”?

18

Outline

Four characteristics of a good user interface: Consistency

Use of hierarchy and grouping

Explicitly shows states and state changes

Avoids overload

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.

19

Eudora:

Too much todigest withoutgroupings

Feature/option Overload:

Colour Overload!ICQ:

The followingpeople are "offline"

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

20

Colour Overload! (2)ICQ:

Why is this blue?

Why is this purple?

Why is this yellow?

Colour Overload! (3)Eudora:

Good use ofcolour

21

Windows Media Player -Progress While Burning a CD

Can you read this?(I can’t!)

Color Example

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?)

Wouldn’t it be nice if…

30

… when I open a file (on Windows Explorer), the dialog does *not* start at a directory that I’ve never used!

… a feature I use here

automatically appears here

31

… when I press Back

Firefox (consistently and always) returns me to the last screen I was viewing … rather than

… this application figured out that I never save files in this format

…and instead defaulted to the format I last used (or most frequently use).

32

Thank you