5. User-Interface Design

Design Principles – Part 5 of 5

Universal Principles of Design, a book describing 125 interdisciplinary principles, is a fascinating reference. I extract 25 of those principles and offer relevant examples in a series of five blogs.

Today’s topics – user-interface design:

  1. Alignment
  2. Chunking
  3. Comparison
  4. Five Hat Racks
  5. Operant Conditioning


 “The placement of elements such that edges line up along common rows or columns, or their bodies along a common centre.”

AlignmentWhen elements in a design are aligned with other elements, the effect is unity and cohesion, which contribute to the design’s overall appeal and perceived stability. Alignment gives information order and allows a person to navigate the information in an orderly fashion. Data arranged in a chart or grid helps the reader understand the relationships between elements.

In paragraph text, left-aligned or right-aligned content provides opportunities for alignment of other elements. Text that is centred does not provide this organizational cue. For more complex configurations, used justified text.


 “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.”

Grouping numbers together is an example of chunkingA chunk is a unit of information – a series of numbers, a set of letters, or a word. Chunking seeks to package information in small units to ease the load on short-term memory. The maximum number of units that can be processed by short-term memory is 4 +/- 1.

Chunk information for audiences who are required to recall or retain information. In noisy or distracting environments, chunk information to alleviate the load when short-term memory is diminished by stress.


 “A method of illustrating relationships and patterns in system behaviors by representing two or more system variables in a controlled way.”

Comparison3Represent information in controlled ways so that comparisons can easily be made.

Use comparisons to illustrate patterns and relationships of elements to one another. Make sure that the variables of elements are measured in common ways, i.e., apples to apples.

Five Hat Racks

“There are five ways to organize information: category, time, location, alphabet, and continuum.”

Periodic table of chemical elementsTake similar items and tease out one common characteristic (such as category, time, location, alphabet, or continuum) for use as a basis to organize those items.

The periodic table organizes elements by their chemical properties (category).

For an entertaining and educational explanation of the organizational characteristics, view YouTube video Five Hat Racks produced for a university class assignment.

Operant Conditioning

“A technique used to modify behavior by reinforcing desired behaviors, and ignoring or punishing undesired behaviors. ”

OperantConditioning2Operant conditioning is a method of learning that occurs through rewards and punishments for behavior. Through operant conditioning, an association is made between a behavior and a consequence for that behavior.

Operant conditioning is commonly applied to animal training, instructional design, video game design, gambling devices, incentive programs, counselling, and behavioral therapy.

There are three basic operant conditioning techniques: positive reinforcement, negative reinforcement, and punishment.

Positive reinforcement associates a behaviour change with a positive outcome such as an edible treat or monetary reward.

Mouse holding sign that reads "Will press lever for food."

Negative reinforcement rewards a behaviour change with the removal of a negative condition such as the silencing of a car buzzer the moment a seatbelt is buckled.

Punishment decreases the probability of a behaviour by linking the behaviour with a negative condition that costs the learner. A video game player loses points on a given action or a driver pays a fine for a speeding infraction.

Use operant conditioning in situations where behavioural change is desired. It is better to focus on positive and negative reinforcement rather than punishment. Punishment should be reserved for quickly terminating a behaviour or it should not be used at all.

Related articles


4. Product Design

Design Principles – Part 4 of 5

Universal Principles of Design, a book describing 125 interdisciplinary principles, is a fascinating reference. I extract 25 of those principles and offer relevant examples in a series of five blogs.

Today’s topics – product design:

  1. Aesthetic-Usability Effect
  2. Contour Bias
  3. Horror Vacui
  4. Ockham’s Razor
  5. Wabi-Sabi

Aesthetic-Usability Effect

“Aesthetic designs are perceived as easier to use than less-aesthetic designs.”

Aesthetic Usability CarPeople perceive aesthetically pleasing designs to be easier to use than less-aesthetic designs – whether they are or not. The effect has implications for the acceptance, use, and perceived performance of a design.

