第14章　人間は、小さく遠い場所を狙いにくい

画面の隅にある小さな×印が見えても、簡単に押せるとは限りません。マウスでは小さな場所へ矢印を合わせ、タッチでは指で直接触れます。キーボードでは、場所を狙わず順番に選択位置を移動します。

見えている記号の大きさ、実際に押せる範囲、キーボードで選ばれたことを示す輪郭は別のものです。この章では、同じ「閉じる」操作を三つの方法で見ながら、押しやすい画面を考えます。

14.1 マウス・指・キーボードでは、到達方法が違う

マウスでは、画面上の矢印を閉じるボタンまで動かします。

対象が遠く、小さくなるほど、矢印を正確に合わせるための移動が難しくなります。これは、遠くて小さい対象ほど到達に時間がかかりやすいという Fitts の法則から考えられる関係です。ただし、ボタンの意味を理解する時間までは説明しません。

タッチでは、画面へ指で直接触れます。

指先はマウスの矢印より大きく、触れている場所も隠します。小さな×印そのものだけでなく、その周囲を含めて押せるようにします。隣に別の操作がある場合は、指がずれても誤って押さない間隔が必要です。

キーボードでは、閉じるボタンの場所を狙いません。

Tab キーなどで選択位置を移し、目的のボタンへ到達してから実行します。いまどこが選ばれているかを示す輪郭と、自然な移動順が必要です。

同じ閉じる操作でも、マウスは小さな範囲を狙い、指は操作を覆い、キーボードは順番をたどります。三つを一つの「押しやすさ」という数値だけでは評価できません。

閉じるボタンの×印を大きくしすぎると、画面の中で必要以上に目立つことがあります。しかし、見た目を小さく保ちながら、その周囲までボタンに含めることができます。

最初の例では、16 ピクセルの記号部分だけが反応します。

次の例では、×印の見た目は変えず、周囲まで押せるようにしています。

押せる範囲は、CSS の padding や最小サイズを使って広げられます。大切なのは手段の名前ではなく、HTML 上も一つのボタンになっていて、マウスでも指でも同じ範囲が反応することです。

ただし、見えない範囲を広げればよいとは限りません。

大きさと同時に、隣の操作との間隔を設計します。特に削除や送信のように結果が大きく違う操作は、近づけすぎません。間違えたときに取り消せる仕組みも必要です。

Web や各端末の設計資料には、操作対象の最小サイズについて異なる数字が示されています。数字は、見落としを防ぐための大切な確認項目です。しかし、単位や対象となる製品、例外条件が異なる数字を、そのまま一つの正解へまとめることはできません。

同じ CSS 上の大きさでも、画面の密度、拡大率、端末の大きさによって、指との比率は変わります。基準を満たしたことと、その画面で十分に操作しやすいことも同じではありません。

確認するときは、少なくとも次を見ます。

操作対象を広げたために、狭い画面でツールバーが二段になることもあります。これは失敗とは限りません。小さなボタンを無理に一列へ詰めるより、読みやすい順番で折り返す方が安全な場合があります。

押しやすさは、対象の大きさだけで決まりません。

一つ目は、よく使う操作を作業場所へ近づけることです。

どこにでも同じボタンを置くのではなく、結果と関係する場所へ置きます。

二つ目は、操作の位置を安定させることです。

内容によって保存ボタンの位置が飛び回ると、押す前に毎回探さなければなりません。画面幅が変わる場合でも、操作と内容の関係は保ちます。

三つ目は、別の操作方法も用意することです。

ショートカットだけへ頼ると、知らない人には使えません。画面上のボタンを残し、メニューなどへショートカットを併記します。見て選ぶ方法と、覚えて素早く使う方法の両方を用意します。

小さなアイコンをすべて巨大にするのではなく、押せる範囲、間隔、距離、位置、別の操作方法を組み合わせます。スクリーンリーダーからも意味が分かるように、×印だけでなく「閉じる」という操作名を付けることも必要です。

操作しやすい場所にボタンがあっても、押したあとに何が起きたか分からなければ、利用者はもう一度押すかもしれません。

次章では、操作を受け付けたこと、処理中であること、成功や失敗をどう返すかを見ていきます。

Fitts, “The information capacity of the human motor system in controlling the amplitude of movement,” 1954. 距離と対象幅、速度と正確さの関係を扱った研究です。
W3C WAI, “Understanding Success Criterion 2.5.8: Target Size (Minimum).” Web の操作対象サイズについて、例外を含めて説明しています。
Android Accessibility Help, “Touch target size.” Android アプリのタッチ対象についての案内です。Web とは単位と対象が異なります。