Lecture 4 Knowledge of User Interface Design

(1)

User Interface Design

Lecture 4

Knowledge of User Interface Design

(2)

What to click, Yes or No?

C. Patanothai 04-Knowledge of User

Interface Design 2

(3)

Knowledge Types for UI Design

• Information-gathering activities

• User interface design knowledge,

from theory (cognitive psychology), and experience

Interface Design 3

(4)

Minimizing work

• Cognitive work

– comprehension of product behaviors

• Memory work

– recall of product behaviors, commands, names and locations of objects and controls and other

relationships between objects

• Visual work

– where the eye should start on a screen, finding object, decoding layouts

• Physical work

– keystrokes, mouse movement, gesture (click, drag, double-click), switching between input modes, # of clicks required

Interface Design 4

(5)

Design Knowledge

• Design Principles

– derived from experience – abstract, high-level guides – general, difficult to apply

– First Principles of Interactive Design

• Design Rules

– low-level

– high specific instruction – 8 Golden Rules

Interface Design 5

(6)

4 Psychological Principles

• Users see what they expect to see

• Users have difficulty focusing on more than one activity at a time

• It is easier to perceive a structured layout

• It is easier to recognize something that to recall it

Interface Design 6

(7)

Interface Design 7

 Users See What They Expect to See

(8)

What do you see?

• Principle of consistency

– throughout the UI

• Principle of exploiting prior knowledge

– users perceive the screen using their prior knowledge

Interface Design 8

(9)

4 Psychological Principles

 Users Have Difficulty

Focusing on More Than One Activity at a Time

Interface Design 9

– The Cocktail Party Effect

– Principle of Perceptual Organization

• Group like things together

– Principle of Importance

• Prominent display for important items

(10)

4 Psychological Principles

Interface Design 10

 It Is Easier to Perceive a Structured

Layout

(11)

Gestalt principles

a. Proximity b. Similarity c. Closure d. Continuity e. Symmetry

Interface Design 11

(12)

Figure-Ground Segregation

Interface Design 12

(13)

Exercise (5 minutes)

Interface Design 13

How well does this web

sites support the principles

of proximity, similarity,

closure, and continuity?

(14)

 It Is Easier to Recognize Something Than to Recall It

Interface Design 14

• Knowledge in the head & Knowledge in the world

• Principle of recognition exceptions

• expert prefer key combinations

• routine operator don’t like to read the

same info. repeatedly

(15)

Three Principles from Experience:

Visibility, Affordance, and Feedback

Interface Design 15

The Principle of Visibility: It Should Be

Obvious What a Control Is Used For

(16)

Three Principles from Experience:

Interface Design 16

The Principle of Affordance: It Should Be Obvious How a Control Is Used

- affordance :

strong clues to operations of things

- no picture, label, or instruction is

required

(17)

Affordance: actual vs. perceived

Interface Design 17

(18)

Three Principles from Experience:

Interface Design 18

The Principle of Feedback: It Should Be

Obvious When a Control Has Been Used

(19)

Discussion

• Principles to support usability, for example,

– learnability

• simplicity

• predicability

• …

Interface Design 19

(20)

Interface Design 20

(21)

Other Principles

• Constraints

• Natural mapping

Interface Design 31

(22)

Constraints

• Boundary

• Some can be selected, some cannot

• physical vs. logical

– cannot move cursor outside the screen

Interface Design 32

(23)

Natural Mapping

• Mapping should match functionality

• direct is the best

• natural mapping does not have to be direct

– light switch – oven control – turn signal

Interface Design 33

(24)

Poor Physical Natural Mapping

Interface Design 34

(25)

Good Physical Natural Mapping

Interface Design 35

(26)

Logical Mapping

Interface Design 36

(27)

8 Golden Rules

• Strive for consistency

• Enable frequent users to use shortcuts

• Offer informative feedback

• Design dialog to yield closure

• Offer simple error handling

• Permit easy reversal of actions

• Support internal locus of control

• Reduce short-term memory load

Interface Design 37

(28)

Sources of Design Guidance

• standard

– set of internationally agreed design principles, or approaches

• design guidelines

– between design principles & design rules

• style guide

– collection of design rules

Interface Design 38

(29)

User Interface Standards

• ISO 9241: Ergonomic requirements for office work with visual display

terminals (VDTs)

• ISO 14915: Software ergonomics for multimedia user interfaces

