Most of us have had the embarrassing experience of not knowing whether to push or pull a specific door handle. In these situations, is it our fault – or can we blame the door? When we see a door handle like the one pictured below, we are probably inclined to pull. This is because the shape of the handle affords pulling. If it turned out that this door needed to be pushed, that would be a confusing experience!

An affordance is what an individual expects can be done with an object given its properties and their own abilities. Designing with affordances in mind ensures that a user’s expectations of a given design align with what will actually happen when a particular action is taken.

As we’ve learned from Usability Heuristic #2: Match between system and the real world, people tend to recognize design patterns from the physical world. As digital designers, we can build off what people already know to create the most intuitive designs possible.

As more of design moved into virtual spaces, many virtual designs relied on skeuomorphism, a design style that imitates physical designs, to reference a familiar pattern. For example, the J37 Tape plugin by Waves was designed to imitate a J37 tape machine.

As more time has passed, we’ve seen new fully digital design patterns emerge, such as flat design. This style of design, which typically uses two-dimensional design elements and bright colors, can be cheaper, but can struggle with clear affordances. As digital literacy has increased and people have become more familiar with digital design, it has become more possible to use flat design while creating an intuitive user experience.

Continuing on the music theme above, the popular music production software Ableton Live uses flat design.

As designers, we should consider how to take advantage of familiar design patterns to help people easily navigate our designs and reduce cognitive strain. We can do this by referencing existing design patterns, and by creating design systems to ensure consistency within a given brand or product.

In this lesson, we’ll cover some common design patterns and best practices for working with design systems as you design entire user flows. Let’s get started!