Selected Universal Principles of Design

Main Source:
     Universal Principles of Design
W. Lidwell, K. Holden, J. Butler
Rockport Publishers, 2003

• 80/20 Rule
• An approximation that says that 80% of effects are caused by 20% of the features.
e.g., 80% of the work done uses only 20% of the interface, so that 20% had better be clear, fast and easily accessed.
• Accessibility
• Aesthetic-Usability Effect
• Affordance
• The physical characteristics of an object suggest the actions in which they can be involved.
e.g., door handles afford pulling. Affordances should coincide with the intended function. We use knowledge of actual affordances when dealing with icons (e.g., "trash cans") and graphical objects in interfaces (e.g., "buttons").
• Alignment
• Placing elements so that their edges line up.
e.g., typically in rows or columns. Alignment aids grouping (indicating a relationship), and reduces layout complexity.
• Chunking
• Limiting the amount of stress on Short Term Memory by formatting information into a small number of units or chunks.
e.g., seven plus or minus two chunks (or fewer) allow better recall. Chunking is aided by familiarity and easy association, so that "IBM.CIA.FBI" is easier to remember than "MBI.ACI.IFB".
• Closure Law
• The Law of Closure states that missing parts of a shape will automatically be added on perception.
{Not to be confused with Closure during interaction, which allows a user to release items from memory once a section of the interaction process has been completed}.
e.g., a circle constructed of dots will be seen as a circle, and not a collection of dots. This allows the designer to suggest elements that aren't explicitly included, resulting in more interesting designs.
• Color
• Color is a key technique to affect designs.
e.g., use bright colors to attract attention; the same color to suggest grouping; symbolic colors to indicate meaning (e.g., blue with cold); and aesthetic color combinations to increase attractiveness.
• Common Fate
• Comparison
• Relationships and patterns between variables can be detected easily by allowing comparisons.
e.g., Allowing comparison between values, or between a value and a standard, can be perceived directly, removing the need for the user to rely on memory. For example, recognizing the length of a line on the screen is hard without also being able to see the standard lengths as well.
• Confirmation
• Consistency
• System usability is improved when similar things are expressed in similar ways.
e.g., the Quit button is always in the same location on different screens. Consistency makes things easier to learn, and allows transfer of knowledge from one context to another.
• Constraint
• A method of limiting the actions that can be performed.
e.g., greying out menu options that can't be used at that time. Constraints simplify use, and reduce errors. Physical constraints limit physical movement, while psychological constraints limit possible actions by affecting people's view of the situation (e.g., using symbols or conventions).
• Control
• The level of control given to the user should depend on their expertise.
e.g., beginners want "training wheels" when using the interface, with more help and fewer choices. Experts tolerate more complexity, demand more control, and tend to need less assistance.
• Convergence
• Cost-Benefit
• Pursue an activity if its benefits outweigh its costs.
e.g., determine the cost of using an interface and also the benefits, and do an analysis from the user's point of view. If you make the user press too many buttons before they can do what they want they'll see it as too costly. Different interaction methods can be compared by looking at the cost to produce the same benefit.
• Depth of Processing
• Development Cycle
• Entry Point
• Errors
• Expectation Effect
• Expectations affect perception and behavior
e.g., users at an interface will be more prepared to wait for a system to respond if they believe that the processes are complex and will take a long time. Also, the expectations of experimenters often effect the results, so interface evaluations need to be done carefully to reduce bias.
• Exposure Effect
• Factors of Safety
• Feedback Loop
• Figure-Ground Relationship
• Fitt's Law
• The time required to move to a target is a function of the target size and the distance to the target.
e.g., quick, direct movements, such as moving a hand from a keyboard to a mouse, take longer if the target is smaller and the distance is longer. This is an example of the speed-accuracy tradeoff.
• Five Hat Racks
• There are five ways to organize information.
e.g., category, time, location, alphabet, & continuum. Location uses spatial layout, while category uses types. Continuum uses magnitude, such as largest to smallest.
• Flexibility-Usability Tradeoff
• Increased system flexibility decreases usability.
e.g., precisely tailoring an interface to a user/task will increase the usability, but decrease the flexibility, and, conversely, making something flexible makes it less well tailored to a specific situation.
• Forgiveness
• Form Follows Function
• Framing
• Garbage In - Garbage Out
• Golden Ratio
• Good Continuation
• Elements requiring the least changes in connecting lines will be perceived as belonging together.
• Gutenberg Diagram
• Hicks Law
• The time it takes to make a decision increases as the number of available alternatives increases.
e.g., for simple decision-making tasks such as deciding which menu item to select at an interface, more choices will slow the user down.
• Hierarchy
• Highlighting
• Iconic Representation
• Immersion
• Interference Effects
• Inverted Pyramid
• Iteration
• Law of Pragnanz
• Of all geometrical organizations possible, the existing ones will be those of the most stable and simple shape.
• Layering
• Legibility
• Life Cycle
• Mapping
• Mental Model
• People use mental representations, based on experience, to aid them when interacting with systems.
e.g., If we use a metaphor in the interface, such as a trash can, reinforce it by allowing normal trash can operations, such as being able to put things in and also take things out, so that the user can reuse an existing mental model. We also want to influence the user's mental model of how a system works by designing using a strong conceptual model -- i.e., the task objects and actions that we want the user to think in terms of -- and make those visible in the interface.
• Mimicry
• Mnemonic Device
• A mnemonic makes information easier to remember by associating it with well-known words or images that have some connection.
e.g., "Every Good Boy Deserves Fudge" is a mnemonic device to help remember the names of the musical notes that correspond to the lines in the treble clef. Apple's corporate image is a classic example, while Sun Microsystems isn't.
• Modularity
• Normal Distribution
• Ockham's Razor
• Operant Conditioning
• Orientation Sensitivity
• Performance Load
• Performance vs. Preference
• Picture Superiority Effect
• Progressive Disclosure
• Prototyping
• Proximity
• Grouped elements will be perceived as belonging together.
e.g., It is good practice to put controls near the things to which they apply, and away from other things they might control. Also arrange displays about related things near to each other. Proximity can be seen as corresponding to the degree to which things are related. It's often stronger than similarity.
• Readability
• Recognition Over Recall
• People find it easier to recognize things than to recall them.
e.g., The recognition task provides cues that can be used to retrieve items from memory. It's easier to remember that we have heard or seen something before than to learn enough about it so that we can recall it. The moral is that showing the interface options is usually better than asking the user to recall them.
• Redundancy
• Rule of Thirds
• Designing to a Grid.
• Satisficing
• Scaling Fallacy
• Serial Position Effects
• Signal-to-Noise Ratio
• Similarity
• The Law of Similarity states that similar elements will be perceived as belonging together.
e.g., Using similar colors, sizes or shapes can influence the perception of grouping. Shape provides the weakest cue. Lack of similar elements tends to suggest complexity and disorder.
• Symmetry
• Three-Dimensional Projection
• Top-Down Lighting Bias
• Uncertainty Principle
• Uniform Connectedness
• Visibility
• von Restorff Effect
• Wayfinding