スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説

Post on:2019年8月1日

はじめに

ボタンをどこに配置するかによって、ユーザーがタスクを完了する時間に影響を与えることを知っていますか？

タスクを素早く完了することで、より満足のいくエクスペリエンスをユーザーにもたらします。もしあなたがそれを望むなら、ユーザーがすぐに見つけることできるようにボタンを置かなければなりません。

この記事では、ボタン配置について包括的な分析を行いました。ボタンをどのように配置するのが最適なのか、ユーザーの時間を無駄にしないようにしましょう。

グーテンベルクの原則

ユーザーはアクションを実行する前に、スクリーンをスキャンする必要があります。スクリーンの内容は、どのアクションを実行するかの決定を伝える情報源です。スキャンを終えた後すぐに、アクションを提示するべきです。
スキャンを終えた後、ユーザーの目がどこにあると思いますか？

グーテンベルクの原則

通常は、左上から始めて右下で終わり、その間はジグザグに目を動かしています。著名な新聞デザイナーのEdmund Arnoldは、この自然なスキャンパターンをグーテンベルクの原則と名付けました。

グーテンベルグの原理は、目が右下隅に到達するまで、目の方向軸に沿って左から右に移動する方法を示しています。これは読書重力と呼ばれる走査経路を形成します。対角線上にあるデザイン要素が最も注目を集め、それ以外の要素は少なくなります。

ボタンの最適な配置は、グーテンベルクの原則に従います。ボタンを操作する準備が整ったら、ボタンをスキャンパスの最後に配置すべきです。ユーザーがスキャンする前にボタンに対応する準備ができていることは稀です。スキャンする前に対応できるとしたら、ユーザーが既にスクリーンの内容に精通している場合に限られます。

上部と下部のボタン

最初のボタン配置は、スクリーンの上部と下部のどちらにするかです。どちらのボタン配置がグーテンベルクの原則に従っているでしょうか？

ほとんどのユーザーは、まずコンテンツをスキャンすることから始めます。これは、コンテンツがタスクに関連し、スクリーンを支配しているからです。ユーザーの目はスクリーンの上半分から下に向かって動きます。そして、コンテンツが終了した後、アクションを探します。

ユーザーはボタンを探す間、見つからないと確信するまで、その目は下部に留まります。これは、スクリーンの上部に目を向け、右上で偶然見つけた時です。

上部のボタンと下部のボタン

アクションボタンを上部に配置すると、コンテンツのスキャンが終了した後に表示されることを想定しているため、ユーザーが混乱します。スキャンの自然な流れに反しており、ボタンの上部配置は完了までの経路から遠ざけます。

それだけでなく、上部のボタンはタイトルなどとスペースを共有しなければならないので、下部のボタンよりも小さくなります。サイズが小さく、配置がぎこちないため、上部のボタンが見つけにくくなり、タップが遅くなります。

下部にアクションボタンを配置すると、ユーザーはより早くボタンに到達することができます。余計な目の動きを使わずにコンテンツをスキャンした直後にボタンが表示されるからです。ボタンの下部配置は、グーテンベルクの原則と合致しているだけでなく、より大きくより簡単にアクセスできます。

アイテムの選択

ボタンの上部配置が意味をなすのは、ユーザーがスクリーンのアイテムを選択する時です。例えば、ユーザーがテーブルの行を選択すると、アプリケーションバーが変更され、選択したアイテムに関連するアクションが表示されます。スクリーンタイトルが消え、選択した件数が表示されます。

アイテムの選択

上部ボタンは、イメージコンテンツの選択にも当てはまります。このコンテキストでボタンを上部配置にすると、ユーザーはアプリケーションバーの状態の変化に気付いた後、より迅速にアクションを実行できます。ステータスタイトルにボタンが近接しているため、ユーザーの目が迷うことはありません。

アイテムの選択

水平に並んだボタン

ボタンを下部に配置する方法はいくつかあります。その1つは、左右に並べて配置することです。この配置は2つの異なるアクションの関係を強調する場合に最適です。ユーザーは2つのボタンをセットだと認識し、両方を同等に考慮します。

水平に並んだボタン

上記の例は「購入」ボタンと「デザイン変更」ボタンで、水平のボタンを使って、ユーザーが靴を買う前にデザインを変更できることを確認しています。並べて配置することで、2つのアクションの関係が強化されます。

靴を購入することもデザインを変更することも顧客満足において同じように重要であるため、兄弟のように2つのボタンはペアになっています。このようにボタンを配置することで、ユーザーが急いで購入しようとしている場合でも、「デザイン変更」ボタンを見落とすことはありません。

