When I first watched the XBOX 360 release video from OurColony – released during the last E3 – what struck me as nice (despite all the video and marketing makeup) was the user interface featured on it – supposedly, the new XBOX 360 interface. Despite just showing a few seconds of it, it felt really good and had that interactively animated feeling only the best Flash sites have. You know… you click stuff and stuff moves, and it all makes sense somehow.
So it really made me pleased to find out that Design Interact has just had a talk with Microsoft interface design manager Russ Glaser, speaking about designing the console’s graphical user interface. It mainly discusses the problems that arise when creating the visual identity for a new, digital media, with barely any prior art to learn from. To quote,
The task was so detailed and massive that the Xbox engineers even built their own custom Flash-like animation tool. For much of the time, Glaser and his team worked closely with design firm AKQA, while also coordinating their efforts with branding and industrial design groups.
At the same time the designers had to deal with an unfamiliar input device—the gaming controller—and the limitations of television screens. Unlike computers, where people sit a foot away from the screen and can read fine print, the typical Xbox user lounges ten feet from the TV and can’t see anything smaller than 16-point type. In practical terms that means large fonts are in and complex dropdown menus are out.
“We always made sure when we were designing screens to look for stuff that wasn’t adding value,” says Constantinou. “If it’s not adding value and it’s there only as a visual, we ripped it out.”
Albeit a bit short, the article is nice and filled with screenshots of the interface, and still worth a read. Sadly, no additional movies of the interface being used are present.
Update: There’s a few more information about the XBOX 360 user interface here – including higher resolution screen photos and a couple of shaky cam videos, although those are more descriptive than “in action”. Higher resolution, direct-feed screenshots can also be found here.
In the end, it looks pretty tight, although I think what really makes it cool is, again, the interface animation. Element transitions FTW!