User Tools
design:modals_on_mobile_devices
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
| design:modals_on_mobile_devices [2021/01/26 12:04] – created 10.91.120.28 | design:modals_on_mobile_devices [2021/06/25 10:09] (current) – external edit 127.0.0.1 | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | ====== 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: | ||
| + | |||
| + | {{ : | ||
| + | |||
| + | ==== 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:// | ||
| + | |||
| + | https:// | ||
| + | |||
| + | https:// | ||
| + | |||
| + | https:// | ||
Page Tools
