Concept
Xbox Notifications
Project type
UX, UI, Concept
Platform
Xbox Gaming System
Metrofied Notifications
I’ve had an Xbox for a few years now. So I was pretty excited when Microsoft announced and later on released the new Metro dashboard redesign. I like it a lot since it is much lighter and cleaner then the previous iterations. It does take a bit more time to get used to it, but people familiar with the Windows Phone or Windows 8 UI should feel comfortable already.
As much as I like the overall interface and everything I think Microsoft neglected the notifications too much and did a sloppy job there. I think the notifications weren’t touched at all in the update process.
The concept
I began to think how to make the Xbox notifications more useful and streamlined, and also perfectly integrated in the new Metro UI design language.
There are 4 different categories that a notification can have. All the new Xbox notifications are color-coded. So you have the icon and the font in the appropriate color.
I also got rid of the circle and the visual aid to see which player just got the achievement. In the new version you have a similar effect to the windows phone where the tile/green xbox logo kind of “jumps” up and the avatar picture comes from the bottom up and pushes the tile up (watch a video of a windows phone where the contact tiles go crazy on the start screen). That would be the same (and known) behavior and much easier to see which player just got the achievement.
Color-coded Xbox notifications
Green
Green notifications should be iconic and strictly used for achievements. A handy feature for developers is the ability to place an achievement image inside the notification, so the user could get a visual clue on what achievement he just won.
Yellow
Yellow notifications are reserved only for saving. The color matches the yellow LED light on the Xbox itself when it’s saving, so it should be familiar to any Xbox user. The notification is accompanied by a save icon, so it’s instantly recognizable.
Orange
Orange notifications are for all kinds of info scenarios. You could display a reminder such as “Reconnect the controller” or other messages that warn the user. These notifications also have different icons to suit different cases.
Red
Red notifications are the alert notifications and should only be used for very important stuff that needs the users’ attention right away. So if something went really wrong, this kind of notification would be perfectly suited to use in this case.
