Designing Mobile Notifications & Dialogs

In UI, modal dialogs (aka overlays and dialog windows) refer to small windows that appear on the top of the main content and require users to interact with them. Modal dialogs are notably interruptive, blocking the main content until users dismiss, confirm, or take the needed action.^[1]

In contrast, non-modal dialogs don't impede user flow, and users can continue doing what they are doing while the dialog stays open.

The most common use case of modal dialogs is to alert users to an error or inform them about something critical that demands their attention and action. Dialogs may appear intrusive, annoying, and interruptive but they help users detect problems or fix them before further damage is done.

Modal dialogs are the best option for delivering critical information that requires immediate user attention. They're urgent and interrupt what users are doing, forcing them to step back from their current task and take action.

However, designers should be careful of timing and avoid modal dialogs interrupting high-stakes processes such as checkout flows. If there's no valid reason for modal dialogs, users can get easily distracted or lose their confidence.

We can also use modals when the requested information can significantly reduce the work or effort put in by users. Asking users to log in or sign up during the checkout won't help them complete their purchases faster because they may need to remember their credentials and enter them. If they fail to log in or consider the signup tool complicated, you'll lose them.^[2]

Mobile dialogs excel at drawing user attention to important information. This makes them effective for highlighting key offers or critical updates but requires careful design balance.

For maximum effectiveness without frustration:

• Use dialogs sparingly for truly valuable content
• Time them appropriately around user tasks
• Ensure they're neither too intrusive nor too subtle

Design dialogs to be noticeable but not overwhelming. Make them large enough to read easily but not so large they block important content. Provide clear dismissal options and ensure touch targets are easily tappable.

Modal dialogs serve as gatekeepers for essential actions in the user journey. They appear when users' authorization or permission is required to proceed with the current task.

These dialogs maintain context while obtaining necessary approvals. For instance, when unregistered users attempt to save content, a modal requests authentication without disrupting their browsing experience. Similarly, location-based services use modals to request permissions that enable core functionality.

Non-modal dialogs offer a less disruptive alternative for collecting optional information that doesn't block the main task flow. These work well for feedback surveys or preference settings where immediate action isn't required.

Complex data entry requiring multiple fields should avoid dialog interfaces entirely. On mobile devices, navigating through form fields in a confined space creates unnecessary friction. Such interactions benefit from dedicated screens that provide adequate space and a clear structure for data input.

Dialogs interrupt what users are doing, so it's essential to give them clear ways to close them and return to their tasks. This respects users' control over their interactions and helps maintain their focus.

For dialogs showing non-critical information, offer several intuitive ways to dismiss them:

• The standard close button in the top right corner
• Background click/tap to dismiss

When dialogs contain important information or need specific actions, think carefully about closing options. While you want to prevent accidental dismissal, always provide clear ways to exit. The key is matching dismissal methods to the dialog's purpose — critical information might need more deliberate closing actions, while general updates should be easy to dismiss.

Even if users expect modals to appear, they’ll most likely want to close them as soon as possible and get back to the task at hand. Buttons are the best tool to allow users to do that. The microcopy on the button label should be notably clear and specific about what happens after users click it.

Avoid generic words like "yes," "no," "cancel," "submit," or "confirm" if they don't add to the meaning. Instead, be more descriptive so users can immediately understand which action they should implement.

If you're struggling with formulating a better command, ask yourself, "What will happen after users tap the button? What will they get?" For example, after clicking the button, a file gets removed. In this case, the primary button label should say "Remove file," whereas the secondary button label should prevent users from doing it and say "Cancel.” "Cancel" is explicit enough here because it's combined with a more contextual primary button.

Push notifications matter for both businesses and users — they help keep users engaged while providing timely updates about important activities. However, when system permission dialogs appear suddenly, many users decline them to avoid potential notification overload.

Plus, standard permission dialogs are often too small and rigid to properly explain why an app needs certain access. This makes it hard for users to understand the real purpose behind these requests.

