モーダルのボタンについて、気をつけるべきことをまとめていきます。
名称について
まずは、そもそもこのコンポーネントはどういう名前？
他社の有名なガイドラインを見てみると、以下の通りで
モーダル、ダイアログ（material design）、alerts（HIG）さまざまありますが、それぞれのデザインシステムやガイドラインに従って、適切な用語を選択することが重要です。これにより、ユーザーにとっても一貫性のある体験を提供することができます。今回この記事内では一旦「モーダル」と呼びます。
気をつけるべきことをまとめ
- 実行（YES）ボタンは右、キャンセル（NO）ボタンは左
- 実行側の動詞はモーダルの本文の動詞に揃える
- 破壊的なアクションは文字色をアラート色にする
簡単にまとめると、この三つですね。次はそれぞれ詳しく説明します。
実行（YES）ボタンは右、キャンセル（NO）ボタンは左
実行（「YES」）ボタンは右側に、キャンセル（「NO」）ボタンは左側に配置するのが一般的です。かつてのパソコン時代には、「YES」が左、「NO」が右に配置されていることに慣れていたかもしれませんが、スマートフォンの登場と普及に伴い、配置が逆転しました。そのため、最初は不慣れなユーザーもいたかもしれません。しかし、現在では多くの人がこの配置に慣れてきているでしょう。
この配置は、AppleのHuman Interface Guidelines（HIG）やMaterial Designのガイドラインでも推奨されています。
なぜこの配置が選ばれたのでしょうか？以下は私の考察です。
- 右利きのユーザーにとって親指で押しやすいから
- 画面遷移が右方向に行われるため、「右 = 次」の印象があるから
また、必ずしも「YES」と「NO」のセットではない場合もありますが、重要なアクションやユーザーに押してほしいボタンを右側に配置するのが効果的です。
また、右側のボタンを視覚的に強調するデザインにすることで、ユーザーの注目を集めやすくなります。
実行側の動詞はモーダルの本文の動詞に揃える
モーダルで使用するボタンの文言は、モーダル本文で使用されている動詞と一致させることが重要です。これにより、ユーザーにとってメッセージが明確になり、アクションが理解しやすくなります。
例えば、モーダルの本文が「設定を保存しますか？」という本文には「保存」と記載することで、一貫性が保たれます。
このように、本文とボタンの動詞を揃えることで、ユーザーはどのようなアクションを取るべきかを直感的に理解でき、誤操作を防ぐことができます。また、この場合は「保存する」より「保存」のような体言止めにすると、よりスッキリな情報を伝えるので良いです。
動詞の統一は、視覚的なデザインだけでなく、ユーザーの認識においても一貫性を持たせるために必要な要素です。ユーザーが操作に迷うことなく、期待通りの行動を取れるよう、モーダル全体での文言の統一を心がけましょう。
破壊的なアクションは文字色をアラート色にする
モーダルで破壊的なアクション（例：削除、退会など）を行うボタンは、文字色をアラート色に設定することが重要です。アラート色（通常は赤系の色）は、ユーザーにそのアクションが重要であることや、注意を要するものであることを視覚的に伝える役割を果たします。
例えば、削除ボタンを標準の色ではなく赤色にすることで、ユーザーに「この操作は取り消せない」という警告の意味を伝えることができます。また、アラート色はユーザーの注意を引きやすく、意図しない操作を防ぐためにも効果的です。
さらに、アラート色を使うことで、他のボタン（「キャンセル」や「戻る」など）と区別しやすくなり、ユーザーにとってわかりやすいインターフェースを提供できます。こうした配慮によって、ユーザーは自信を持って操作できるようになり、誤った選択を避けることができます。
破壊的なアクションには必ずアラート色を使用し、ユーザーが正しい判断を下せるようなデザインを心がけましょう。
おまけ：ボタンが一つの場合
ボタンが一つの場合は、ユーザーにとってそのアクションが唯一の選択肢であることを明確に伝える必要があります。例えば、「OK」や「閉じる」など、シンプルで明確な文言を使用します。
このように、モーダル内のボタン数に応じて配置とデザインを調整することで、ユーザーにとって分かりやすく、使いやすいインターフェースを提供することができます。
