Top Banner
3461 Characteristics of Good Interfaces
32

3461 Characteristics of Good Interfaces. 3461 Outline Four characteristics of a good user interface: Consistency Use of hierarchy and grouping

Jan 03, 2016

Download

Documents

Jeremy Marshall
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Characteristics of Good Interfaces

Page 2: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Outline

Four characteristics of a good user interface: Consistency Use of hierarchy and grouping Explicitly shows states and state changes Avoids overload

Page 3: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Consistency

Interface components and layout should be consistent within and across applications

Consistency refers to… Presence and absence of features Physical location of features Appearance of features (widgets, text, icons) Method of accessing features

Page 4: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Presence and Absence of FeaturesWord:

Customize keyboard

Power Point:

Can’t customize keyboard

Page 5: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Recently usedfile list

Word

Presence and Absence of Features (2)

Not available

StatView

Page 6: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Power Point:

Word:

Last entryin list

First entryin list

Physical Location of Features

Page 7: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Windows:

Windows is searchingfor a file

Windows is searchingfor a file

Appearance of Features

Page 8: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

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

Appearance of Features (2)

Page 9: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Method of Accessing FeaturesWord:

From INSERT menu:

From VIEW menu:

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

Page 10: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Method of Accessing Features (2)

Application on the desktop:launch by double click

Application on the toolbar:launch by single click

Page 11: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Outline

Four characteristics of a good user interface: Consistency Use of hierarchy and grouping Explicitly shows states and state changes Avoids overload

Page 12: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Hierarchy and Grouping

Make relationships obvious Provide “headings” to categorize groups of

related items Use

Horizontal separators Borders Labeled borders Alignment

Page 13: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Hierarchy isambiguous

ICQ:

Page 14: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Good sense ofhierarchy and groupings via labeled borders

Yamaha OPL Sound Driver:

Page 15: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Outline

Four characteristics of a good user interface: Consistency Use of hierarchy and grouping Explicitly shows states and state changes Avoids overload

Page 16: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

States and State Changes

The user must Know the state of the system at all times Be informed of state changes

Page 17: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Caps Lock State

If would be nice if Caps Lock were indicated!

Caps Lock

What if Caps Lock is on?

Page 18: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Click here

Eudora:StateChanges

Page 19: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Click here

Notes:1. Compromise:

Bad: position changesGood: all entries appear

2. Animation helps

Eudora:

Page 20: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

State Uncertainty

Cable modem…

POWER CABLE PC TEST RD TD

Receive Data(from where?)

Page 21: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

What is “Receive Data”?

Cable Modem

My PC

Network Server

Receive data

Page 22: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Outline

Four characteristics of a good user interface: Consistency Use of hierarchy and grouping Explicitly shows states and state changes Avoids overload

Page 23: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Overload

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:

Page 24: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Too much to digest without groupings

Eudora:

Page 25: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Colour Overload!

The following people are "offline"

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

ICQ:

Page 26: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Why is this blue?

Why is this purple?

Why is this yellow?

ICQ:

Colour Overload! (2)

Page 27: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Good use ofcolour

Eudora:

Colour Overload! (3)

Page 28: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Color Design Guideline

Color is good for distinguishing things, but not necessarily for coding things.(People have trouble remembering the association of colors to meanings.)

Design your interface in black and white. Add color for emphasis when your design is complete.

Always honor the system color settings. Keep in mind that 5% of males have some degree

of color blindness.

Page 29: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Coffee Maker on/off SwitchOn 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.

Page 30: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

No Confirmation

Click here to “save Windows location” (for next ftp login)

Then what?

Are the changes saved?

WS-Ftp:

Page 31: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

What Do I Do Now?

Where?

Page 32: 3461 Characteristics of Good Interfaces. 3461 Outline  Four characteristics of a good user interface:  Consistency  Use of hierarchy and grouping

3461

Thank you