UX Patterns in Product

What are UX Patterns?

I asked some Weave Employees on the Product and Engineering teams some questions about UX Patterns. One of the first questions I asked was what they thought UX Patterns (I’ll use “patterns” for the sake of this article) were. Here were some of their answers and their role in the company:

Q: What is your definition of a UX Pattern in relation to a product?

A:

A predefined way for categorical handling of user interactions. (Director of Engineering)

A common convention/pattern that a user follows to accomplish some task. (Software Engineer 3)

Consistent, repeated ways to do the same actions across the entire product experience. (Senior Product Manager)

Repeatable look and feel of workflow, so users do not have to re-learn how to accomplish a task. (Product Manager)

Consistency, especially in the interaction and the expected outcome of UX elements. (Product Designer)

Those were only a few of the answers that had a good grasp on what patterns might be. However, there were a lot of responses that didn’t know what they were at all.

Of all those responses, the key things that stood out to me were “a predefined way,” and “so users do not have to re-learn how to accomplish a task.” The best way I know how to explain patterns to non-product people is to use real-world examples in layman terms. Think of something really simple like a light switch. When you walk into a dark room, your first instinct is to look for a switch on the wall, a lamp, or maybe a cord hanging from a ceiling fixture. We’ve learned that pattern and now know to do the same thing every time we’re in a dark room. The light switch is predefined and there is rarely ever a new way to produce light in any given room, which means we don’t have to constantly re-learn.

UX patterns are flows and/or actions established by a product team for their specific product. Many patterns that we talk about in the product world have been around a long time and established by companies like Google, Apple, and Microsoft. I think it’s important, however, that we remember our users might have already learned patterns for our specific product, even if it’s not what Google is doing, and that’s okay.

When I first got to Weave, I was assigned to a project involving a long page with accordions with several sections in each accordion, save buttons at the bottom of the page, tables you could add rows to, auto-saving inputs, radio buttons, and later, even an interactive calendar. A lot was going on but there wasn’t a consistent way to save the content on the page. I assumed that the user would have no confidence in whether something was saving or not.

My engineers and developers wanted to put one big save button at the top of the page. The designers wanted a sticky footer with a save button. My product manager and I wanted a save button at the bottom of each accordion section. We all had seen different patterns used throughout our product and all had different user experiences we had learned. The goal was to create one, or even two or three patterns that the user would be familiar with across all of our products.

The solution my team came up with in the end wasn’t about a universal save button, but more about what we were saving. We came up with three save options: auto-save for dropdowns, save button for form-like content, and saving through submitting a modal that adds a new row to a table. Those established patterns that worked for us could also be used in any of those three cases. But of course, there are a lot of designers, a lot of features, a lot of products, and a lot of patterns. I’ll speak more about this later.

Why do we care?

Why do we care about UX Patterns, you ask? Our job as a product and engineering team is to make the lives of users better, easier, clearer. We find ways for users to optimize their time and for us to solve their hardships with the product. Patterns have a huge impact on how well we’re doing our job. They make it easier for users to travel through our product and be cognitively aware of what they need to do, should do, and can do.

Patterns aren’t just useful for the user, however. They help us do our jobs better and improve communication between product managers, engineers, and designers. Establishing clear patterns and naming conventions in a design system will cause less questioning, a smoother process, and a better cross-platform product.

Creating successful patterns

The best thing about patterns is that they can work for everyone. In order for them to work for everyone, everyone has to work together to establish them.

If you have an idea for a new pattern, think about where it can be used, whose product or what features this can help, and where we are doing something similar that can be combined with the new pattern or changed to it.

Another big component of creating successful patterns within a design system is for all designers to communicate with each other, talk about new ideas and consistently share progress on designs. This aspect is important so we can make sure every user experience is being thought about and designed in the same way. If there’s something we can establish and create rules around that can solve several problems at once, and we can continue to reuse it, why wouldn’t we?

Something to keep in mind is that patterns and design systems are never finished. My save button example happened back in the fall with a completely different team of people and a lot fewer designers. Now, we’ve hired at least four new designers, and no one I originally worked with on that problem is still at Weave. That means that there are different brains in the game, different designs, different solutions, more products to design for, more users to talk to, and more problems to solve. What was a good solution nine months ago may not be a good solution today.

Once again, it’s so important to remember that not one company has all the answers. In product, we often look for those big-name companies for pattern solutions. But Weave is a product that people are already using today and some have been using for years. We’ve come up with innovative ideas that other SaaS and phone companies haven’t done yet. We get to establish new patterns for our customers, and that’s exciting.

What you can do

Ask what is best for our users and what will make sense for them. Ask questions like “do we already use a pattern that we aren’t recognizing,” “should we keep that pattern,” “is it working for us and them?” I know I’m guilty of this, but don’t just jump to asking “what’s Google doing?” Our job isn’t to solve for Google users, it’s to solve for our users.

Key Points

• Ask questions
• Be aware
• Collaborate with other teams and co-workers
• Get informed about the product and the users
• Give input
• Speak up if you see something that can be improved or you notice a pattern that you aren’t acknowledging as a company that maybe you should be
• Create patterns for your users