Over a million developers have joined DZone.

Visual Inconsistency and the WP7 Application Bar

· Mobile Zone
Petter Silfver, a UI/UX designer in Stockholm, has a problem with the Windows Phone 7's application bar icons.  You see, the Microsoft UxD Guidelines have developers working with a controller to display the app's four most common tasks as little icon buttons.  The problem?  The guidelines for the icons require that they be situated inside a small white circle.

Silfver thinks that the requirement to place all of the icons inside circles will make users have to think more about the buttons every time they go to press them, rather than "reacting" to them:

Why is [the circle requirement] 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 and the icon have the same colour applied

Text labels can be arranged beneath the icons, but this is problematic for two reasons.  First, making the user read text to identify the button and its function complicates the navigation process.  Second, even if the text were a good idea, the WP7 user is required to press another icon on the bar to make the text appear, meaning that the process of navigation is prolonged by adding an extra button press.

Silfver's asked the Microsoft designers about this requirement at a design seminar in Stockholm but didn't get a straight answer.  Since he forgot to give the devs his e-mail address, he wrote his blog post in an attempt to re-establish contact and get the mobile design community's input.  We'd also love to hear your thoughts about visual inconsistency and UI design here in the combox!

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}