Yes Noボタンをより明確に

Googleのサイトでもあれ?このUIではわかりにくいでしょ?って思うこともあったりしますが、今回設問のデザインで出くわしたのでメモ情報としてご紹介いたします。

以下は、基礎知識に自身がありますか?という設問に関する「Yes」「No」を選択する画面です。
設問に対する回答のボタンの色は共に赤色で「はい」「いいえ」の順番に表示されています。

Googleの設問デザイン

「はい」「いいえ」が同じ赤色で「はい」が左に設置している実際のデザイン

もしかして、「はい」を誘導しないためにもあえてこの位置で同じカラーにしたのかも知れませんが、そうれば以下のデザインのように赤色を選ばないのが理想的と言えます。

誘導したくないデザインであれば、あえて色を同じにして行っている例

「はい」が左に来ているのはプログラマーさんが良く実装してしまう実例であるのですが、コードレベルで情報を記載していくと、「はい、いいえ」と記載してしまいがちで、結果として「はい」が左に来てしまうケースが多くあります。

通常、進むイメージのある「はい」は右に位置し、グリーン系統の色を採用します。画面のデザイン上で確認すると「はい」が右に設置されているとスムーズだということがわかります。

色も重要な要素で、例えば信号機が同じ色で言葉で表記していたらユーザーの反応は鈍くなるイメージはつかみやすいと思いますが、同様に色を付けることで情報に意味を伝えやすくしています。

「はい」「Yes」などの進行的な要素は右に。そしてグリーン系統の青などを用いる例

3つのデザインを比較

上記3つのデザインをみて、わかりやすいと思ったはどのデザインでしょうか?

大半の方は、3番目の「はい」が右にグリーンのボタンをものだと思います。

もちろん、UIはある意味誘導してしまうケースがあるので、そのような場合はあえて外す、違うデザインを行うこともありますが、ユーザーを安易に迷わせても良い結果は生まれません。

素直にわかりやすいUI設計をまずは実装するようにしましょう。

この記事を書いた人:大本 あかね

UX DAYS TOKYO を運営してる Web Directions East.LLCの大本です。
カンファレンス運営していますが、毎年行われているUXDTは私自身も学びの場になっています。また、海外のUXカンファレンスにもいくつかいくようになりました。学んだ知識を実践し、勉強会やブログなどでフィードバックしています。UXは奥が深いので、みなさん一緒に勉強していきましょう。