This is why many apps now use primer screens — custom in-app messages that explain notification benefits before showing the system permission request. These primers match the app's design style while providing better context.

To design effective primers:

• Choose the right moment: Ask for permissions when they make sense to users. For example, request notification access when someone creates a post they'd want to hear updates about
• Show clear benefits: Use the primer's space to explain exactly how notifications will help users, keeping your message friendly and direct

When designed correctly, push notifications provide relevant information to users, encouraging them to engage with the app. However, most users associate push notifications with annoying, distracting messages that are better to be muted as soon as they start using an app.

Ideally, push notifications are time-sensitive and deliver information that is beneficial for users. However, when notifications appear on a screen without a valid reason, users feel like they've wasted their time by looking at the screen.

Make sure to send notifications at appropriate times and don't send non-critical push notifications at 3 in the morning. Use users' locations and rely on their preferences and behavior to send relevant messages.

Additionally, push notifications should be personal — demonstrating to users that the app cares about them. For example, if an individual goes to sleep every day at a certain time, a sleep tracker app can send a push notification reminding users that bedtime is approaching.

Push notifications commonly consist of a title, body text, app icon, image, and actions that allow users to address notifications without opening an app. Depending on the operating system, messages have strict character limits and different style characteristics.

For example, Android push notifications have an app name and a small app icon provided by the system placed above the title.^[3] On iOS, only the app's icon defines the sender.

How can a designer enhance the scannability of push notifications?

• Keep the title and body copy concise — 30 and 40 characters, respectively — to avoid truncation.
• Avoid repeating the brand name in the body copy if it's already clear from the title and icon.
• Use relevant graphics; refrain from using emojis or illustrations that don't enhance the meaning.
• Capitalize select words for emphasis, but use this sparingly.
• Employ clear and straightforward language so users immediately understand what they need to do or what to expect.

Notifications that come too frequently are like annoying waiters who keep approaching your table every 10 minutes to ask if everything is okay or if you need anything else. Such behavior makes your app look unprofessional and needy and forces users to turn off notifications, or, worse, delete the app.

First, explore your users’ needs and learn what information they find relevant and how often they consent to see it.

Second, avoid sending multiple notifications in bursts. Consider if you can combine a few notifications into a single message. Also, figure out if your users actually find all your notifications useful. Focus on quality rather than quantity.

Personalized push notifications are more likely to grab users' attention and make them more invested in opening the app.

How can you make your push notifications more tailored to each individual?

• Address users by their name. People generally love to be addressed by their name and seeing it in the body text can make them feel more relaxed.
• Analyze their app behavior and remind them of activities they're used to doing, like ordering a takeaway at lunchtime or doing yoga in the morning.
• Learn your users' preferences and use this information to encourage users to take action. For example, you can send them notifications to watch more content from profiles they visit more frequently or provide promo codes for the restaurants they order from all the time.

You may have created amazingly informative and well-timed push notifications. Users may still wish to permanently switch notifications off or mute them for a few hours because:

• They receive too many notifications overall
• They have an important task to concentrate on without any distractions
• Your app notifications are less relevant to them at the moment

In any case, the important thing is to allow users to stay in control. It makes them feel more comfortable knowing they can turn off notifications without having to manually dismiss them each time they appear on the screen. Ideally, users should be able to manage notification settings within the app without going to their phone's native settings.

Avoid using button labels that elicit feelings of shame and fear of missing out when users want to unsubscribe or opt out from subscribing. Making users feel uncomfortable can trigger stress and anxiety and disrupt trust in the product.

In turn, modal dialogs usually request an action to be closed and require users' attention. It's important that users understand at a glance which action confirms a choice and which cancels that choice. A classic example of the most unclear word choice is a modal asking for users' confirmation for the cancellation of changes by offering two confusing buttons: Cancel and Yes.

Users stumble upon such ambiguities and slow down their flows. You make dialogs easier to close by avoiding vague language and making sure buttons are as specific to context as possible.