I attended a Microsoft Windows Phone 7 (WP7) design seminar here in Stockholm last week, where two designers from the Microsoft design team gave a comprehensive insight to the rationales behind the Metro design language. Of course, you do not need a four hour presentation about Metro to understand that Microsoft has been greatly inspired by the international typographic style, wayfinding and environmental design — but it was really rewarding to listen to the people behind the brush talk engagingly about their craftsmanship.

Personally, I have been working on a lengthy article about navigational design for the last couple of months, which has involved looking at a myriad of menu designs solutions on different platforms, websites and applications. It was during my research I rediscovered something about WP7’s application bar that has been bothering me ever since the first time I had Microsoft’s flagship mobile OS at the tip of my finger. At last I had the perfect opportunity to ask Microsoft about this – however, before I tell you the question and the answer I got from the design team, let us just do a quick recap about what WP7’s application bar is really all about.

The application bar

WP7’s application bar – according to Microsoft’s UxD Guidelines – provides a UI controller for designers and developers to “[…] display up to four of the most common application tasks and views as icon buttons.” Its intended functionality is quite similar to Android’s options menu and action bar, iPhone’s toolbar, Nokia N9 toolbar, Blackberry Playbook’s toolbar, and webOS Enyo’s toolbar. To put it simply, the application bar gives the user a certain amount of contextual actions which they can perform depending on the view and state they are in.

The circles

Reading even further in Microsofts UxD Guidelines regarding the actual icons in the application bar, it is stated that “[…] they should be 48 x 48 pixels and have a white foreground on a transparent background using an alpha channel […]” and “[…] the white foreground graphic for the button should fit in a 26 x 26 area square in the center of the image so that it does not overlap the circle.” Wait a minute – circle, what circle? Well as you can see in the image above, the OS applies a outline circle to all the application bar icons, and unfortunatley, there is really nothing you can do about it.

Why is this bad? As stated earlier, I have been working on an article on the subject of navigational design, and one of the most important facts I have found in my own research is that the form of the icons in a menu system must be as visually differentiated as possible (i.e. have a high intergroup saliency) to enable users to easily identify the one option that satisfy their current usage goal. The problem with the circles in the WP7 application bar is that they make the outline and the white space of all the icons look the same, which in many cases forces the users to read the icons rather than to instinctively react on them. On top of that, the circle and the icon gets the same colour applied to them (see Figure 2 below).

Truth be told, there is a way to display textual labels beneath the icons (that are actually required to be able to implement the controller), but it is only displayed once the user taps the three-dotted icon in the right margin of the application bar. Even so, this is not a desirable solution to force the user to perform yet another tap before they can make up their mind about what option to use.

The answer

As the designers from Microsoft opened up for a Q&A after their presentation, I had built up some courage to finally drop my question about the circles. The answers I got was (rather paraphrased): “We don’t have a straight answer to that”, “that’s a really interesting observation” and “we promise to get back to you”. However, I forgot to give the designers my email address during the break, so this article is my way to repeat my question to Microsoft, spread it to the mobile design community and hopefully get an answer to the question: “Why the circles?”.

Only when the design fails does it draw attention to itself; when it succeeds, it’s invisible.

John D. Berry

If you have any kind of feedback or input for improvements, just hit me back with an e-mail or via Twitter.