Skip to main content
TrailblazerDX, the ultimate AI learning event is heading back to San Francisco March 6-7, 2024. Register Now and save 35% with code T24DEYE424.

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.

Screens indicating micro and macropatterns.

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. 


Macrointeraction
Microinteraction

Description

Higher-level tasks and the workflows to complete them


Individual, lower-level interactions and affordances

Example

The workflow to update a record page

The shape and placement of an edit button on a record page 

Analogy

An aerial view of a whole city

A close-up examination of how a door handle works on a house in the city

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

Three screens indicating a macro pattern workflow.

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?

Two screens showing how a microinteraction works in the Lightning Design System.

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.

Patterns repeated on various screen platforms floating like satellites in outer space.

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.

An astronaut is confused and distressed by which button they need to push, highlighting a downstream effect of unsystematic design decisions.

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.

Action

1 User

1,000 Users

1,000 Users Performing Action 100 Times Per Week

Snazzy new feature is added to app (but not intuitive)

3 seconds added per action (on average)

3,000 seconds added per action

300,000 seconds added (83 hours, 20 minutes) per week


Resources

Keep learning for
free!
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities