Resilient user experience patterns — impactful designs that actually last
All design systems deserve well-documented guidance, but defining this isn’t always straightforward. We’ll take a look at what goes into making good UX design pattern guidance and how we create patterns for IBM Carbon internally and externally.
TL;DR
Five principles of designing resilient user experience patterns include: focusing on user needs, reproducibility, consistency, flexibility, and extendability. When making patterns, make sure you get comfortable with executing audits, conducting tests, exploring all the possibilities, clearly stating dos and don’ts, focus only on what matters most, remembering to re-evaluate patterns, and always tying your designs back to who you’re designing for.
Are you currently working in a mid-to-large size company? Then you most likely have come across the idea of a design system. If you haven’t, hang tight! Some say the defining feature of design systems are tokens, others reflect more on the implementation aspect of components in production claiming APIs are revolutionary. While both of these aspects are intriguing, I’d like to propose something already available that folks should be paying unique attention to.
What am I referring to?
User experience design patterns.
What are UX design patterns?
Let’s first define this: user experience design patterns (or UX patterns) are predictive schemas created by humans that can be interacted with physically, digitally, and even mentally, existing in all quarters of life. To narrow the scope, I will discuss digital UX patterns (although these principles apply elsewhere).
Whether you know it or not, you’ve already experienced UX patterns across all kinds of software. From checking in with self-service kiosks at the airport, to using your fancy elliptical, and even ordering concert tickets on your phone. UX patterns often make it easier to do the things we love most.
Why are they useful?
Now let’s discuss why you should care.
UX patterns boast many purposes based on the audience. From a product team’s perspective, using UX patterns simplifies decision-making by relying on existing solutions instead of creating new designs from scratch. They also speed up time developing interfaces. Likewise, from a user’s perspective, patterns are used to create coherence across tangential experiences in which users hold expectations of how to interact with, but not relearn how to interact with.
For example, we can use the simple instance of buying a good or service online. Each page adheres to guidelines set by the UX pattern, enabling the user browsing for products to instantly understand how to navigate between each product page. This may include a navigation element, followed by product details including titles, description, images, and a purchase button, with a product review section beneath.
Because the “product detail view” UX pattern exists, or in other words, the content and format for each product is predetermined, the creators of the service have no need to come up with a new solution each time they post a new product. Nor do customers need to relearn how to navigate and digest each page.
What makes a great pattern?
So now that we understand their importance, what should we know to make a resilient pattern? Let’s dive into things that build up great UX patterns:
- User needs
- Reproducibility
- Consistency
- Flexibility
- Extendability
If you had to remember one sentence, let it be this: resilient UX patterns focus on prioritizing user needs, are replicated in multiple contexts while still being threaded together, set an expectation of how to use in each of those contexts, are flexible enough to handle slightly different contexts, and can extend when new needs are uncovered.
In other words, can they last the test of time as a product evolves and the creators of said product learn more about their users?
User needs
Intent drives why a pattern should exist. If users engage with similar micro-experiences across a given system, then aligning those micro-experiences under a pattern simplifies the system, creating clear expectations for the user.
The best patterns are based on well-defined user needs.
Take a gander at the Carbon Design System’s website — one of many resources we at IBM contribute to. Although there are various concepts separated into components and patterns, each page includes detailed guidance on how designers and developers should use parts of this component library. Of the public-facing patterns included in Carbon, here are some UX pattern examples:
- Notifications help communicate important information to users in forms such as banners, pop-ups, or as actionable modals. What’s great is how Carbon explicitly cites when to use and not use this component in certain contexts based on notification triggers.
- Search can be tricky to design with all sorts of search engines or filtration systems in place. Carbon’s standard of search adapts to the needs of that user’s context while not inhibiting technological differences.
- Loading is without a doubt a part of almost every digital experience that relies heavily on the internet. Standardizing loading welcomes a variety of informative and familiar variations that explain to users something is happening such as loading data in a table or acknowledging a process is active when a button is pressed.
Reproducibility
Repeating experiences are often clustered into patterns, simplifying the decision-making process, and speeding up development timelines via reusable coded components.
According to the always-reliable Wikipedia, “A pattern is a regularity in the world, in human-made design, or in abstract ideas. As such, the elements of a pattern repeat in a predictable manner.”
For a UX pattern to succeed in a design system, the pattern should exist in more than one context.
Like the above example of products on a website, each product has its own product details page which contains the same content types. A company wanting to scale should not design a custom page for each new product unless they have a framework to follow that makes it easier. Apple is notorious for this with each new product beautifully envisioned in a scrollable experience — yet, this running theme of scrolling down the website to reveal the product and its features looks somewhat familiar if you continue to browse their website.
Even IBM uses a system to make sure each product and service we sell is clear, concise, and explainable. The difference for us at IBM is that we have hundreds of these software product pages. A custom product page per each product wouldn’t scale. Even worse, it would disorient our page visitors.
Consistency
Patterns that adhere to the rules of already defined patterns in that design system will make more sense to users and play nicely with other previous or future patterns. You are bridging knowledge. If users can expect how a pattern behaves in many contexts, it’s safe to assume they will learn how to interact with that experience more effectively.
If users can expect how a pattern behaves in many contexts, it’s safe to assume they will learn how to interact with that experience more effectively.
Aside from the impact on learnability, two other effects of being consistent within a pattern are: improving user confidence and increasing the speed of task completion.
Using repetitive elements can build users’ confidence. If people have a new interaction with something that is familiar to what they've seen before, they’ll find it much easier to complete their desired task without worrying whether clicking the wrong button will delete their data. Time saved on learning how to navigate is time the user can spend on accomplishing their original task.
Do you ever think twice about how to launch an app from your smartphone or computer?
Of course not!
Each time you open a new app, it’s the same exact way — by tapping or clicking on an icon. This sets the expectation for users that every time they want to launch an app, they follow the same behavior.
Flexibility
Have you ever tried to follow a recipe, only to realize you forgot to pick up one or two ingredients from the store? Instead of rushing back to the market, it’s often the case people improvise with what they already have. The same applies to design.
Great UX patterns allow for flexibility. Robustness is a key factor in how well a pattern can be implemented by designers or developers with the resources at their disposal and user needs present. Some contexts need an adaptation of a pattern, given different needs that correspond to the location of the experience. Grouping variations by user needs helps limit the number of variations.
Some contexts need an adaptation of a pattern, given different needs that correspond to the experience.
People often see limited variations as a negative constraint. This depends on your design system. You shouldn’t create a unique solution for every slightly different context. Additionally, fewer variations make it more efficient to work with.
When the context requires guidance for the same type of pattern but still holds quite a few differences in user needs, a set of variations for products to choose from can actually make an ecosystem feel cohesive for each respective main need, followed by sub-needs of the experience. Alternatively, too many possibilities can make it difficult to choose the right solution for the job.
Take Watson Moments at IBM as an example. These micro-experiences within our products help users in complex situations and allow for bits of artificial intelligence to shine. The same way we implement one use of AI in one product will not always be the same; contingent on what the AI is trying to provide. Thus, some of the most experienced individuals created a flexible framework that enables our products to implement AI use-cases where applicable, even if they aren’t driven by the same intents.
Extendability
A lesser-discussed subject of patterns is how patterns can extend and adapt over time as user needs evolve.
It’s fine to admit you don’t know what comes next or how the future roadmap looks. That’s okay. Accept uncertainty, but anticipate areas you might need to adapt or improve upon.
Accept uncertainty but expect where things might need to adapt or improve.
Sometimes this comes in the form of a new addition to existing variations or rewriting part of the original guidance to the pattern. The best patterns are crafted over time as user needs evolve and we learn more about their behaviors and pain points.
How to get started in 7 steps
Take a look at how we at IBM write pattern guidance for Carbon. You’ll notice extensive details for styling included with most guidance and interesting reasons why some patterns behave in specific ways (shout-out to the incredible teams behind the design language, brand, and component libraries). Each one of those teams includes dozens of designers who adhere to many of the following tactics.
Get good at auditing
Audits consist of documenting similarities as well as differences to find commonalities that you can use for something else. This is the most useful thing you can do if you are trying to align existing product patterns or creating patterns from scratch with no existing product experiences yet.
When you have a need to create a new pattern that others will be able to use in the future, auditing other similar and different products (internal or external) can bring you closer to a useful pattern. Be cautious as not all patterns will apply to your context. The needs of one company’s users aren’t always the same as yours.
Do some testing
Deciding the right path should derive from data points you’ve collected, not intuition. If time allows, divide time spent testing to conduct some usability research for evidence that some of your potential pattern guidance applies to the needs it’s attempting to address.
Explore all possibilities
Don’t be timid in your explorations. Rarely does the first idea get published. Insights always arise during critiques or user feedback sessions that change your initial concept and make it into something even better.
Be mindful of time! Too much spent on explorations and not enough time building a decent solution will push back schedules of many teams that rely on a design system.
Clearly state Dos and Don’ts
Most people reference UX patterns with a quick scan instead of reading lengthy guidance.
Having Dos and Don’ts stated clearly at the beginning of your guidance helps consumers quickly understand how to implement a UX pattern and easily understand what to do in given situations. Think of this as the main takeaways of the pattern.
Focus on what matters, drop everything else
It can be exciting to build out a pattern to cover as many contexts as possible. Try your best to simplify what you aim to deliver for others designers to consume. There really is such a thing as too extensive.
The more guidance you deliver, the more debt that the design system will carry. Balance is key.
Don’t forget to re-evaluate patterns
From time to time, existing patterns might need updating to reflect the latest standards of a design system.
When creating patterns, acknowledge that patterns exist because there is a need. If that need changes then so will the pattern — this task can be addressed by the original author of the pattern or other contributors willing to be passed the torch.
Always tie designs back to the user
If you begin to build stuff without tying it back to the user, you’ll end up making a pattern that is rarely used or worse — something that doesn’t solve your users’ needs. It’s useful to create user stories based on user needs.
You’re now ready to start improving your products’ design systems.
Special thanks to the folks that help sustain a thriving design system at IBM and gave feedback on this write-up including Alex Swain, Marion Brülls, David Levinson, Krista Everson, Tomer Maimoni, and Noam Karakowsky.
If you enjoyed this piece, follow me on Twitter or come join IBM design to learn how to apply challenging stuff like what you read above!
Mitchell Bernstein is a design lead at IBM based in Austin, Texas where he’s reshaping the fundamentals of how people build machines that think autonomously. Additionally, Mitchell often collaborates with design system teams and is working to infuse artificial intelligence across several AI creation tools.
The above article is personal and does not necessarily represent IBM’s positions, strategies or opinions.