Aesthetic Usability iPhone

Aesthetic designs are more readily accepted. As a result, people are more tolerant of design problems that arise. Positive feelings towards a design encourage consumer affection, loyalty, and patience – all factors in the acceptance and long-term success of a design.

Aesthetic designs evoke positive feelings leading to ease of use, acceptance, and long-term use. They are purported to promote creative thinking and problem solving.

Contour Bias

“A tendency to favour objects with contours over objects with sharp angles or points.“

Contour Bias KettleContour Bias Kettle

Objects that feature sharp angles or pointed edges activate the region of the human brain that is normally involved in fear processing. This fear response impacts how the object is perceived.

Should all objects be made round to increase their appeal? Some objects naturally carry a positive emotional bias (stuffed animal) or a negative bias (sharp knife). Some are emotionally bias neutral. Biases aside, angled objects elicit a deeper level of processing, but in effect are more interesting to view.

Consider contour bias in designs where environments are emotionally neutral. Pointy and angular items attract attention and provoke thought.

Horror Vacui

“A tendency to favour filling blank spaces with objects and elements over leaving spaces blank or empty.”

Horror VacuiHorror vacui, Latin for “fear of emptiness”, is a desire to fill vacant spaces with information or objects. It is used to describe a style of art and design that leaves no empty space. Examples are newspapers, comic books, and even websites.

Research shows an inverse relationship between horror vacui and value perception: when horror vacui increases, perceived value decreases.

Horror Vacui Shop WindowsHorror Vacui EmptinessIn a survey of clothing stores where merchandise was displayed in a store window, shops filled with mannequins, merchandise, and signage were perceived to have lower prices and less brand prestige. Conversely, high-end boutiques featuring a few items were perceived to be more expensive and have greater status.

For those accustomed to having more, less is more. For those familiar with having less, more is more! Those who have more are generally considered to be well-educated and wealthier; those who have less are considered to be less-educated and poorer.

Market to high-end clients using minimalism and to budget-conscious consumers using horror vacui.

Ockham’s Razor

“Given a choice between functionally equivalent designs, the simplest design should be selected. ”

Ockham's Razor clean living room arrangementI chose this principle because of its unusual name. It is attributed to William of Ockham, a 14th century friar and logician.

When designing a functional item, keep it simple, clean, and pure. Remove unnecessary elements to increase the item’s functionality and efficiency and to reduce unanticipated consequences.

Ikea items, with their trademark simplicity and functionality, characterize the Ockham’s Razor principle.


“Objects and environments that embody naturalness, simplicity, and subtle imperfection achieve a deeper, more meaningful aesthetic.”

Wabi Sabi table and chairsThis is a Japanese philosophy and aesthetic that favours the subtle imperfections of hand craftsmanship (such as a nubby woven wool rug) and beauty achieved over time (such as the smoothness of a weathered outdoor sculpture).

Objects gain value through use and age.

This is an aesthetic that embraces the impermanence, imperfection, and incompleteness found in natural materials and organic forms.

Next: Part 5 – User-Interface Design

Related articles

3. Marketing Design

Design Principles – Part 3 of 5

Universal Principles of Design, a book describing 125 interdisciplinary principles, is a fascinating reference. I extract 25 of those principles and offer relevant examples in a series of five blogs.

Today’s topics – marketing design:

  1. Anthropomorphic Form
  2. Archetypes
  3. Baby-Face Bias
  4. Colour
  5. Red Effect

Anthropomorphic Form

”A tendency to find forms that appear humanoid or exhibit humanlike characteristics appealing.”

Anthropomorphic chair

Bottle dispenser featuring male body form

When human-like forms are applied to design, these forms attract attention and elicit an emotional response. Abstract anthropomorphic forms have greater appeal over realistic body forms.

Anthropomorphic Form productsFeminine body proportions elicit associations with sexuality and vitality. Angular forms elicit masculine associations with power and aggression.

Round anthropomorphic forms suggest baby-like associations with innocence, helplessness, and naiveté.


