UIを重視したボタンデザイン ユーザーを正しく誘導してスマホで押し間違えを防ぐ工夫

モバイルアプリを設計したことがあるなら、アイコンボタンがどれほど便利で普及しているか分かるでしょう。でもアイコンの並びが近すぎると、ユーザーが押し間違えてしまうことは意外と知らないと思います。

アイコンボタンが一列に並んでいるときによく起こる問題です。ボタン同士の間に十分なすき間がないと、ユーザーは隣のボタンを押しやすいのです。このような間違いをするとユーザーはイライラし、作業効率が悪くなってしまいます。

アイコン間に余分なすき間を加える

ユーザーがアイコンボタンを間違えないようにするには、すき間を加えます。アイコンの上に指を置いて十分な間隔があるか確認してください。

隣のアイコンがきちんと表示され、周りにすき間があれば、間隔は十分です。指の端が隣のアイコンに触れている、またはもう少しで触れそうな場合は、もっとすき間を増やしましょう。

視覚のアフォーダンスを利用するためにサークルパッドを使う

アイコンボタンと普通のボタンを押した状態を比較してみると、普通のボタンの場合は指を置いても端が見えています。アイコンボタンでは、押したときに指でボタンが隠れてしまいます。

ボタンの端が見えない場合、ユーザーは自分が目標を達成しているか分かりません。ボタンの端は、押していることを確認するための視覚のアフォーダンスなのです。

ユーザーに視覚のアフォーダンスを与える効果的な方法は、アイコンをサークルパッドにすることです。ユーザーの指が上にあるときに外側の端が見えるように、サークルパッドを十分に大きくします。

サークルパッドには余裕があるので、間にそれ以上すき間を空ける必要はありません。実のところ、サークルパッドが大きいほど、必要なすき間は少なくなるのです。

サークルパッドの大きさと形により、ユーザーはボタンの端を見ることができます。これにより、誤ってボタンの間のスペースを押すのを防ぐことができます。アイコンだけでは、ボタンの端が見えないため、ボタンの間のスペースを指が押してしまう可能性が高くなります。

サークルパッドの使い方の良い例は、iPhoneのコントロールセンターの画面です。各アイコンボタンは、丸いパッドとボタンの間に十分なスペースがあります。ボタンがかなり多いので、正しく間隔をとる必要があります。

押しやすさ

アイコンボタンをデザインするときは必ず指を使って間隔を測ります。足りない場合は、隣のアイコンが見えるようになるまですき間を増やします。ユーザーのタッチ精度を高めたい場合は、サークルパッドを使用してください。

アイコンボタンの周りのすき間は仕事の効率に影響します。アイコンを魅力的に見せるのはもちろん、簡単に押せるようにもして下さい。そうすれば、アプリの見栄えがよくなるだけでなく、使うのも楽しくなるでしょう。