Design Principles and Rules
Design Principles
1. Visibility
2. Affordances / Signifiers
3. Constraints
4. Mappings
5. Feedback
(General and Abstract)
Rules and Guidelines
1. Golden Rules / Heuristics
2. Standards
3. UI Design Patterns
4. UI Style Guides
(Applied and Actionable)
Types of Design Rules
- Design rules differ in generality and authority
- Generality - rules can apply to many design situations or have narrower focus
- Author - rules can be suggestions, recommendations or strict and testable
- Principles provide general guidance in any user
- But they are hard to evaluate because of their level of abstraction
Types of Design Rules 2
- Golden rules give recommendations - more concrete and actionable than principles
- Standards provided definitions and rules that must be followed
- Design patterns suggest generic solutions for specific problems
- Style guides are a design standard for specific devices, operating systems and UI libraries
What are the Eigh Golden Rules by B. Schneiderman
- Strive for consistency
- Seek universal usability
- Offer informative feedback
- Design dialogues to yield closure
- Prevent Errors
- Permit easy reversal of actions
- Keep users in control
- Reduce short-term memory load
1, Strive for Consistency
“Consistent sequences of actions should be required in similar situations; identical terminology should be used in prompts, menus, and help screens; and consistent colour, layout, capitalization, fonts, and so on, should be employed throughout. Exceptions, such as required confirmation of the delete command or no echoing of passwords, should be comprehensible and limited in number”
- When user interfaces are inconsistent, then it is difficult for users to predict what the effect of certain actions will be
- That increases the gulf of execution: what action do I take to achieve my goal
Internal versus External Consistency
- Internal consistency
a. Consistency within your user interface and application
b. Avoid confusion
c. Increase predictability - External consistency
a. Consistency across applications
b. Use familiar terminology and common UI concepts that people know from other user interfaces
c. Support transfer of knowledge from other applications
Types of Consistency
- Syntactic consistency
- Semantic consistency
- Terminological consistency
Syntactic consistency
- Consistent layout of interface elements
- e.g., OK button always in the same place in a dialog box
Semantic consistency
- Consistent meaning of interface elements
- e.g., OK button always has the same meaning/function
Terminological consistency
- The same function is consistently labelled
- e.g., OK function always has the same name
- Seek universal usability
“Recognize the needs of diverse users and design for plasticity, facilitating transformation of content. Novice to expert differences, age ranges, disabilities, international variations, technological diversity each enrich the spectrum of requirements that guides design. Adding features for novices, such as explanations, and features for experts, such as shortcuts and faster pacing, enriches the interface design and improved perceived quality.”
- Note: plasticity refers to the capacity of a user interface to be adapted
- e.g. responsive web design, to support different size display devices
- Offer informative feedback
“For every user action, there should be an interface feedback. For frequent and minor actions, the response can be modest, whereas for infrequent and major actions, the response should be more substantial.”
- For example, feedback that something is in progress can be subtle.
- Errors are a major incident and need substantial feedback.
- Actions that have a major consequence require substantial feedback.
- Design dialogues to yield closure
“Sequences of actions should be organized into groups with a beginning, middle, and end. Informative feedback at the completion of a group of actions gives users the satisfaction of accomplishment, a sense of relief, a signal to drop contingency plans from their minds, and an indicator to prepare for the next group of actions. For example, e-commerce websites move users from selecting products to the checkout, ending with a clear confirmation page that completes the transaction.”
- Important for actions that are not immediate and span over a long time or multiple steps
- Prevent Errors
“As much as possible, design the interface so that users cannot make serious errors; for example gray out menu items that are not appropriate and do not allow alphabetic characters in numeric entry fields. If users make an error, interface should offer simple, constructive, specific instructions for recovery. For example user should not have to retype an entire name-address form if they enter an invalid zip code but rather should be guided to repair only the faulty part. Errorneous actions should leave the interface unchanged, or the interface should give instructions about restoring the state.”
- Error prevention versus error handling in dialog with the user
- Permit easy reversal of actions
“As much as possible, actions should be reversible. This feature relieves anxiety, since users know that errors can be undone, and encourages exploration of unfamiliar options. The units of reversibility may be a single action, a data-entry task, or a complete group of actions, such as entry of a name-address block”
- Providing UNDO functions: ideally, all actions should be reversible
- Not always possible - Communication (e.g., email), smart environments, machines, cars, …
- Keep users in control
“Experienced users strongly desire the sense that they are in charge of the interface and that the interface responds to their actions. They don’t want surprises or changes in familiar behaviour, and they are annoyed by tedious data-entry sequences, difficulty in obtaining necessary information, and inability to produce their desired result.”
- The system should be predictable
- Current developments are in contrast: AI, intelligent agents, smart environments
- Reduce short-term memory load
“Humans’ limited capacity for information processing in short-term memory requires that designers avoid interfaces in which users must remember information from one display and then use that information of another display. It means that cellphones should not require reentry of phone numbers, web site locations should remain visible and lengthy forms should be compacted to fit a single display.”
- The system should remember, not the user
- Make information that is required visible
- Recognition is easier than recall
Golden Rules - Key Points
- Golden Rules are general but more actionable than design principles
- Derived from experience and refined over time
- Apply generally in many situations but not as a strict rule
- Require interpretation and adjustment for different design contexts
- Shneiderman’s Golden Rules are widely used but there are other sets of rules and heuristics that have the same objective
- See “10 Usability Heuristics for User Interface Design” by J. Nielsen
https://www.nngroup.com/articles/ten-usability-heuristics/
Standards - ISO 9241
Ergonomics of human-system interaction
* Part 1: General introduction
* Part 2: Guidance on task requirements
* Part 3: Visual display requirements
* Part 4: Keyboard requirements
* Part 110: Interaction principles
* Part 210: Human-centered design for interactive systems
* Part 420: Selection procedures for physical input devices
* Part 910: Framework for tactile and haptic interaction
Example: ISO 9241-210
- States principles and defines terminology for user-centered design (UCD)
- Design should be based upon explicit understanding of users, tasks and the environments in which they operate.
- Users must be involved throughout design and development.
- Design should be driven by and refined by user-centred evaluation
- The design process is iterative.
- Design must address the whole user experience.
- Design teams should include multi-disciplinary skills and perspectives
Example: ISO 9241-9
- “Requirements for non-keyboard input devices”
- Covers devices such as mouse, trackpad and other pointing devices
- Includes specification of testing procedures for pointing devices
- 2D Fitts Law task with circular layout of targets
- Defining test procedure and metrics (throughput)
* Clear point of reference for any evaluation of pointing devices
Standrads - Web Content Accessibility Guidelines (WCAG 2.1)
- Recommendations for Web Accessibility
Standrads - Web Content Accessibility Guidelines (WCAG 2.1)
- Recommendations for Web Accessibility
- Layers of Guidance
- Four Principles of Accessbility
- Guidelines: stating goals that authors should work to
- Success criteria: providing criteria that are testable
- Techniques: documenting techniques that meet the criteria
WCAG - Four Principles of Accessibility
- Perceivable - information and user interface components must be presentable to users in ways they can perceive
- Operable - User interface components and navigation must be operable.
- Understandable - Information and the operation of user interface must be understandable
- Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies
-
HCI Introduction17
-
MHP and Time Scales27
-
Vision and Colour21
-
Visual Perception19
-
Movement and Fitts' Law17
-
Input Models20
-
Human Memory19
-
Human Attention19
-
Cognition, Action and Knowledge25
-
Mental Models, Metaphors, Errors23
-
Design Principles24
-
Design Rules, Patterns and Guidelines35
-
Analytical Evaluation44
-
User Feedback43
-
User Studies and UX Metrics35
-
Study Design and Analysis40
-
Intelligent User Interfaces17
-
3D User Interfaces23
-
User Interface Technology24
-
Eye Movement and Gaze as Input18
