ユーザーがどれだけ速くタスクを完了できるかは、ボタンの置き方次第で大きく変わります。タスクが速く完了すれば、より満足できる体験が生まれます。もしそれを望むのなら、ユーザーがそこにあってほしいと思う場所にボタンを置くべきです。
これは、あなたが使うであろうすべてのボタンの配置についての包括的な分析です。ユーザーが時間を無駄にすることが無いように、どの置き方があなたのアプリに最適なのかを学びましょう。
グーテンベルグの法則
ユーザーは行動を起こす前に、画面をざっと見なければなりません。画面上にあるコンテンツが、どのアクションを行うべきかについて決断するための情報を与えるのです。画面を見終わるとすぐに、CTA（Call to Action＝行動喚起）が現れなければなりません。画面を見終わったとき、ユーザーはどこを見ているでしょうか？
ユーザーの視線は、左上の隅から右下の隅までジグザグに移動することがわかります。著名な新聞デザイナーであるEdmund Arnold氏は、この自然な視線のパターンをグーテンベルグの法則と呼びました。
この原則は、人の目が方向の軸に沿ってどのように左上の隅から右下の隅まで移動するかを説明しています。これは、有名なリーディンググラビティと呼ばれる視線の経路を形成します。斜めに並んだデザインの要素がもっとも注意を引くのです。そこから外れた要素はそれほど注意を引きません。
最適なボタン配置はグーテンベルグの法則に従うものです。ボタンは、ユーザーの行動の準備が整うタイミングである、画面をざっと見終わる場所に置かなければなりません。画面を見る前にユーザーが行動する準備が終わることもないとは言えませんが、これはユーザーがすでに画面上のコンテンツをよく知っている場合のみです。
ボタンを上部に置くか、下部に置くか
最初に決めるべきことは、CTAボタンを画面の上部に置くか下部に置くかということです。どちらの配置がグーテンベルグの法則に適っているでしょうか。
ほとんどのユーザーは、コンテンツをざっと見ることから始めますが、これはそのコンテンツがユーザーのタスクに関係するものだからであり、コンテンツが画面を占めているからです。彼らの目は画面の上半分から下半分に向かって移動します。コンテンツの最後まで見ると、彼らはCTAを探します。
ユーザーがCTAボタンを見つけるまでは、それを探している間彼らの目は画面下部に留まります。その時こそ彼らの視線が画面上部によじ登って、右上の隅にあるボタンを見つけるのです。
画面上部にCTAボタンを置くと、コンテンツを見終わった後にボタンがあるはずだと思っているユーザーを混乱させます。上部にボタンを置くことは彼らの自然な閲覧の流れに反しており、目的達成への道から彼らを遠ざけてしまいます。
それだけではなく、画面上部のボタンはスペースを画面のタイトルと分け合わなくてはならないので、下部のボタンよりも小さくなります。不自然な配置と相まって、ボタンの小ささはボタンを見つけにくくし、ユーザーがタップするのが遅くなります。
CTAボタンを下部に置けば、ユーザーは素早くこれを見つけられます。彼らはコンテンツを見終わった後に、たいして目を動かすことなくボタンを見つけるでしょう。下部のボタンはグーテンベルグの法則に適っているだけでなく、大きくて見つけやすいのです。
アイテムの選択
上部のボタンが合理的なのは、ユーザーが画面上でアイテムを選択する場合です。たとえば、ユーザーがテーブルのある行を選択すると、アプリのバーが変わってそのアイテムに関係するアクションを表示します。画面のタイトルが消え、選択したアイテムの数が表示されます。
上部のボタンは、画像のコンテンツを選択する場合にも有効です。このように上部のボタンを使えば、ユーザーはアプリのバーの状態が変わったことに気づくと素早く行動に移れます。ボタンとステータス名の表示が近くにあるということは、ユーザーはあちこち視線を動かさなくてもよいということです。
横並びのボタン
画面の下部にボタンを置くためには、いくつかのやり方があります。その１つが、ボタンを隣同士に並べることです。この配置は、２つの動作の間にある関係性を強調するためには理想的です。これを見たユーザーは２つのボタンをセットとして捉え、双方に同じだけの注意を払うでしょう。
この例におけるアプリは、ユーザーがシューズを買う前にそのデザインを変更できることを彼らに知らせるために、横並びのボタンを使っています。隣同士に並んでいることで、２つの行動の関係性が強調されています。
シューズを買うこともデザインを変更することも、ユーザーの満足度にとっては同じくらい重要なので、これらは兄弟のように組み合わされているのです。こうしていれば、ユーザーは急いでシューズを買おうとしているときにも、「デザインを変更する」ボタンを見逃すことがないでしょう。
最初の行動を右に配置するか、左に配置するか
ボタンを横並びにする場合、最初の行動を右に置くか左に置くか選ぶことになります。しかし、どちらに置いた方がユーザーは素早く行動できるのでしょうか？
もし最初のアクションが左にあれば、これはリーディンググラビティに逆行します。ユーザーの視線は右下に向かって進むのが自然ですが、ボタンが目に入るのでそのぶん視線が左下に取られてしまいます。左下に視線を引きつけられたのち、右側に移って結局はメインのボタンを押すために左に戻ります。結果として、ユーザーの視線は行きつ戻りつして、タスクにかかる時間が長くなってしまいます。
最初に押すべきボタンが右側にあれば、それはつまりリーディンググラビティの到達点にあるということなので、ユーザーのタスクは早く完了します。ユーザーは自然な閲覧の流れを変えたり、最初の行動のボタンに何度も気を取られる必要がありません。
縦並びのボタン
もう１つの置き方は、ボタンを縦に積み上げるというものです。これは、ユーザーにそれぞれの行動に別々に注目して欲しい場合に理想的です。これを使えば、より注意深く考えてもらうために長い時間ユーザーを引きつけることになります。
縦並びのボタンは画面の横幅いっぱいまで広げることができるので、横並びのボタンより目立ちます。ボタンのサイズが大きいことでタップしやすくなるだけでなく、最初に取るべき行動がもっとも見やすくなります。
上の例では、最初に取るべき行動は「カートに追加する」であり、これは「ギフトメッセージを追加する」ボタンよりも重要です。縦並びのボタンにすることでこれが強調され、２つ目の行動はこれと競合しません。
最初の行動を上部に置くか下部に置くか
最初の行動は上部に置くべきでしょうか、それとも下部に置くべきでしょうか。グーテンベルグの法則は、リーディンググラビティが下向きの方向に働くことを示しています。下部にボタンがあれば、ユーザーは下に向かって見ていくだけで見つけることができるので、素早く見つけることができます。もしこれが上部にあると、ユーザーは下に向かって見た後にこれをタップするために上に向かわなければなりません。
ハイブリッドのボタン
最後に紹介するボタンの置き方は、縦並びと横並びのハイブリッドです。もし３つ以上のボタンがあるなら、このアプローチを使いましょう。
３つボタンがあると処理すべき情報が多くなるので、ユーザーにとってはより時間がかかります。しかしこの置き方をすれば、見え方に差をつけることでユーザーの決断にかかる時間を短縮できます。毎回ラベルを見て判断するのではなく、ユーザーはボタンのサイズと位置を手掛かりにそれぞれの行動を意識することができます。
上の例では、最初に取るべき行動は大きな緑色のボタンです。他には同じ色とサイズのボタンが無いので、簡単に特定できます。そしてユーザーは、１つの行動を一番左側のボタンに、もう１つの行動を一番右側にあるボタンに結びつけて考えることができます。
ユーザーがボタンをタップすればするほど、ボタンのサイズと位置によってそれぞれのボタンが何なのかわかるようになります。ほどなくユーザーは、考えることなく行動できるような習慣を身につけるでしょう。
画面下部にある最初の行動のボタン
リーディンググラビティに従えば、最初の行動は画面の最下部に、次の行動はその上に来ることになります。より優先度の高いボタンはもっとも注意を引く必要があるので、ユーザーの視線の流れの最後である画面下部にあるべきです。
最初に取るべき行動と競合しないように、２番目に取るべき行動は独自の色で表示すべきではありません。そうではなく、中立的な色にして、輪郭を囲うか浅く陰をつけましょう。
そして、それを縦並びのボタンと同じ列に並べる必要はありません。縦のラインをずらせば、それらのボタンが左、または右にあることを強調できます。
固定のボタン
CTAを常にユーザーが見える状態にするテクニックが、固定のボタンを使うことです。ボタンが画面の下部に固定されるので、ユーザーはどこにスクロールしても行動を起こすことができます。
これら固定のボタンはネイティブアプリには好きなように使って構いませんが、ブラウザベースのアプリでは避けるべきです。Webアプリ上の固定ボタンの場合、ユーザーがこれをターゲットしようとした時にブラウザ下部のバーがポップアップしてしまい、タップに問題が生じます。
この問題の回避策はありますが、複雑なものです。もっとも自然な解決策は、ボタンとブラウザのバーの間に追加のパディングを入れることです。
流れに沿うようにしよう
CTAボタンは、ユーザーが作業を完了するための最後のステップです。ボタンの置き場所次第で、ユーザーのタスクの完了は早くもなり、遅くもなります。グーテンベルグの法則に従った配置をし、ボタンへ容易にたどり着けるようにしましょう。そうすれば、あなたのCTAボタンは流れに沿った最適な配置に収まります。
