alt Hacker NewsI agree that they’re bad patterns (the three dot menu particularly so, it often just looks like a mistake), but what would be more functional on a small screen? I’d love to see some good alternatives that I could adopt in my own projects.
Replies
The alternative is progressive disclosure and contextual actions, mostly. Only show buttons and options when they are functional (e.g., a fixed bottom nav bar changes to copy/cut/paste only when text is selected, otherwise it displays nav icons, or changes to something else entirely on some other action).
For overflow, have the bottom nav bar slide up (kind of like old iOS control center) to reveal more options, just have to be cautious not to re-create the three dots menu junk drawer in there too.
I think the three-dot menu junk drawer is just a result of lazy design from a goal of re-using the same UI everywhere, no matter the OS.
If we want good design, then (collective) we need to start making unique native UIs per platform, using that platform’s toolkits and HIG instead of “branded” experiences using cross platform UIs.
That’s for mobile, for desktop just dump mobile design entirely. Go full on information density, menus, etc. Make it designed to be navigated with a keyboard and a mouse.
It's very context-dependent and I can't detail all of them in this post but I'll give a couple examples.
In many cases, for mobile versions of sites hamburger menus can be easily replaced with an app-style bottom-aligned tab bar and on occasion even a linear horizontal navbar. You wouldn't believe how many mobile hamburger menus I've seen on sites that have a grand total of 2-5 destinations.
In the case of list views, three-dot menus can be replaced by a mini-toolbar of buttons that appears within a list item when hovering or selecting a row (depending on if it's desktop or mobile), and on desktop if your audience has a bit of a technical leaning a right-click context menu can do the trick.
The main thing to avoid is to use either as thoughtless catch-all "junk drawers". Usually if one sits and thinks about it a little bit a better pattern will become obvious.
If you don't crowd your menu, then you can just have the text links below the website logo, with flex-direction: row and justify-content: center
It'll take up less than half of a smart phone screen, and customers don't need to bother with any burger menu.
The phone web should only have two functions: Poke and scroll. For most normal websites that is.
Personally, if they just went away on large screens, I'd already be much happier. So many programs I use on my 30" monitor have gone from a readily available quick-to-navigate menu-bar to a horrible hamburger menu that is so self-conscious about using space that it is 10x slower to use than before.
Gnome (and maybe GTK as well?) submenus now require a click (as opposed to the previous hover) and replace their parent menu (rather than appearing beside it), making hunting for something in a submenu an exercise in frustration. Considering that:
1. The fraction of Gnome users on a small touchscreen is approximately zero
2. You can always support the miniscule number of small-touchscreen users by having menus behave differently on small touch screens; Apple still has a menu bar on desktop applications!
It's particularly frustrating