Googleのサイトでも、「あれ？このUIではわかりにくいでしょ？」と思うこともあったりしますが、今回、設問のデザインでそうした事象に出くわしたためご紹介します。
以下は、”基礎知識に自身がありますか？”という設問に関する「Yes」「No」を選択する画面です。
設問に対する回答のボタンの色は共に赤色で、「はい」「いいえ」の順番に表示されています。
「はい」「いいえ」が同じ赤色であり、「はい」が左に設置している実際のデザイン
もしかして、「はい」を誘導しないためにもあえてこの位置で同じカラーにしたのかも知れませんが、その場合、以下のデザインのように赤色を選ばないのが理想的といえます。
誘導したくないデザインとして、あえて色を同じにする例
「はい」が左に来ているのは、プログラマーが実装してしまう実例で良くあります。コードレベルで情報を記載していくと、「はい、いいえ」と記載してしまいがちで、結果として「はい」が左に来てしまうといったケースが多く見受けられます。
通常、進むイメージのある「はい」は右に位置し、グリーン系統の色を採用します。画面のデザイン上で確認すると、「はい」が右に設置されているとスムーズであることがわかります。
色も重要な要素です。例えば、信号機が同じ色で・言葉で表記されていたら、ユーザーの反応は鈍くなりますよね。同様に、色を正しく付けることで、情報に意味を伝えやすくしています。
「はい」「Yes」などの進行的な要素は右に。そして、グリーン系統の青などを用いる例
3つのデザインを比較
上記3つのデザインを見て、わかりやすいと思うのは、どのデザインでしょうか？
大半の方は、3番目の「はい」が右に・グリーンのボタンを配置するデザインを選ばれると思います。
もちろん、UIはある意味誘導してしまうケースがあるので、そのような場合はあえて外す、違うデザインを行うこともありますが、ユーザーを安易に迷わせても良い結果は生まれません。
素直にわかりやすいUI設計を、まずは実装するようにしましょう。
