UX改善のヒント：ツールチップの表示遅延と「即時表示」の実装術

ツールチップのUXを向上させるには、表示に絶妙な遅延（ディレイ）を設けるのがベストです。しかし、一度表示された後は、マウスを動かして別の要素にホバーした際、次からは待たせることなく「即時表示」させるのが正解です。ユーザーのストレスを減らす、この気の利いた挙動を実装しましょう。

20年くらい前、Webサイトでホバーベースのドロップダウンメニューを実装したときに全く同じ問題にぶつかったよ。たった10行程度のJSといくつかのグローバル変数だったけど、それを理解しているのが自分一人だったんだよね。:-P（今ならもっとコメントを残すだろうけどね。）当然、純粋なCSSメニューへのフォールバックは用意してたよ。だって、僕らは野蛮人じゃないからね。

この細部へのこだわりにすごく感謝してる。こういうのがもっと世の中に必要だよ。例えばVisual Studioのホバー時のポップアップって表示が速すぎて、何を選択しようとしても全然うまくいかない。結局、単語を選択するはずがポップアップをクリックしちゃったりするんだよね。

自分としては純粋なCSS版の方が興味深いな: https://blog.master.dev/delayed-then-instant-tooltips-with-h... (https://blog.master.dev/delayed-then-instant-tooltips-with-html-css-alone/)

Chris CoyierもJSを使わない、HTML/CSSのみのバージョンを投稿してたよ: https://blog.master.dev/delayed-then-instant-tooltips-with-h... (https://blog.master.dev/delayed-then-instant-tooltips-with-html-css-alone/)

これ、ヒステリシスの一例として説明できるんじゃないかな。面白い！ https://en.wikipedia.org/wiki/Hysteresis (https://en.wikipedia.org/wiki/Hysteresis)

マウスの速度を使うのはどう？マウスがある一定の速度で動いている間はツールチップを表示しないようにするっていう。

これ、https://emilkowal.ski/ui/you-dont-need-animations (https://emilkowal.ski/ui/you-dont-need-animations) の最後の例と同じ手法を説明しているみたいだね（興味があるなら、この投稿全体を読む価値があると思うよ）。普段アニメーションを作らないから気づきもしなかったような些細なことだけど、一度知ってしまうといつも意識するようになるね。

笑える。Web開発者がWin95からUXを再発見してるよ。次はなんだ、3Dボタンでも復活させるのか？

Appleが（『The Humane Interface』でこれについて書いたJef Raskinの指揮下で）1993年頃のSYSTEM 6で、こういったインタラクションの問題を観測して修正していたことには驚かされるよ。それなのに何十年も経ってから、また同じ問題を再発見して修正しなきゃいけないんだから。

タッチインターフェースでタップしたときのツールチップ表示にも同じ遅延が実装されている気がするんだけど、あれは多分間違いだよね。