本日は、フォームのアクションボタン（次に進む／送信など）をユーザーが迷いなく押下するために重要なメソッドのひとつとして、「ボタンの配置」にフォーカスをあてて考えていきたいと思います。
複数ボタンがあるシーンは多い
フォームにおいては「戻る」「キャンセル」のように、ひとつのページに複数のボタンが並んでいるという光景は非常に多く見られます。
並列に並べられた複数のフォームのボタン例
並列に並べられた複数のフォームのボタン例その２
このように配置されたボタンは、多くのユーザーにとって押し間違えてしまうリスクが高いでしょう。
もちろん文言を注意深く凝視すれば問題ありませんが、入力～送信の流れを一旦切ってしまうことになり、フォーム完了率を高める観点からはあまり好ましくありません。
できれば入力からのスムーズに流れに乗って送信してもらいたいものです。
また「戻る」ボタンであればまだしも、当然「リセット」や「キャンセル」を誤って押下した場合にそのまま離脱してしまう可能性は非常に高くなると思います。
（「リセット」や「キャンセル」はそもそもフォームに用意しないことが一番ですが。）
ということで、ユーザーが直感的に次に進むボタンを認識することは、EFOにおいては非常に重要となってきます。
デザインの重み付けや文言の工夫も大きな効果を持つ
まずは前提として、今回取り上げる「ボタンの配置」と同様に下記の２点についても、
ユーザーがアクションボタンをスムーズに押下するために大きな影響を及ぼすといいう旨はお伝えしておきたいと思います。
デザインの重み付け
ボタン同士をまったく同じデザインではなく、大きさや色、形などで強弱を付けることが大きな効果を産みます。
大きさ、デザインに大きく強弱をつけている例
ボタンのデザイン上の強弱のつけかたについては、以前の記事でも話題にしました。
【EFOテクニック】主要ボタンとサブボタンは並列にせず、見た目の強弱をつけるべき
https://f-tra.jp/blog/column/4855
文言の工夫
文言の工夫もボタンの押下には大きな意味を持ちます。
具体的な文言
例えば「次へ」のような抽象的な文言よりも、具体的なアクション内容を記載したボタンのほうが迷いがなくなります。
ずばり、アクションボタンは右側に置くべき！
では、本題の配置についてはどうでしょうか。
ずばり、ボタンが複数ある場合の配置は、重要なボタンを右側に配置するべきです。
これには、ウェブサイトを見る人の視線の動きのクセに理由があります。
視線の動きに注目
下記は「グーテンベルクダイアグラム」という図で、均等に配置された同質の情報を見る際の一般的な視線の流れを表したパターンです。
グーテンベルクライアグラム
グーテンベルグダイアグラムは、表示領域を下記4つに分ける考え方を持っています。
- 左上の「最初の視覚領域」
- 右下の「終着領域」
- 右上の「強い休閑領域」
- 左下の「弱い休閑領域」
視線の流れは矢印のように、(1)左上から始まり、(3)右下に移動する傾向があります。
このグーテンベルクダイアグラムが示す左上から右下に自然と流れる視線の流れは、読書の習慣によって擦り込まれたもののようで、比喩的に「読書重力（ReadingGravity）」とも呼ぶようです。
（右から左方向に向かって読む言語の国では、おそらくこの法則は左右反転するのだと思います。）
フォームにおいても、グーテンベルクダイアグラムでいうところの (2)右下「終着領域」が、ユーザーがフォームを見た時に視線が自然にが終わる領域となるでしょう。
ということで、この左下の領域にアクションボタンを配置すると、ユーザーは自然に入力後に取るべきアクションをスムーズに行うことができると考えられます。
ウェブサイトの定番ユーザーインターフェースも左⇒右
さらに視線のクセだけでなく、多くのウェブサイトのユーザーインターフェースが、左⇒右の流れで設計されていることも、ユーザーの慣れや経験を醸成しています。
例えば下記に挙げるような定番のページナビゲーションやUIにおいては、
「次に進む＝右側」「前に戻る＝左」というレイアウトで設計されていることがほとんどです。
ページネーション
「日経ビジネスオンライン」の記事のページネーション例。
ページネーションとは、複数ページに分かれている長い文章などのコンテンツに、各ページへのリンクを並べてアクセスしやすくするためのナビゲーションインターフェースです。
上記に例を載せましたがみなさん一度はご覧になったことがあると思います。
ページネーションでは当たりまえのように、次に進むリンク＝右側に配置されていると思います。
このブログの次記事へのリンクも法則通りです
パンくず
現在のページがサイト上のどこに位置しているか、階層構造をひと目でわかるように作られたナビゲーションはパンくずリストと呼ばれます。
パンくずリスト
こちらも、多くのウェブサイトで見かける形かと思いますが、右に行くほど階層が深くなります。
文字を左から読むことを考えると当たり前のように感じなくもありませんが、ここでもページ遷移の流れは左から右方向に表されています。
フォームも同じ
普段からこのようなUIに慣れ親しんでいるユーザーにとっては、
フォームにおいても、右側に次の流れに進むリンク＝アクションボタンが配置されていることが、ユーザーにとっては自然なのではないでしょうか。
フォームの上部に置かれることの多いフローも、左から右方向に描かれていますね。
以上の理由から、フォームでボタンが２つ以上ある場合、送信などの次に進むための重要なボタンは右側に配置すると良いと考えられます。
最後に
いかがだったでしょうか。本日はフォームのアクションボタンを右側に置くべき理由についてお伝えしました。
業務上、さまざまなフォームを見る機会が多いですが、アクションボタンを右ではなく左においているフォームは意外と多く存在します。
あなたのフォームはどうでしょうか？ぜひ、チェックしてみてください。
