TOP デザイン・情報設計・UI Yes Noボタンの最適な色付け方法

Yes Noボタンの最適な色付け方法

Googleのサイトでも、「あれ?このUIではわかりにくいでしょ?」と思うこともあったりしますが、今回、設問のデザインでそうした事象に出くわしたためご紹介します。

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

Googleの設問デザイン

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

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

誘導したくないデザインとして、あえて色を同じにする例

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

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

色も重要な要素です。例えば、信号機が同じ色で・言葉で表記されていたら、ユーザーの反応は鈍くなりますよね。同様に、色を正しく付けることで、情報に意味を伝えやすくしています。

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

3つのデザインを比較

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

大半の方は、3番目の「はい」が右に・グリーンのボタンを配置するデザインを選ばれると思います。

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

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

UX DAYS TOKYO オーガナイザ/デジタルマーケティングコンサルタント 著書 ・ノンデザイナーでもわかる UX+理論で作るWebデザインGoogle Search Consoleの教科書 毎年春に行われているUX DAYS TOKYOは私自身の学びの場にもなっています。学んだ知識を実践し勉強会やブログなどでフィードバックしています。 UXは奥が深いので、みなさん一緒に勉強していきましょう! スローガンは「早く学ぶより深く学ぶ」「本質のUXを突き止める」です。

まずは言葉を覚えよう

「UX用語」のカテゴリー

UXを取り入れるためのマインドセット

「UX格言」の新着

UX格言 一覧

現場の声をリアルで届ける

動画で学ぶUX 「You X Tubo(ゆーえっくすつぼ)」の新着

You X Tubo(ゆーえっくすつぼ) 一覧