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.

Modernist design: Beyond flat and simple

In recent years the big players in software have adopted modernist design for their user interfaces. With this redesign, digital comes of age, with a look and feel that’s no longer bound by last century’s conventions or by those new to computing. A modernist user interface focuses people on their current task, supports fast-paced use, and embraces the fact that the interfaces are digital. The intent is to help people to learn and to use software more easily—and you’ve no doubt seen and used modernist interfaces, especially on your phones and tablets, in Google products, and on Windows 8 and later.

It’s easy to reduce modernism to two guidelines: put less on the screen, and make what’s still there look flatter. While modernist software works well, blindly applying those two guidelines without understanding the underlying principles can lead to puzzling and inconsistent experiences. In some cases—including in products by Apple and Microsoft—fewer items and less visual detail on screen has resulted in the removal or omission of the necessary cues that separate content from controls, the cues that allow people to learn and use the software effectively.

Fewer elements on the screen

Modernism calls for a simpler interface. With fewer choices on the screen at any given time, people can work faster and people are more likely to choose what they need—provided the right elements are present at the right time. To get this right requires an excellent understanding of the tasks customers need to do, and when. Research on customers before the design stage is key, and testing with customers during the design stage is key. Simply putting less on the screen without testing how the interface performs in the hands of customers is a gamble.

Visually simpler elements on the screen

Modernism calls for an interface that is stripped of distracting ornamentation. With less visual noise on the screen, the interface is less demanding and—again—easier and faster to use. Simply removing extra lines, extra colours, and extra words without testing how the interface performs in the hands of users is a gamble. Here’s why.

In the illustration, example 1 shows a button that clearly has affordance. On screen, the button looks like a 3D object that we could press in the real world. The button’s gradient fill and shadow make it appear 3D. Most people know this 3D appearance from earlier versions of Windows and from the first editions of iPhone.

Examples of visual affordance

In example 2, the 3D appearance and shadow are removed. Most people first noticed this flattened look for buttons in Google Chrome and for tiles in Windows 8. With most of the affordances stripped away, in some contexts people have trouble recognising that these boxes are buttons to click or tap, or an object to drag or swipe.

It is possible to strip away the ornamentation without going too far. In example 2, the Search button (far right) has a slight gradient, slightly rounded corners, and a slight shadow on roll-over, all of which subtly help identify this element as a button. This button is from Google Gmail’s search box.

Example 3 shows “buttons” that have the background rectangle removed, leaving only text. For many years, blue text —especially when underlined—was used to identify a hyperlink. Most people know this link appearance from the Internet’s first two decades.

Examples of visual affordance

In example 4, the colour and underline are also removed. You may have noticed these plain, modernist links in mobile devices such as Windows Phone and applications such as Microsoft Zune. With the colour stripped away, in some contexts people have trouble recognising which text is a link to click, tap, or swipe.

It is possible to strip away the background colour and text decoration and still provide cues that people can interact with this text. For example, in the illustration, below, the row of links extends off the right edge of the screen to suggest they can be swiped. Extending off the screen is easy to do, for example by enlarging the text.

Swiping to see more

Example 5 shows two icons that have lots of realistic detail. This resemblance to physical objects is called skeuomorphism. For many years, skeuomorphism increased as improvements to computer screens allowed more colour, better display resolution, and thus more realism. During this time, each icon typically also had a label to help make the icon’s meaning clear.

Examples of visual affordance

In example 6, the skeuomorphism and labels have disappeared, or are hidden. Most people first noticed the flattened, modernist icons in Google apps and in Microsoft Office 2013. In some contexts, people don’t recognise the icons without their labels, and either don’t know how to or don’t think to reveal the labels.

It is possible to see the labels on demand. For example, Windows Phone provides an icon to tap that reveals the labels, as illustrated below.

New cues for digital interfaces

The ellipsis (the “…”) is a cue to users that “there’s more.” This cue is necessary—so it hasn’t been stripped away in this modernist design. This is also an example of a cue that’s natively digital. It’s not possible in the physical world to show and hide content because paper is static, not interactive.

On earlier iPhones and iPads, some apps would use skeuomorphic detail to cue people about how an app functioned. For example, an image of spiral-coil binding (below, left) signals that there may be more content on another page, and page-curl transitions that mimic a turning page reinforce this as the user navigates from screen to screen. In contrast, the more modernist design (below right) uses a cue that’s only possible in the digital world. The screen uses content peeking (look closely at the right edge) to signal that there is more content on another page.

Skeuomorphism

Some design challenges, as the content-peeking example shows, have excellent solutions that comply with modernist design principles: simple, less on the screen, and natively digital. Other design challenges have yet to be solved.

Natively digital

One example of an unsolved challenge is the Windows Phone calculator, whose functions change when the device is rotated. Rotating the device causes the calculator to switch from standard calculator to scientific calculator if rotated clockwise, and from standard calculate to binary-and-hexadecimal calculator if rotated counter clockwise. This exemplifies what it means to be truly digital—in the real world, a calculator on your desk cannot change its buttons, no matter how you rotate it.

Windows Phone calculator

However, the current design fails because there is nothing in the interface to suggest that these functional changes will occur, so there’s no reason to rotate the screen in order to discover them. This design challenge calls for a solution—a visible button or icon or other explicit path—that clearly toggles through the calculator’s three states, for example by forcing the screen orientation to change for at least a few seconds, and temporarily ignoring the device’s current physical orientation, or perhaps locking it in place.

User interfaces that enable full product use

To be “usable” requires not only that people can successfully use software tools to perform their tasks, but also that they can locate and recognise those tools. This used to be easier to accomplish when there were fewer platforms.

The big players are changing the way user interfaces look and feel by applying modernist design to make the truly digital. At the same time, software is changing because the way people use it, where they use it, and with whom they use it is changing. As development teams continue to provide possibilities, they need to work with interface designers, usability analysts, and members of their target audience—the users or customers. Together, we can ensure the new interactions and simplified interfaces we design and build will tell people how the interface works and both help and remind people to find the functions and content they need. It’s not about making things flat and removing clutter; it’s about getting the interface right while applying modernist principles so people can use the product fully.

Postscript
I came across a video, titled Everything is a remix, that explains the “why” of modernism.