Identify Design Patterns

Learning Objectives

After completing this unit, you’ll be able to:

• Differentiate between macro and micro repeatable experiences.
• Identify design patterns.
• Understand how design patterns increase efficiency and productivity.

What Are Design Patterns?

In user experience design, a pattern is a repeatable design solution to a recurring problem. Design systems, like SLDS, are libraries for these types of patterns. In this unit, we talk about the different kinds of patterns, how to recognize them, and which belong in a design system.

Repeatable patterns appear at the macro- and microinteraction levels of an application. Macrointeractions accomplish higher-level tasks, such as logging in or creating a new record. Microinteractions are the controls within a page that you click, tap, or take some other action on. 

Macropatterns

Let’s consider a familiar example in Salesforce: creating a record. At a macro level, there are three places to create a record in Salesforce. 

1. In the navigation dropdown for that record type
2. On a page that lists all records of that type
3. On a page that displays the details of that record type

This isn’t just how you create a new contact or a new opportunity; it’s how you create any record. Salesforce has many standard record types. Imagine if each type had a different way to create a new record. How much time would it take someone using Salesforce to learn all of them? How would that affect their productivity? 

Systems design guided us to consider each record type and find an interaction that works well for all instances. Each record type is in the standard Salesforce navigation. Each record type has a list page and a detail page. Those entry points are logical locations for an action to create a new record. 

This design is a macropattern because:

• It’s repeatable.
• It fits multiple record types.
• It represents a high-level interaction.

Micropatterns

Now let’s consider exactly what someone would do to create a new record. We know where the workflow can begin, but what does the action look like? What is the interaction of this action? What affordances does the action provide?

Although micro means small, micropatterns have a large impact across an application. The number of microinteractions spread throughout an application can be substantial. Microinteractions warrant close attention because users rely on them to input data and communicate with your app to complete a task. Button states, which visually indicate how to interact with an element—and what the element’s status is—are microinteractions. You learn more about states later in this module.

Identifying Patterns

A pattern is a repeatable solution that solves a common problem and can be reused across an app or system. In systems design, when we have a need, we don’t start designing a solution right away. First, we search for a pattern that we can use. We start the search locally and expand outward only if necessary.

1. Your area of expertise in the app
   Think about the application you’re designing for. If it’s your area, you’re already familiar with its design solutions. Is there an interaction that meets your needs?
2. Other peers’ areas of expertise in the app
   Check with your peers who work in other areas of the application and lean on their knowledge of areas unfamiliar to you. Do they have anything you can reuse?
3. The world beyond the app
   If you can’t find anything suitable anywhere in your app or system, then it’s appropriate to widen your search. What solutions have others designed for similar apps or systems? When you reuse a solution from the wider world, users work efficiently in your app. That’s because they recognize elements and follow behavior patterns that they formed in their work elsewhere.

There may be a unique design solution that isn't needed anywhere else. For instance, if you have an ecommerce store app that sells sneakers and you add a new product that is a mobile sneaker-cleaning service, that one product may need extra configuration at checkout to schedule the cleaning appointment that the rest of your sneakers don’t require. This single instance is not a pattern because it’s not used elsewhere on other products.

Let's say a peer points you to a feature they worked on where they decided a new record is created by launching a modal dialog window. This dialog presents a form in which the user enters data for the new record.

Eureka! That’s an excellent solution for your use case. Instead of one lone feature that had a unique way to create a record, there are two. Over time, three or four folks might use the same solution. This design solution is used more than once in your app, and it has now become a pattern. You’ve identified a new way to build a habit with your users so they can be more efficient and productive when completing tasks within your app.

Saving Time: Efficiency and Productivity

Systems design focuses on creating and identifying patterns so people using your application can quickly accomplish their goals. Designers need to be thoughtful here because a tiny design decision can cause a significant time drain for users collectively. 

"Well, let’s say you can shave 10 seconds off of the boot time. Multiply that by five million users and that’s 50 million seconds, every single day. Over a year, that's probably dozens of lifetimes. So if you make it boot ten seconds faster, you've saved a dozen lives. That’s really worth it, don't you think?"

–Steve Jobs, on saving time with macro and microdecisions

Steve Jobs was talking about hardware performance, but the lesson applies to design decisions as well. The impact of design decisions that deviate from commonly accepted norms can be significant.

Users develop habits in their minds while using applications and interfaces. They recognize patterns intuitively and unconsciously. They anticipate. For example, a user hovers their mouse over an area where they expect login fields to appear.

If your design puts the login fields somewhere else, users can’t rely on what they already know about logging in. They have to learn a new way to complete a common task. By disregarding established patterns for logging in, you confuse users and slow them down. It may take one user only 3 seconds longer to figure out your new interface and log in, but if there are 10,000 users, that’s 30,000 seconds, or just over 8 hours lost. That's a full workday.

To prevent the downstream effects of hasty design decisions, approach both macro and micro design decisions systematically by looking for design patterns. It’s hard to get things perfect all the time. But our chances of designing compelling user experiences increase when we employ design principles.

Resources

• Article: User Interface Design Patterns
• Article: A Step-by-Step Guide to User Experience (UX) Patterns
• Article: How to Use Pattern Recognition and Perception in UX Design
• Article: The Importance of Macro and Micro-Moment Design