Mobile Zone is brought to you in partnership with:

David has posted 32 posts at DZone. View Full User Profile

Visual Inconsistency and the WP7 Application Bar

  • submit to reddit
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!
Published at DZone with permission of its author, David Pell.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)


Robert Craft replied on Thu, 2012/01/26 - 6:07am

In some stupid decision an ApplicationBar isn't a standard Silverlight object, because of that it doesn't really fit in the visual tree, can't be bound to and x:Name doesn't work. You can refer to the ApplicationBar via a property on the PhoneApplicationPage. var helpItem = this.ApplicationBar.MenuItems[0]; var aboutItem = this.ApplicationBar.MenuItems[1];

Spring Framework

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.