Alternative to hamburger menu? UI example inside

Question

I'm designing an app that has a lot of secondary functionality (it needs to be there), such as "Video guides", "About", "FAQ", "Connection Guide" etc.

Previously, we had a tab bar with 3 tabs (Home, Programs, and More), so all this secondary functionality was in the "More" menu. Now, we've combined the Home and Programs tab to one tab, which makes using a tab bar kinda ridiculous. We've decided to go with a hamburger menu in the top left corner since this is all secondary navigation that the user will rarely use anyway.

However, I'm getting cold feet doing it this way, since everybody is saying "ditch the hamburger menu" and all that jazz. And it looks bad on the iPhone X. However, I am unsure what my alternatives are? I mean, doing a tab bar with "Home and More" makes 0 sense. Looking forward to hearing your ideas. Below is a screenshot of the current UI:

Just to clarify some things:

1. I can't remove the battery and help icon. It's an app for hearing aids, so the battery icon shows the battery level of the hearing aids (and whether both HAs are actually connected). You can tap the icon to show more information. Tapping the question mark enables a help overlay. Our users are ~65 years old, so they need this - trust me.

2. And yes, I'm not searching for a better icon. I'm worried that "hiding" this navigation will hurt, but since it's all secondary functionality that the users rarely will use (and I'm 100% sure of this) I think it's safe to say it's okay to hide it, since it will then not cause any disturbance for what's actually important. I was more looking for a pattern that fits on both iOS and Android, since iOS generally say "don't use a sliding navigation drawer", which this hamburger menu will most likely end up being.

Answer 1

Nowadays there are plenty of options to show hidden navigation.

It all boils down to what your favourite food is!:

Kidding aside, ideally you want an evident way to show where you navigation lives. However I would dare say that hamburger menus have become so commonplace that people now expect them and understand the functionality behind them.

There might be a few things to consider depending on who your users are.

Are they familiar with technology? Will they have encountered a hamburger menu before?

If not, or if you have users from both sides of the camp, perhaps a menu icon with the word "menu" would serve you better.

As always do some testing. See how your users interact with the app. Guerilla user testing and A/B testing are perfect for these kind of problems.

In the end, do not be defined by what your peers tell you. Depending on the case they might be wrong or right. Go by how your users interact with your ui.

P.S If you choose to go with a hamburger icon, go with an actual hamburger icon. The one you currently have looks like left-aligned text.

Answer 2

The best icon is always text

This being said, let's disect your problem a bit: First of all, that doesn't look like a hamburger menu at all, and the circle makes it even more confusing.

On top of that, the whole iconography is a bit confusing. For example... why do you have a battery icon on the app and then a battery icon from the device? Does it serve to any real purpose? If so... doesn't it belong to settings (hence inside another icon or maybe even the hamburger menu)?

Quite honestly, without knowing what your buttons do, I'd say that quite possibly you should add everything on the hamburger and have just one single icon. And if you want a hamburger.... it has to look like a hamburger icon so users may understand the affordance at first sight. Those circles make it noisy, cluttered and confusing.

Remember that iconography is a discipline with really tight precepts, you can't just add a random icon (in this case, this is the icon for left aligned text on almost any application) and on top of that add a circle with the same lines as the icon, because you're creating something completely different. And unless you know a lot about iconography, chances are you'll miss the mark (I know I probably would and I have a lot of experience in the subject)

In short

Get rid of that noise, use a simple hamburger icon and a text label and you'll be able to display all those app icons like Universal, Music, etc in the same view without additional cognitive load for users. You can go as simple as this:

Answer 3

What if you surface some of the menu options that give you cold feet the most, and then provide a "More..." button? You could style the buttons to your liking and have as many or as few as you like.

Answer 4

All the things you say are required for the hamburger menu sound like they are generally help based content. Couldn't they then be merged into your existing question mark/help button. I don't know what the button already takes you too, but unless it's an link out of the app (which shouldn't really just have a button anyway, users should always be clearly notified if leaving the app) couldn't you put options to access these items under that page, either as links/buttons or as dedicated tab bar for those extended help items?

Answer 5

Always use an Icon + Text.

The icon signifies that the item is friendly and interactive.

The text signifies that it is a menu and not decorative.

If there is not an icon then it is a link on a website, any where else there must be an icon in UX.

If there is no text for a menu item then the only logical explanation is that the user's screen width must be only 40 pixels in width. That or the developer doesn't understand users. That can be forgiven because excellent examples of GUI / UX practices have fallen silent. It is just like professional JavaScript developers: we never willingly use frameworks or libraries; those have only become established because amateurs do not comprehend the concept of reusable code. Negative trends that hamper and outright destroy user productivity can be negated however.

Microsoft on many occasions states that they've done user case studies. With who? Their managers?! The less technically savvy the user (who still has a relevant need for what is being tested) the better an actual user case study. The same is true for the most experienced power users. You want to maximize your range of comprehension of not just who is using your product/service though also how.

Look at every single menu on mobile and unless you're playing a game overloaded with stuff to waste time, you're going to overwhelmingly (if not literally in absolute) always see blank space next to the icon-only menu.

...and if for some reason you don't then the layout should come in to question.

(Real / classic) Opera's installer is a (and the *only) perfect example of an application installer. Once open a single click installs the program for people who never read anything on the screen though there are options and advanced options with minimal number of steps to achieve these goals.

Newer less or completely inexperienced users are forgiven for not having the experience to comprehend how what they're working on will expand. In such cases: do not over-commit until you have proven that what you're working on won't get thrown out the door in a year or two. Stay nimble until you discover what will stick. Once you know what sticks gracefully adapt your UX over time so you do not alienate your early adopters!

From an experienced UX designer's perspective we have a very good comprehension of UX hierarchy. The more parts of an application are used the fewer steps to access something should be.

UX masters are not only power users though empathetic power users. Full toolbar customization (toolbar positioning to other toolbars on a given side and the sides as well) as well as item positioning on toolbars. If you have a legitimately extensive set of first-tier options your GUI should allow users to add/remove command icon+text buttons and even change individual toolbar button displays (icons only, text only and icon+text). A true UX master power user who extensively uses their own application not only is able to satisfy their own needs with a GUI though is also able to completely satisfy another true UX master power user who extensively the first UX master's application.

Being that you're on mobile and that you'll have lots of different options I recommend checking out the Android Nova Launcher, it's a good example of GUI customization and emulating it is a great idea.

Furthermore you should consider finger/thumb target area. Some people have fat fingers/thumbs, some have skinny fingers/thumbs and some people have nails long enough that they could impale and kill Godzilla in a single strike.

Lastly never underestimate the person who customizes the GUI in a way that makes you want to slap them. Presuming that they of their own healthy volition chose certain settings it is key to remember: they're using your application, not someone else's. Use these end-cases to ensure that when you do major updates that you don't frigin break everything! There is an article somewhere on the web that shows user customization that completely break every time they upgraded Windows from version 1.0 and onwards.

So in summary:

1. New UX designers should not over-commit until they comprehend long term UI hierarchy.
2. Experienced UX designers minimize UX disruptions with new versions.
3. Master UX designers eliminate UX disruptions with new versions.
4. Icon + Text for your menus by default.
5. Icon above or icon to the left is subjective to the screen aspect ratio.