Ex-Microsoft Windows Phone app designer explains why apps have the hamburger menu

An ex-Microsoft Windows Phone app designer holds a Reddit AMA

Windows Phone has always been the black sheep when it comes to app user experience. The iconic Windows Phone app design involved swiping left and right for navigation while using the app bar at the bottom for app actions like search, or send message. Other mobile operating systems like iOS and Android have typically used the top of the app for navigation and actions. While being different was refreshing and innovative, Windows 10 is changing everything.

Before Universal Apps there wasn’t a technical issue with Windows Phone navigating differently than Windows or iOS and Android. Nevertheless, Windows 10 aims to converge the app model into a single paradigm for navigation and actions. This makes developing Universal Apps easier and users should be able to understand how to use the same app easily on any device. The other side of uniform design involves the ease of cross platform apps, and how much work is required for developers to make their iOS and Android apps work on Windows 10.

Enter the hamburger button. This infamous button first gained traction on iOS and Android with big apps like Facebook, but now the button is used all over the place. Microsoft wants developers to develop apps for Windows 10 so there needs to be some concessions on design to make this happen. Recently, an anonymous ex-Microsoft employee who was verified by Reddit held and Ask-Me-Anything (AMA) concerning the transition of app design. This employee designed the new version of Office for Windows Phone but has since left the company. Here is a video where the employee explains the challenge of UX design and where Windows Phone stands compared to other platforms.

Essentially Windows Phone has to change in order to unify Windows and enable Universal Apps. To read all about the design decisions follow the link to the AMA at the bottom. Essentially Microsoft wants users to use Windows and Windows 10 for Phones and they believe to do so, app developers need to easily port their apps over without needing to completely redesign the UX. Frequently users complain the hamburger menu button is poorly positioned and hard to reach one-handed, but apps should be designed so users aren’t frequently reaching for the hamburger button.

An ex-Microsoft Windows Phone app designer holds a Reddit AMA

This debate of design has commanded most of the debate around Universal Apps and Windows 10. Modern apps like OneDrive already introduced the UX element into their Windows Phone 8.1 app. The issue may not be as big as some Windows Phone fans are making it out to be, this is because new apps like Outlook Mail for Window 10 Mobile uses the hamburger button for switching between accounts and navigating to folders. All frequent actions like formatting, attachments, and sending remain at the bottom of the app.

“a hamburger was the best overall pattern”

This change is not easy and while the old Windows Phone apps were designed in a unique and beautiful way, the future looks to be universal design. The greatest thing about this debate though is that it is not over, and users can still suggest ideas to invent the next great user experience. No one believes the hamburger menu button is perfect, but it’s used because it solves a design problem of consistent UI across tablet/desktop and phone apps. If anyone reading this has a better idea on how to have consistent UI across different platforms then post in the comments and lets have a civil discussion about it.

Read below why the hamburger menu is being used:

Ah yes, the hamburger. So. I’ve written so much about this (and even made videos) that I’ll do my best to summarize.

Windows Phone’s original interaction model put actions on the bottom and navigation on the sides, as swipes. That’s not a great pattern for a variety of reasons.

iOS started with a lot of apps using tabs on the bottom, and over time started aligning more with Android, who put a few key actions on the top, then a “swipe back” pattern for more options. Think of Mail on iOS, how you go into a message, then you can swipe from the left to get back to your inbox.

Windows Phone was left in an interesting spot. Many of us believed that the old interaction model just wasn’t going to work. You can’t stick navigation in a horizontal direction. It’s part carousel, part “mystery meat navigation” and it just doesn’t work. So. We needed to figure out what the new model would be.

Putting a title bar on the top was the first important step. If you’re in Word and you can’t see the name of your document, that’s not good. So, ok, put a bar across the top. And now you have a bar across the top you can provide a back arrow in the top left to get back to your documents. Awesome.

Then you put the ribbon in what I called a “palette” or “drawer” on the bottom, and on the top right you can start putting “hero actions.” I argued for only one but I’m unsurprised that they ended up with more.

So there you go, right?

Top: <-- Name of document common actions

Bottom: Three dots to get the ribbon in palette form.

The problem is, there’s just way too many things on the top bar. For example, you might want to print. How do you do it? Well, you could design a print icon in the top bar. But it’s probably not worth it. You could hide it in the ribbon, but that sort of sucks for discoverability.

And then you notice the top left corner. And you think “Well, tons of Android apps just put everything there. Maybe we could try that?”

And so it became clear, due to the massive number of features in Office apps, and the extremely tight real estate, and alignment with tablets, that a hamburger was the best overall pattern.

Share This
Further reading: , , , , ,