フォームのボタン配置はどこが最適か、左揃え・横並び・上下など、フォームのタイプごとに詳しく解説

フォームのボタン配置は、多くの場合無視されるか、見映えに基づいて優先順位がつけられます。しかし、ボタン配置は非常に重要で、フォームを使いづらくする要因の一つであるため、正しく配置することが不可欠です。

フォームのボタン配置は、対象のボタンとフォームのタイプに依存されます。
さまざまなタイプのフォームを総合的に調査・分析し、それぞれのタイプでどこにボタンを配置するかについて解説します。

サイトのキャプチャ

Where to put buttons on forms
by Adam Silver

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

プライマリボタンは入力欄の左端に揃える

左: ボタンは右揃え(非推奨)、右: ボタンは左揃え(良)

左:ボタンを右揃え(非推奨)、右:ボタンを左揃え(良)

Luke Wroblewskiは視線追跡調査に関する記事で、プライマリボタンは入力の左端に合わせる必要があると述べています。

完了までの明確な道筋を示す。入力とアクションを縦軸に沿って配置することで、フォームを完成させる方法を明確に伝えることができます。

また、この配置を使用すると、スクリーンを拡大しても水平スクロールする必要がなくなります。

左: 拡大するとボタンが表示されない、右: 拡大してもボタンは左端に表示

左: 拡大するとボタンが表示されない、右: 拡大してもボタンは左端に表示

「戻る」ボタンはフォームの上に配置

左: 「戻る」ボタンはプライマリボタンの隣(非推奨)、右: フォームの上に配置(良)

左:「戻る」ボタンをプライマリボタンの隣(非推奨)
右:「戻る」ボタンをフォームの上に配置(良)

一部のフォームやアンケートは複数のページにわたって表示される場合があり、回答を確認または変更したい時があります。残念なことに、一部のユーザーはブラウザの「戻る」ボタンを信頼していません。フォームのデザインが不適切で、クリックして戻るとデータが失われるためです。解決策は、フォーム固有の戻るボタンを提供することです。

Mick Couper、Reg Baker、Joanne Mechlingが実施した調査によると、「戻る」ボタンをプライマリボタンの右に配置すると混乱を招き、その代わりに左か下のどちらかに配置する必要があります。

下が好ましい理由は、プライマリボタンの位置が一貫しており、キーボードのユーザーが最後の入力欄から直接そのボタンにタブ移動できるようにするためです。しかし、彼らの調査には、ページの上部にある「戻る」ボタンのオプションが含まれていませんでした。

Government Digital ServiceのデザイナーであるJoe Lanmanは、下記のように「戻る」ボタンを上部に配置しました。現在では、すべての政府サイトで標準的なアプローチになっています。

サイトのキャプチャ

the Register To Vote

「戻る」ボタンを上に配置する理由を見てましょう。

  • ほとんどのブラウザにある「戻る」ボタンが配置されている場所と同様に左上に配置。
  • ユーザーが間違ってページに到達した直後、またはユーザーが入力した内容を確認したい場合に必要になる可能性が最も高い場所。
  • 戻るボタンはフォームに記入した後はおそらく必要ありません。ユーザーがフォームに記入してクリックして戻ると、そのページの入力内容が失われます。

このアプローチでは、「戻る」ボタンとプライマリボタンは明確に区別され、ユーザーの処理にかかる時間が短縮されます。また、必要に応じてボタンを追加できるようになっており、これは後で解説します。

分岐するアクションはフォームの上に配置

左:フォーム内に「パスワードを忘れた」リンクを配置(非推奨)、右:フォーム外に配置(良)

左:フォーム内に「パスワードを忘れた」リンク(非推奨)
右:フォーム外に配置(良)

一部のフォームにはデータを送信せず、フォーム自体と接続的にしか関連しないアクションがあります。例えば、ログインフォームの「パスワードを忘れた」リンクです。このリンクをクリックすると、ユーザーはパスワードをリセットできますが、ログイン自体のプロセスの一部ではありません。

多くの場合、パスワードの入力欄の横に「パスワードを忘れた」リンクが配置されていますが、これは以下の理由で問題があります。

  • Tabキーで次のフィールド/ボタンにフォーカスが移動することを期待しているユーザーを裏切る。
  • リンクを見つけるためにスクロールする必要があるかもしれません。
  • リンクをクリックする前に必要のない入力(メールアドレス)に時間を浪費する可能性があります。

フォームの上にリンクを配置すると、これらの問題がすべて解決されます。

機能に応じて追加のボタンを配置

複数のボタンがあるフォームは問題があります。

Laws of UXの記事によると、選択の数と複雑さが増すと、意思決定にかかる時間が長くなります。そのため、余分なボタンを使用すると、選択肢が増え、時間がかかります。また、キーボードのユーザーはフォームを送信するためにEnterキーを押した時にどのアクションが実行されるかを確認できない問題もあります。

ただし、複数のボタンが必要になる場合もあります。
ボタンの機能について考えると、複数のボタンでも配置する場所を簡単に決めることができます。

異なる処理が必要な3つの例を見てみましょう。

