Universal Principles of Design

Universal Principles of Design is a must-read for designers. The principles of design provided in the text are valuable. The book is organized, well-written, concise and features a great resource for reference. While reading, I can’t help myself to make notes, highlight and bookmark the pages. As a web designer, I found this book extremely useful; therefore, I jotted down the following principles that applied to web design:

80/20 Rule

A high percentage of effects in any large system are caused by a low percentage of variables.
80 percent of innovation comes from 20 percent of the people.
Use the 80/20 rule to access the value of elements, target areas of redesign and optimization, and focus resources in an efficient manner.

Accessibility

Objects and environments should be designed to be usable, without modification, by as many people as possible.
There are four characteristics of accessible designs: perceptibility (textual, iconic, and tactile), operability (wheelchair access), simplicity (remove unnecessary complexity), and forgiveness (controls that can only be used the correct way).

Advance Organizer

An instructional technique that helps people understand new information in terms of what they already know.
There are two kinds of advanced organizers: expository (presenting novel information) and comparative (presenting information that is similar to what people know).

Aesthetic-Usability Effect

Aesthetic designs are perceived as easier to use than less-aesthetic designs. Aesthetic designs also foster positive relationships with people, making them more tolerant of problems with a design.

Alignment

The placement of elements such that edges line up along common rows or columns, or their bodies along a common center.
Use left- or right-justified text to create the best alignment cues, and consider justified text for complex compositions.

Chunking

A technique of combining many units of information into a limited number of units or chunks, so that the information is easier to process and remember. Do not chunk information that is to be search or scanned.

Closure

A tendency to perceive a set of individual elements as a single, recognizable pattern, rather than multiple, individual elements.
Use closer to reduce the complexity and increase the interestingness of designs.

Color

Color is used in design to attract attention, group elements, indicate meaning, and enhance aesthetics.
Number of colors – Use color conservatively. Limit the palette to what the eye can process at one glance (about five colors depending on the complexity of the design).
Color combinations – Achieve aesthetic color combinations by using adjacent colors on the color wheel.
Saturation – Use saturated colors when attracting attention is the priority. Use desaturated colors performance and efficiency are the priority.
Symbolism – Verify the meaning of colors and color combinations for a particular target audience prior to use.

Confirmation

A technique for preventing unintended actions by requiring verification of the actions before they are performed.
Use confirmations to minimize errors in the performance of critical or irreversible operations.

Consistency

The usability of a system is improved when similar parts are expressed in similar ways.
Use aesthetic consistency to establish unique identities that can be easily recognized.

Constraint

A method of limiting the actions that can be performed on a system.
Use constraint in design to simplify usability and minimized errors.

Cost-Benefit

An activity will be pursued only if its benefits are equal to or greater than the costs.
Consider cost-benefit principle in all aspect of design. Verify cost-benefit perceptions of target populations through careful observations, focus group, and usability tests.

Development Cycle

Successful products typically follow four stages of creation: requirements, design, development, and testing.

Entry Point

A point pf physical or attentional entry into a design.
Maximize the effectiveness of the entry point in a design by reducing barriers, establishing clear points of prospect, and using progressive lures.

Errors

An action or omission of action yielding an unintended result.
Always incorporate the principle of forgiveness into a design.

Five Hat Racks

There are five ways to organize information: category (similarity relatedness), time (chronological sequence), location (geographical or spatial references), alphabet (alphabetical sequence), and continuum (magnitude ? highest to lowest, best to worse).

Good Continuation

Elements arrange in a straight line or a smooth curve are perceived as a group, and are interpreted as being more related than elements not on the line or curve.
Use good continuation to indicate relatedness between elements in a design.

Hierarchy

Hierarchical organization is the simplest structure for visualizing and understanding complexity.
There are three basic ways to visually represent hierarchy: trees, nests, and stairs.

Hierarchy of Needs

In order for a design to be successful, it must meet people’s basic needs before it can attempt to satisfy higher-level needs.
The five key levels of needs in the hierarchy are: functionality, reliability, usability, proficiency, and creativity.

Highlighting

A technique for bringing attention to an area of text or image.
Bold, italics, underlining, use of typeface, color, inversing and blinking.

Iconic Representation

The use of pictorial images to improve the recognition and recall of signs and controls.
Use example icons when representations are complex. Generally, icons should be labeled and share a common visual motif (style and color) for optimal performance.

Layering

The process of organizing information into related groupings in order to manage complexity and reinforce relationships in the information.
There are two basic kinds of layering: two-dimensional (use 2D layering to manage complexity and direct navigation through information) and three-dimensional (use 3D layering to elaborate information and illustrate concepts without switching contexts).

Legibility

The visual clarity of text, generally based on the size, typeface, contrast, text block, and spacing of the characters used.

Mimicry

The act of copying properties of familiar objects, organism, or environments in order to realize specific benefits afforded by those properties.
Mimicry is perhaps the oldest and most efficient method for achieving major advances in design. Consider surface mimicry for to improve usability.   Consider behavioral mimicry to improve likeability. Consider functional mimicry to assist in solving mechanical and structural problems.

Ockham’s Razor

Given a choice between functionally equivalent designs, the simplest design should be selected.
Implicit in Ockham’s razor is the idea that unnecessary elements decrease a design’s efficiency, and increase the probability of unanticipated consequences.

Readability

The degree, to which prose can be understood, based on the complexity of words and sentences.
Complex information requires the simplest presentation possible, so that the focus is on the information rather than the way it is presented.
For enhance readability, omit needless words and punctuation, but be careful not to sacrifice meaning or clarity in the process. Avoid acronyms, jargon, and untranslated quotations in foreign languages. Keep sentence length appropriate for the intended audience.

Scaling Fallacy

A tendency to assume that a system that works at one scale will also work at a smaller or larger scale.
Minimize incorrect interaction assumptions through careful research of analogous designs, and monitoring of how the design is used once implemented.

Similarity

Elements that are similar are perceived to be more related than elements that are dissimilar.
Use similarity to indicate relatedness among elements in a design.

Symmetry

A property of visual equivalence among elements in a form.
There are three basic types of symmetry: reflection (the mirroring of an equivalent element around a central axis or mirror), rotation (the rotation of equivalent elements around a common center), and translation (the location of equivalent elements in different areas of space).
Symmetry is the most basic and enduring aspect of beauty. Use symmetry in design to convey balance, harmony, and stability.

Visibility

The usability of a system is improved when its status and methods of use are clearly visible.

(Repost from 11/04/03)

Note