No no no. Hamburger menus are terrible[0] for navigation, and this is worse. The only user-centric "Pro" listed by the author, namely that users understand its functionality, is totally unsubstantiated, and I think, exactly the opposite of what is true.
These kinds of menus are fine as "filtering inspiration", shortcuts for commonly chosen filters on a dataset, but they are not at all OK as general navigation. They hide the vast majority of menu items, especially in a long list; their sorting logic is typically impenetrable; and horizontal scrolling is terrible on a huge array of devices.
On mobile, prefer a tab bar for navigation. If you have a huge number of top-level items, deeply consider your information architecture before downgrading to a hamburger menu. I won't go on, but I could.
Please do not use this ridiculous thing for navigation.
I had to read the article a few times to figure out that I was supposed to scroll horizontally. When I did that in Chrome on MacOS, the following happened:
- the notification widgets popped out from the right of my screen
- The entire center-aligned blocks of text on the page moved over in relation to my scrolling for some reason
- The browser navigated "back"
- The H scroll bar appeared for a few seconds then went away
Some of these were due to my cursor being outside of the 'nav class="sausage-links"' tag, but it seems strange to expect a user to first place their cursor inside of an invisible box somewhere around the nav strip to be able to navigate it by scrolling to and fro.
Seriously, H scroll is way overloaded, and there are so many ways to subtly "do it wrong". That, combined with the lack of affordance to show users that "there is more to see here if you scroll left and right" makes this a really poor UX.
- The entire center-aligned blocks of text on the page moved over in relation to my scrolling for some reason
This one kind of makes sense to me. It's the browser's way of telling you "you're doing the right thing to scroll the whole page over, but there's no content outside of your viewport so we'll just snap you back after we let you peek to see for yourself".
The rest... yeah, it's definitely an overloaded pattern.
I love this type of highly-opinionated design thoughts. At work we have a pretty complex UI that seems a little bit inescapable to me (hard to keep legible due to complexity, etc.) Could I get you to critique it?
It's easy to respond with general opinions to a general article like this. It's a lot harder to comment on a specific design without an understanding of the business/product goals the design is trying to achieve.
However.
My totally irrelevant opinion on Sourcegraph is that it does a really good job of balancing high information density (which I love) with comprehensibility.
Of course I don't love the hamburger menu, but if it works for your users, great. The top-level menu items are few and seem well-differentiated, although I haven't dug in too deeply. I think you could probably do an iOS-style tab bar, but I know they don't always work too well on the web, and it might eat into your vertical real estate. No hamburger on desktop, which is nice.
Where it shines is in the filters, which are tremendous. Really, really easy to understand, and the response time when you click one is very fast.
Love the contrast, colors are pleasing. Spinny logo is cute and fun.
OK, now ignore all of that and listen to your users instead. :)
Disclaimer: am dev, not designer. Home / welcome feels good, search is front and center but I can find out more easily. Results are eye-friendly as well. I would suggest getting rid of the internal scroll panes in the left bar if possible - it's difficult to scroll that and / or the left nav or the main page. Maybe show the top N and then a "show more" or expand / collapse button.
If you have a huge number of top-level items, deeply consider your information architecture before downgrading to a hamburger menu.
Ir seems like you can hide all the items (hamburger menu), hide some of the items (sausage links or overflow menu), or have a deep hierarchical navigation.
While breadcrumbs were fairly established on desktop, mobile apps typically only have a single-level back/up button. It's easy to lose your place if you have a deep hierarchy. Are there are good solutions for this?
Accordions, lists where selecting one item scrolls the view one screen to the right to show a sublist... there are many common idioms for nested structures.
But the best strategy is always to simplify the number of different nodes to flatten navigation as much as possible.
Horizontal scrolling isn't that bad on mobile devices. I wouldn't want to scroll one of these on desktop but it's so simple to just, flick through it with my finger on a phone.
Just put it behind a media query when your desktop-sized nav bar gets too big?
It can be OK in some cases, but it can be hard to discover unless it's very obvious. Thanks to Apple hiding scroll bars, if the elements in a horizontal scroll happen to line up with the edge of the screen it can be impossible to tell that horizontal scrolling is even an option unless you trigger it accidentally.
Edit: Oh yeah, and horizontal scrolling interacts unpredicatably with horizontal gestures on mobile. E.g. forward/back in iOS Safari.
Once I got confused on Google maps android, because I thought they had removed the "Share" button. It was a sausage menu, but the size of the buttons were such that the rest of the buttons were perfectly hidden (you could not see the rest of a half button) and of course there was no visible horizontal scrollbar.
> Horizontal scrolling isn't that bad on mobile devices
I disagree, it’s not easily discoverable and I have yet to see a single website that implements it well in any context. I alway find elements scrolling multiple directions at once or end up scrolling down the page instead.
It's not bad UX per se (I love it for certain mobile uses), but it's bad to make an assumption that horizontal scrolling is always available.
Similarly, it's bad to assume that everyone is always using a keyboard and mouse (a frustration I encounter in Desktop environment communities (e.g. Gnome / Linux) in gesturing that some use tablet PCs).
Please do go on! I'd love to hear more of you thoughts on better menus or better info architecture.
I have a project that could have many menu items, and the sausage is an interesting idea but not common/well known enough that I'd want to use it. Tabs might work.
For many websites, there are SEO implications to having menu links (or so we are lead to believe) so I think ridiculous menus are sometimes partly a consequence of optimizing for SEO.
These kinds of menus are fine as "filtering inspiration", shortcuts for commonly chosen filters on a dataset, but they are not at all OK as general navigation. They hide the vast majority of menu items, especially in a long list; their sorting logic is typically impenetrable; and horizontal scrolling is terrible on a huge array of devices.
On mobile, prefer a tab bar for navigation. If you have a huge number of top-level items, deeply consider your information architecture before downgrading to a hamburger menu. I won't go on, but I could.
Please do not use this ridiculous thing for navigation.
0. https://www.nngroup.com/articles/hamburger-menus/