TOP › UX用語 › タッチターゲット
デザイン・情報設計

タッチターゲットTouch Target

タッチターゲット(touch target)とは、タッチ画面で、指で押す対象になる領域である。ボタンやリンクなどが当たる。大きさと、まわりとの間隔が、押しやすさを決める。 たとえば、スマートフォンのニュースアプリを使うとする。「閉じる」の小 […]

タッチターゲット(touch target)とは、タッチ画面で、指で押す対象になる領域である。ボタンやリンクなどが当たる。大きさと、まわりとの間隔が、押しやすさを決める。

たとえば、スマートフォンのニュースアプリを使うとする。「閉じる」の小さな×ボタンが、「フォロー」ボタンのすぐ横にある。×を押したつもりが、「フォロー」に触れて、意図しないフォローになってしまう。

大きさの目安

ニールセン・ノーマン・グループ(NN/g)の2019年の記事が、目安を示している。最小の大きさは、1cm × 1cm である。素早く、正確に選べる大きさとして、Parhi(パルヒ)らの調査に基づく。

  • 大きさは、画面上の実際の長さ(cm)で考える。ピクセルの数では、画面の密度によって、実際の大きさが変わってしまう。
  • 指先の幅は、平均で1.6〜2cmである(MIT Touch Lab の調査)。親指は、押す面が平均2.5cmである。
  • 指は、ターゲットより太い。だが、押し間違いの原因は、指の太さではなく、ターゲットの小ささにある、と NN/g は書いている。
  • 小さいと、押すのに時間がかかる。フィッツの法則によると、的が小さいほど、狙いを定めるのに時間がかかる。
1cm四方のタッチターゲットと、指先の幅、2mmの間隔を示した図
図1:タッチターゲットの大きさと間隔(説明用に作った図。数字は NN/g「Touch Targets on Touchscreens」に基づく)

間隔をあける

小さいだけでなく、近すぎることも、押し間違いの原因になる。近くの別の部品を、まちがえて押してしまう。

  • まず、大きさを確保する。そのうえで、間隔をあける。間隔は、最低でも2mmが目安である。
  • 細長いボタンは、上下に積むと、間隔が足りなくなりやすい。左右に並べると、横幅の分だけ、押し間違いの余裕ができる。
  • 地図の上のマーカーは、小さく密集していると、押しにくい。一覧の表示も、用意するとよい。

見えるのに、押せない

文字や形が見えるのに、小さすぎて、押せないことがある。NN/g は、これを「見る・押すの非対称(view-tap asymmetry)」と呼ぶ。見ることはできても、押すことはできない、というずれである。たとえば、カルーセルの下に並ぶ点の表示である。点は見えても、1つずつ押すには、小さすぎる。マウスでは問題なくクリックできる部品を、そのままタッチ画面に持ってきたときに、起きやすい。

もっと大きくするとき

1cmは、最小の目安である。次のようなときは、もっと大きくする。

  • いちばんよく使う操作のボタンは、目立たせるため、大きくする。
  • 歩いたり、車の中で使ったりする画面は、押し間違いやすい。大きくする。
  • 子どもや、手先が思うように動かなくなった高齢者に向けた画面は、大きくして、余裕をもたせる。
  • とても大きな画面では、目に入りやすく、届くまでの時間も短くするために、大きくする。
  • スマートウォッチのような小さい画面では、ボタンを小さくしない。ジェスチャーや音声での操作を考える。

NN/g の記事に、例がある。店内で使うアプリの例である。商品の検索と、バーコードの読み取りの2つのボタンを、約2cm × 2cm にして、画面の上に置いていた。歩きながら使う人が多いからである。

出典

関連用語

「UX用語」のカテゴリー