デザイン

デザイン

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

UX movement

UX Movement is a user experience blog that publishes articles showing how good and bad design practices affect user behavior.

本記事は、How to Prevent Users from Mistapping Icon Buttons
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

619 views

読了時間 : 約1分41秒

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

 

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

 

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

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

 

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

 

 

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

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

 

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

 

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

 

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

 

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

 

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

 

押しやすさ

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

 

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

 

【コンビニでも使える!メルペイ初回利用1000円分招待コード】
当サイト限定招待コード:CMUTDF

 
利用可能店舗:メルカリ、コンビニ、ドラッグストア等

金額:※さらにメルペイスマート払で2000円分ポイント!
友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

 

【Uber初回利用2000円オフクーポン】
当サイト専用プロモーションコード:JP192991yw

 
»当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

 
Uber

Uber

プロモーション コードを追加するで「JP192991yw」を入れてください。
※プロモコードは日本国内でのみ利用可能
 

 

【UberEats初回利用1000円オフクーポン】
当サイト限定プロモーションコード:ins6je2v

 
対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き
 
»当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

Uber Eats のお料理配達

Uber Eats のお料理配達

おすすめ新着記事

おすすめタグ