A modal is a way to display content in a separate, focused way. In iOS, modals are typically displayed as sheets with two fixed heights, called detents. When a modal is visible, a user cannot interact with the content behind the modal until they explicitly dismiss the modal.

Types of Modals

There are two types of modals that exist on iOS: high friction and low friction.

When you need a user to make a decision in your product, use a high-friction modal. It blocks parts of the interface and can only be dismissed once a user selects one of the modal’s options. High friction modals are good for confirming a deletion.

A low-friction modal blocks part of the interface, but, unlike a high-friction modal, users can dismiss it without making an either-or decision. These modals are good for announcements, onboarding flows, and confirmations.

In summary, high-friction modals prevent dismissal and low-friction modals allow dismissal. Read #2 in this article to learn more.

Modal Best Practices

When you're creating a modal, there's several tips to keep in mind to create the best experience for users.

1. Be Intentional.

   Modals take users out of their current context, so they should only be used when there is a clear benefit.

   
   

2. One Modal at a Time.

   Keep users in context by avoiding stacking multiple modals. Modals relate to the background content, so the more layers on top, the more likely it is that a user will forget their original intent.

   
   

   

   
   

3. Include a Grabber.

   Grabbers indicate to users that they can resize the modal when it has multiple detents, such as medium and large.

   
   

   

   
   

4. Support Swiping.

   When creating a low-friction modal, stay consistent with iOS guidelines by allowing users to swipe down to close a modal. High-friction modals don't need to support swiping.

If you're thoughtful about when to use a high-friction modal vs. a low-friction modal, and you follow these guidelines, your modals will look great!