Tiny Tutorial

Design a Reusable System Modal

The “Are you sure about that?” dialog that every app needs.

This is part of a series of short tutorials about specific elements, components, or interactions. We’ll cover the UX, the UI, and the construction inside of Sketch. Plus, there’s a freebie for you at the end!

What are we designing?

A system modal to convey information, errors, simple prompts and warnings.

When are they used?

Whenever you need to grab the user’s attention after they attempted to:

• Perform an action with serious consequences
• Perform an action that is irreversible
• Perform an action with unknown consequences***

***Ideally, the flow leading up to this modal would make the action clear and the application wouldn’t need a modal to explain what the user just attempted to do. But hey, we get it, sometimes you can’t touch the flow due to budget or time constraints and clarity through a system modal is the best thing you can do in a particular situation to accommodate the user’s needs.

Why do they work?

Yes, these little modals can be annoying but are necessary in many cases — it’s not uncommon for me to design a dozen of them for a SaaS product. The point of a modal is to intentionally break the user from their flow (which is also why designer’s should only use this pattern when it fits the above criteria). This cognitive break increases the chance the user will absorb the information they need to proceed or fully understand their actions. So it’s intentionally in your face, flow-stopping, and invasive.🚨

Let’s see them in action:

Applications

Warnings: There will be consequences of an action trying to be performed. Using an icon or changing the color of text are choices that can be made to imply severity.

This has an icon so you know it’s serious. PAY ATTENTION, EVAN!

Prompts: When the user needs to make a deliberate choice that can’t be implied or when you want to suggest some hesitation. Asking the user to make a decision that will affect any future actions within the application, agreeing to terms and conditions before continuing on to the rest of the application, etc.

Who doesn’t want to allow location tracking? Surely nothing can go wrong with that!

Informational Pop-ups & System Errors: These can be particularly useful as a just-in-time discount onboarding technique where you may explain something to a user that they may not be familiar with. In this case it’s helpful to give the user a “Don’t show this again” option if it will be something that is rare but you want to be repeated a certain number of times.

The software is not only a tool, but a helpful friend.

What’s the UI Recipe?

The system modal can be built to be adaptable using Sketch’s nested symbols & overrides. Here’s a couple of tips to help you out:

• Title: A clear, understandable question indicating hesitance and confirming that the user wants to perform the action. 💎 Use a text symbol so you can easily swap out different states, colors, and weights without going back and re-aligning everything!
• Icon: Depending on the severity of the action, it might be necessary to use an icon to help gather the user’s attention and reiterate the fact that this action might have serious effects. If you aren’t a world-class illustrator, we love the Nucleo Icon Set. 💎 Use Auto-Layout to create a collapsable stack with the Title and the Icon so whenever you don’t need an icon, the text will align to the left of the modal.
• Body: Elaborate on the consequences and clearly state the options that the user has in a concise manner. 💎 Just like the title, we advise using a text symbol so you can easily swap out different states, colors, and weights.
• Footer: The possible actions that the user has. The language used in these should be clear and explicit. Pro tip: Read the title and make sure that the actions directly answer the question. Additionally, we like to use the left side of the footer for any other actions that don’t directly answer the question (i.e. “Learn More” or “Don’t ask me again”) 💎 Use nested button symbols in your footer so you can easily change to a hover, focused, or pressed button state with the ease of a dropdown!

Try it yourself!

Before you leave, don’t forget to:

• Download the freebie above!
• Check out Auto-Layout by Anima and learn how to use stacks in all of your designs. Seriously, these things make everything so easy and you’ll start to feel like a wizard when you see them in action.
• Grab the UX Power Tools design system to use this component and tons of others just like it.
• Share this tiny tutorial with your friends on your favorite social media platform!