OKとキャンセルの左右等ダイアログボックス内のボタンを適切に配置するためのポイントを解説！

8,875 views

読了時間 : 約2分55秒

「OK」ボタンをダイアログの左右どちらに置くかという問題は、設計者の間でしばしば議論されます。今日は、適切なボタンの配置について考えてみましょう。

慣習に無思考で従わない

多くの人が、プラットフォームの慣習に従う傾向がありますが、これは問題の解決につながりません。どのプレースメントがユーザにとってうまく機能するのかを考えるべきです。一貫性のためにプラットフォームの規約に従うだけでは不十分なのです。「一貫性」はデザイナーの間で人気のある言葉です。また、ユーザが直面する設計上の問題について深く考えないために使用する便利な言い訳です。

どのプレースメントが最もよく機能するのかを知るために、デザインがユーザーに与える影響を分析してみましょう。

ユーザーの視線の移動を減らす

プライマリアクションを左側（セカンダリアクションの前）に配置する方が、クリックにかかる時間が短くて済むため、ユーザにとっては便利だと考える設計者もいます。これは理にかなっていますが、ユーザーはどのアクションを取るかを選択する前に、すべてのオプションを調べる傾向にあります。つまり、ほとんどのユーザーは、プライマリアクションボタンの横にあるセカンダリアクションボタンを見ることなく、プライマリアクションボタンをクリックすることはありません。

ダイアログボックスの左側にプライマリアクションが配置され、右側にセカンダリアクションが配置された場合、ユーザは最初にプライマリアクションを見て、次にセカンダリアクションを見ます。その後視線を元のアクションに戻してクリックします。これにより、複数の方向で合計3回視線を移動することになります。

ではその逆の場合と比較してみましょう。ユーザの視線はまず左のセカンダリアクションに向けられ、次に右のプライマリアクションに移り、ボタンをクリックします。これにより、一方向で視線を２回移動させるだけで済み、ユーザのビジュアルフローがより滑らかになります。

ユーザは各ボタンに一度だけ目を通し、最終的にプライマリアクションボタンで止まります。プライマリアクションを左側に配置しておくと、ユーザの視線が届きやすくなりますが、ユーザーの精神的なプロセスや固視に関してスピードを重視するときは、ダイアログボックスの右側にプライマリアクションを配置する方が効果的です

ボタン機能にマッピングをする

ユーザはセカンダリアクションボタンをクリックすると、アプリケーションは何も動作せず、元の画面に戻ると予測します。したがって、「キャンセル」ボタンは「戻る」ボタンのように機能します。逆にプライマリアクションボタンをクリックすると、アプリケーションはボタンが示すアクションを実行し、次の画面に進むと予測します。したがって、「OK」ボタンは「次へ」ボタンのように機能します。セカンダリアクションボタンを左側に、「戻る」「次へ」とマッピングされたプライマリアクションボタンを右側に置くことで、ユーザーが流れを予測しやすくなります。

ユーザを次のページに移動させるボタンは右側に、ユーザーを以前のページに戻すボタンは左側に配置することで、右は進行方向、左は後退方向とわかりやすいため効果的です。