この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
今回はキャンセルボタンについて対話しました。
これまでの共有会
- デザイナーが集まって命名ルールを話し合ってみた
- デザイナーが集まってインプットUIを話し合ってみた
- デザイナーが集まってモーダルUIを話し合ってみた
- デザイナーが集まってログイン画面について話し合ってみた
- デザイナーが集まってボタンについて話し合ってみた
情報共有して認識を合わせることが目的のため、「クラスメソッドではこうしてます！」みたいなものではない点はご了承ください。
キャンセルボタンの役割とは？
キャンセルボタンは、今の画面から変化させない役割を担います。
例えば、画面上の何かを削除する操作をした場合に「本当に削除しますか？」といった表示が出てきたことがあるかと思います。
ここでキャンセルを押した場合は、削除せず元の画面に戻りますね。
このようにキャンセルボタンは、今行った操作を取り消して元の画面に戻すために存在します。
キャンセルボタンの表示方法
キャンセルボタンの表示については大きく二種類あります。
- ダイアログ
- アクションシート
これらはそれぞれどの場面で使うのか、ご紹介いたします。
ダイアログのキャンセルボタン
先ほど例で出した画面がダイアログです。ダイアログは、操作の途中でユーザーに確認してもらう必要がある場合に一時的に表示される小さい画面です。
これは、ユーザーが意図せず発生したイベントに対して本当にそのイベントを実行しても良いのかユーザーに確認するため。または、支払い画面など本当に重要なアクションを行う場合に表示させることが多いです。
ダイアログを採用する場合は、選択するアクションが2つ以下の場合が主です。
ダイアログは、アクションを選択するまで他の操作が行えないため、あまり多様しすぎるとユーザーが使いづらさを感じるUIになってしまいますので注意が必要です。
アクションシートのキャンセルボタン
アクションシートは、複数の選択肢がある場合にユーザーにどのアクションを実行するのか判断を仰ぐ画面です。画面下部に表示され、複数の選択肢が並びます。主に、破壊的なアクションが指から一番遠い位置である一番上に、キャンセルなどの安全なアクションが下に配置されるのがベーシックな形です。
破壊的アクションはユーザーが意図して操作するべきボタンなので、簡単に押せてしまう動線は相応しくありません。
アプリでのキャンセルボタンは何色にする？
アプリではボタンにプライマリーカラーを使用することが多いです。プライマリーカラーとはそのアプリで主に使われている色を指します。
また、iOSのUIガイドラインであるHuman Interface Guidelinesでは、破壊的アクション（削除や取り消し）を行うボタンには赤色を用いるというルールが存在しています。
そのため基本的にはプライマリーカラーを使い、重要なもの・破壊的なアクションを行うボタンには赤色を用いることが多いでしょう。大切なのは、重要な操作をするボタンが、明らかに他と違うボタンだとユーザーが瞬時に理解できることです。
ユーザーは文字をあまり読まずにボタンを押してしまう可能性があることに留意して、目に留まる色を検討する必要があります。
また、キャンセルボタンをグレーにする時は、濃いグレーを使いましょう。薄いグレーのボタンは、ボタンだと判読できず押せない状態（disabled）に見えてしまいます。
明瞭な文言にすること
ユーザーは、ダイアログやアクションシートで表示された説明文を読んでいない可能性があります。ボタンに書かれている動詞（アクション）しか見ていないかもしれないということです。
つまり「はい」「いいえ」を採用したボタンにすると、そのボタンを押した場合にどうなるのか瞬時に理解することは難しいでしょう。
そのため、ボタンには動詞を使います。それも説明文に対応した簡単な動詞である必要があります。しかし、説明文の文脈として「OK」で問題なければ「OK」を採用することもあります。
以下の3つのポイントに留意しましょう。
- 説明文の文脈は簡潔に、明瞭にする
- キャンセルボタン以外の用途で「キャンセル」を使うと混乱する可能性が高いため避ける
- 「はい」「いいえ」がベストな表現ではない場合、そのボタンが何のボタンであるのか瞬時に理解できる動詞を使うこと
ユーザーがいかに分かりやすくユーザーの行いたいアクションを最短で実行できるのか、ケースに合わせて文言を整理することが重要です。
統一したルールで活用する
アプリでキャンセルボタンを活用する場合、ダイアログ・アクションシートどちらで表現するのがベストなのか検討する必要があります。そのほかにも、そのアプリでどのようにダイアログ・アクションシートを扱っているのか、統一されたルール決めをすることが重要です。
同一アプリ内にダイアログ・アクションシート、どちらも存在する場合にも必ずルールが存在します。
例えば、意図しない行動に対してのアラート・重要なアクションの実行確認をする場合にはダイアログで表現し、複数の選択肢が存在する場合にはアクションシートで表現するケースが多いですね。
他にも、ダイアログは最終確認で使われることも多く、中には「キャンセル」が存在しない場合もあります。例えば「保存が完了しました→OK」といったダイアログを見たことがあるかと思います。
ユーザーの確認を仰ぐものなのか、選択肢を提示するものなのかでそれぞれルールを設けて設計ましょう。ユーザーが使いやすい動線にするために統一されたルールが決められていることが重要です。
導線設計を考える
キャンセルボタンを押した後、どのような動きをするのかといった動線設計はとても重要です。
元の画面に戻るのか？最初の画面に戻るのか？ユーザーにとって使いやすい動線でなければ、利用してもらえません。
今回はメモアプリを例に動線を検討してみます。
メモアプリで、テキスト編集中に戻るボタンを押した場合の動線の例です。戻るボタンを押すとテキストの編集が消えてしまう場合、ダイアログで本当に削除してもいいのか確認しています。削除を選択した場合は、テキストの編集が削除され最初のメモ一覧画面に移動します。キャンセルを押した場合は、メモは削除されずテキストの編集画面に戻ります。
では次にダイアログ・アクションシート、どちらも存在する場合の動線の検討をします。
先ほど同様、戻るボタンで意図せず削除されてしまう場合にダイアログで本当に削除してもいいか確認しています。また、右上に機能ボタンを設けて複数の選択肢をアクションシートで提示しています。その中で保存ボタンを押すと、保存したことをユーザーが確認できるダイアログが表示されます。保存したことを確認するダイアログを設けたのは「保存」というアクションを選択した後、何も提示なく最初の画面に戻ったらきちんと保存されたのか分からず、ユーザーを不安にさせる動線となる可能性が高いためです。
このように、一画面のみのキャンセルボタンの振る舞いを検討するのではなく、アプリの中のひとつの機能であることを踏まえ統一されたルールのもと、使いやすい動線を検討しましょう。
まとめ
社内勉強会で基本的なキャンセルボタンについての認識を合わせました。
キャンセルボタンは色などの見た目の振る舞いだけでなく、押した後にどのような動きをするのかといったところも含めて検討していくことが重要だという学びがありました。
今後もユーザーにとってベストなデザインとは何なのか試行錯誤していきたいと思います。
参考になりましたら幸いです。最後までお読みいただきありがとうございました！
参考
HIG Buttons Material Design 3 All Buttons
4
