05-knowledge of user interface designchate/2143416/04...W3C-WCAG2.0 C. Patanothai 04-Knowledge of...
Transcript of 05-knowledge of user interface designchate/2143416/04...W3C-WCAG2.0 C. Patanothai 04-Knowledge of...
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
C. Patanothai 04-Knowledge of User Interface Design
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
C. Patanothai 04-Knowledge of User Interface Design
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
C. Patanothai 04-Knowledge of User Interface Design
5
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
C. Patanothai 04-Knowledge of User Interface Design
6
4 Psychological Principles
C. Patanothai 04-Knowledge of User Interface Design
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
C. Patanothai 04-Knowledge of User Interface Design
8
4 Psychological Principles
Users Have Difficulty Focusing on More Than One Activity at a Time
C. Patanothai 04-Knowledge of User Interface Design
9
– The Cocktail Party Effect
– Principle of Perceptual Organization • Group like things together
– Principle of Importance • Prominent display for important items
4 Psychological Principles
C. Patanothai 04-Knowledge of User Interface Design
10
It Is Easier to Perceive a Structured Layout
4 Psychological Principles
Gestalt principles a. Proximity
b. Similarity
c. Closure
d. Continuity
e. Symmetry
C. Patanothai 04-Knowledge of User Interface Design
11
Figure-Ground Segregation
C. Patanothai 04-Knowledge of User Interface Design
12
Exercise (5 minutes)
C. Patanothai 04-Knowledge of User Interface Design
13
How well does this web sites support the principles of proximity, similarity, closure, and continuity?
4 Psychological Principles
It Is Easier to Recognize Something Than to Recall It
C. Patanothai 04-Knowledge of User 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
Three Principles from Experience: Visibility, Affordance, and Feedback
C. Patanothai 04-Knowledge of User Interface Design
15
The Principle of Visibility: It Should Be Obvious What a Control Is Used For
Three Principles from Experience: Visibility, Affordance, and Feedback
C. Patanothai 04-Knowledge of User 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
Affordance: actual vs. perceived
C. Patanothai 04-Knowledge of User Interface Design
17
Three Principles from Experience: Visibility, Affordance, and Feedback
C. Patanothai 04-Knowledge of User Interface Design
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
• …
C. Patanothai 04-Knowledge of User Interface Design
19
C. Patanothai 04-Knowledge of User Interface Design
20
Other Principles
• Constraints
• Natural mapping
C. Patanothai 04-Knowledge of User Interface Design
31
Constraints
• Boundary
• Some can be selected, some cannot
• physical vs. logical – cannot move cursor outside the screen
C. Patanothai 04-Knowledge of User Interface Design
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
C. Patanothai 04-Knowledge of User Interface Design
33
Poor Physical Natural Mapping
C. Patanothai 04-Knowledge of User Interface Design
34
Good Physical Natural Mapping
C. Patanothai 04-Knowledge of User Interface Design
35
Logical Mapping
C. Patanothai 04-Knowledge of User Interface Design
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
C. Patanothai 04-Knowledge of User Interface Design
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
C. Patanothai 04-Knowledge of User Interface Design
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
C. Patanothai 04-Knowledge of User Interface Design
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
C. Patanothai 04-Knowledge of User Interface Design
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
C. Patanothai 04-Knowledge of User Interface Design
41
Customized Style Guides
• Helps focus on design issues early
• Enables use of principles and guidelines
• Steer decision making and serve as record
• Ensures consistency
C. Patanothai 04-Knowledge of User Interface Design
42
Accessibility
• Universal design
• W3C Web Content Accessibility Guidelines – http://www.w3.org/standards/webdesign/acce
ssibility
• Section 508
C. Patanothai 04-Knowledge of User Interface Design
43
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.
C. Patanothai 04-Knowledge of User Interface Design
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
C. Patanothai 04-Knowledge of User Interface Design
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
C. Patanothai 04-Knowledge of User Interface Design
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
C. Patanothai 04-Knowledge of User Interface Design
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
C. Patanothai 04-Knowledge of User Interface Design
48
W3C-WCAG2.0
C. Patanothai 04-Knowledge of User 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.
W3C-WCAG2.0
C. Patanothai 04-Knowledge of User Interface Design
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.
C. Patanothai 04-Knowledge of User Interface Design
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
C. Patanothai 04-Knowledge of User Interface Design
52
Section 508
• Web-based Intranet and Internet Information and Applications (1194.22)
• http://www.access-board.gov/sec508/guide/ 1194.22.htm
C. Patanothai 04-Knowledge of User Interface Design
53