Design Rules, Patterns and Guidelines Flashcards
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, …
Example: “Good Defaults” Design Pattern
Example: “Carousel” Design Pattern
Example: Apple Human Interface Guidelines
