Creating a Visual Language

Figure 1 Amazon uses a consistent but contextually flexible visual language for reinforcing a button’s purpose.

Visual languages can be subtle yet powerful elements of interaction design. The judicious use of design to create patterns can reinforce the purpose of certain elements to enhance or assist understanding. It’s easy to overlook when we’re using something, but like many aspects of design, it can be difficult to balance consistency with context to create just the right amount of variation without losing the value from consistency.

Amazon has a clear visual language for shopping-related buttons. (Figure 1) While the buttons vary in size, color, text, and iconography, they clearly share enough of the design elements that the variety enhances their purpose rather than complicating it.

Color

Figure 2 One of the primary ways Amazon differentiates shopping buttons is through color.

Color is one of the primary differentiators. (Figure 2) While there are in fact three different colors, their consistency is maintained through the fact that the colors are closely related. And, when viewed together, it’s clear that the colors get lighter and less intense based on the immediacy of their purpose. Buying immediately with 1-Click is a rich and deep orange. The less immediate, “Add to Shopping Cart” is a lighter shade of orange. And finally, the pre-order button is almost yellow. In this case, the color not only differentiates the buttons’ purpose, but communicates subtle information about the relationships between the buttons as well.

Iconography

Figure 3 In addition to color, most primary shopping buttons also include an icon to reinforce their different purposes.

Iconography also helps to reinforce the purpose of the buttons, and despite the variance in iconography, the consistent circular blue background helps maintain the overall visual consistency. While it might appear to be decorative, it’s also a subtle cue about the purpose. Also, in cases of color-blindness, it’s more likely that someone can differentiate icons than colors. (Figure 3)

Context & Flexibility

Figure 4 While Amazon has a consistent set of visual guidelines, some contextually flexibility exists for situations where a smaller button or different text is required.

Of course, the language isn’t any good if it only has one word, so it’s important to make sure that the language includes an appropriate amount of flexibility through variation. Too much variation means that there effectively isn’t a visual language, and too little variation makes it difficult to apply in a meaningful manner.

In Amazon’s case, color of the button and the text is the primary facet of visual differentiation for the shopping buttons. Buttons with the same purpose may change size, text, or even lose the icon, but the color invariably stays the same across buttons with similar purpose. The weight of the stroke around the button, the text of the button, the inclusion of an icon, and even the font size are all variables for creating the necessary flexibility. (Figure 4)

Copywriting

Figure 5 Amazon also uses button text to conveys additional contextually relevant information such as the price of shipping for Amazon Prime 1-Click.

We’ve looked at some subtle variations with everything else, so that leaves the most obvious aspect of variation. Amazon makes the most of the buttons by adding additional relevant text. By including both the shipping speed and cost, the buttons can provide just a little more contextually relevant information while keeping the other aspects consistent. (Figure 5)

Summary

In Amazon’s case, the visual language for buttons extends far beyond the few that we’ve looked at here, and visual languages in general can be applied a variety of formats. When used judiciously, a consistent and flexible visual language can really help reinforce the purpose of interaction elements.