これまでにモバイルアプリをデザインしたことがある人なら、アイコンボタンがどれだけ便利で普及しているかはお分かりかと思います。しかし、それらが近すぎる位置に配置されたとき、どれだけユーザーの誤タップを招いているかご存知でしょうか。
これはアイコンボタンが一列に並んでいる場合によく発生する問題です。ユーザーは、ボタンの間に十分なスペースがない場合、隣接するボタンを簡単に押すことができてしまいます。このミスはユーザーを苛立たせ、行いたいタスクを遂行しづらくする可能性があります。
アイコンとアイコンの間に余分なパディングを追加する
ユーザーの誤タップを防ぐにはパディングを追加します。アイコンの上に指を置いて、十分なパディングがあるかどうかを確認しましょう。
隣接するアイコンとその周囲に十分なスペースが表示されている場合は、十分なパディングがあると言えます。指の端が隣のアイコンに接している、または接しそうな場合は、もう少しパディングを追加する必要があります。
視覚的なアフォーダンスのために円形パッドを使用する
アイコンボタンをタップする操作と通常のボタンをタップする操作を比較すると、通常のボタンの上に指を置いたときにはボタンの端が見えている状態になります。アイコンボタンでは、タップするとボタンの端が消えてしまいます。
ユーザーがボタンの端を見えないと、狙った場所にタッチできているかわかりづらくなります。ボタンの端は、タッチ精度を確認するための視覚的なアフォーダンス（編注：人の感情や動作を促す環境要素）として機能します。
ユーザーに視覚的なアフォーダンスを与える効果的な方法は、アイコンを円形パッドに配置することです。円形パッドを大きくして、ユーザの指が上に来たときに外側の端が見えるようにします。
円形パッドはパディングそのものなので、間に余分なパディングを入れる必要はありません。実際、円形パッドを大きくするほど、必要なパディングは少なくなります。
円形パッドのサイズと形状によって、狙った場所の端を確認できます。これにより、誤ってボタン間のスペースの誤タップが無いようにします。円形パッドがないと、ターゲットとなる部分が少ないがないため、ボタンの間のスペースに指が着地する可能性が高くなります。
円形パッドの良い例はiPhoneのコントロールセンター画面です。各アイコンボタンには、円形とその間の十分なパディングがあります。ボタンの数が多いので、パディングの調整は必須です。
円形パッドは円形である必要はありません。四角形パッド(正方形+円形)を使用することもできます。どちらも許容範囲内で、同様に機能します。
タップをもっと簡単にする
アイコンボタンをデザインするときは、自分自身の指を使ってパディングを測定します。十分でない場合は、隣接するアイコンが表示されるまで追加しましょう。ユーザのタッチ精度を向上させたい場合は、円形パッドを使用します。
アイコンボタンの周囲のスペースは、タスクのパフォーマンスに影響します。アイコンを魅力的に見せるだけでなく、タップしやすくするようにしましょう。そうすれば、アプリの見た目が良くなるだけでなく、使い心地も良くなることでしょう。
