Expandable Notification Toast with timer for Saas App Dashboard
Expandable Notification Toast with timer
As part of my role as the lead designer on the Searcheye SEO platform, I was tasked with designing a set of notification toasts to be used across the product for system messages.
The key requirements were:
1. Expandable design: Each toast should default to a collapsed state to maintain a minimal screen footprint, especially on smaller devices. However, users should be able to expand it to view the full message when needed.
2. Timed visibility: The toasts should automatically appear for a set duration—long enough for users to notice and read them—and then dismiss themselves. We chose a 15-second display time.
3. Clear visibility: When a toast appears, it should be visually distinct and attention-grabbing, clearly signaling that a notification has occurred and requires the user's attention.
4. Flexible Positioning: In the platform settings, we allow users to choose the placement of toasts to best suit their workflow, with options such as top-right, bottom-right, and bottom-center. Therefore, the design needed to be flexible enough to accommodate all three placement options without compromising usability or appearance.
The final iteration you see here effectively meets all four of these requirements.
Increasing visibility and discoverability through contrast
Finally, I inverted the contrast of the toast to enhance its visibility and ensure it stands out when it appears. This change makes it nearly impossible to miss, as the increased contrast grabs the user's attention much more effectively compared to the original white-on-white version.
Here, you can see the 4 types of toast. Success, Error, Warning, and General Info.
