TOP デザイン・情報設計・UI ユーザーを迷わす:打ち消し・否定のUI

ユーザーを迷わす:打ち消し・否定のUI

通話アプリ:ミュートのデザイン比較

オンライン通話で使われる操作ボタンのキャプチャです。
この中に使いにくいものがあります。それはどれでなんで使いにくいのかわかりますか?
スクリーンショット 2016-05-08 14.55.43

SkypeのUI

スクリーンショット 2016-05-08 15.50.08

VineのUI

答えは2番目になります。

どこが使いにくいのか

スクリーンショット 2016-05-08 14.55.43

1つ目は、単純なアイコンでオンオフが否定されているか否かのUIで、操作が直感的にできます。

2つ目は、背景でオンオフの状態がわかるようになっていますが、UIが(マイクオフ)打消し・否定です。
「オフをオフする?」って悩んでしまいました。

しかも悪いことに、オンオフを背景色だけで示していたため否定アイコンのマイクはオフ(つまり、ミュートのオフ)でも否定を示す射線のデザインでした。

どっちがどっちだよーーーー!って叫びたくなります。

しかも通話している時、ユーザーは会話に集中しているので操作を考えさせられるのはストレスになります。

改修

現在では、以下のようにオンの状態とオフの状態が統一されわかりやすくなりました。

スクリーンショット 2016-05-08 14.56.44

オン状態

スクリーンショット 2016-05-08 15.31.48

オフ状態

まとめ

  • オンオフはわかりやすく明示的にデザインする(アイコンでオンオフをハッキリ明示させる)
  • 否定のオンオフの設定はしない
  • デフォルトをミュートのような、否定のものにしない
  • ユーザーは考えて操作することはストレスになる

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

まずは言葉を覚えよう

「UX用語」のカテゴリー

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

「UX格言」の新着

UX格言 一覧

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

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

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