• ISO 13407: Human-centered design processes for interactive systems

• ISO/CD 20282: Ease of operation of everyday products

Interface Design 39

(30)

Style Guides

• Description of required interaction styles and user interface controls

• Guidance on when and how to use the various styles or controls

• Illustrations of styles and controls

• Screen templates

Interface Design 40

(31)

Commercial Style Guides

• iOS Human Interface Guidelines

– http://developer.apple.com/library/ios/#documentation/userexp erience/conceptual/mobilehig/Introduction/Introduction.html

• Windows User Experience (UX) Interaction Guidelines

– http://msdn.microsoft.com/en-us/library/aa511258.aspx

• GNOME Human Interface Guidelines

– http://developer.gnome.org/hig-book/stable/

• Motif Style Guide

– http://www.opengroup.org/motif/motif.data.sheet.htm

• Sun’s Java Look and Feel

– http://java.sun.com/products/jlf/ed2/book/index.html

• Android User Interface Guidelines

– http://developer.android.com/guide/practices/ui_guidelines/inde x.html

Interface Design 41

(32)

Customized Style Guides

• Helps focus on design issues early

• Enables use of principles and guidelines

• Steer decision making and serve as record

• Ensures consistency

Interface Design 42

(33)

Accessibility

• Universal design

• W3C Web Content Accessibility Guidelines

– http://www.w3.org/standards/webdesign/acce ssibility

• Section 508

Interface Design 43

(34)

Universal Design

…the design of products and

environments to be usable by all people, to the greatest extent

possible, without the need for adaptation or specialized

design.

Ron Mace, Center for Universal Design, NCSU.

Interface Design 44

(35)

The Principles of Universal Design

• Equitable use

• Flexibility in use

• Simple and intuitive use

• Perceptible information

• Tolerance for error

• Low physical effort

• Size and space for approach and use

Interface Design 45

(36)

W3C Web Content Guidelines

• W3C WCAG 1.0

– 14 general principles of accessible design 1. Provide alternatives to auditory and visual

content

2. Don’t rely on color alone

3. Use markup and style sheets properly 4. Clarify natural language usage

5. Create tables that transform gracefully

6. New technology pages transform gracefully

Interface Design 46

(37)

W3C Web Content Guidelines

7. Ensure user control of time-sensitive content changes

8. Ensure direct accessibility of embedded user interfaces

9. Design for device independence

10. Use interim solutions (for older browsers to function)

11. Use W3C technologies and guidelines

12. Provide context and or entation information 13. Provide clear navigation mechanisms

14. Ensure that documents are clear and simple

Interface Design 47

(38)

W3C-WCAG2.0

Principle

1: Perceivable -

Information and user interface

components must be presentable to users in ways they can perceive.

Guideline 1.1 Text alternatives Guideline 1.2 Time-bases media Guideline 1.3 Adaptable

Guideline 1.4 Distinguishable

Interface Design 48

(39)

W3C-WCAG2.0

Interface Design 49

Principle

2: Operable - User interface components and navigation must be operable.

Guideline 2.1 Keyboard Accessible: Make all functionality available from a keyboard.

Guideline 2.2 Enough Time: Provide users enough time to read and use content.

Guideline 2.3 Seizures: Do not design content in a way that is known to cause seizures.

Guideline 2.4 Navigable: Provide ways to help

users navigate, find content, and

determine where they are.

(40)

W3C-WCAG2.0

Interface Design 50

Principle

3: Understanda ble -

Information and the operation of user interface must be

understandable.

Guideline 3.1 Readable: Make text content readable and understandable.

Guideline 3.2 Predictable: Make Web pages

appear and operate in predictable ways.

Guideline 3.3 Input Assistance: Help users avoid and correct mistakes.

(41)

W3C-WCAG2.0

Principle

4: Robust -

Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

Guideline 4.1

Compatible: Maximize compatibility with current and future user

agents, including assistive technologies.

Interface Design 51

(42)

Section 508

• www.section508.gov

• U.S. directive

• electronic and information technology that is developed, procured,

maintained, and/or used by federal departments and agencies must be accessible and usable by federal

employees and members of the public with disabilities

Interface Design 52

(43)

Section 508

• Web-based Intranet and Internet

Information and Applications (1194.22)

• http://www.access-

board.gov/sec508/guide/

1194.22.htm

Interface Design 53