1.「キャンセル」ボタンをプライマリボタンの下に配置

左:「キャンセル」ボタンをプライマリボタンの並びに配置(非推奨)、右:下に配置(良)

左:「キャンセル」ボタンをプライマリボタンの並びに配置(非推奨)
右:「キャンセル」ボタンをプライマリボタンの下に配置(良)

Luke Wroblewskiの調査によると、「キャンセル」ボタンはプライマリボタンの右側に配置し、リンクとしてあまり目立たないようにする必要があります。

ただし、「キャンセル」ボタンをプライマリボタンの下に配置すると、いくつかの利点があります。

  • 第1に、フォームの専門家であるCaroline Jarrettのルールに従っているため、破壊的なボタン(「キャンセル」ボタン)が見つけにくくなっています。
  • 第2に、「戻る」ボタンとリンクで説明したように、「キャンセル」ボタンはフォーム全体に直接関連していないため、プライマリボタンの下に配置にするのが理にかなっています。
  • 最後に、他の直接関連するボタンを同じ行に配置するためのスペースが設けられます。数多くのボタンを一行に並べて配置してしまうと、ユーザーはどれが最も重要なのか判断するのが困難です。

2.「追加」ボタンをプライマリボタンのすぐ上に配置

左: 「追加」ボタンをプライマリボタンの並びに配置(非推奨)、右: すぐ上に配置(良)

左:「追加」ボタンをプライマリボタンの並びに配置(非推奨)
右:「追加」ボタンをプライマリボタンのすぐ上に配置(良)

ユーザーが情報を追加する必要がある場合があります。 例えば、予約時に家族の名前を追加する場合などです。

「追加」ボタンをプライマリボタンのすぐ上に配置すると、いくつかの利点があります。

  • Caroline Jarrettのルールに従い、ボタンを適切な順序で配置するので、ユーザーはプライマリボタンを通り過ぎてから、戻って選択する必要はありません。
  • 前に説明したように、プライマリボタンは常に左側に配置されたままです。
  • Erik KennedyがThe 3 Laws of Lovalityで説明しているように、変化に影響を与える場所、つまりクローン化される入力欄の近くにあります。

3.「保存して終了」ボタンをプライマリボタンの横に配置

左: 「保存して終了」ボタンをプライマリボタンの上に配置(非推奨)、右:並びに配置(良)

左:「保存して終了」ボタンをプライマリボタンの上に配置(非推奨)
右:「保存して終了」ボタンをプライマリボタンの並びに配置(良)

場合によっては、長いフォームで保存する必要があります。そんな場合には、「保存して終了」ボタンをプライマリボタンの上に配置することは、ボタンが重要でない場合に、より重要であることを意味します。

また、下に配置すると、積み重なったボタンは扱いにくく、「キャンセル」ボタン用のスペースが使用される可能性があります。

そのため、「保存して終了」ボタンはアクションがフォームに直接関連しているため、プライマリボタンの並びに配置することは理にかなっています。

一部の単一フィールドのフォームでは、入力欄の横にボタンを配置

左:「検索」ボタンをボックスの下に配置(非推奨)、右:並びに配置(良)

左:「検索」ボタンをボックスの下に配置(非推奨)
右:「検索」ボタンをボックスの並びに配置(良)

検索ボックスのような一部の単一フィールドのフォームでは、アクションがフォームに直接関連しているため、プライマリボタンを隣に配置できます。入力欄の下にボタンを配置しても特に問題はありませんが、横に並べて配置するとスペースが節約され、見た目もすっきりします。

ただし、入力欄が1つしかない標準のフォームではこれを行わないでください。一貫性がなく、型破りです。

マルチセレクトはフォームの上に配置

左:マルチセレクトをリストの下に配置(非推奨)、右:上に配置(良)

左:マルチセレクトをリストの下に配置(非推奨)
右:マルチセレクトをリストの上に配置(良)

マルチセレクトは、複数のアイテムを一度に選択して操作できます。例えば、Gmailでは複数のメールを選択して一度にアーカイブできます。
この特別なボタンは、フォームの上に配置します。

これはErik Kennedyの法則でうまくいく別の例で、コントロールがエリア全体の変化に影響する場合は、そのエリアの上に配置します。

エリアの上にボタンを配置すると、ボタンは見つけやすくなり、そのようなインターフェイスでよく必要とされるページネーションのコントロールのために下部にスペースも残せます。

まとめ

この記事では、さまざまなタイプのフォームでボタンを配置する場所について説明しました。標準的なフォームにボタンが1つであっても、ボタンが複数でも、マルチセレクトでもボタンの配置は非常に重要です。

ボタン配置のチェックリスト

  • プライマリボタンは、入力欄の左端に揃える。
  • 「戻る」ボタンは、フォームの上に配置。
  • 分岐するアクションは、フォームの上に配置。
  • 機能に応じて追加のボタンを配置。
  • 一部の単一フィールドのフォームでは、入力欄の横にボタンを配置。
  • マルチセレクトはフォームの上に配置。

これを書くのを手伝ってくれたCaroline Jarrettに感謝します。

sponsors

top of page

©2019 coliss