Join the discussion

Write your take first — we'll ask for email only when you're ready to publish.

  • Hacker News
  • What about using mouse velocity? If the mouse is changing position at a certain rate, don't show the tooltips.
  • i only show tooltips if you wiggle the mouse cursor over an element
  • I'm always amazed by solutions for user interactions.

    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.

    by k__
  • In FPS maps like Quake you only realized how much invisible clip blocks the map makers put in once you play an amateur map that doesn't have them. You hit things, get stuck and can even get crushed and die. Or you can try and play an early version of some popular multiplayer map that doesn't have them and it's way less playable.

    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.

  • I wish the Teams emoji/reaction popup would not come up so often.

    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.

  • That sounds like engagement hacking. Someone’s promotion packet probably brags about the number of emojis sent.

    On a related note: I refuse to install teams, and have never seen an emoji popup in the web video chat thing.

  • Hilarious. Web devs discovering UX from Win95. What's next, 3d buttons?
  • Yes, carmakers are discovering 3D buttons, ackchyually
  • I know right? It's like interaction design came and went over a period of 30 years and now we're back to the beginning again.
  • MacOS had it even earlier. I think it's because there's not a mature UI framework out there. They come, have their moment in the spotlight, and are replaced. There's also a ton of them. And they are often written by a very small group of people without deeper understanding of ergonomics, and don't live long enough to get this level of attention. You should be glad if it still gets bug fixes after 2 years.
    by tgv
  • The pure CSS version seems more interesting to me: https://blog.master.dev/delayed-then-instant-tooltips-with-h...
  • Chris Coyier also posted a version using only HTML/CSS, no JS: https://blog.master.dev/delayed-then-instant-tooltips-with-h...
  • I ran into the same problem about 20 years ago when implementing hover-based dropdown menus on a website. It was only about 10 lines of JS and a couple global variables but I was the only person who understood it. :-P

    (These days I would have included more comments.)

    Naturally, there was a fallback to pure CSS menus, because we weren't barbarians.

  • > only about 10 lines of JS

    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!)

  • what did the JS provide that the CSS solve wasn't the only solve?
  • The example shown at the top is really bad.

    “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.

  • I greatly appreciate this attention to detail, and there isn't enough of this in the world. For example, in Visual Studio popups on hover happen so fast you can barely select anything, or you end up clicking on the popup instead of selecting a word.
  • Opus Magnum suffers from this. It feels like punishment for taking the most direct route to get the cursor where I want it.
  • My favorite is the info icons that show a tooltip on hover, but if you click them, they disappear the tip if it’s showing and never show it if it hasn’t appeared yet.
  • If there is a primary UI element on screen that the user can interact with and moving the mouse towards that causes a secondary, alternative, UI element to appear, the second element needs an active modifier key to bring it up. Tooltips and such are total trash and get in the way of usability. If you have something important then put it on the screen to begin with don't have it randomly jump in front of the user who is already mid action with something else.
  • Years and years ago, there was an article about the way Amazon.com's menu dropdown worked. It had the same spark (of careful attention to user behavior and needs): https://news.ycombinator.com/item?id=5330998 / https://bjk5.com/post/44698559168/breaking-down-amazons-mega...
  • I think I would describe this as an example of hysteresis. Neat! https://en.wikipedia.org/wiki/Hysteresis
  • Umm, either I'm misunderstanding or this holds for nearly every UI everywhere, no? Like if I click "reply" on HN I'm moved to the screen I now type this comment in. That means my current state depends on history, too, no?
  • >> Hysteresis is the dependence of the state of a system on its history. For example, a magnet may have more than one possible magnetic moment in a given magnetic field, depending on how the field changed in the past.

    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?

  • Interestingly, there are more use cases for hysteresis in UI design, e.g. it was famously used in nested menus in Windows: https://www.mackido.com/Interface/hysteresis.html

    I think there was also an article about it on The Old New Thing, but I can't seem to find it anymore.

    by xg15
  • This looks it's describing the same technique as the last example in https://emilkowal.ski/ui/you-dont-need-animations (and that whole post is worth a read, I think, if you found this interesting).

    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.

  • It will never cease to amaze to me that Apple (under Jef Raskin who also wrote about this in The Humane Interface) observed and fixed problems with interactions like this in SYSTEM 6 in like 1993 or something - only for the same problem to have to be re-descovered and re-fixed decades later.
  • everyone hates reading
  • Relatedly, my immediate reaction was "tooltips on logos? Just use alt attributes and browser native tooltips, stop reinventing wheels that are already decently handled in HTML".