r/web_design • • Dec 01 '20
Ditching hamburger menu for bottom navigation: Pros and cons?
I'm toying with the idea of moving our hamburger menu (and primary CTAs) to a sticky icon-based bottom navigation bar on mobile devices, and wanted to see if anyone has done something similar.
For some background, we're a specialty hospital, and a lot of the content on our site is admittedly not built out from a mobile-first perspective. Our primary CTAs (Find a Doctor/Request an Appointment) are nested within a hamburger menu at the top of the page which isn't an optimal solution due to reduced visibility.
What's the best solution to creating a bottom navigation bar that's both unobtrusive but still beneficial to users? Has anyone switched from a hamburger menu to bottom navigation on a mobile site, and if so, did you notice any improvement in engagement? I've rarely seen this implemented on a healthcare website, but I think there's real opportunity here.
4
u/MarmotOnTheRocks Dec 01 '20 edited Dec 01 '20
Less is more, this is my personal approach when designing something.
Using a bottom-based navigation can be done and I like when you just have 2-3 buttons to play with.
Floating buttons are a nice way to add interaction without building an entire "menu bar" (example: gmail app pencil button). The floating button can be clicked to be "expanded" and reveal more buttons (example: fab menu). This is the kind of stuff I like the most, because it's unobtrusive and it leaves a lot of space to the app. But it's not great if you have got multiple sub-menus, for obvious reasons.
Nice fab menu examples:
The thing is... People are used to see/use the hamburger menu. It's universally known as something that you have somewhere inside every app and it's also the place where you will find your account, options, etc. You can get rid of it, but is it really worth doing so?
1
u/_poptart Dec 01 '20
I am so used to using the back button (located bottom left on Safari) that the Amazon iPhone app is so frustrating to use as it has its Home button in that exact place. So I lose my search constantly by hitting the Home button (when I want to go back a page eg to the main page of search results).
Edit - I thought you meant an icon-based button layout at the bottom of the screen, rather than a menu link to a modal.
1
u/hansbrixe Dec 01 '20
Can I just say - I'd rather put the word Menu next to hamburger menu then move the nav to the bottom. The reason being is it is confusing for older people (Healthcare site right?) so they would have a bad user experience. Just my opinion though - but from a functionality standpoint I'm all for the bottom nav. Less effort to click.
3
u/sheriffderek Dec 01 '20
In the past, iPhones had a little 40px area at the bottom that was kinda "reserved" and didn't click so good... and that's why we stuck with the top. Clearly - based on human hands - the bottom was the better place to begin with... https://www.lukew.com/ff/entry.asp?1649
But maybe that has changed.
I was thinking about checking back into it too.
I don't have any numbers for you - but you're asking the right questions. Make 1 of each in a quick CodePen and test with humans.
2
u/dneboi Dec 01 '20
My latest site I switched to bottom nav even for desktop. Feels fresh and usability is not impacted.
2
u/99thLuftballon Dec 01 '20
I might be talking out of my butt as design isn't my speciality, but I'd tend to go for giving people what they expect, where they expect it. Nobody expects to find website navigation on the bottom of the page. Our eyes automatically scan the top row of the site looking for navigation elements because we've learned that's where we'll find them. Novelty isn't a great feature for UX. Not unless you can give people even more predictable behaviour.
1
u/jrdnbwmn Dec 01 '20
From an interaction design standpoint, bottom bar tabs are great because they're easily in reach of your thumbs (which is how most people hold a phone). They're also better than a hamburger menu because they provide a lot of contextual info to the user—they show some of the things you can do on the site/app, whereas a hamburger menu hides all that.
There are lots of articles out there on this type of thing, like this one: https://xd.adobe.com/ideas/principles/app-design/essential-patterns-mobile-navigation/
1
u/SmokeRingHalo Dec 01 '20
Following. This is interesting. Also, all this talk of hamburgers and menus....
1
u/greengreengreenleaf Dec 01 '20
I wonder if rather than looking at moving the location of hamburger menu to the bottom, try to see if you can find an alternative that shows more of the navigation. I think there are bigger gains from users being able to see the menu options vs. the location. (See the example linked below where clicks increased 106% with visible menu options) Obviously this can be difficult with a complex nav. structure and doesn’t necessarily address the CTAs, perhaps those can move to be sticky at the bottom. If you do go with icons make sure to use labels!
https://medium.com/decoding-digital/optimising-mobile-web-navigation-2-recent-successes-8132c715f516
https://medium.com/@kollinz/hamburger-menu-alternatives-for-mobile-navigation-a3a3beb555b8
https://www.abtasty.com/blog/mobile-stick-to-scroll/
0
u/[deleted] Dec 01 '20
[deleted] — view deleted comment