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

サイト構築 -制作

Post on:2019年10月3日

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

左:ボタンを右揃え（非推奨）、右:ボタンを左揃え（良）

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で説明しているように、変化に影響を与える場所、つまりクローン化される入力欄の近くにあります。