Published 15 Feb, 2022 6 minutes of reading
Imagine if every car had the gas or brake pedals in different spots, or if the turn signals came on in different ways depending on the type of vehicle. While, with enough practice we could learn to drive a specific model, we would undoubtedly have difficulty using another.
In experience design, one of Jakob Nielsen's laws says that when working on a digital product we have to consider that users have spent more time on other websites or applications and less time on ours, therefore, they already come with a base of knowledge from those previous experiences. If, when entering a page for the first time, the user encounters patterns they already know, the focus will then be on the experience, products or services offered by the site, and not on how to learn to use it. On the contrary, if a user faces a steep learning curve when navigating your site, it’s likely that they’ll get confused and leave.
Designing based on pre-existing patterns allows you to create better experiences, and using these patterns positively impacts you and your team’s agility and efficiency.
What are design patterns?
The concept of "design patterns" was first coined by architects at the University of Berkeley, California, in the 1977 book, A Pattern Language. In it, they talk about patterns as recurring solutions to common design problems, and how by using good patterns within the same environment we can build a shared language for the users. In other words, patterns act as "building blocks" to create efficient solutions to simple or complex problems, and most importantly, reusable solutions.
The idea of using patterns as the foundation of every great system, along with the emerging programming and design industries at the time, all influenced each other. Since then, numerous people in the technology world have studied human-computer interaction patterns, demonstrating the benefit of using them in interface design, software, usability, among others.
One of them is Alla Kholmatova, who in her book Design Systems (2017) defines these patterns as "all repeatable and reusable parts of the interface that can be applied to solve a specific design problem, satisfy a user need or evoke an emotion."
Some examples of patterns in digital product design are:
- The use of an icon with three horizontal lines (known as a "hamburger menu") for navigation on mobile devices
- Gestures such as double tapping to give a "like"
- Breadcrumbs to show the user their current location and navigation
- Adding a product to the shopping cart
- Product or service comparisons
- Possibility to level up and get rewards, gamification
Why do design patterns exist?
There is a law of learning that states that the time taken to perform a task decreases as a function of the number of times we have practiced it. Every time we enter a site to perform a task, we resort to what we have learned by browsing other web pages to perform them without thinking about it. For example, if we want to go to the homepage, the most common way is to click on the logo in the top left corner of the navigation menu. If for some reason we decide to stray from this standard and use a design with the logo on the right, instead of doing it intuitively, the user will stop to think: How do I go to the homepage?
Every time we make the user think, we are increasing the cognitive load of the interface, making the site or application less usable. By making intentional decisions to incorporate patterns into our designs, we are accompanying users on their journey through the interface, allowing them to know what to do at all times, which generates a sense of security and helps us avoid frustration.
Is there room for creativity in design patterns?
Designing with patterns does not mean the death of innovation. The same solution can be applied in different ways depending on the context. There are patterns from the world of video games that can be applied within complex financial product flows, such as progress indicators.
Points and rewards system in Duolingo (left) are similar to those used in games like PokemonGO (right).
There are also gestures such as the horizontal scroll or the pull to refresh, that saw their genesis in social networks and are now present in the mobile version of almost any digital product.
Although it was criticized in its early days, horizontal scrolling has proven successful because it allows for more flexible navigation. It helps users to see several items in the same category without having to go to different pages.
Reusing these solutions helps us generate consistency between what the user learns and what they expect to happen when entering our site. A good design process identifies these patterns and adapts them to the context of the digital product to finally test them and verify if they work.
New patterns arise when a large number of designers adopt a trend that has proven to be efficient, or when large technology companies push different design patterns within their products because in most cases users are forced to learn how to use them, as is the case of Google or Apple. A clear example of this is the iOS 15 update that included a change in the position of the Safari search bar, which is now located at the bottom of the device:
The reason behind this change is based on ergonomics, since by leaving the search bar at the bottom, it's much closer to our thumbs. Although it sounds like an intuitive change, the update generated a lot of controversy because a large number of users didn’t like it, and in some cases it generated usability problems.
I can’t be the only one who finds the URL bar at the bottom of the browser in iOS 15 to be entirely counter to a natural UX flow, or is it just me? pic.twitter.com/QBXHkGpqEh
— Eric Wright (@discoposse) October 3, 2021
The decision between using a design pattern or an innovative solution depends on how often users will use a product. We mentioned that the more repetitions, the less time it takes to perform a task. However, in some interfaces, the number of repetitions necessary for the user to find what they need without much thought will be higher. This is known as the learning curve, and as it becomes steeper, the user loses the motivation to complete the task and the desire to use our digital product again.
What impact do design patterns have on teams that build digital products?
Beyond being beneficial for users, patterns work as a kind of network where everything is connected within a large system. At Modyo, for example, in the design and experience lab we work with the Atomic Design methodology, which serves as the basis for building a Design System at the beginning of a Product Discovery with our clients.
When starting the implementation phase, the development team relies on the Design System to create its own repository within the front-end, creating reusable classes and components. In addition to saving development time, it allows optimizing the code and avoiding rework by having everything defined from the beginning. This creates a window for the developer to focus on things that really give value to the customer.
For the QA team, the definitions of the design system become a kind of bible to verify whether or not what’s in production meets our quality standards. And based on the same artifact, we can build templates and widgets that each client can reuse to create new views within a site or app quickly and independently, with standardized consistency across the interface.
Establishing patterns gives room for the creation of a language shared by designers, developers, project managers and each member of the team. Ultimately, the advantages of applying patterns translate into greater agility in processes and easily scalable products over time.
Conclusion
It's easy to follow design patterns, but the real work is in identifying those that help us create positive and relevant user experiences. However, if we don't know our users, we can't know what they find relevant. To obtain this information, it’s necessary to conduct user research and/or rely on previous studies that serve as a background to validate our solutions.
Understanding who uses our product tells us what works and what doesn’t.
For users, design patterns favor the ability to learn because they generate consistency, and consistency is a key pillar within Nielsen's 10 heuristics because it supports exploration and problem solving.
If you want to learn more about design patterns, here are some additional resources where you can find applicable examples and interesting use cases:
https://www.nngroup.com/articles/design-pattern-guidelines/https://ui-patterns.com/
https://uxmovement.com/
https://uigarage.net/
http://www.welie.com/patterns/index.php
