January 27, 2021

UI Design Patterns - How To Use Modals On Mobile Devices

Reading Time: 5 mins

I recently did some research into the best practices for designing modals on mobile devices.

This is something we are looking to implement across our mobile apps at my job so I needed some help in understanding how these types of components work and how they’re supposed to be used.

With that in mind, I’d like to share with you the results of my research on how to use modals on mobile devices.

Hopefully, you’ll find this information helpful and a good source of reference if you’re considering something similar.

Modals On Mobile - Pin

What Are Modals?

Let’s first start by getting clear on what a modal is.

A modal is a screen that pops up in order to prompt a user to complete an action before returning to the main window. This can be for example save or cancel.

There are different types of modals (which we’ll discuss below) but because of their central and dominant location on screen, modals will interrupt the current flow of the user through an application.

This can be of benefit as a well-designed modal will grab a user’s attention for important information or decision making actions.

On the other hand, a poorly timed modal can cause the user to forget what they were doing.

A sudden switch in context can add to the user’s cognitive load which can lead to them forgetting what task they were in the middle of before the modal appeared.

This is why it’s important to consider when and why you are using modals to ensure an optimal user experience through your app.

Different Types Of Modals

Let’s now take a look at the different types of modals and when you might use each.

The 3 most common types of modals that are most frequently used are:

  1. Pop-Ups

    • These are messages that pop-up on screen looking for push notification permissions or location services opt-ins for example.
  2. Partial Overlays

    • These modals take up part of the screen as their name suggests.
    • They are most commonly used for in-app tutorials to guide the user through an app for the first time or showing how a new feature works.
  3. Full-Screen Overlays

    • These modals will take up the full screen.
    • They are used to prompt the user for very important confirmations such as confirmation of critical actions.

In addition to carefully considering if you should use a modal, it’s also important to determine the best type of modal to use in any given scenario.

How Users Interact With Mobile Devices

Let’s take a quick break here to briefly talk about how users interact with their mobile devices.

Users most commonly hold their phone in their dominant (usually right) hand and use their thumb as the primary navigation tool. In fact, most mobile apps are designed with this in mind.

This is important to consider when designing all components on a mobile app, not just a modal.

Consider how large your own phone is and imagine trying to tap the top left corner with your thumb when holding your phone in your right hand.

Think about this concept the next time you’re using your phone and understand the best placement for important vs less important components.

When Should I Use A Modal?

Now let’s get back to discussing when you should use a modal.

Modals should be used for short dialogs with the user, not long complex decision making tasks.

A good rule of thumb to remember here is this: use modals for self-contained processes and use normal windows for everything else. A self-contained process is an action with a clear start and endpoint.

In addition to this you can think about using modals in the following ways:

Now that we’ve covered what a Modal is and when you should use one, it’s time to cover some best practices.

I’ve divided them up into Do and Don’t.




I hope you found some useful information in this article. If you did, please consider sharing it on social media. It will help others to find it and that would really help me out.