Design Principles Web Design. Design Principles Contrast Repetition Alignment Proximity.
Design Principles – Part 1 of 3
description
Transcript of Design Principles – Part 1 of 3
1
Design Principles – Part 1 of 3
Introduction
This material has been developed by Georgia Tech HCI faculty, and continues to evolve. Contributors include Gregory Abowd, Jim Foley, Diane Gromala, Elizabeth Mynatt, Jeff Pierce, Colin Potts, Chris Shaw, John Stasko, and Bruce Walker. Comments directed to [email protected] are encouraged. Permission is granted to use with acknowledgement for non-profit purposes. Last revision: February 2012.UI Design - Georgia Tech
UI Design - Georgia Tech 2
Outline
• Introduction• Guidelines / Principles
Learnability– Support for learning for users of all levels
Flexibility– Support for multiple ways of doing tasks
Robustness– Support for recovery
• Design Patterns• Styleguides• Summary
UI Design - Georgia Tech 3
What are Design Principles?
• Rules of thumb to help with the design process
• AKA Design Guidelines, Design Rules
UI Design - Georgia Tech 4
Design Principles - Overview
• Become obvious to user of poorly-designed UIs
• Are easy to ignore• Apply at multiple levels of design• Are neither complete nor orthogonal
Can all be “broken”, often to satisfy another rule
• Have underpinnings in psychology or experience or common sense
UI Design - Georgia Tech 5
Why we Need Design Principles
dilbert
UI Design - Georgia Tech 6
Many Sets of Design Principles
• Norman, Design of Everyday Things• Shneiderman, Designing the User
Interface• Dix, Finlay, Abowd, Beale (DFAB),
Human-Computer Interaction DFAB Taxonomy/terminology used here
• Foley et al, Computer Graphics: Principles and Practice
• And many more - including in styleguides, discussed later
Norman’s Guidelines
• Bridge the gulf of execution and evaluation• Provide affordances• Provide user with a conceptual model that is consistent with
system operation• Make current state visible• Make action alternatives visible• Provide natural mappings• Provide continuous feedback• Use constraints• Use knowledge in the head and knowledge in the world• Design for error• When all else fails, standardize
Shneiderman’s Guidelines
1. Strive for consistency 2. Enable frequent users to use shortcuts3. Offer informative feedback 4. Design dialogs to yield closure 5. Offer error prevention and simple error handling 6. Permit easy reversal of actions 7. Support internal locus of control 8. Reduce short-term memory load
Foley’s Guidelines
• Be consistent• Provide feedback• Minimize error possibilities – don’t
set the user up for a fall• Provide error recovery• Accommodate multiple skill levels• Minimize memorization
UI Design - Georgia Tech 9
UI Design - Georgia Tech 10
DFAB’s Principles (1 of 3)
• Learnability - Ease with which new users can begin effective interaction and achieve maximal performance Predictability Synthesizability Familiarity Generalizability Consistency
UI Design - Georgia Tech 11
DFAB’s Principles (2 of 3)
• Flexibility - Multiplicity of ways that users and system exchange information Dialog Initiative Multithreading Task migratability Substitutivity Customizability
UI Design - Georgia Tech 12
DFAB’s Principles (3 of 3)
• Robustness - Supporting user in determining successful achievement and assessment of goals Observability Recoverability Responsiveness Task Conformance
UI Design - Georgia Tech 13
Concepts, Principles, Guidelines
• No “cookbooks”• No simple, universal checklists• There are many concepts, principles, and
guidelines• Understand the higher level principles that
apply across situations, display types, etc.• Implement the standards and guidelines
…a few details…
UI Design - Georgia Tech 14
Many Principles Apply at Multiple Levels
1. Conceptual (model)2. Semantic (meanings of actions & visual
organizations/encodings - or auditory)3. Syntactic (input sequencing,output
organization)4. Lexical (physical actions, visual encodings)
• Similar toNorman’s,especiallysyntactic & lexical
GoalsWhat we
want to happen
Evaluation of the interpretationswith what we expected to happen
Interpreting the perception accordingto our expectations
Perceiving the stateof the world
An intention to actso as to achieve the goal
The actual sequence of actionsthat we plan to do
The physical execution of that action sequence
UI Design - Georgia Tech 15
The End