User researchers like to see products in the hands of users, and they like to analyse quantitative and qualitative data. But they also use heuristic methods, such as expert reviews, done without a user in sight.
Expert reviews are a shortcut that rely on a usability analyst’s expertise to identify gaps in a product when compared to a set of guidelines or heuristics.
You may have come across these heuristics:
- Jakob Nielsen’s 10 general principles for interaction design.
- The Agile manifesto’s principles, which also apply to software usability.
- Jeremy Lyon’s five visual design principles that reinforce the software’s use and meaning.
- A corporate style guide that sets out how to reinforce a brand’s visual presence.
I decided to use Lyon’s five visual-design principles to assess an online app that I worked on with a team of developers and user-interface designers. Would the expert review contradict or complement the findings of our usability research on the same product?
In this discussion, I’m reporting a portion of an expert review of an online app for setting up a corporate event and then issuing and tracking formal invitations. For an upcoming release, the user-interface team made visual changes in order to follow the five visual principles. I then conducted an expert review of the newer interface. Later, I also compared the earlier release to the app’s newer release in usability tests with users.
The heuristic: 5 visual principles
Lyon wants designers and developers to apply these five visual principles:
- Balance.
- Rhythm.
- Dominance.
- Motion.
- Unity.
Here’s what the principles mean, and how I applied them in the expert review.
Balance
Balance reduces friction from the extra processing the brain must do when elements are visually out of balance.
In this illustration of the earlier release, the group of boxes was imbalanced because one button sticks out beyond the boxes:
In contrast, in our new version the user-interface team visually balanced the boxes and button:
Rhythm
Repetition is a common way to create visual rhythm. 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.
In the earlier release, the rhythm of our software’s user interface was disrupted by the uneven spacing of the boxes and labels:
During the expert review I noticed this problem throughout the user interface, but in this example it is slight. The team fixed it by evenly distributing boxes and their labels for the new release.
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.
Motion
Movement can reinforce the meaning by signalling relationships and hierarchy between different elements. Imagine zooming, sliding, scrolling, and panning. In the new interface, the user-interface team used motion to “slide in” additional boxes in the middle of the set. This technique is called progressive disclosure, and this illustration shows where, in our new interface, 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, I hypothesised 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 about visually showing which elements belong together. To provide visual grouping, our team could have used spacing, colour, shape, and weight, placement, and more. For example, in this illustration, you’ll see six groups: two groups of circles, two groups of triangles, and two groups of squares.
Enclosure—providing a visual fence—is another way to group objects. In our new interface, the user-interface team used colour as an enclosure to visually identify the group:
Success!
After the revisions mentioned, I was able to confirm that we successfully applied all five visual-design principles to the newer version of the app. Below is the as-released portion of the software on which the above low-fidelity, sketched illustrations are based.
How did the expert review compare?
After the heuristic assessment, I conducted separate usability studies to assess both the visual design of the earlier version and the newer version.
Incidentally, the heuristic review and the assessment covered much more than the one example discussed above.
In the studies, I asked users to perform their regular work, and noted when they used the revised form layout. I observed some usability issues in the earlier visual version, and no usability issues in the newer version. In the newer version of the app:
- participants competed the task successfully.
- participants did not ask for help.
- some participants commented on the simplicity of the layout.
- some participants expressed delight at the progressive disclosure.
I found no drawbacks and no contradictions between the expert review using visual design principles and a usability study of the newer version. However, the sample size was too small to generalise to other software products that have other functions.
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.