3 ms·
Mobile browsers frequently come with gestures that can effectively override any attempts to scroll horizontally, instead taking the user backwards/forwards in b
by wanda 5y ago
Mobile browsers frequently come with gestures that can effectively override any attempts to scroll horizontally, instead taking the user backwards/forwards in browsing history, for example.
This is certainly true of Safari, the default web browser for iOS, to the point where even trying to cycle through a horizontal slideshow of images can bait the user into accidentally going back to the previous page.
Not only that, but on iOS I believe it was/is possible to cycle between open apps with a very similar gesture as going back/forth in browser history -- this already proved pretty dumb for browser usability and would prove worse still for horizontal scrolling elements on websites.
Personally, I like to operate my mobile device one-handed a lot of the time, and at the very least I'm not scrolling websites or switching back/forward with both hands even if I'm holding the device with both hands.
So the last thing I want to do, especially if I'm carrying something in one hand, is to have to try and stretch my thumb to the far side of the phone to scroll through a horizontal menu.
My other argument against this sausage menu idea, which has been around far longer than the date of the linked article, is that on many viewport sizes your links may not be half-occluded by the edge of the screen. Given that mobile browsers tend to hide their scrollbars, since without a cursor the scrollbar is just a progress indicator w.r.t. how far down the page you are.
Thus, on some screen sizes -- and it isn't difficult to encounter, given how many different devices there are out there -- n links will be visible in full before the edge of the screen, and then there may not necessarily be any visual hint that there are more menu items to scroll to. So you don't discover that there are more menu items until you accidentally scroll that region.
Finally, I would argue that even for the technophile the hamburger menu is preferable at this point, simply because they have been conditioned by a good decade's worth of responsive web design UX. The sausage menu, being often an edge case, is less obvious even to the technophile purely because not many sites elected to do it that way.
* * *
It seems to me that the superior alternative to both hamburger and sausage menus would be to adopt the hamburger menu style, but simply replace ≡ or the menu icon with the word "Menu"
The hamburger style can be done without JS too. If you really want to avoid JS, just use :target selector or other CSS shenanigans.
- lrdd 5y agoSee https://jenne.uk https://jenne.uk as an example