The end of the app bar?

App bar in MSN Health
Standard

It is increasingly looking like the folks at Microsoft have torn up the UX metaphor cookbook that was in place in Windows 8 and Windows Phone 8. Windows 10 already appears to have moved away from landscape scrolling to the traditional portrait. We also know that the charms bar is already dead in the latest builds requiring search and share prompts to be brought into an app’s UI. The other potentially polarising change to acknowledge, discuss, and start getting ready for is the apparent end of the app bar as we know it.

A retrospective

The app bar is common in modern Windows applications, as a universal location to store commands that are either always applicable, or contextually relevant according to selected data or being in a particular page.

First appearing in Windows Phone 7, the app bar made it simple for developers to write an software that would conform to the then “Metro” design principles, with Microsoft even going so far as to discourage the use of floating buttons around the user interface. By using an app bar for commands whilst letting data driven controls handle the majority of the user interface Microsoft achieved several important things:

  • Commands that required precision tapping were kept in easy reach for a user’s thumb
  • The content first – no chrome principle was maintained
  • Other parts of the UI could generally be manipulated with large gestures (swiping/scrolling) or at the very least would have large touch targets
  • Users became familiar with seeking the ellipsis (…) when they wanted to do more

Concepts behind the app bar had worked so well in a touch based user interface that Microsoft decided to bring it to modern applications with Windows 8. However it was almost always hidden on the canvas, requiring either a swipe in from the edge of the screen or clicking the right mouse button. This is just one of the reasons that many users new to the now “Modern” design of apps started to reject Windows 8. In addition for mouse and keyboard users, the command bar was used to replace context menus and meant the mouse had to travel further to complete actions which were now located at the bottom of the screen rather than appearing next to the cursor.

MSN weather - no app bar hints

Any user may struggle to understand how to get to the hidden app bar without a UI hint

The issue of discoverability could be solved with an app bar hint on screen, similar to the minimised state of app bar introduced in Windows Phone 8, and Microsoft began to use this hint when apps were redesigned for Windows 8.1. However it was up to developers to include this behaviour and so many apps never implemented it. To this day, the Bing/MSN suite of apps (weather, news, sports, finance) hide key commands and even app navigation behind a right click or edge swipe action.

Windows 10

App bars, hamburgers and on-screen buttons

The various UX options for showing commands in Windows 10

With Windows 10, and Microsoft’s renewed focus on traditional desktop interactions, the picture is becoming clearer that the app bar’s days are numbered. At the moment there are mixed messages coming from the preview apps available on Windows 10 (including for phones) some are placing commands at the top of the of the screen such as the Xbox app, others are using the hamburger menu for commands as well as navigation. Some, as is the case with the Photos app, are using hamburgers, commands up top, and contextual app bars at the bottom of the screen. The point here is that there is no consistency yet likely because Microsoft hasn’t really decided what they believe will work best for touch and mouse on desktop, whilst still suiting the touch only environment on phones.

If we look specifically at the new Windows 10 preview for phones, and to the universal photos app, the app bar is not utilised, only showing up in contextual situations (when tapping and holding/selecting photos or viewing the photo). This is also a new style of app bar, presumably a universal control Microsoft is using on this universal app, and in this situation it still works in the way a long term Windows Phone user would understand.

Photos for Windows 10 phone

The various states of the app bar and navigation controls in Photos for Windows 10

Windows 10 calculator

There’s no app bar to be seen anywhere in the calculator, every option is in the hamburger menu

Looking forward

So, is the app bar following the Dodo into the sunset?

I hope not.

Make no mistake, the app bar use in Windows, whether on tablet or in desktop, was always a little muddled and difficult to explain to users. I’ll be glad to see it go, even more so now that modern apps will be able to run in a windowed view on the desktop, because frankly, to me, an app bar makes much less sense in that situation.

However, on Windows Phone the app bar is bordering on a perfect decision for user experience, at least in that it keeps all controls in an easily discoverable location and at the bottom of the canvas, not out of reach at the top. Having controls within easy ready when using a phone one-handed has become utterly vital in the age of larger screens, ever expanding phones and “phablets” appearing. It’s a problem that Apple at least is very aware of and responded to with a “double-tap to bring the top of the screen down” solution that some call a hack, I’d call a reasonable if slightly unusual solution.

So developers, as we start to create apps with Windows 10 in mind I implore you; don’t be afraid to embrace the hamburger menu, and to be rid of the app bar in your desktop/tablet apps, but definitely think twice before using that same experience on phones. Personally I’m looking forward to trying out a few ideas here (what if the hamburger was the left most option in a modern looking bottom app bar?) and I hope to see the developer community sharing theirs.

4 thoughts on “The end of the app bar?

  1. Ali

    Thank you. It just makes sense on phones with the app bar. I can see why they would toss it out, but the app at just makes sense. Yeah I do agree that maybe the app may need a face lift but it wouldn’t be kicked to the side for a hamburger button that’s out of reach. Devs do need to experiment and I like that idea of it being in a appbar, but doesn’t that defeat the purpose? Like a menu button in a menu to show more menu items? Lol just saying. I like this post

    • Jay Bennett

      You make a good point about the “menu within a menu” but in the case of this new style of app bar we’re seeing, it could be always visible with the icons relevant to each command available. If the new app bar was always visible it might work to put a hamburger down there (maybe!)

  2. Two quick points and they both relate to “universal apps” on Windows 10.
    1. When building a single UI that works on varying sizes of both height and width on desktop and also on a phone, having vertical, rather than horizontal scrolling makes a consistent, predictable experience and a responsive UI easier to implement.
    2. If using the same UI on phone and desktop where the window can be resized and moved the app bar isn’t in a consistent position and so lots of it’s benefits are lost.

  3. Jason

    I remember Sean Siebel telling us to not worry about teaching your users how to use Windows 8. I implemented lots of Windows features into my apps from app bars to roaming settings and most stuff in between. So absurd to see all of that abandoned. Great job wasting my time guys.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>