12 ms·
In Praise of the Unambiguous Click Menu
- caseyross 6y agoIMO there's an even better design, which is to not hide links in an expandable menu at all. Just show all the links at once! With appropriate headers and visual hierarchy to provide organization, this is better in pretty much every way: faster to use, easier to implement, and more accessible. The biggest practical objection I see to this kind of "flat" menu is simply that it's hard to make it look good at the top of a page. But any competent visual designer should be able to manage that, aesthetically.
- leephillips 6y agoStrongly agree. I dislike these menus as a reader, and never use them when I design web sites.
- RHSeeger 6y agoDoesn't this make it take up a bunch of real estate in the header? Or am I misunderstanding you?
- input_sh 6y agoLet's say you sell a handful of products in a few categories. I'd rather click on the category and then the product, as opposed to the product being directly accessible behind a dropdown of a category.
- newmnhn 6y agoI'm not fond of big nested menus in general either, but they are good for quick exploration and can be pretty forgiving of poor categorization. I do wonder if sometimes the nested nav is too in-between. Maybe the solution is not to try to squeeze it all into that structure but make "finding the page I want" to be a more top-level experience. EG don't take me to a Category Page, but do let me select a category and start drilling down, whilst keeping it easy to switch between top level categories. Big nested navs are often just ... fiddly.
- deleted 6y ago[deleted]
- marcosdumay 6y agoAs a related point, stop trying to shove the entire site navigation into a minimal top menu. Your site is probably just leaving more than half of the screen of desktop users blank, and phone users can gain a lot from a top menu that actually does what it says and an expanded menu that takes the entire screen and lets them see what they are doing. People keep reevaluating how they implement the top menu, keep finding their implementation harmful, and yet do not stop to question the menu itself... No, it must be the implementation details, it can't be that the menu is a bad idea!
- open-source-ux 6y ago"...not hide links in an expandable menu at all" On desktop screens, I agree, but how could this work on mobile? On a mobile viewport, presumably the navigation links collapse ino a menu. The only other mobile option I can see is to place all site links in the footer which feels clunky.
- chrisweekly 6y agoThe footer is a great place to put all the things people usually try to cram into the header.
- GordonS 6y agoCan you point to some examples where you think it's being done well? In principle I agree that multi-level menus are awkward on the web, but showing all the links at once is something I think I only really see in a tiny font at the bottom of the page, which is in addition to a menu at the top.
- UweSchmidt 6y agohttps://www.mcmaster.com/ https://www.mcmaster.com/ This is how I want websites to look :)
- ysavir 6y agoDoesn't look too great on a mobile view. Do you have an example that handles that scenario elegantly?
- 0xCMP 6y agoHow does it not look great on mobile? It simplifies the number of options and simplifies the navigation accounting for the fact that mobile devices would require lots of scrolling on a tiny screen to see as much as you could on the desktop. On the desktop it uses all the screen space to show you more detailed sections you can click right to if you know what you already want.
- Y_Y 6y agoFor one, there's a huge shitty thing that pops over half the screen straight away which ublock didn't catch.
- ysavir 6y agoMy apologies. I forgot to whitelist the site for JS, and when I viewed it, almost the entirety of the page was taken up by the categories sidebar[0]. With JS it looks much, much better, and navigation is definitely usable. Though at this point it's raises the question of what is navigation: are all those item categories navigational aids, on par with other nav items? Or are they a product index and separate from navigation items? In regards to the GP's suggestion of "showing all links at once", I think it's fair to say that links that only go on some pages but not others don't count towards the "overpopulated navbar", which is usually intended to hold navigation aids that are available on all pages. So while I think the site in question does a good job of navigation, I think it does so not by choosing a flat design with all links available in the nav, but by cleanly keeping the navigation to just a few key elements ("Contact Us", "Order", "Activity", "Log in") and deferring all other links to separate UI elements that exist only on the relevant pages. [0]https://i.imgur.com/Plg3JSl.png https://i.imgur.com/Plg3JSl.png
- at_a_remove 6y agoThis sounds great when you are also in control over the number of links on the homepage. This is often not the case. When Big Players demand links (and even redundant links), well, you're gonna end up with more than you wanted.
- overgard 6y agoGreat thing about this too is its very ctrl+f friendly.
- Blikkentrekker 6y agoI noticed too that there is a strange design drive of “submenu's for it's own sake” when the options fit perfectly well into one. The other that annoys me is “icons for it's own sake” when text suffices; I do not like having to figure out the meaning of arcane icons.
- m463 6y agoHonestly, I thought the original ipod menu system was elegantly simple. Basically a slide-left menu system.
- gabipurcaru 6y agoMy one contention with click menus is that clicking on _anything_ has a nonzero chance of accidentally navigating away from the page, depending on the particular website's implementation (and depending on whether the JS assets have finished loading). Hover menus are risk free in this regard
- shmooth 6y agogood point -- i like way-too-large/unambiguous clickable areas.
- alpaca128 6y agoWhich would not be a problem if sites wouldn't make it increasingly impossible to open links in new tabs. Will clicking the link delete all progress? Better click with the middle mouse button. Now there's another set of possibilities: 1) the linked site opens in a new tab, 2) nothing happens, 3) an empty tab opens, 4) a tab containing a borked site opens, 5) the button is so broken the browser can't even recognise it as interactive UI element and instead turns on autoscrolling. Yes, please give me hover menus, and when you're at it use links for links. HTML tags aren't just there as suggestions for weird JSX component names.
- Izkata 6y ago6) the site uses Javascript to disable the default action and reimplements it, treating middle clicks as left-clicks and browsing away from the current page instead of opening a new tab. Jira does this in several places, but not everywhere.
- etxm 6y agoI have a hard time not smashing my laptop when this happens.
- dlkmp 6y agoAtlassian software is definitely the champion in creating unexpected behavior within their apps. I'm using Tridactyl to use vim motions in my browser and they've made it entirely impossible for me to search within a page as they capture '/' to open the issue search.
- shmooth 6y agoi had no idea one could write so much about the unambiguous click menu. that said, i agree -- the Wordpress top nav bar kills me daily. now i'll look for a fix.
- superjan 6y agoI think he’s right. Hover menus are slow (often you need to wait for it to open), and if you accidently hover just before trying to click something, you will click on the surprise menu, not what I want to click.
- datavirtue 6y agoI have been using them for several decades and I still accidentally hover wrong nearly every time.
- Kye 6y agoI gave up on using a mouse on them a long time ago and just use arrow keys if it's more than one deep past the initial popup.
- oneeyedpigeon 6y ago> Using an application menu (e.g. File, Edit, etc.)? Those almost never appear on hover! The author is clearly not a macOS user. In macOS: - clicking a top-level menu label toggles between 'menu open' and 'menu closed' state - in 'menu open' state: a) entering a top-level menu label opens that submenu b) switching to a different app or clicking outside of any submenu toggles to 'menu closed' state I'd be interested in hearing if other OSes do something different. Maybe the fact that it's a global menu is relevant. > All links are contained in submenus except for top-level items that have no submenu (e.g. “Home”). We’ll deal with what happens to those top-level pages in a moment. Did the article end up covering that? As another comment suggests, having some links stay on-page and others navigate away is a potential problem. If it's only ever Home, that might be mitigated — you can always leave Home out anyway and utilise the site logo. I guess, for other top-level-only menus, differentiating them visually would be the answer — maybe blue underline for links and three-dimensional rectangles for 'buttons'? (ducks)
- anoncake 6y agoSame on Windows and Linux.
- still_grokking 6y agoThis was also my first though: Did this person never saw a properly working menu before? The proposed solution in the blog post is just crap. That's not like menus work! That one needs to click to close a menu is especially bad UX. But the root of all evil is clearly that web-tech just isn't suitable for application development! You need to "reinvent" basic stuff. Like menus…
- weeboid 6y agotldr, author recommends click (instead of hover) to activate dropdown menus
- blunte 6y agoThe “why” is the important bit, so your tldr is not helpful.
- blunte 6y agoI very much agree. Simple, consistent, even boring is much less friction or cognitive load for the user. We have passed the “look what cool effect I can do in a browser”. Hopefully soon we will also pass through the control-your-car-entirely-via-proprietary-touchscreen phase, as it is a dangerous user hostile system. (Edit: yes, small tangent; apologies) Boring is good if your thing had real content, utility, value. Fancy and sparkly is what you do for a one-off show or when your thing has no real substance.
- blondin 6y agosince we are on the topic of hovering, i have come to notice a negative consequence for ignoring it altogether. in a few modern applications i have been using that the iconography is foreign to me. my first instinct is to hover those icons to see a help text or tooltip. most often, these modern apps also take away the tooltips because mobile devices don't have them anyway. this is a loss in accessibility imo.
- ytjohn 6y agoI'm not a UX guy myself, but our team has a rule to use some form of indicator like the "i in a circle" or ? in a circle. These are always clickable, so if you see an "i" you can click it to get the pop-up. We do avoid hovers, though our reasoning is that we're making information dense applications. Having a bunch of hover tips pop up as you're trying to navigate a table can get frustrating. If hover is used, it'll most likely be a different indicator and in the header or footer area.
- adontz 6y agoTo my taste this is totally wrong. Web is web and not desktop. Some web designers try to draw web as a desktop for years and that confuses even more because these two are not the same. Whatever navigates you to a different page is a hyperlink. Hyperlinks are underlined, blue or purple if already visited. Sounds boring and does not fit your favorite orange-lime color theme, I understand that. But that is also an actual standard users are used to. Desktop application have no similar concept. In Windows (Not sure about Mac) buttons or menus which open other windows should have ellipsis (...) at the end of in their name. For instance "File\Save" does not have one, but "File\Save as..." has one, because opens another window. All texts in the examples are hyperlinks, but none are underlined and that is confusing in the first place. I do not understand why people do that. I feel like that should be prohibited, or at least considered a very bad practice. None have ellipsis either, if you follow Desktop standards. Want to know if menu parent is a hyperlink? Easy, it is, if underlined. Period. No confusion.
- neogodless 6y ago> Web is web and not desktop. Have you ever watched users try to interact with the web, their phone, and their desktop? Many do not differentiate, and why should they have to? They all should be built using intuitive, unambiguous paradigms.
- AndrewOMartin 6y agoEvery time I see someone double click a link.
- Kye 6y agoI convince people not to do this by making it potentially cost them: get out of the habit or end up double charged some day. Not true for the majority of ecommerce sites that handle doubled requests sensibly, but there's one poorly coded site out there just waiting to blow their bank account out.
- Silhouette 6y agoHyperlinks are underlined, blue or purple if already visited. Sounds boring and does not fit your favorite orange-lime color theme, I understand that. But that is also an actual standard users are used to. It might have been 20 or 30 years ago, but not any more, and Jakob's Law is as relevant as ever.
- datavirtue 6y agoAs a user I despise hover menus. They are always a point of distraction. "Oh, it's a hover menu. Now let me try to figure out how to hover through this nested nightmare." Desktop, web, wherever.
- vidanay 6y agoHover _anything_ sucks IMO. I have noticed a trend lately where the hover delay seems to be drastically reduced. This means that as I move my mouse around a page, I am constantly bombarded with hover popups that come and go. Quite often, these are right next to a top level thing that I want to click, so I then have to wait for the popup to disappear before I can click on my target.
- eplanit 6y agoThe web interface to Amazon Prime videos is basically unusable because of the many hover behaviors they've added.
- leephillips 6y agoHover states also make the Netflix website annoying.
- jagger27 6y agoRight! When I’m just scrolling through the list I don’t need an autoplay kicking off just because I happened to rest my mouse there.
- leephillips 6y agoNetflix is one of those sites where I find it hard to imagine that its designers ever tried to use it. It’s maddening.
- julianlam 6y agoThankfully after much griping, Netflix did add an option to disable this in your profile settings. That it's the default behaviour is still mind boggling.
- jfengel 6y agoMobile consistency is the big win here. A lot of users lack the ability to hover. That means the mobile language works it's way back to desktop. Either you maintain (and test) two different interactions, or you give in and appeal to the broadest audience with least work.
- clord 6y agoI didn’t test this but won’t the focus-within trick work for click menus too? The user clicks the button (which must be a child of the container) so focus moves within the container and hence the submenu can show. nav:focus-within > .submenu {display:block} (Edit: oh it’s mentioned in the article briefly without much explication of the need for js)
- layer8 6y agoIt’s okay for submenus to expand on hover, because the user is already mentally in a menu context if they clicked to open the top-level menu. That is common desktop behavior too. However, it’s preferable for the submenu to stay open until some other menu navigation takes place (e.g. a sibling submenu opens), because it’s much too easy to accidentally leave the submenu area with the pointer.
- snarfy 6y agoHow do you hover on mobile?
- lucb1e 6y agoBack in the good ol' days, that is 2018, I had this Galaxy Note 2 with a little pen. When hovering the pen over the screen, it would create a cursor under it and trigger onhover events when moving it around just like a desktop cursor. I could open hover menus on mobile from 2012-2018 when not all sites were adjusted to mobile yet. It was glorious.
- gmueckl 6y agoStill works in all the newer Samsung devices with an S-Pen, even in some regular apps, where you get to see e.g. button tooltips when hovering. This little stylus is what makes me stick with that brand, admittedly.
- frosted-flakes 6y agoThe BlackBerry Classic from 2014 worked this way too. It had an optical trackpad that controlled the focus, except in the browser where it was an actual pointer.
- mtVessel 6y agoIf it's implemented at all, it's typically "long press", which, for my money, is about as counter-intuitive as it gets.
- rapnie 6y agoThe final result has the annoying effect that things scroll up, when I scrolled lower items to the middle of the bounding box (on FF/Android). But maybe this is just the fiddle viewport's behavior.
- brianzelip 6y ago> Since click menus require JavaScript, we should consider how this menu can be progressively enhanced in case JavaScript fails for any reason. Our classic hover CSS trick is still good for something after all! Yet the demo linked to in the article[0] doesn't work w/out js at time of writing. The article makes me want to buy in, but the lack of non-js implementation seems awkward. I make css hover dropdown menus a la "Setup 2" in the article's diagram, ie: the drop down top level nav item is not clickable, but expands on hover and keyboard navigation. I personally prefer one less effort. A mouse click is always a mouse hover first. [0] https://github.com/mrwweb/clicky-menus https://github.com/mrwweb/clicky-menus
- julianlam 6y agoAn accessible (or at least a no-js) way to expose a menu on click would be to use a checkbox, the :checked state in CSS, and a label element for the actual click handler. It's a semantic html nightmare but it works.
- brianzelip 6y agoFor sure. Note that the escape key for unchecking won't work with out js.
- SiVal 6y agoFrom the article: "When you think about it, click menus are actually what we expect already in most other contexts." [slapping my forehead] For more than a decade I've been dumbfounded that nobody seemed to be thinking about something so obvious. I mean, the browser itself had well-functioning, standard menus. By the time CSS enabled web dropdown menus, the behavior of dropdown menus had been extensively tested in usability labs (all sorts of variations) and almost completely standardized across Windows, Mac, NeXT, BeOS, etc: Menus, consistent with all types of button, wait to be told to open which, also consistently, can be done by mouse, keyboard, touch, voice, eye-controller, etc. Then some web developer decided to create menus that didn't wait for you to ask. You'd click a link at some scroll position so you'd navigate to the new page with your mouse in some random position, which would then trigger some random menu to leap out and cover what you were looking for, forcing you to find a way to get off of it so it would close without accidentally triggering another menu and starting over. And if you finally saw what you wanted on some other part of the page and moved your mouse toward it: BLAT! Some other random menu was triggered en route. Or you have menus arranged so that trying to reach one keeps triggering another nearby that then covers it (looking at you, Amazon!) Then everyone else seems to have said, YES, I too want visitors to my page to feel as if they had just stumbled into a minefield. Instead of the extensively tested, usability-research-based standard menu behavior of clicking a menu or button when you want it, I want them to experience the thrill of not knowing what might happen and for it to happen differently depending on where they enter the page and whether they enter with a mouse or touch device. (Tooltips are okay if they are so small that they are very unlikely to cover anything you might need. You still have to set their delay long enough to not trigger at all when passed over.) We should be using the menu lessons that were well researched, well known, well liked, and well established back in Win95 days. We can pretend it's a newly invented concept called "click menus" if that helps.
- kitsunesoba 6y agoFully agree. Mobile variants of sites are another matter of course, but for desktop versions much of UX/interaction has not only been solved, but highly refined for decades. Traditional desktop design patterns might not be particularly flashy or compatible with current design trends but they work and work well which is what's most important when it comes to software.
- c22 6y agoI note that the first "hover menu with tab navigation" worked fine on my phone with javascript turned off and behaved exactly as expected with a click on the root opening the menu. None of the other examples worked at all or were even displayed?
- dillondoyle 6y agoIt's hard to get a good solution on mobile. Seems most solutions either expand like accordion, which makes accidental clicks (especially when they animate for like 1s). Same issue as an 'overlay' z-indexed over the navigation. Simply expanding can take up the whole screen, i've seen a lot of 'side navigation' that expands right, or a hamburger that goes full screen. I don't like those... And it seems less accessible for screen readers if it's not actual selects? Maybe not with good aria hints I have been experimenting with using actual selects for a current plugin tool I'm building. If anyone has good examples to build on? Trying to combine the nice desktop styling of this codepen, with an actual mobile os select ux. https://codepen.io/ahmedhosna95/pen/GGRXBR https://codepen.io/ahmedhosna95/pen/GGRXBR https://demos.jquerymobile.com/1.4.5/selectmenu/ https://demos.jquerymobile.com/1.4.5/selectmenu/