05-knowledge of user interface designchate/2143416/04...W3C-WCAG2.0 C. Patanothai 04-Knowledge of User Interface Design 49 Principle 2: Operable - User interface components and navigation

User Interface Design

Lecture 4

Knowledge of User Interface Design

What to click, Yes or No?

C. Patanothai 04-Knowledge of User Interface Design

2

Knowledge Types for UI Design

• Information-gathering activities

• User interface design knowledge,

from theory (cognitive psychology),

and experience


3

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


4

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


5

http://www.asktog.com/basics/firstPrinciples.html

http://www.usask.ca/education/coursework/skaalid/theory/interface.htm

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


6



7

Users See What They Expect to See

What do you see?

• Principle of consistency – throughout the UI

• Principle of exploiting prior knowledge – users perceive the screen using their prior

knowledge


8


Users Have Difficulty Focusing on More Than One Activity at a Time


9

– The Cocktail Party Effect

– Principle of Perceptual Organization • Group like things together

– Principle of Importance • Prominent display for important items



10

It Is Easier to Perceive a Structured Layout


Gestalt principles a. Proximity

b. Similarity

c. Closure

d. Continuity

e. Symmetry


11

Figure-Ground Segregation


12

Exercise (5 minutes)


13

How well does this web sites support the principles of proximity, similarity, closure, and continuity?


It Is Easier to Recognize Something Than to Recall It


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

Three Principles from Experience: Visibility, Affordance, and Feedback


15

The Principle of Visibility: It Should Be Obvious What a Control Is Used For



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

Affordance: actual vs. perceived


17



18

The Principle of Feedback: It Should Be Obvious When a Control Has Been Used

Discussion

• Principles to support usability, for example, – learnability

• simplicity

• predicability

• …


19


20

Other Principles

• Constraints

• Natural mapping


31

Constraints

• Boundary

• Some can be selected, some cannot

• physical vs. logical – cannot move cursor outside the screen


32

Natural Mapping

• Mapping should match functionality

• direct is the best

• natural mapping does not have to be direct – light switch

– oven control

– turn signal


33

Poor Physical Natural Mapping


34

Good Physical Natural Mapping


35

Logical Mapping


36

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


37

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


38

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


39

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


40

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


41

http://developer.apple.com/library/ios/



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




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




http://developer.android.com/guide/practices/ui_guidelines/index.html

http://developer.android.com/guide/practices/ui_guidelines/index.html

Customized Style Guides

• Helps focus on design issues early

• Enables use of principles and guidelines

• Steer decision making and serve as record

• Ensures consistency


42

Accessibility

• Universal design

• W3C Web Content Accessibility Guidelines – http://www.w3.org/standards/webdesign/acce

ssibility

• Section 508


43

http://www.w3.org/standards/webdesign/accessibility

http://www.w3.org/standards/webdesign/accessibility

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.


44

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


45

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


46

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


47

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


48

W3C-WCAG2.0


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.

W3C-WCAG2.0


50

Principle 3:

Understandable -

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.

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.


51

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


52

http://www.section508.gov/

Section 508

• Web-based Intranet and Internet Information and Applications (1194.22)

• http://www.access-board.gov/sec508/guide/ 1194.22.htm


53

Documents

05-knowledge of user interface designchate/2143416/04...W3C-WCAG2.0 C. Patanothai 04-Knowledge of User Interface Design 49 Principle 2: Operable - User interface components and navigation