“Universal patterns of theme and form resulting from innate biases or dispositions.”

Archetype womanArchetype SupermanArchetypes appear in mythology (death and rebirth), literature (hero and villain), and imagery (eyes and teeth). Archetypes are a product of unconscious biases and dispositions that have evolved in popular culture.

Archetypes evoke emotion. When using them, it is important to identify and apply them appropriately to a design. Since archetypes influence perception on a subconscious level, they are useful in situations where language is a barrier. Because the interpretation of archetypes is dependent on varying societal norms, cultural sensitivity must be exercised.

Baby-face Bias

“A tendency to see people and things with baby-faced features as more naïve, helpless, and honest than those with mature features.”

People and things with baby-faced characteristics are perceived as baby like and having baby-like personality attributes of naiveté, helplessness, honesty, and innocence. This principle transcends cultures and age ranges.

Baby-face characteristics include round features, large eyes, small noses, high forehead, and short chins.

Baby Face Bias Puss'n Boots

Baby Face Bias young woman

Baby Face Bias Man

Use baby-face bias to project perceptions of helplessness and innocence. It elicits responses of protectiveness and eagerness to support. In contrast, mature features convey perceptions of knowledge and authority.


“Colour is used in design to attract attention, group elements, indicate meaning, and enhance aesthetics.”

Group of 3 green apples compared to 1 red apple

Colour makes designs more visually interesting and pleasing. It can reinforce the organization and meaning of design elements.

Although there are three light green apples on the left, the strong colour of the red apple counters the visual weight and balances the presentation.

Red Effect

“A tendency to perceive women wearing red as more attractive and men wearing red as more dominant.”

Woman in short red dressRed communicates the fertility of females and the dominance of males in the animal kingdom.

Used to advantage in advertising and product design, females wearing red attract male attention and exude sexuality. Males sporting red signal dominance and power.

Red Effect motorbikeMale authority is also allied with red sports vehicles.

Next: Part 4 – Product Design

2. Instructional Design

Design Principles – Part 2 of 5

Universal Principles of Design, a book describing 125 interdisciplinary principles, is a fascinating reference. I extract 25 of those principles and offer relevant examples in a series of five blogs.

Today’s topics – instructional design:

  1. Advance Organizer
  2. Recognition Over Recall
  3. Rosetta Stone
  4. Storytelling
  5. von Restorff Effect

Advance Organizer

 “An instructional technique that helps people understand new information in terms of what they already know.”

Advance OrganizersAdvance organizers are brief units of spoken or written information that embrace an overall concept. They are presented as context before new information is introduced. Advance organizers help facilitate learning and understanding. Unlike overviews and summaries, advance organizers provide context through the big picture.

There are two types of advance organizers: expository and comparative. Expository advance organizers are used to introduce material that is completely new to an audience. Comparative advance organizers precede information that is similar to information already known by the audience.

Recognition Over Recall

“Memory for recognizing things is better than memory for recalling things.”

People have an easier time recognizing things they have experienced than they do recalling those same things from memory. The reason is that recognition comes from exposure through one or more of the senses. Recollection memory comes from learning using a combination of techniques: memorization, practice, and application – more demanding ways of acquiring memory.

Recognition Over RecallPeople tend to choose a familiar option over an unfamiliar option. Strategic branding exploits this marketing principle.

Maximize recognition by allowing site visitors to select from a menu or choice of options rather than forcing them to recall something completely from memory.

Rosetta Stone

“A technique for communicating novel information using elements of common understanding.”

Rosetta StoneFollowing the loss of ancient Egyptian scripts, Napoleon’s army found an Egyptian artifact in 1799 that contained classical Greek writing and ancient Egyptian writing together.

Uncovered in the town of Rosetta, the artifact became known as the Rosetta Stone. The writings allowed Greek scholars to comparatively translate the Egyptian texts using the Greek writings with which they were familiar.

