Show HN: Mimicking the Bloomberg menu widget without JavaScript

Recent versions of Apple's human interface guidelines don't make any mention of it, because those decisions are baked into the toolkit and not under control of application designers, but the earlier editions of Apple's guidelines went into some detail about why and how pop-up submenus were delayed.

1995 edition of Macintosh Human Interface Guidelines:

http://interface.free.fr/Archives/Apple_HIGuidelines.pdf

>pp. 79: Hierarchical menus are menus that include a menu item from which a submenu descends. You can offer additional menu item choices without taking up more space in the menu bar by including a submenu in a main menu. When the user drags the pointer through a menu and rests it on a hierarchical menu item, a submenu appears after a brief delay. To indicate that a submenu exists, use a triangle facing right, as shown in Figure 4-36.

The original 1987 version of the Apple Human Interface Guidelines can be checked out from the Internet Archive, and should be required reading for serious user interface designers, the same way that serious art students should contemplate the Mona Lisa, and serious music students should listen to Mozart. Even though it's quite dated, it's a piece of classic historic literature that explicitly explains the important details of the design and the rationale behind the it, in a way that modern UI guidelines just gloss over because so much is taken for granted and not under the control of the intended audience (macOS app designers using off-the-shelf menus -vs- people rolling their own menus in HTML, who do need to know about those issues):

Apple Human Interface Guidelines (1987): https://archive.org/details/applehumaninterf00appl

>pp. 87: The delay values enable submenus to function smoothly, without jarring distractions to the user. The submenu delay is the length of time before a submenu appears as the user drags the pointer through a hierarical menu item. It prevents flashing caused by rapid appearance-disappearance of submenus. The drag delay allows the user to drag diagonally from the submenu title into the submenu, briefly crossing parent of the main menu, without the submenu disappearing (which would ordinarily happen when the pointer was dragged into another menu item). This is illustrated in Figure 3-42.

pp. 87: Hierarchical Menus: https://i.imgur.com/RrEDo3m.png

pp. 88: Figure 3-42: Dragging diagonally to a submenu item: https://i.imgur.com/a0gNWHh.png

Others have written about this issue in the context of the web:

Why is there a menu show delay, anyway? https://blogs.msdn.microsoft.com/oldnewthing/20080619-00/?p=...

>I run into this problem all the time on the Web. Web site designers forget to incorporate a menu show delay, resulting in frustration when trying to navigate around them. For example, let's look at the navigation bar on the home page of The Discovery Channel. Hover over TV Shows, and the menu appears. Suppose you want to go to Koppel on Discovery, but instead of moving the mouse straight downward, the way you hold your arm on the desk moves the mouse in an arc that happens to swing to the right before it arcs downward. You touch TV Schedules and your navigation is screwed up. You have to start over and make sure to move the mouse exactly straight down.

You can even solve the problem with CSS and without JavaScript, by using ":hover":

Dropdown Menus with More Forgiving Mouse Movement Paths: https://css-tricks.com/dropdown-menus-with-more-forgiving-mo...

>This is a fairly old UX concept that I haven't heard talked about in a while, but is still relevant in the case of multi-level dropdown menus. A fine-grained pointer like a mouse sometimes has to travel through pretty narrow corridors to accurately get where it needs to in a dropdown menu. It's easy to screw up (have the mouse pointer leave the path) and be penalized by having it close up on you. Perhaps we can make that less frustrating.

I just posted a comment about this with a link to the 1987 Apple Human Interface Guidelines and page snapshots explaining the design.

https://news.ycombinator.com/item?id=17404345

pp. 87: Hierarchical Menus: https://i.imgur.com/RrEDo3m.png

pp. 88: Figure 3-42: Dragging diagonally to a submenu item: https://i.imgur.com/a0gNWHh.png

I also linked to an article showing how to solve the problem with CSS and without JavaScript!

https://css-tricks.com/dropdown-menus-with-more-forgiving-mo...

Hopefully the author of this article (dosy) can use the css :hover delay technique to make his menus even better than Bloomberg's, without requiring any JavaScript!

Subtle but important details like that easily get lost and forgotten, because it seemed important enough to write down in 1987, but now it's built into macOS and nobody can change it.

It's hard for most people to notice, because the whole point is to invisibly work behind-the-scenes to make selecting from submenus easier without distracting you!

So Apple doesn't mention it any more in their "modern" UI guidelines, since they don't expect macOS application developers to reimplement menus from scratch. But that's what web developers do all the time, so it's important to document and preserve details like this!

I highly recommend reading the original 1987 Apple Human Interface Guidelines to any serious user interface designer! It's quite dated, but so is the Mona Lisa!

https://archive.org/details/applehumaninterf00appl

* Sometimes called "carpal tunnel syndrome"