確認ポップアップで誤解を招きやすいアンチパターン
ドラクエウォークから学ぶモバイルアプリのUX向上のための改善案
はじめに
モバイルアプリのUXを考える場合、確認するダイアログの文章や文言は気を遣うべきです。
それは、YES/NOの質問で、その後の結果が変わることが多いからです。
文章が簡潔で、直感的に理解できるようにすべきです。
詳しく説明しようとして、文章が長すぎても理解しづらくなってしまいよくありません。
簡単な言葉で、誤解のないようにしたいところです。
アンチパターンとして、ドラクエウォークの例を紹介します。
これはモンスターと連続で戦うシーンで、元の画面の「あきらめる」というボタンを押すと表示されるダイアログです。
「OK」ボタンを押すと「あきらめた」ことになり戦闘が終わります。
「やめる」ボタンを押すと「あきらめる」ことを「やめる」ことになり、元の画面に戻ります。
どこがよくないでしょうか。
二重否定
「あきらめることをやめるという解釈がややこしい」ということです。
「戦わないことを選ばない」というような「〜ない」の文章の二重否定とは意味が異なりますが、「あきらめることをやめる」というネガティブな言葉を重ねて使ってしまい混乱を招きます。
ネガティブな選択肢にネガティブで答えることで元の状態に戻るということに違和感があり、直感的でありません。
この場合、直感的に分かりやすい文言や表現を使うべきです。
揺らぐQA
ダイアログ上の質問となる文章は「あきらめますか？再度挑戦するときは始めからになります。」と書かれています。
…いやそうでしょうか。
質問は「あきらめますか？」だけです。
「再度挑戦するときは始めからになります。」の部分はあきらめた場合の説明です。
しかし、最初から順に説明文まで読んだ後に「OK」という選択肢があると、「再度挑戦するときは始めからになります。」ということを理解しましたかと解釈し、「OK」ボタンの意味が少し揺らぎます。
この例では間違える人は少ないと思いますが、説明の部分がもう少し長文になった場合には混乱を招かねません。
質問と回答の対が明確になるようにレイアウト・デザインにメリハリをつけるべきです。
改善案
以下の画像のとおりです。
質問となる「あきらめますか？」の文字を大きくすることにより、下の説明文と区別します。
説明文が補足するような立ち回りになり、質問とそれに対する回答の選択肢が際立ちます。
また、ボタンの文言はアクションそのままの言葉で表現しています。そのことにより、質問を読んでいなくても直感で分かり、誤解を防ぐことができます。
この場合、「あきらめる」ことを選択すると、間違ったときに取り返しがつかなくなってしまうため、以下のように赤字で目立たせることもよいかもしれません。
但し、他に赤字を使っているケースがあれば緊急度や重要度のレベルを統一した方がよいでしょう。
補足
本来Apple（iOS）もGoogle（Android）もUIに対するガイドラインでは、ポジティブなボタンは右、キャンセルボタン（ネガティブなボタン）は左を推奨しています。
今回のケースでは、「あきらめる」という選択肢が右にあるため、一見するとネガティブなボタンが右側にあることになります。
しかし今回は最初に「あきらめる」というボタンを押したことで表示されたダイアログであるため、あきらめることに対してポジティブかネガティブかという解釈をしていることになります。
しかしダイアログの表現を変える余地があるケースであれば、言葉としても意味としてもネガティブな選択肢がなるべく左側にくるように配慮した方がよいでしょう。
例えば、洞窟をどんどん先に進むようなシーンで、度々進むか引き返すかを確認することを想像してみましょう。
その場合、
「引き返しますか？」に対する「はい」「いいえ」よりも、
「先に進みますか？」に対する「はい」「いいえ」の方が相応しいということです。
以下の動画でも紹介しています。
