Googleのサイトで、赤色でデザインされた設問がありました。これをベースに設問のデザインについて考えてみました。
以下は、”デジタルマーケティングの基礎知識に自身がありますか？”という設問に関する「Yes」「No」を選択する画面です。
設問に対する回答のボタンの色は共に赤色で、「はい」「いいえ」の順番に表示されています。
「はい」「いいえ」が同じ赤色であり、「はい」が左に設置している実際のデザイン
意図的に「はい」を誘導しないために、「はい」を右に配置し、「いいえ」も同じ赤色にしたのかも知れませんが、「yes」の意味に赤色はあまり良い判断ではありません。
設置位置
まず、位置の関してです。
Yes/Noの設問ボタンで、「はい」が左に来ているケースを見ますが、左から右に流れる視点の流れのため、「はい」は右に設置するのが一般的です。しかし、今回の例のように、並列で選択させるべき場合は左側にあっても問題はないでしょう。
ただし、設問の意図を理解せず、コードの実装上の都合で、結果として「はい」が左に来てしまうのは問題です。設問の意図を理解し適切な位置に設置しましょう。
色の選定
色も重要な要素です。
例えば、信号機の色が全て同じ色で、言葉だけで表記されていたら、ユーザーの反応は鈍くなります。つまり、色によって、情報を伝えています。つまり、色を正しく付けることで、情報や意味を伝えやすくしています。
今回のデザインを、「はい」を右に設置し、緑色を採用しました。
「はい」「Yes」などの進行的な要素は右に。そして、グリーン系統の青などを用いる例
デザイン比較
どのデザインがわかりやすいでしょうか？
設問によってあえてフラットにする場合もありますし、ナッジする場合もあります。
しかし、その誘導がユーザーのためでなく企業視点でのダークパターンになってしまうこともあるので、気を付けてデザインしていきましょう。
