「fat finger」の度合いを可視化する

Web サイトやアプリケーションを、スマートフォンやタブレットといったタッチインターフェース搭載デバイスで使えるようにするためには、何はともあれ、タップできる箇所 (リンク、フォーム要素、ボタン、など) を、それなりの大きさにする必要があります。英語圏のユーザビリティ専門家の間では「fat finger」と呼ばれていますが、指先は「太っちょ」で、マウスポインターほど精緻なポインティングができず、誤操作につながりやすいからです。

ところで、指先のポインティング精度が、実際のところ、どの程度「粗い」のかを、調べてみたことはありますでしょうか?今回の記事では、「fat finger」の度合いを可視化してみることについて、考えたいと思います。

背景画像を読み込める「お絵描き」アプリを使う

「fat finger」の度合いを可視化する簡単な方法は、スマートフォンやタブレットの「お絵描き」アプリを使うことです。この手のアプリでは、タップした箇所が「点」として描画されるので、これを応用して、描画された「点」の位置が、もともと意図していた地点からどの程度ずれているかを見ればよい、というわけです。背景画像を読み込むことができるアプリ (たとえば iOS であれば「Adobe Ideas」など) を使うとよいでしょう。

下の画像は、「Adobe Ideas」上で、1センチメートル四方の方眼を背景画像として配置し、線の交点をひとつずつ、Z字を描く (左→右という動きを上から1段ずつ繰り返す) 順番で、できるだけ素早く (じっくり慎重にならずに) タップしてみた結果です。

iPhone (画面サイズ : 4インチ) で、1cm四方の方眼の交点をひとつずつタップした結果。(iPhone は左手に乗せる形で持ち、同じ左手の親指でタップを実行。)
iPhone における「fat finger」の可視化の例
iPad (画面サイズ : 9.7インチ) で、1cm四方の方眼の交点をひとつずつタップした結果。(iPad は左腕に乗せる形で左手で持ち、反対の右手の人差し指でタップを実行。)
iPad における「fat finger」の可視化の例

上記の例は、私が一人で、しかも一度だけ、やってみたものなので、これだけで特筆すべき傾向を見出せるとは到底思えませんが (複数人に、何度かやってもらうと、もしかしたら何らかの傾向が見えてくるかもしれません...?)、少なくとも「人間の指先のタッチというものは、かなり精度が粗いのだな」ということは理解できると思います。

具体的な Web ページやペーパープロトタイプで試すことも

上記の例では、方眼紙を背景画像として配置して「fat finger」の度合いを可視化してみましたが、具体的な Web ページのスクリーンショット (画面キャプチャ) を背景画像にしてみることによって、各種 UI コンポーネント (リンク、フォーム要素、ボタン、など) の大きさや配置が妥当か...ということも検証できると思います。

具体的な Web ページのスクリーンショットで「fat finger」の度合いを可視化してみた例 (apple.com のグローバルナビゲーション)。
apple.com のスクリーンショット (グローバルナビゲーション) で「fat finger」を可視化した例
具体的な Web ページのスクリーンショットで「fat finger」の度合いを可視化してみた例 (starbucks.com のフッター)。
starbucks.com のスクリーンショット (フッター) で「fat finger」を可視化した例

また、サイト設計の上流工程でペーパープロトタイピングをしているのであれば、そのプロトタイプをデバイス内蔵のカメラで取り込み、背景画像として配置してみることによって、同様の検証ができるでしょう。ペーパープロトタイプなら、作り直し (反復的なブラッシュアップ) が簡単にできるので、このような検証を通じて、各種 UI コンポーネントの大きさを適切に保ちつつ、レイアウトやデザインを詰めてゆく、といったこともスムーズにできそうです。

ペーパープロトタイプの上で、「fat finger」の度合いを可視化してみた例。
ペーパープロトタイプの上で「fat finger」を可視化した例

「fat finger」の問題は、このように可視化することで、プロジェクト内で共有することも可能になります。簡単にできる定性的な UI 評価の一環として、気軽に採り入れてみてはいかがでしょうか。