The curious case of the Windows Phone UI

In a recent article I wrote about how Windows Phone 7 is Microsoft’s late entry to the smartphone game and how they reinvented their own wheels with it. Turns out I was a bit off the mark.

While the first WPhone7 device was certainly released much later (Nov 2010) than its Android (Sep 2008) and Iphone (Jun 2007) counterparts, its underlying operating system and the user interface actually predate both.

It turns out that the missing piece of this puzzle is the Zune. The Zune was Microsoft’s attempt at designing a portable media player to counter the Ipod. The Zune 30 was the first Zune device. It was released in November 2006 and came with a 30gb internal harddisk (hence the name). What’s curious about the Zune players is their UI.

zune80-vs-zune30

This is called the Metro UI. It started out simple, with sparse features, and as the Zune players switched to bigger displays and touchscreens, the Metro UI evolved with them. The final Zune devices came with an UI that can barely be told apart from the version of Metro UI on Windows Phone.

zune-hd-email

Windows Mobile, the Zune, and Windows Phone 7 are all built on top of Windows Embedded CE. This is a Windows version with a tiny footprint, targeted at mobile, consumer and industry embedded devices, which each implement their own user interface on top of it (a camera needs a different UI than a dvd player, for example).

However, WinCE does have its own basic general purpose UI – a simplified version of Windows Desktop. It’s aimed at exposing as many features of the underlying OS to the user as possible.

0001-desktop

If you compare this to the Windows Mobile UI, you will find that it attempts to fit the WinCE desktop UI into a small form factor.
Windows_Mobile_6.0_start

Connecting the dots

Okay, so where am I going with this? Considering how Windows Mobile and Windows Phone evolved, it becomes apparent why the former failed and the latter succeeded.

Windows Mobile was always considered a cluttered, overcomplicated mess. And it’s no surprise. It evolved in a top-down process – take something enormously complex and try to shoehorn it into a tiny package. Design metaphors from a desktop computer just don’t work on a small screen, and interface controls that are originally targeted at mouse input aren’t suited for mobile devices.

In contrast, the Metro UI started from scratch – you’re supposed to spend most of your time in the player interface, where every input has a corresponding hardware button on the device itself. Fonts are huge and easily readable, because the first Zunes had crappy screens. The only indirect UI elements, the menu and playlist, can be navigated with the clickwheel. Going from that, every new feature has to be designed around this established input model, with a strong emphasis on usability and design – after all, it’s Apple’s Ipod they were trying to take on.

The result is an UI that is polished, consistent and simplistic. Complex interfaces are split up into single pages which are navigated with up-down and left-right directional input (again, because of the clickwheel).

ScreenshotsE

Development from the ground up is one important factor for a good user interface. But with the Metro UI, it seems that the Zune platform with its small screen and the clickwheel was just as important.

It’s not obvious, but big fonts do wonders on any handheld screen – you don’t have to hold it close to your eyes to operate it. And grouping the interface into pages, then swiping directionally on the screen to navigate them is a great way of user interaction – for swiping, you can just touch the screen anywhere.

And like this, the one feature that Windows Phone has that both Ios and Android lack, is: you can quickly glance at the screen and flick through the pages and menus. It allows you to be lazy. Which is nice.

PS: Here is an interesting article about how Metro UI evolved on the Zune and was so successful that it spread to the XBOX and the Windows Desktop.

by