Tooltips need a delay, and then they need to skip it
blog.master.dev
blog.master.dev
Why on earth do we need this thing here?
Oh, that's why.
It's a great gig if you can get it. Horrible for the users and investors, of course, but great for the engineers.
“Do not remove a fence until you know why it was put up in the first place.”
(Raskin left before even the original macintosh he helped lead. He also opposed the use of the mouse)
I like how these things are "figured out" and then fleshed out bit by bit like they're some kind of innovation. Software industry in a nutshell.
It's such a small detail that I wouldn't have otherwise noticed (because I don't build animations, so it doesn't cross my mind), but now that I know about it, I think about it all the time.
I think there was also an article about it on The Old New Thing, but I can't seem to find it anymore.
Find modern examples by Googling "menu safe triangle." Here's one from 5 days ago https://www.framer.com/blog/cursor-trajectory/
> I asked the Framer Agent to fix it, and within minutes it had built and applied what I now call trajectory-based menu aim
How is this different from the observation that, say, a non-magnetic iron ball may have more than one possible velocity in a given gravitional field, depending on whether it was recently thrown upward or dropped from above?
A chunk of iron put into a 1μT magnetic field will behave differently depending on what other magnetic fields it has been in recently.
How exactly does this address "whether it was recently thrown upward or dropped from above"?
A ball in a given location will do something unpredictable if you have no information about its past. Is that hysteresis?
So its past is kind of irrelevant. At some point if nothing is supporting it, it will fall towards the centre of the Earth.
This is just high school physics.
I'd be surprised if that were the case: seems like it'd violate some sort of "locality", where the future should depend entirely on the present state.
Is it just that there's unidentified present state that's perhaps more easily characterized by knowing the history? Or is it somehow unidentifiable in principle?
The hysteresis in the material only means that if you apply 1T to it to magnetise (supposing the ball starts with zero magnetisation) it and then apply 0T to demagnetise it, the remanent field in the ball would be like 0.4T due to hystetesis, you need to apply something like -0.4T to leave it as it started.
Think of a state diagram: "you are at the reply screen" is one and only one state. "The tooltip is shown" is a behavior of more than one state, with different paths to get to those states
“Before (Without the delay of 200ms)” shows obvious delay in appearance. I think this is because of the very inappropriate fade-in.
“After (With the delay of 200ms & instant tooltips)” doesn’t show the instant behaviour at all, only one tooltip.
(These days I would have included more comments.)
Naturally, there was a fallback to pure CSS menus, because we weren't barbarians.
Ah, the good old days when we wrote JS function to do something, or copied from dHTMLZone. These days the first 10 lines of JS is loading hundreds of lines of JS libraries. (Yep, I'm an old man yelling at clouds!)
My three most-hated modern trends
- Disappearing scroll bar with content that you have to scroll for
- Pills going across the top of the screen that are "most-used" filters instead of a real filtering menu
- Clickable text and non-clickable text appearing the same. I mean come on. Who the fuck is designing these things? That's the one I can't wrap my mind around. How can a self-respecting programmer put out a UI where the display and clickable elements look exactly the same? What are we doing man
Browsers are different. They don't really benefit from being written for, or from being used. This seems like enough to explain the difference. They provide some functionality, and giving your users a good experience is your problem, not theirs.
I feel like I've seen complaints that Apple has forgotten things it already knew about how to design a usable interface; that wouldn't be explained by this model.
I have to intention place my mouse cursor somewhere that won't trigger it. I don't need to react to every message. I'd rather be able to read them without something blocking them.
On a related note: I refuse to install teams, and have never seen an emoji popup in the web video chat thing.
I once built a Bomberman clone that had control issues.
The first iteration of the controls were clunky, because I only checked if a player was touching a block in the direction they wanted to move and if there was, I reset the position.
Move down, hit block, stop.
After a bit of experimenting I checked if a player was halfway behind or ahead of a block and added perpendicular motion after resetting the position. That way the player would glide around the blocks.
Move down, hit block, stop, move left or right until moved around the block.
That change alone made the game 100x more fun.
A lot of new creators of course will not believe you if you tell you have to do these affordances. I once tested a person's multiplayer map where a door had a central lip that crushed you if you entered off-center. I told them that it should be fixed, but the answer was "you should always go through doors through the center". It's some sort of very enticing idea of purity. "My map will only have real architecture and no affordances." In the end it will self correct.
There is no contact form. Only a Confession Textarea
I wrote an chrome extension to block them: https://chromewebstore.google.com/detail/google-workspace-ho...
First, it’s funny how browsers finally get to the point where good html tooltips can be done with just HTML/CSS via Anchor Positioning and Popover APIs, eliminating the need for JS for tooltips. But then there is a “one more thing” that pulls JS right back into it.
Second, I think the tooltip context could be applied to “tooltip groups”, so it’s not a check to see if the whole page is “warm”, but whether a group is warm.
Overall the delay in tooltips (and configurable) has been a feature since the 90s (could set the delay in millis in some UI frameworks)
Truly, good design is design that goes unnoticed.
I like predictable, consistent, and fast.
How do you think tooltip hover works on mobile?
Why do we need to explain what a thing is or does on every site? Are JavaScript devs seeing video games and the key takeaway is everybody loves the tutorial where they’re told W moves forward? Or are they doing wacky JavaScript devs stuff like making pageup forward because it contains word “up” so fixed another bug. Then patting themselves on the back.
Just display the text information. Let me print it. Use consistent designs. Don’t intercept my clicks.
I could do an hour long standup rant just about how you guys need to STOP intercepting my clicks. In fact I’ll narrow it down to just Microsoft. They continuously find new ways to block and obstruct clicks. Once windows toast notifications got mostly fixed they reinvented toast notifications in yet another parallel duplicate feature with Teams toasts that spawn back to back to block critical button clicks.
I can’t believe even Apple has let this slip and iPhone is also subject to click blocking.
What are the rest of you devs doing all day?