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:

Pop-Ups
- These are messages that pop-up on screen looking for push notification permissions or location services opt-ins for example.
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.
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.

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:

To interrupt the user to make a decision at an important part of a workflow.
To ask for feedback or to confirm an important action. e.g. “Are you sure you wish to delete all users?”.
As a way to deep dive into a particular piece of content i.e. an image, article, or video.

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.

Do

Use modals wherever there is a change a users’ work will be lost or that an action has irreversible consequences.
Use modals when missing information prevents the system from continuing a process that the user-initiated.
Modals should be tailored to your app so they look native. This promotes a natural app experience.
Make sure you use compelling copy (text) that conveys information clearly to the user.
Modals should appear to the user at the right time. This requires plenty of user research and interviews to determine the optimum times for modals to appear.
Modals should have Save & Cancel buttons (or similar) instead of back buttons.
Place the close button in the lower right of the modal (near where a user’s thumb can easily press it).
Design buttons or interactions with touch target sizing in mind. A user should easily be able to tap a button to interact with it.
Use a genie effect to open and close modal boxes to provide an understanding of where the window came from. This helps the user to better understand where the modal comes from:

Don’t

Don’t use modals as a dumping ground for misplaced content. Always consider the reason for using a modal and if it could be implemented in a more effective way.
Don’t use modals for non-essential information. Just like the boy who cried wolf, the user will not give attention to other modals of this type.
Don’t make the user scroll within a modal window.
Don’t allow access to the primary navigation when a modal is on screen. A user should close or interact with the modal before they can continue using the primary navigation.
Don’t use modals that interrupt checkouts or other high-stakes processes.

Conclusion

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.