Understanding Modals and Sheets, Native iOS Design Patterns

Modals and sheets are key design elements in iOS, but their definitions often leave designers confused. In this article, I’ll break down the differences between the two, clarify their purposes, and answer questions like this:

Once you finish reading this article, you probably won’t need to ask this question again — unless Apple changes all their design patterns. That’s highly unlikely; while trends may change each year, design patterns tend to remain constant.

Ok…but, who are you again? Why are you explaining this to me?

I am a product designer with extensive experience in native iOS mobile app development over the past six years. This isn’t about just any cross-platform React Native mobile app. My previous company developed one of the most complex and functional native apps on iOS and iPadOS. I worked on both feature development and the iOS design system on the design team.

What does this mean? It means I have studied iOS design patterns extensively.

Ok… but, doesn’t Apple have documentation on that?

Have you read this documentation from Apple’s HIG? Still confused? Yep, I thought so.

This is where Apple’s documentation falls short — they didn’t define it clearly! If you’re confused, try replacing “Sheet” with a more generic term like “view”. Now, let’s help Apple define a sheet:

A sheet is a special type of view that helps people perform a scoped task closely related to their current context.

Two key details from this new definition:

1. It must be a scoped task — one singular task, not multiple tasks. If you have multiple tasks, you could use multiple sheets (yes, that exists — see the figure below).
2. That singular task must relate to the current context.

I bet now you will never be confused about what a sheet is.

Ok… but now I am confused about what a modal is.

let's just keep reading:

Wait, what? So a sheet is a modal now? And there’s this thing called a “Modal Sheet”? What is a Modal Sheet? A sheet that acts like a modal, of course!

Okay, but if a sheet is just a special kind of view, then what’s a modal? Aren’t they sort of… a view too?

Here’s what Apple has to say about modality. Notice the navigation on the left-hand side — it’s under “Patterns.” One thing Apple could’ve specified: a modal is not a component; it is a design pattern.

Two key aspects of the modal’s Presentation according to Apple:

Modals present content in a separate mode (yes, a view), and must meet these requirements:

1. It must prevent interaction with the parent view. Yes, they did use the term “view,” and there’s a parent. So really, a modal is a “child view.”
2. It requires an explicit action to dismiss.

Ok, got it! Class is over. To recap:

• A sheet is a view that facilitates a single task related to a specific context.
• A modal is a design technique that displays a child view in a manner that prevents interaction with the parent view and requires an explicit action to dismiss.

Ok… but how are they related to each other?

Here’s my ugly diagram, and what's missing from Apple’s definition.

This explains why Apple uses the following example to illustrate a non-modal sheet:

• ? It is a sheet because: It shows a single task — formatting some content — that is related to a context, such as the selected texts.
• ? It is not a modal because: Users can still interact with the parent content.

Ok, now that the class is truly over, let’s tackle the original question.

Let’s assist in identifying use cases for both sheets and modals.

As designers, before diving into solutions, it’s crucial to establish clear requirements. According to our new definitions, the original request translates to these points:

1. When should you use a modal sheet?
2. When should you use a non-modal sheet?
3. Edge case: Are there situations where neither a modal nor a sheet is suitable?

The first two answers are straightforward:

1. Use a modal sheet when you are presenting a single task, there’s no need to interact with the parent content, and your view is temporary with a way to dismiss it.
2. Use a non-modal sheet when you need to keep both the parent and child views interactive while presenting a single task.

Now let’s consider the edge cases.

This is also simple: it involves scenarios that don’t fall under the first two categories.

To qualify as a modal, it must apply to a temporary view; to qualify as a sheet, it must involve a single-scoped task. Therefore, if it’s a multi-task view that persists, you can’t use a sheet, a modal, or a modal sheet.

An example where neither a sheet nor modal would be suitable is when displaying detailed settings. In this case, a persistent screen with navigation options (such as a settings page) would work better than a temporary sheet or modal, as users need to interact with multiple tasks simultaneously.

Or consider a sidebar. Why?

Although the sidebar is dismissable, it accommodates multiple tasks. From the following screenshot, you can identify at least two tasks: editing content and navigating to another location.

By understanding when to use modals and sheets, you’ll create smoother user experiences and avoid common pitfalls in your iOS designs. Have you encountered tricky design patterns? Let me know in the comments!

#ProductDesign #iOSDesign #AppleDesignPatterns #UXDesign ?#ImposterSyndrome #ProductDesignCommunity