The Rosetta Stone principle embeds an element of common understanding as a key that the learner already understands to unlock a new, as yet not understood, concept. For more complex concepts, a greater number of keys are embedded.

When presenting website information, start with what the site visitor knows; then introduce new concepts or information.


“A method of creating imagery, emotions, and understanding of events through an interaction between a storyteller and an audience. ”

Storytelling, unique to humans, is the original method of passing knowledge from one generation to another. Storytelling can be oral (spoken tale), visual (movie), or textual (poem).

Image of Steve JobsKorean War Veterans Memorial, Washington, DCKorean War Veterans Memorial, Washington, DCStorytelling is used to engage an audience in a design, to evoke a specific emotional response, or to provide context for learning. The audience recalls the storied events in a personal way, especially if the audience relates to the event from firsthand experience. That experience adds to the entire story.

Digital storytelling has recently emerged as a way of relating information using digital media. The article titled Steve Jobs: his 10 most inspirational quotes written by Andy Bloxham for The Telegraph (Aug 25, 2011) can be considered a type of digital story. As Bloxham says of Jobs’ quotes, “I challenge you not to read them and feel a response.”

For a more traditional method of storytelling, see Steve Jobs’ commencement address to the 2005 graduating class of Stanford University How to Live Before You Die.

In the fall of 2012, I visited the Korean War Veterans Memorial in Washington, DC, an outdoor sculpture exhibit. Walking amongst the life-size figures and reading the war statistics brought these soldiers’ stories to life. It evoked a visceral response.

This is a less traditional, but effective, mode of storytelling.

von Restorff Effect

“A phenomenon of memory in which noticeably different things are more likely to be recalled than common things.”

Fur Cup


Blue pencil among yellow pencils

The von Restorff Effect is the increased probably of remembering an item or event because of its unique characteristics. This is because increased attention is given to distinctive items, especially when viewed in a set.

Use this principle to highlight a key item in a presentation by using boldface or colour. However, use the separating technique sparingly; otherwise the unique separator becomes commonplace.

Unusual words, sentence constructions, and images are better remembered than their more common counterparts. Consequently, this makes them more interesting and thus easier to recall.

Next: Part 3 – User-Interface Design

Related articles

1. Designs in Nature

Design Principles – Part 1 of 5

Universal Principles of Design, a book describing 125 interdisciplinary principles, is a fascinating reference. I extract 25 of those principles and offer relevant examples in a series of five blogs.

Today’s topics – designs in nature:

  1. Biophilia Effect
  2. Desire Line
  3. Fibonacci Sequence
  4. Golden Ratio
  5. Wayfinding

Biophilia Effect

“Environments rich in nature views and imagery reduce stress and enhance focus and concentration.”

Biophilia fall treesExposure to natural environments produces emotional, cognitive, and physical restorative benefits. Nature scenes appear to be the most reliable and consistent source for the general population.

In a long-term study, children who experienced the greatest increase in nature views from their windows made the greatest gains in standard tests of attention.

Biophilia DoorwaysInterestingly, the effect does not require real plants in the environment. Mere images of window views and posters on the wall have the same effect as the real thing.

Why should nature views improve concentration over urban imagery? It seems that the effect is deeply rooted in the brain and arises from an innate preference for green spaces.

Incorporate the biophilia effect in architectural environments where learning, healing, and concentration occur.

Desire Line

 “Traces of use or wear that indicate preferred methods of interaction with an object or environment.”

Desire Line path through treesDesire lines are paths where people walk – the beaten path that evolves as a shortcut to a destination.

The principle is applied more broadly to trace user activity in an object or environment in the real world.

Consider desire lines in projects emphasizing usability. Attempt to detect desire lines prior to finalizing design specifications; they represent user preference and efficiency.

Fibonacci Sequence

 “A sequence of numbers in which each number is the sum of the preceding two.”

Fibonacci Sequence in natureA Fibonacci sequence is a pattern of numbers in which each number is the sum of the two preceding numbers (e.g., 1, 1, 2, 3, 5, 8, 13, 21…). Patterns featuring the sequence occur in natural forms such as flower petals and galaxy spirals.

