Internal Errigal Collaboration Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== How To Use Modals On Mobile Devices ======

===== What Are Modals? =====

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.

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

There are different types of modals (discussed 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.

===== Different Types of Modals =====

There are various types of modals but the 3 most common 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.

===== How Users Interact With Mobile Devices =====

Users most commonly hold their phone in their dominant (usually right) hand and use their thumb as the primary navigation tool. 

Most apps are designed with this in mind.

This is important to consider when designing all components on a mobile app, not just with 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.

Because modals should be used for short dialogs, if you're designing a complex modal with lots of content for a mobile device, consider using a different type of component.

===== When Should I Use A Modal? =====

Good rule of thumb here: use modals for self-contained processes, use normal windows for everything else.

A self-contained process is an action with a clear start and end point.

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.

===== Modal Design Best Practices =====

==== 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:

{{ :design:modal-interaction-with-genie-effect-1.gif?nolink |}}

==== 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.


===== Resources =====

https://www.appcues.com/blog/mobile-app-modal-windows

https://www.nngroup.com/articles/modal-nonmodal-dialog/

https://uxplanet.org/modality-the-one-ux-concept-you-need-to-understand-when-designing-intuitive-user-interfaces-e5e941c7acb1

https://uxmag.com/articles/modals-on-mobile-how-to-use-them-wisely
Sidebar

Internal Errigal Collaboration Wiki

User Tools

Site Tools

Page Tools
