Jessica Engström


button placement in the windows 8 app bar

It’s recommended that you put all buttons to the left and right so you can easily reach them no matter what device you are on.
There are some guidelines to this.



Put the most used commands to the very far left and right, against the edge where they will be easy to reach.



Persistent commands, the buttons that will show no matter what you have clicked on in the app, should be to the right side of the app bar.
Balance your app bar for ergonomics, so if you have more than 3 commands, or more than 1 group, you should put half of it to the left for easy reach.



Inactive and contextual buttons should not be shown until they are usable. 
Never “gray out” a button in the app bar.
When you are about to show a previously hidden button don’t move the persistent buttons. Leave them as they are and put the new button to the side of them instead, this so the user still knows where to easily find the persistent buttons.


hidden   contextual

If you on the other hand have a contextual command you want to show, you should always put them to the far left. (pin/unpin in this case)
This is to show the users what new functions they can utilize, and because it’s highly probable that they will use these commands, and we want to give them easy access.

You should also make the app bar sticky when you show contextual commands, imagine having a photo manipulation app where you mark something in the picture and then you need to open the app bar for everything you want to manipulate, not practical.
Don’t forget to un-stick the app bar when you are no longer showing the contextual buttons though.


This is “Demystifying Windows 8 app bar” part 4 of 8.
Part 5 “
Styling the Windows 8 app bar

Posted in UX/UI with : Design, Windows