通話アプリ:ミュートのデザイン比較
オンライン通話で使われる操作ボタンのキャプチャです。
この中に使いにくいものがあります。それはどれでなんで使いにくいのかわかりますか?
![打消しのUI | UX TIMES](https://uxdaystokyo.com/articles/wp-content/uploads/2016/05/打消しのUI.png)
SkypeのUI
![スクリーンショット 2016-05-08 15.50.08 | UX TIMES スクリーンショット 2016-05-08 15.50.08](https://uxdaystokyo.com/articles/wp-content/uploads/2016/05/スクリーンショット-2016-05-08-15.50.08.png)
VineのUI
答えは2番目になります。
どこが使いにくいのか
1つ目は、単純なアイコンでオンオフが否定されているか否かのUIで、操作が直感的にできます。
2つ目は、背景でオンオフの状態がわかるようになっていますが、UIが(マイクオフ)打消し・否定です。
「オフをオフする?」って悩んでしまいました。
しかも悪いことに、オンオフを背景色だけで示していたため否定アイコンのマイクはオフ(つまり、ミュートのオフ)でも否定を示す射線のデザインでした。
どっちがどっちだよーーーー!って叫びたくなります。
しかも通話している時、ユーザーは会話に集中しているので操作を考えさせられるのはストレスになります。
改修
現在では、以下のようにオンの状態とオフの状態が統一されわかりやすくなりました。
![スクリーンショット 2016-05-08 14.56.44 | UX TIMES スクリーンショット 2016-05-08 14.56.44](https://uxdaystokyo.com/articles/wp-content/uploads/2016/05/スクリーンショット-2016-05-08-14.56.44.png)
オン状態
![スクリーンショット 2016-05-08 15.31.48 | UX TIMES スクリーンショット 2016-05-08 15.31.48](https://uxdaystokyo.com/articles/wp-content/uploads/2016/05/スクリーンショット-2016-05-08-15.31.48.png)
オフ状態
まとめ
- オンオフはわかりやすく明示的にデザインする(アイコンでオンオフをハッキリ明示させる)
- 否定のオンオフの設定はしない
- デフォルトをミュートのような、否定のものにしない
- ユーザーは考えて操作することはストレスになる