Visual-design principles in practice: A team self-assessment

Online, I found a lecture about user-experience design that Jeremy Lyon gave to software developers at Stanford University. Lyon explained how important it is for the software’s visual design to reinforce the software’s use and meaning. He listed five principles that he applies:

  • Balance.
  • Rhythm.
  • Dominance.
  • Motion.
  • Unity.

For fun, I decided to use these five visual-design principles to assess a recent project I worked on with a team of developers. In this article, I’m only illustrating a small portion of our design—an application that helps people set up a corporate event, issue formal invitations, and then track all related communication that results.

Balance

Lyon told his students that balance reduces friction from the extra processing the brain must do when elements are out of balance, visually. In this illustration, the group of boxes is imbalanced because one button sticks out beyond the boxes:

These elements are visually unbalanced.

In contrast, in our design we visually balanced the boxes and button:

The elements are visually balanced.

Rhythm

A common way to create visual rhythm, Lyon said, is by repetition. When a visual detail gets repeated, it increases predictability. One example of visual rhythm is a list, another is a data-entry form that has a series of boxes. Rhythm comes from a regular a visual beat: consistent spacing, consistent weight, consistent colour, and so on. During development, the rhythm of our software’s user interface was disrupted by the uneven spacing of the boxes and labels:

These elements are not rhythmically spaced.

During development, we noticed this problem, and we fixed it by aligning and evenly spacing the boxes and labels.

Dominance

In some user interfaces, sometimes one element needs to be dominant. In an online store, the Buy button may be larger. In your email Inbox, new email may have more weight by using bold text or colour. In the first example, above, the button draws attention to itself because it is placed outside the visually balanced boxes. In the example, below, the large and bold text, “Event details,” signals that the other elements are lower in the organizational hierarchy. This provides cues that help people understand and complete the task faster.

The larger, bolder element has dominance.

Motion

Movement can reinforce the meaning by signalling relationships and hierarchy between different elements. In his lecture, Lyon named various types of motion: zooming, sliding, scrolling, and panning. In our design, we used motion to “slide in” additional boxes in the middle of the set. This technique is called progressive disclosure, and this illustration shows how, in our design, two new boxes slide out below a larger box:

The new boxes show they are related to the one the slide out of.

After sliding out, the user can enter additional details. Most users of this software want to accept the company’s default start time for events:

Two boxes and their labels slid out below the larger box.

During the design stage, we realized that motion alone wasn’t clear enough to signal that the additional elements were part of a group, which leads to the next point.

Unity

Unity is Lyon’s word for visually showing which elements belong together. To provide visual grouping, we could have uses spacing, colour, shape, and weight, placement, and more. For example, in this illustration, you’ll see two groups of circles, two groups of triangles, and two groups of squares.

You see two groups of circles, two groups of triangles, and two groups of squares.

Lyon also identified enclosure—providing a visual fence—as a way to group objects. In our design, we used colour and enclosure to visually identify the group:

You see two groups of circles, two groups of triangles, and two groups of squares.

Success!

By assessing our work, I confirmed that we successfully applied all five visual-design principles that Lyon listed in his lecture. Below is the as-designed portion of the software on which the above illustrations are based.

The example as designed.

If you want to hear about these five visual-design principles—and more—from the source, you can watch the Jeremy Lyon lecture about mobile user-experience design on YouTube.