Brand
Microsoft Xbox
Xbox Notifications
Metro UX/UI Concept
Role
UX Design
UI Design
Concept/Case Study
Platform
Xbox Gaming System
Overview
Metrofied Notifications
I’ve owned an Xbox for several years now, and my excitement was palpable when Microsoft first announced and subsequently launched the new Metro dashboard redesign. This revamped interface resonates with me due to its significantly lighter and cleaner aesthetics compared to previous iterations. While it takes a bit of time to acclimate to, those who are familiar with the Windows Phone or Windows 8 UI should find themselves quite at ease.
Although I appreciate the overall interface and its many features, I can’t help but feel that Microsoft somewhat neglected the aspect of notifications. The attention to detail in this area appears lacking and feels somewhat hastily executed. It seems that notifications were left untouched during the update process.
The concept
I embarked on devising strategies to enhance the utility and coherence of Xbox notifications, seamlessly aligning them with the new Metro UI design language. This pursuit led me to categorize notifications into four distinct groups, each meticulously color-coded to harmonize the icon and font.
To heighten efficiency, I eliminated the circular element and the visual cue indicating the player who attained an achievement. Instead, I adopted a similar dynamic observed in Windows Phone interfaces. The concept involved the tile or green Xbox logo performing a subtle “jump” effect while the avatar image ascended from the bottom, pushing the tile upward concurrently. This approach not only mirrored familiar behavior but also significantly improved the clarity of identifying the player associated with an achievement, making the whole process more intuitive.
Color-coded Xbox notifications
Green
Reserving the color green for notifications of iconic significance, such as achievements, establishes a clear and consistent visual language. A noteworthy asset for developers is the capability to embed an achievement image within the notification. This enables users to receive a visual cue that precisely indicates the achievement they’ve earned.
Yellow
Exclusive to saving actions, the yellow notifications mirror the yellow LED light on the Xbox console during saving processes, offering a sense of familiarity to all Xbox users. These notifications are coupled with a distinct save icon, ensuring immediate recognition and comprehension.
Orange
Notifications colored in orange cater to various informational scenarios. They can be utilized to showcase reminders like “Reconnect the controller” or convey warning messages to the user. Moreover, these notifications feature a diverse range of icons, tailored to specific cases.
Red
Notifications highlighted in red signify alert notifications and should exclusively be reserved for extremely crucial matters that demand immediate user attention. In scenarios where something has significantly gone awry and swift user action is imperative, red notifications are the ideal choice to employ.