ホバー

定義

ホバーは、マウスポインターが要素の上にとどまっている間だけあらわれる状態です。この とき背景色がほんの少し濃くなったり、影がついて要素が浮き上がって見えたり、カーソルが 指の形に変わったりして、「ここは押せるものですよ」という合図をそっと送ります。クリック が起きる直前の段階なので、ユーザーは実際に押す前に、ここが反応する場所なのかどうかを まず確かめられます。そのためホバーは、画面とユーザーが交わすいちばん短い最初の会話だと 考えることができます。ボタン、リンク、カード、メニュー項目のように、押すと何かが起きる 要素には、ほとんど例外なくこのホバー反応が付いていると思ってよいでしょう。

なぜ重要か

ユーザーは画面の上で、何が押せて何がただの文字なのかを、その都度判断しています。この ときホバー反応があれば、マウスを乗せるだけでその判断がすぐに終わり、迷わず次の行動に 進めます。逆にボタンのように見えるのに、乗せても何も変わらなければ、ユーザーは本当に 押せるのか疑って一瞬立ち止まってしまいます。この小さなためらいが積み重なると、画面 全体が鈍く、もどかしく感じられます。よく整えられたホバーはクリックできる範囲をはっきり 示して探索の速度を上げ、この画面は生きていて反応してくれるという安心感をユーザーに 与えます。とくにリストや表のように似た行が長く続く画面では、マウスが乗った行だけ背景が うっすら変わるだけでも、今どの項目を見ているのかがはっきりして、押し間違いが大きく 減ります。こうしてホバーは、目でなぞる指のように現在の位置を指し示してくれます。

よくある間違い

• 大事な情報や機能を、ホバーの後ろだけに隠してしまうことです。タッチ端末にはポインター がなくホバー自体が起きないので、その中に隠したメニューや説明を、スマホのユーザーは いつまでも見られなくなってしまいます。
• ホバー効果を強くしすぎることです。色がガラッと変わったり、要素が大きく跳ね上がったり すると、マウスがかすめるたびに画面が派手に揺れて、かえって視線を邪魔し、目を疲れさせて しまいます。
• 文字や背景のように押せない要素にまでホバー反応を付けることです。押せないのに反応だけ すると、ユーザーはクリックしても何も起きずに戸惑い、本当に押せる要素はどこなのかという 信頼まで揺らいでしまいます。

実務のヒント

• ホバーはあくまで補助的な合図としてだけ使い、本当に大事な機能はクリックやタップだけでも たどり着けるようにしましょう。タッチ端末にはホバーがないという前提をいつも忘れなければ、 すべてのユーザーが同じ機能に届けるようになります。
• ホバーの変化は、色と影をほんの少しだけ動かす範囲で抑えましょう。控えめな変化のほうが むしろ洗練されて見えますし、たくさんの要素にわたって一貫して適用するのも簡単になります。
• ホバー状態はかならずマウスを乗せたときだけあらわれるようにして、キーボードで移動する ときはフォーカス表示がその役割を代わりに担うよう、二つの状態を別々に設計しましょう。

関連概念