In a lecture about user-experience design to software developers at Stanford University, Jeremy Lyon explained how important it is for software’s visual design to reinforce its use and meaning. He listed five principles that he wants designers and developers to apply:
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.
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:
In contrast, in our design we visually balanced the boxes and button:
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:
During development, we noticed this problem, and we fixed it by aligning and evenly spacing the boxes and labels.
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.
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:
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:
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 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.
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:
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 low-fidelity or “sketched” illustrations are based.
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.