あなたのユーザーはスマホアプリやモバイルサイトのボタンをちゃんと狙った通りに押せているでしょうか？ きちんと押せているかをユーザーのせいにする前に、ボタンのサイズや間隔が最適化されているかどうか確認しましょう。
ボタンが最適なサイズと間隔になっていないと、ユーザーが狙いを外したり、間違ったボタンを押してしまいます。この記事ではどの程度が最適かを見ていきます。以下の数値は、96DPIでのCSSピクセルを基準にしています。
ボタンサイズの基準
まずは基準となるサイズがわからなければ、ボタンのサイズが最適かどうかを判断できません。幸いなことに、ボタンのサイズと間隔に関するリサーチによって、高齢者を含むほとんどのユーザーに有効な基準が発見されました。
この調査では、42ピクセル未満のボタンがユーザーのタッチ精度が最も低いことがわかりました。また、72ピクセルを超えるボタンも精度が低い結果となりました。
最も高い精度は42〜72ピクセルのボタンで得られました。つまり、ユーザーにとって最適な最小ボタンサイズは42ピクセル、最大ボタンサイズは72ピクセルということになります。
最も好ましいボタンサイズは60ピクセルであり、これは上記レンジのほぼ中央にあたります。72ピクセルのボタンは最高のタッチ精度を実現し、年配のユーザーに好まれました。
ボタンの配列を使用する場合は、優先順位を示すことが重要です。これにより、ユーザーはどのアクションが最も望ましい結果につながるかを知ることができます。ボタンサイズの基準に従うことで、優先順位を効果的に示すことができます。
任意のサイズを決めて、それがユーザーフレンドリーであることを祈るようなことはもうしなくてもいいのです。
この例では、ボタンサイズの標準を使用して優先順位を示します。
・高優先度ボタン＝72ピクセル
・中優先ボタン＝60ピクセル
・低優先度ボタン＝42ピクセル
ユーザーが最も頻繁に使用するボタンが見つけやすくなり、タップしやすくなりました。ユーザーはより速く、より精度高くタップできるでしょう。これは、ユーザーの関心が複数の異なるタスクに分かれている場合に特に便利です。
ボタン間隔の基準
リサーチによると、ボタンの間隔が広すぎる場合、ユーザーはタッチターゲットへの移動が遅くなりました。また、ボタンの間隔が近すぎる場合は、ユーザーのタッチ精度が最も低くなりました。
このリサーチでは、12から48ピクセルのレンジが最適なボタン間隔であると結論付けられました。数値のレンジを広くとることで様々なサイズのボタンに対応して便利です。このレンジを小さく分割すると、ボタンサイズに対応したボタン間隔の基準が得られます。
・大きなボタンの場合は12~24ピクセル
・中ボタンの場合は24~36ピクセル
・小さなボタンの場合は36~48ピクセル
ボタンを大きくすると、指がターゲットからわずかに外れていても、正確に当てることができます。しかし、小さなボタンでターゲットから外れてしまうと、隣のボタンに当たってしまいます。このため、小さいボタンは大きいボタンよりも間隔が広くなります。
この例は、ボタン間隔の基準に従うことでタッチの精度がどのように向上するかを示しています。ユーザーの指はターゲットからわずかに外れていても、ボタンの大きさに関係なく押すことができるようになります。
テキストボタンの意味
では、上記の基準はテキストボタンに適用できるでしょうか？ これらはテキストボタンの高さには適用できますが、幅は異なります。
たとえば、高さが60ピクセルのテキストボタンは、幅が60ピクセルのアイコンボタンよりも広くなりますが、タップするのは簡単です。実際、幅が大きいほど要求される精度は低くなるため、タップしやすくなります。
ボタンの高さは、正確さの点で重要です。テキストボタンのタッチ精度はアイコンボタンと一貫しています。
幅が広いため、ボタンの間隔の標準はテキストボタンには適用されません。ただし、視覚的な分離のためには、少なくとも12ピクセルの間隔が必要です。
ボタンのサイズを大きくする
さて、あなたのアプリのボタンのサイズと間隔は最適ですか？ ボタンのサイズと間隔の基準に従えば、あなたのアプリのタッチ精度も高くなります。
ボタンの最適なサイズと間隔を決定するために、感覚でやってしまうと、不確実性を残してしまいます。そのようにしてデザインシステムが形成され、多くの企業がそれを利用するのです。
