Seeing Poodles Everywhere

User Interface Design Patterns on Amazon.com

Clouds that look like poodles, star constellations in the evening sky, and faces on your morning toast. Our eyes and brains work together as an awesome team who always are on the lookout for relationships between values. And the meaningful patterns we discover, help us make sense of the world.

Poodle spotted over Sanderstead, Surrey. U.K. Photo by Alex Brooker.

In UX, design patterns are a common visual language that both designers and users understand, and when we apply design patterns to UX, we efficiently cut down on the time and effort needed to navigate and the user’s cognitive strain.

All new products aspire to be easy and familiar to use. But how do we make something that’s “Easy to use?”

Design patterns allow the user familiarity and affordance. Familiarity means that a button behaves the same way like any button you have clicked before. Affordance means indicating to users the possible actions they can take with an object, like making a button look “pushable” or a knob “turnable.”

Good vs Bad Familiarity.

Let’s take a look at design patterns on Amazon.com.

First off, Amazon, let’s just be honest, there’s a lot going on. My attention is ping-ponging in every direction. (Links! Sale! Recommended for me!) Still, I manage to buy just about everything I need, or not need: from toilet paper and toothbrush heads to nutrition bars and sunscreen.

“I want to buy a tennis racket”

Gestalt

Gestalt means “unified whole,” which is also a good description of the Gestalt principles. It describes the way we see a whole, before we see the individual parts when looking at a group of objects.

The Amazon logo, with its yellow arrow, subtly suggests that they offer everything from A to Z, and the smile made from the curve, hints that it will be a pleasant and fast experience.

Proximity

When elements are placed closely together, people perceive them as related, especially when they are separated from other groups by even more space.

Using negative space to push certain elements apart, while bringing others closer together, creates apparent groups that don’t need lines or boxes around them.

In the example below, the groups are marked with red. It is clear that the top row with AmazonSmile, Prime and Fresh are one group, based on proximity, font choice, and image treatment, and the Dash Buttons on the right-hand side are stacked vertically to create a group separate from the suggested products in the middle.

Colour

Color can be used to lead users in the right direction to accomplish a common task effectively and efficiently. The contrast and vibrancy of the the yellow color used by Amazon for important actions like track package, search, items in your cart and the Amazon logo make them highly visible and accessible to the user.

Yellow color used to guide user to the most common task.

Empathy in design patterns

Design for any product or service works best when we see the problem from the user’s point of view. That’s where the advantage of familiar patterns becomes our advantage. By consciously testing for unconscious tendencies, we develop empathy and can plan out better designs and user experiences.

We employ empathy in design thinking by asking questions like:

  • Where is the user on the site?
  • Where can the user go from here?
  • What do we want them to look at first?
  • Does this page contain the information the user wants?
  • What can the user ignore on this page?

Amazon makes it easy for users to return items from the order page, where each product has its own return button. The site reminds the user to order frequently used products like toothpaste again, or suggest the user signs up for a subscription for a product they order often. In the examples below, breadcrumbs are used to help the user figure out where in the search they are.

All of this takes off some of the cognitive load, and once Amazon gets it right a few times, the user is more likely to trust any recommendation they give.

Conclusion

UX design patterns are great for getting started with routine design tasks. By employing best practices for features and functions, like carts or return shipping forms, we can quickly communicate our ideas and eliminate misunderstandings.