The Fibonacci sequence is used in conjunction with the closely aligned golden mean design principle.

Fibonacci SequenceThe prevalence of the sequence in nature leads many to speculate that patterns based on the Fibonacci sequence are intrinsically aesthetic.

The sequence is deployed in classical poetry, art, music, architecture, and continues to be a popular pattern in mathematics and design, especially when used to develop rhythms and harmonies among multiple elements.

Golden Ratio

“A ratio within the elements of a form, such as height to width, approximating 0.168. ”

GoldenRatio ShellElements ranging from nature to architecture to modern design show how the golden ratio (also known as the golden mean) has been used to establish an optimum width to height proportion.

Piet Mondrian and Leonardo da Vinci used the golden ratio in their paintings. Stradivari constructed violins based on the golden ratio. Architectural marvels like the Parthenon, the Great Pyramid of Giza, and Stonehenge implemented golden ratio proportions.

And it influences today’s designs of technological gadgets like Apple’s iPhone.

GoldenRatio Mona Lisa

Recently, this principle came in handy when I was searching for a pleasing height to width ratio for a manuscript book design.

It is not known whether the golden ratio was incorporated in early art and architecture because its proportions were explicitly known or because of a subconscious preference for the aesthetic based on observations of nature.

All we know is that historical and current design makes use of this popular aesthetic.


“The process of using spatial and environmental information to navigate to a destination.”

Wayfinding involves four stages:

  1. Orientation – determining location relative to landmarks and signage.
  2. Route Decision – choosing from multiple route options to reach destination.
  3. Route Monitoring – scrutinizing chosen route to establish and confirm that it correctly leads to destination. Paths enable navigator to gauge progress.
  4. Destination Recognition – recognizing the destination.

Wayfinding map

The principles of physical wayfinding are easily translated to web navigation. Notably, the third stage, route monitoring, confirms for site visitors that they are on the right track to their destination.

Next: Part 2 – Instructional Design

Related articles

Design Principles

“Design matters. But design is not about decoration or about ornamentation. Design is about making communication as easy and clear for the viewer as possible.”  Garr Reynolds

25 Principles

I couldn’t wait to crack open my course textbook: Universal Principles of Design (Rockport Publishers, 2010). Authors William Lidwell, Kritina Holden, and Jill Butler identify 125 ways to enhance usability, influence perception, increase appeal, make better design decisions, and teach through design.


The textbook is a reference for designers ranging from architecture to graphics to user-interface. It teems with 125 design principles, some with captivating names like Rosetta Stone or Fibonacci Sequence. Others sound like they are named after the discoverer: Ockham’s Razor or von Restorff Effect. There’s the exotic Wabi-Sabi and wacky Five Hat Racks.

I randomly selected 25 principles that caught my eye. Over the next several weeks, I present each design principle together with an illustration. The principles are grouped into five categories featuring five design principles each.

Designs in Nature

  1. Biophilia Effect
  2. Desire Line
  3. Fibonacci Sequence
  4. Golden Ratio
  5. Wayfinding

Biophilia Bee

Instructional Design

  1. Advance Organizer
  2. Recognition over Recall
  3. Rosetta Stone
  4. Storytelling
  5. von Restorff Effect

Golden Ratio storm clouds

Marketing Design

  1. Anthropomorphic Form
  2. Archetypes
  3. Baby-Face Bias
  4. Colour
  5. Red Effect


Product Design

  1. Aesthetic-Usability Effect
  2. Contour Bias
  3. Horror Vacui
  4. Ockham’s Razor
  5. Wabi-Sabi

Biophilia Tulip

User-Interface Design

  1. Alignment
  2. Chunking
  3. Comparison
  4. Five Hat Racks
  5. Operant Conditioning

So let’s explore this series of principles beginning with Part 1 – Designs in Nature.

Related articles