7 of 10 - Place your buttons well… Floating buttons, home buttons, and back buttons… Oh my!

7 of 10 - Place your buttons well… Floating buttons, home buttons, and back buttons… Oh my!

  • Comments 4
  • Likes

To provide a consistent experience throughout the WP7 platform, it's important to follow a common structure while placing buttons. Doing so will provide a consistent, and simple structure for users to navigate through.

It is also important to understand what the hardware and software will give you for free.  Using these freebies, will mean that you tap into the muscle and mental memory that user develops when using their Windows Phone.  For starters, all Windows Phones contain three hardware buttons—back, home and search. Understanding how these buttons are utilized throughout the system can mitigate issues within the UI and flow of your application.

Home buttons/back stack
Placing home button within your user interface deviates from the WP7 navigation model.  While innovating on the platform is not necessarily bad, changing the expected interaction model of the platform can have a potentially negative impact.  Specifically, you might be requiring the user to develop a new mental model, one that they may only apply in your application.  Thus making your application and the platform feel harder to use.

Implementing a home button in your application may also cause a second issue, one that has a much more severe implication for your application.  You might inadvertently create a scenario where a user can get stuck in an infinite (or near infinite loop) when using both your home and the product’s back button to navigate your application’s interaction.  Specifically, if a user has to repeatedly rely on a home button to start tasks within your application, when they try to leave the application using the back button you might be forcing them to retrace every step they took in your application.  That is bad.  This loop may get worse if they use the back button to move from one application back through your application just to get to another.  You should be sure that these issues does not occur in your application.  If you absolutely believe you must have a home button test for these negative scenarios and do your best to eliminate them.

We understand that all applications have a different interactive flow, some more complicated than others, our recommendation is to try to keep the architecture of your application as shallow as possible and to leverage the use of list and pivots so the user can navigate back to the landing screen with few steps back and from there to previous launched apps.  When in doubt try to mimic common elements and navigation structures already in the platform , you'll be less likely to confuse the user.

clip_image001
Back and Close buttons

This one is simpler, it should be no “Back” or “Close” buttons at all within the user interface.  Again, we give you a back button for free.  So use that extra space to keep your app clean and simple.

clip_image002
Floating Buttons

Floating buttons within an application produces an inconsistent, confusing navigation. Utilizing the app bar is the best way to add actions on a particular page. When those icons/buttons couldn’t be on the app bar, be sure to place them consistently within your UI. Variable placement may interfere with content browsing—the icon may not even look like an interactive element. Therefore, an accidental tap from the user could lead to an unexpected result. Providing structure and incorporating an standardized placement for the main tasks on your app creates a familiar experience for the user, page after page. The WP7 library of common controls provide a consistent approach to implementing icons/buttons within your UI—we recommend to follow layouts suggested by the design guidelines in order to achieve interaction that is common throughout the WP7 platform.

- Alfred Astort
Follow the Windows Phone Design Team on Twitter: @WPdesignteam

4 Comments
You must be logged in to comment. Sign in or Join Now
  • Gaploid
    6 Posts

    I`m not really sure that back HW button is understandable by the user, I`ve test my app on few people and everybody ask me how can he go back on prev. page completely forget about this HW button. Some of them are new users and some of them are already have a WP7. I think this idea with Three HW buttons should be changed. Search button should be removed or you need give an API for 3d party application on it. And the back button should close application not a turn pages in app and then close it.

  • Your team and the developers are doing a great job, Paul Thurrott bring some good points on his blog about updates and how you can make it a market leader, as Paul says: This is the superior mobile platform. Please, Microsoft. Treat it as such.

  • Dear Alfred,

    I didnt know who to talk to on Win7 mobile untill I found this blog and red your nice article.

    here's a list of issues related to the design team of Win7.

    -It cannot synchronies with personal outlook via cable connection.

    -Outlook cannot access the exchange directory server to pull emails of other employees & users.

    -Cannot attaché logos to your outlook signature.

    -Cannot copy, past or cut anything from any document or sms.

    -It cannot send business cards (share phone numbers on your device with others, not by sms, email or anything).

    -It doesn’t give you full control over device sittings (look, profiles …etc.)

    -It doesn’t give you access to control folders and organize your files manually.

    -It cannot access your personal Gmail directory to pull emails and contacts like it does with hotmail.

    -Cannot attaché anything to your SMS’s except media files.

    -Cannot save and control your SMS’s except on the main folder (receiving folder)

    -Cannot control when your applications can connect to internet (which heavily consumes battery & money).

    -It cannot assign ringing tones to groups, you have to do it for individuals separately (this can take a year if you have over 1000 contacts)

    -If you receive a call (that doesn’t have the full country code and you have the number saved with the country code, the phone will not be able to recognize it) for example (you have Mr. X number saved (056142395) and you receive a call from him (0096656142395) phone will not be able to know who is calling.

    I hope there is a quick solution for all this. I love my phone and the software and I would love to continue using it.

    Thank you.

  • Thanks for this post. I am also a WP7dev and think UI/UX has to be taken more seriously. When I see other fellow developers releasing really poorly designed apps to the Marketplace it makes me really sad. I mean, I am not the best designer either but if one uses glossy icons with fake 3d/shadow I really wonder why that app made it to the Marketplace. If possible, could you please include good (design guidelines) UI/UX design as a certification requirement? Please!