マウスポインターの形状変化

マウスポインターの形状を変化させることで、現在のマウスのモードや実行できる操作を視覚的に表す。
理由:マウスオーバーされたオブジェクトがどのような操作を受け付けるのかをユーザーに伝えるため。

図例
マウスポインターの例

効能

  • マウスポインターの形状を見るだけで、その下にあるオブジェクトがどのような操作を受け付けるのか分かる。
  • グラフィックエディターなどで、現在マウスでの入力がどのモードにあるか(何のツールを使っているか)分かる。

用法

  • 特定のオブジェクトにマウスオーバーしている間、ポインターの形状を変化させる。
  • 特定の入力モードにある間、ポインターの形状を変化させる。例えば Photoshop において、鉛筆ツールを使用している時にはポインターが鉛筆の形になる。
  • オブジェクトを横方向にドラッグできる場合は左右の矢印、縦方向に伸縮できる場合は上下の矢印、斜め方向に伸縮できる場合は斜め両方向矢印にするなど、期待されるマウス操作をポインター形状で表す。
  • ドラッグによってアイコンやリスト内の行の移動が可能な場合は、手のひらの形など、ユーザーが「つかむ」感覚を得られるポインターにする。
  • ドラッグ中、ドロップできないオブジェクトにマウスオーバーしている間、ポインターに「×」などを追加表示して、そこでドロップしても意味がないことを表す。
  • テキストの入力や選択ができる箇所では、ポインターを「|(アイビーム)」状の形状にする。
  • ポイントAからポイントBまでのドラッグで、ABを対角線とした矩形を描画したり、その中の要素を選択できる場合は、ポインターを「+」状の形状にする。または、システム固有に定めた、機能を表すアイコンの形状とする。
  • リンクにポインターが重なった場合は、ポインターを「指差し」状の形状にする。
  • システムが一時的に操作を受け付けることができない場合にも、そのことをマウスポインターの形状によって視覚化する。「時計」や「回転するボール」などのアイコンが慣習的に用いられる。アニメーションによる動きをつけることで、システムがフリーズしたのではなく動作中であることを示す。
  • あるオブジェクトが、クリックとドラッグの両方を受け付ける場合には、最も頻繁に行われる操作を促す形状にする。ポインターをデフォルト状態のままにしてもよい。
  • クリック時あるいはドラッグ中に、装飾キーの押下で振る舞いが変化する場合(例えばデスクトップ上でアイコンをドラッグで移動している時、特定の装飾キーを押すとコピーになるなど)は、装飾キーが押されている間のポインター形状をその振る舞いを示唆する形状にする(「+」を追加表示するなど)。

図例
横方向に伸縮できる要素に重なったときのマウスポインターの形状

図例
ドラッグできる要素に重なったときのマウスポインターの形状

図例
斜め方向に伸縮できる要素に重なったときのマウスポインターの形状

注意書き

  • 一般的・慣習的な形状、または機能を十分に視覚化した形状でなければ、ユーザーは機能の意味を理解できない。
  • ターゲットユーザーの持つ文化やバックグラウンドによっては、同じ形状でも異なる意味に理解されることがある。

蘊蓄

どのような場面でポインターを変化させ、どのような場面では変化させないか、ということを論理的に決定するのは難しい。何らかのマウス操作が可能なすべての状況でポインターを変化させていたのでは、変化が多すぎてかえってユーザーを混乱させてしまう。むしろ、マウスポインターが変化しなくても「今できること」が伝わるようなUIを目指すべきだと言える。