Notifications UI Design Patterns & Examples
Notification, alert, and inbox UI design patterns from top apps. Browse push notification UX, in-app notification centers, badge designs, and empty-state inbox patterns from real iOS and web products.
Apps with Notifications screens
4 apps
How to Design a Notifications Screen
Step-by-step guide to designing an effective notifications experience for your app.
Step 1.Categorize notifications by intent
Split notifications into Transactional (order shipped, payment received), Social (likes, mentions, follows), System (updates, security), and Marketing (promos). Each category needs different urgency, copy, and frequency rules.
Step 2.Design the empty inbox state
First-time users should see a friendly illustration + copy like 'You are all caught up'. Add a CTA pointing to the action that generates notifications (follow people, enable alerts) instead of leaving the screen blank.
Step 3.Build a clear visual hierarchy per item
Each notification row: avatar/icon (48px), bold subject line, one-line context, timestamp top-right. Unread items get a colored dot or background tint. Tap target = full row, not just the avatar.
Step 4.Group similar notifications
'Alice + 12 others liked your post' beats 13 separate rows. Group by actor + verb + object within a 24h window to keep the inbox scannable.
Step 5.Add filters and mark-all-read
Top-bar filters (All / Mentions / Replies) help power users find what matters. 'Mark all as read' should be one tap, with undo, never hidden in a settings menu.
Step 6.Design the push notification copy
Mobile push gets ~40 chars on lock screen. Front-load the most relevant info (who + action). Bad: 'New activity on your account'. Good: 'Maya commented on your post: This is gold…'.
Step 7.Build the permission priming flow
Never trigger the iOS / web notification permission on first launch. Instead, show a custom screen explaining the specific value (e.g. 'Get notified when your order ships'), then trigger the OS prompt only after user accepts.
Step 8.Respect notification fatigue
Cap to 3–5 push notifications per week for non-transactional content. Add granular notification preferences in settings. The cost of one annoying push is one uninstall.
Frequently asked questions
What is a notification UI design?
Notification UI design covers two surfaces: (1) the inbox / notification center screen inside the app, and (2) the system push notifications that appear on a user's lock screen, banner, or browser. Both must be glanceable, categorized, and respectful of attention.
What apps have the best notification designs?
Slack (clear categorization), Linear (smart grouping), GitHub (verb-based copy), Discord (status + read state), and Stripe (transactional clarity) are common references. Browse notification examples on Gummble.
How many push notifications per week is too many?
For non-transactional content, cap at 3–5 push notifications per week. For transactional notifications (order shipped, payment received) there is no upper bound — users expect them. The cost of one annoying push is one uninstall.
When should I ask for notification permission?
Never on first launch. Show a custom in-app screen explaining the specific value first (e.g. 'Get notified when your order ships'), then trigger the OS permission prompt only after the user opts in. This typically doubles opt-in rates.