In-App Notifications

Guidance on using in-app modals and banners for non-time-sensitive recommendations.

In-app recommendations (such as modals, banners, or pop-ups) are ideal for recommendations that add value to the user's current session but do not require their immediate, time-sensitive action. They appear within the app's interface, allowing for richer content and more complex interactions than push notifications.

In-app notification within example app

Design and Layout

Display Full Text

Unlike push notifications, in-app messages have more screen real estate. The recommendation text should always be presented in full without requiring the user to expand it.

Clear Call-to-Action (CTA)

Action buttons for the recommendation should be clearly displayed and visually distinct. We suggest a consistent layout:

• Primary Action: Positioned prominently (e.g., on the left or as a primary button). This action should be the most desired outcome for the recommendation.

• Secondary Action(s): Positioned less prominently (e.g., on the right, as a text link, or an outline button). These offer alternatives, such as "Later" or "Learn More."

Contextual Relevance

Ensure the in-app recommendation appears at a logical moment in the user's journey, relevant to their current activity or recent behavior. Avoid interrupting critical tasks.

Visual Consistency

Maintain a consistent visual style that aligns with your app's overall design language. This helps the recommendation feel like an integrated part of the experience, not an intrusive ad.

Concise Messaging

While you have more space than a push notification, keep the message as brief and to-the-point as possible. Users scan, they don't read every word.

Accessibility

Design with accessibility in mind:

• Ensure sufficient contrast between text and background.

• Use appropriately sized fonts for readability.

• Support screen readers by providing proper labels for interactive elements.

---

Interaction and Dismissal

Dismissal Mechanism

Users must have a clear and easy way to dismiss the in-app notification. This prevents frustration and allows users to return to their task. Common implementations include:

• Close Button: A standard 'X' icon, typically in the top-right corner.

• Swipe to Dismiss: Mirroring the behavior of an OS-level push notification by allowing the user to swipe it away (if applicable to the UI element type, e.g., a banner).

• Tap Outside (for Modals): For modal pop-ups, consider allowing a tap outside the notification area to dismiss it, provided it's not a critical, blocking message.

Non-Interruptive Placement

For less critical recommendations, consider using less intrusive placements like banners at the top/bottom of the screen or subtle in-feed cards rather than full-screen modals.

Testing and Iteration

Continuously test different placements, timings, and messaging for your in-app recommendations to understand what resonates best with your users and drives the desired actions. A/B testing can be invaluable here.