ユーザーに直感的で分かりやすいボタンとは、UXの観点からくわしく解説

Post on:2019年3月29日

ユーザーが分かりやすいボタンとは

タップするかしないか、ユーザーがアクションボタンを見たときに気になる問題です。

ボタンの数が多いほど、決定にかかる時間は長くなります。ユーザーは各ボタンを調べて、どのボタンが自分の目標を達成するために必要なのかを判断します。ボタンに不確実性や疑いをもつと、ボタンに対して何もしないという行動を取る可能性があります。

これを防ぐには、各アクションの優先順位を直感的にすることです。ユーザーはどのボタンが自分のタスクにとって重要であるかが分かると、すぐに行動を起こすことができます。アクションボタンの直感性を大きく変えるために使用できるUXのテクニックがいくつかあります。

左: UXのテクニックなし、右: UXのテクニックを使用したボタン

1. スキャンパターンに従ってボタンを配置する

アプリでよくある間違いの1つは、ユーザーの自然なスキャンパターンとは異なる順序でボタンを配置することです。最も優先度の高いボタンを最初に配置するのは、ユーザーに最初に気付かせるようにするためです。しかし、視覚的なウェイトをつけると、ユーザーは順番に関係なくボタンに気付きます。

ボタンの順序は見やすさを向上させるのではなく、効率を向上させるためのものです。優先度の高いボタンを最初に配置すると、スキャンの方向が上下から下上に反転してしまい、目線の自然な流れを壊します。

左: スキャンパターンを壊す、右: スキャンパータンに沿ったボタン

ユーザーにボタンの再スキャンを強制するのではなく、ユーザーが一方向のスキャンで優先度の高いアクションを実行できるようにします。こうすることで、ユーザーは決定を下す前にボタンに必要な情報すべてを順番にスキャンできます。

優先度の高いアクションを一番下に配置することで、視覚的な抵抗が最も少ないパスになり、すばやく簡単にタップできます。また、一番下の位置は最も指が届きやすく、効率がさらに向上します。

2. 形を使って、ボタンをテキストから区別する

もう1つアプリでよくある間違いは、ボタンを意味するためにテキストを使用することです。デザイナーは他のアクションより優先度が低いことを示すために、テキストボタンを使用します。しかし、これはアクションボタンには不適切な選択です。テキストにボタンのような外観がないからです。テキストボタンを使用することで、ユーザーはアクションを見落とし、主要なアクションのみを見てしまいます。

左: 優先度が低いのをテキストボタンに、右: 低くてもボタンに

テキストボタンはテキストがボタンなのか情報なのかをユーザーに疑問を投げかけることによっても混乱を引き起こします。この不確実性はそれらのボタンをスキップするように仕向けることができます。

テキストボタンは単に紛らわしいだけでなく、タップしにくい小さいターゲットでもあります。テキストのラベルをボタンの形の内側に配置すると、アクションの呼び出しが分かりやすくなり、タップしやすくなります。

ボタンの形状は、テキストボタンよりも優先度の低いアクションを抑制するための優れた方法です。ユーザーが好みの方法で目標を達成するために、すべてのオプションを認識しやすくします。

3. プログレッシブアクションにカラーを追加する

優先度の高いアクションは、確認することが最も容易なものです。このアクションはユーザーの目標に直接つながります。もし残りのアクションに確信がない場合は、どのアクションがユーザーを目標に向かって進めているのか、どのアクションが目標から遠ざけているのかを考えてください。

目標に向かってプログレッシブ（前進）・リプログレッシブ（後退）するアクション

上記の例では「Checkout（お支払い）」が優先されます、これはユーザーが自分の目標にたどり着くためのアクションです。しかし、「View Cart（カートを見る）」と「Keep Shopping（買い物を続ける）」のどちらのアクションが中程度の優先度を持つのか、明確ではありません。

「View Cart」アクションは、ユーザーは自分のカートに追加した商品を見ることができ、それがCheckoutにつながります。「Keep Shopping」アクションは、Checkoutから離れた商品ページにユーザーを戻します。

それぞれのアクションを確認することで、「View Cart」は中程度の優先度、「Keep Shopping」は低い優先度であることが明らかになりました。

プログレッシブアクションはリグレッシブアクションよりも常に優先度が高くなります。

テキストに左: ブラックのボタン、右: ブルーのボタン

ボタンのカラーはテキストのカラーから際立っていてユーザーの注意を引くため、プログレッシブアクションを示すのに効果的な方法です。ボタンのカラーがテキストと同じカラーの場合、シグナルはそれほど強くはありません。プログレッシブアクションに異なるカラーを追加することは、ユーザーが取るべきアクションを意味します。

左: カラーが競合、右: 優先度の高いボタンが分かるカラーの使い方

各プログレッシブアクションに同じカラーを使用した場合、ユーザーはどちらの優先度が高いのか判断できません。また、それぞれに異なるカラーを使用しても、ユーザーが混乱するだけで、異なるカラーの意味は分かりません。それだけではなく、それぞれのボタンに同じ視覚的なウェイトを感じるでしょう。

デザインのこつは同じ色相を使用することですが、高い優先度のアクションより明るく見えるように中優先度のアクションの彩度と明るさを変えます。これでボタンのウェイトは競合せず、どちらが目立つのか明確となります。

さらにコントラストを強調するには、反転させます。プライマリボタンには暗い背景に明るいテキスト、セカンダリボタンには明るい背景に暗いテキストを使用します。これにより、優先度の高いアクションに、より明るいテキストラベルと最高のコントラストが与えられます。

4. ラベルにあるテキストの太さを変える

ここまでのテクニックを適用することで優先度を区別するのに十分ですが、できることはもっとあります。より直感なボタンにするほど、ユーザーは考える必要がなくなります。

左: すべてが同じ太さのテキスト、右: 優先度によって太さを変えたテキスト

各ラベルにあるテキストに同じ太字を使用すると、それらのテキストにも同じ量の強調が与えられます。そのため、優先度に基づいて各ラベルのテキストを別々に強調することをお勧めします。優先度の高いボタンは最も太く、優先度の低いボタンは最も太くならないように、テキストの太さを変更します。こうすることで、ユーザーがテキストラベルを読む時に、テキストのウェイトが優先度を示します。

上記の例では、「Checkout」ラベルが他のラベルよりも太く明るくなっています。「View Cart」ラベルはSemiboldで、「Keep Shopping」ラベルはMediumです。その結果、テキストラベルは各アクションの視覚的なウェイトを反映します。「View Cart」ラベルの「3 items」を示すテキストは、実行された操作を表すものではない補足情報であるため、太字になっていません。