右と左、どちらが重要なのか

水平並びのボタンは、重要なメインのボタンを左右どちらに配置するかを選択できます。しかし、ユーザーがより迅速にアクションを起こすことを可能にする配置はどちらでしょうか？

重要なメインのボタンは左と右のどちらに配置するか

重要なアクションが左にある場合は、読書重力に反しています。ユーザーの目は右下に移動したいが、ボタンの視覚的な重みによって左下に固定されます。固定後は右下に移動するだけで、左に戻ってメインのボタンをタップします。その結果、ユーザーの視線が前後に移動し、ユーザーのタスク時間が増加してしまいます。

重要なアクションが右にある場合は、ボタンは読書重力が終了する場所にあるため、タスクの完了が速くなります。ユーザーはスキャンの流れを逆にしたり、重要なアクションに何度も固執したりする必要はありません。

垂直に並んだボタン

ボタンを下部に配置するもう1つの方法は、垂直に重ねることです。この配置は各アクションに個別に集中できるようにする場合に最適です。より集中できるように、各ボタンは長くします。

垂直に並んだボタン

垂直並びのボタンは水平並びのボタンよりも目立ちます。なぜなら、垂直並びのボタンは画面の幅にまたがるスペースが広いからです。ボタンのサイズを大きくすると、タップしやすくなるだけでなく、重要なアクションも目立ちます。

上記の例では、重要なアクションは「カートに追加」ボタンで、「ギフトメッセージの追加」ボタンよりも重要です。垂直並びのボタンとして配置すると、ボタンが強調されるため、2次アクションとは競合しません。

上と下、どちらが重要なのか

重要なアクションは上と下のどちらに配置すべきでしょうか？グーテンベルグの原理では、読書重力は下方向に流れるとされています。下のボタンは、下方向にスキャンするだけですばやくタップできます。上のボタンは、ユーザーは下方向にスキャンしてから上方向に戻ってタップする必要があります。

重要なメインのボタンは上と下のどちらに配置するか

水平と垂直のハイブリッド

最後のボタン配置は、水平ボタンと垂直ボタンのハイブリッドです。少なくともボタンが3つある場合は、この配置を使用します。

ボタンが3つになると、処理する情報が多くなるため、ユーザーの決定に時間がかかります。しかし、この配置は視覚的な階層構造によって決定時間を短縮します。ラベルに依存するのではなく、ユーザーはボタンのサイズと配置を手がかりにすることで、各アクションを認識することができます。

水平と垂直のハイブリッド

上記の例では、重要なアクションはグリーンの大きなボタンです。同じサイズやカラーのボタンが他にないので、見つけやすいです。ユーザーは左のボタンとして1つのアクションを認識し、右のボタンとしてもう1つのアクションを認識します。

ユーザーがボタンをタップする頻度が高くなるほど、ボタンのサイズと配置によってどのアクションが実行されるかを知ることができます。ユーザーはすぐに、考えずにアクションできる習慣を身につけるでしょう。

重要なアクションは下部に

読書重力により、1次アクションは下部に、2次アクションはその上にある方がよいでしょう。最も注意が必要なのはプライオリティの高いボタンであり、ユーザーのスキャンの最後に配置すべきです。

重要なアクションは下部に

2次アクションには明確な色を付けないでください。色を付けてしまうと、1次アクションと競合します。その代わりに、アウトラインや中間色のスタイルが適切です。

また、垂直ボタンと同じ高さに揃える必要はありません。垂直エッジでオフセットして位置揃えすると、左右の向きが強調されます。

スティッキーボタン

アクションを常にユーザーに見せるには、スティッキーボタンを使用します。ボタンは下部に固定されたままなので、ユーザーはスクロールするたびにアクションを実行できます。

スティッキーボタン

スティッキーボタンはネイティブアプリには適していますが、ブラウザベースのWebアプリには使用しないでください。Webアプリのスティッキーボタンは、ユーザーがボタンをクリックするとブラウザのバーがポップアップするため、タップの問題が発生します。

この問題には回避策がありますが、複雑です。最も簡単な解決策は、ボタンとブラウザのバーの間に十分なスペースを追加することです。

まとめ

アクションボタンは、ユーザーが成功するための最後のステップです。ボタンをどこに配置するかによって、ユーザーのタスクは速くなったり遅くなったりします。ボタン配置をグーテンベルグの原理と一致させることで、簡単にたどり着くことができるようになります。この考え方を実践することで、フローに合わせた最適な配置になり、アクションボタンが配置できます。