＊＊＊＊＊
はじめに
皆さんこんにちは、こんばんは。
techblogchan（ @techblogchan ）です。
今回は前回に引き続き「最悪のUI」のウェブサイト「User Inyerface」についての解説を行いたいと思います！
【まだ前回の記事を読んでないよ〜って方へ】
パート①はこちら。
＊＊＊＊＊
フォームページ（2）
さて、このページの良くないポイントは以下のものです。
- ローディングアイコン
- アップロードの仕方
- Download image
- Choose 3 interests
- Cancelボタン
ローディングアイコン
アイコン上に表示されているローディングアイコンなのですが、まだ何もアップロードを行っていないのに表示されていますね。
これだとなんらかの画像の読み込み中なのかなとかアップロード中なのかなと勘違いさせてしまいます。
直感的ではないのであまり良くないUIですね。
アップロードの仕方
皆さんはパッと見でアップロードをどこからするか分かりますか？
私は分からなかったです。
むしろ「Download image」ボタンを押してしまいそうになりました。笑
アップロードは
「upload」というグレーになっている文字を押すと行えました。
この場合良くないのは
「Download image ボタン」
「文字の色」
です！
まぁそもそも「アップロードボタン」を作るべきですね！
ちなみにパート①でも触れましたが、ここの「upload」も安定的に clickable にポインターが変化しませんでした。（上のgifで地味にマウスオーバーしているので確認してみてください！）
徹底されてますね。笑
Download image
謎機能です。笑
デフォルトのアバター画像がダウンロードできます。
よかったら皆さんもダウンロードしてみてください。
この画像が貰えますよ！笑
choose 3 interests
ここでは
「デフォルトがオールセレクト」
「選択肢に紛れ込む Select all と Unselect all」
が主に悪い部分だと考えます。
デフォルトで全てにチェックが入っていると3つにチェック入れるためにまずは全てのチェックを外す必要があります。
このように余計な手間を発生させてしまうようなUIな避けたいですね。
また、選択肢の中に同じデザインで Select all と Unselect all を配置しているのも問題です。
なので、別のデザインにした上で（チェックボックスではない方が良い）、上か下に配置したいですね！
私の感覚的には、赤い枠の中にあったら分かりやすいなと思いました。
Cancelボタン
パート①でも指摘した部分ではありますが、改めてもう一度。
まずボタンの「配置」です。
「次へ行くボタンは右側、戻るボタンは左側」
が直感的な操作が行えるUIに結びついているとされています。
なのでこのケースでは逆ですね。
これでは誤って想定とは違うボタンを押すというミスに繋がりかねません。
次に、ボタンの「色」です。
「濃い色は次に進むボタン、薄い色は戻るボタン」
という話でしたね。
これもまた、逆になっているので誤った操作を引き起こしてしまうかもしれません。
＊＊＊＊＊
フォームページ（3）
このフォームの良くない箇所はこちらです！
- Country
- Year
- Age
- お問い合わせタブ
細かく言えばまだありますが、大きいのはここらへんかなと思います。
Country
個人的には割と好きですが、入力のしやすさという観点ではよろしくないかなと思います。（国旗がわからないと入力できないため。しかも白黒の状態で。）
普通に文字でアルファベット順にしてあげるのが分かりやすいのかなと思います。
Country
Yearプルダウンの中身に注目してみてください。
1990年スタートで
1991年
1992年
1993年
1994年
1995年
・
・
・
となっていますね。
確かに100歳超えている方ばかりならこれでも良いかもしれませんが、世の中そんな方々ばかりではありません。
これではかなーりスクロールが要されるので良いUIとは言えません。
そのため、通例
「生年月日のプルダウンは現在の西暦から降順」
になるようにするのです！
Age
これは結構凄いUIですね。笑
年齢をスライダーバーで入力はかなり新しいですね。
アイデアとして悪いわけではないのですが、年齢入力にスライダーバーを用いるなら改善してもらいたい箇所が2箇所あります。
1つは「ドラッグしている時にスライダーの数値が変化しないこと」です。
でないと、今何歳くらいなのかがドラッグをやめたタイミングでしかわからないのでとても入力しにくいです。
（上のgifで最初の方にスライダーを動かしていますが、値は0から動いていませんね...！スライダーの全長から考えて40くらいで離したつもりが実際は83で驚きました。笑）
もう1つは「スライダーの数値のレンジ」です。
MAX200はあまりにも大きいのではないかなと思います。
かといって年齢選択に上限を設けるのも変な話な気がするので、
やはり年齢選択にスライダーバーはあまり適していないかもしれませんね。笑
お問い合わせタブ
見て分かるように初期のお問い合わせタブの位置だと
「Genderの選択」
「Nextボタンが押せない」
「Cancelボタンがなんのボタンがわからない」
という弊害たちが発生してます。
おまけにどうやってタブをどかすのかが分かりにくい...
これはこのサイトの中でもトップレベルのUIの悪さですね笑
ちなみに、お問い合わせタブの「Send」ボタンを押すとタブは下に消えていきますよ！（完全には消えませんが。笑）
とりあえず「×」アイコン等を隅に配置してタブを閉じられるようにしたほうがいいですね。
そしてフォームとは被らないように（特にページの遷移のボタン）したいところですね！
＊＊＊＊＊
フォームページ（4）
最後のフォームページですね！
ここではどうやらロボットではないかどうかのチェックをしているみたいです。
ここでは、2点。
- チェックボックスの位置
- ロボットチェックの内容
チェックボックスの位置
サイトにチャレンジした方の中で、チェックするボタンを間違えた人はいませんか？
割と間違える人は多いと思います。
なぜなら
下の段のチェックボックスの方が本来のその写真のチェックボックスよりも近いために写真のしたにあるチェックボックスがその写真と結びついているものだなと誤解を与えているのです。
つまり、以下のように見えませんか？ということです！
なので
「写真などのコンテンツ等とセットにしてチェックボックスで選択してもらいたい際には余白の間隔も意識する必要がある」
ということです。
ロボットチェックの内容
全部で4つありますね。
「circle」
「check」
「bow」
「glasses」
「light」
これ是非まともにやってみてください！
ストレスでハゲそうになりますよ。笑
ん？全部circleだし、checkだし、bowだし、glassesだし、lightだって？
そうなんです。
実はですね、これ
「全てのパターンにおいてオールチェックで認証を突破できる」
仕様なのです。
私自身ここでかなり詰まりました。
まさかロボット認証でオールチェックなんて...
してやられた感ですね。
でも実際こんなデータは学習データには使えないので、UIというよりこれは設計として良くないですね。笑
＊＊＊＊＊
ラストページ
ここまで「最悪のUI」を突破してきた方々、お疲れさまです！！
最後はこんなページです。
「YOU ARE AWESOME!」
「A True interface legend」
ということで、ここまで散々イライラしながらやっとの思いで辿り着いた人には少々癪に障るgifが仕込まれていますが、何はともかくおめでとうございました！
＊＊＊＊＊
まとめ
『「最悪のUI」なウェブサイトの最悪な部分を解説をしてみる②』いかがでしたか？
①よりも更に操作性の悪いUIが沢山仕込まれていたかと思います。
近いうちに「まとめ編」を投稿しようかと思いますので、そこでこのウェブサイトから学べる「最悪のUI」を反面教師にしてなにが「最高のUI」なのかを話せたら良いかなと思います。
それではまた別の記事で〜！
【まとめ編はこちらから】
