【UI】「最悪のUI」なウェブサイトの悪い部分を解説をしてみる②

 

 

 

 

*****

 

 

 

はじめに

 

皆さんこんにちは、こんばんは。

techblogchan( @techblogchan )です。

 

今回は前回に引き続き「最悪のUI」のウェブサイト「User Inyerface」についての解説を行いたいと思います!

 

【まだ前回の記事を読んでないよ〜って方へ】

パート①はこちら。

www.techblogchan.com

 

 

 

*****

 

 

 

フォームページ(2)

 

フォームページ(2)

フォームページ(2)

さて、このページの良くないポイントは以下のものです。

  1. ローディングアイコン
  2. アップロードの仕方
  3. Download image
  4. Choose 3 interests
  5. 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 を配置しているのも問題です。

なので、別のデザインにした上で(チェックボックスではない方が良い)、上か下に配置したいですね!

 

私の感覚的には、赤い枠の中にあったら分かりやすいなと思いました。

select all と unselect all があってほしい場所

select all と unselect all があってほしい場所

 

Cancelボタン

Cancelボタンについて

Cancelボタンについて

パート①でも指摘した部分ではありますが、改めてもう一度。

 

まずボタンの「配置」です。

「次へ行くボタンは右側、戻るボタンは左側」

が直感的な操作が行えるUIに結びついているとされています。

 

なのでこのケースでは逆ですね。

これでは誤って想定とは違うボタンを押すというミスに繋がりかねません。

 

次に、ボタンの「色」です。

「濃い色は次に進むボタン、薄い色は戻るボタン」

という話でしたね。

 

これもまた、逆になっているので誤った操作を引き起こしてしまうかもしれません。

 

 

 

*****

 

 

 

フォームページ(3)

 

フォームページ(3)

フォームページ(3)

このフォームの良くない箇所はこちらです!

 

  1. Country
  2. Year
  3. Age
  4. お問い合わせタブ

 

細かく言えばまだありますが、大きいのはここらへんかなと思います。

 

 

Country

Countryの選択形式

Countryの選択形式

個人的には割と好きですが、入力のしやすさという観点ではよろしくないかなと思います。(国旗がわからないと入力できないため。しかも白黒の状態で。)

 

普通に文字でアルファベット順にしてあげるのが分かりやすいのかなと思います。

 

Country

Yearプルダウンの中身

Yearプルダウンの中身

Yearプルダウンの中身に注目してみてください。

 

1990年スタートで

1991年

1992年

1993年

1994年

1995年

 

となっていますね。

確かに100歳超えている方ばかりならこれでも良いかもしれませんが、世の中そんな方々ばかりではありません。

これではかなーりスクロールが要されるので良いUIとは言えません。

 

そのため、通例

「生年月日のプルダウンは現在の西暦から降順」

になるようにするのです!

 

Age

Ageの入力方法

Ageの入力方法

これは結構凄いUIですね。笑

年齢をスライダーバーで入力はかなり新しいですね。

アイデアとして悪いわけではないのですが、年齢入力にスライダーバーを用いるなら改善してもらいたい箇所が2箇所あります。

 

1つは「ドラッグしている時にスライダーの数値が変化しないこと」です。

でないと、今何歳くらいなのかがドラッグをやめたタイミングでしかわからないのでとても入力しにくいです。

(上のgifで最初の方にスライダーを動かしていますが、値は0から動いていませんね...!スライダーの全長から考えて40くらいで離したつもりが実際は83で驚きました。笑)

 

もう1つは「スライダーの数値のレンジ」です。

MAX200はあまりにも大きいのではないかなと思います。

 

かといって年齢選択に上限を設けるのも変な話な気がするので、

やはり年齢選択にスライダーバーはあまり適していないかもしれませんね。笑

 

お問い合わせタブ

お問い合わせタブ

お問い合わせタブ

見て分かるように初期のお問い合わせタブの位置だと

「Genderの選択」

「Nextボタンが押せない」

「Cancelボタンがなんのボタンがわからない」

という弊害たちが発生してます。

 

おまけにどうやってタブをどかすのかが分かりにくい...

 

これはこのサイトの中でもトップレベルのUIの悪さですね笑

 

ちなみに、お問い合わせタブの「Send」ボタンを押すとタブは下に消えていきますよ!(完全には消えませんが。笑)

 

とりあえず「×」アイコン等を隅に配置してタブを閉じられるようにしたほうがいいですね。

そしてフォームとは被らないように(特にページの遷移のボタン)したいところですね!

 

 

 

*****

 

 

 

フォームページ(4)

 

最後のフォームページですね!

ここではどうやらロボットではないかどうかのチェックをしているみたいです。

フォームページ(4)

フォームページ(4)

ここでは、2点。

 

  1. チェックボックスの位置
  2. ロボットチェックの内容

 

チェックボックスの位置

サイトにチャレンジした方の中で、チェックするボタンを間違えた人はいませんか?

 

割と間違える人は多いと思います。

 

なぜなら

下の段のチェックボックスの方が本来のその写真のチェックボックスよりも近いために写真のしたにあるチェックボックスがその写真と結びついているものだなと誤解を与えているのです。

 

つまり、以下のように見えませんか?ということです!

チェックボックスの位置

チェックボックスの位置

なので

「写真などのコンテンツ等とセットにしてチェックボックスで選択してもらいたい際には余白の間隔も意識する必要がある」

ということです。

 

 

ロボットチェックの内容

全部で4つありますね。

 

  • circle
  • check
  • bow
  • glasses
  • light
  •  

    「circle」

    circle

    circle

    「check」

    check

    check

     

    「bow」

    bow

    bow

    「glasses」

    glasses

    glasses

    「light」

    light

    light

     

    これ是非まともにやってみてください!

    ストレスでハゲそうになりますよ。笑

     

    ん?全部circleだし、checkだし、bowだし、glassesだし、lightだって?

    そうなんです。

     

    実はですね、これ

    「全てのパターンにおいてオールチェックで認証を突破できる」

    仕様なのです。

     

    私自身ここでかなり詰まりました。

    まさかロボット認証でオールチェックなんて...

    してやられた感ですね。

     

    でも実際こんなデータは学習データには使えないので、UIというよりこれは設計として良くないですね。笑

     

     

     

    *****

     

     

     

    ラストページ

     

    ここまで「最悪のUI」を突破してきた方々、お疲れさまです!!

     

    最後はこんなページです。

    ラストページ

    ラストページ

     

    「YOU ARE AWESOME!」

    「A True interface legend」

     

    ということで、ここまで散々イライラしながらやっとの思いで辿り着いた人には少々癪に障るgifが仕込まれていますが、何はともかくおめでとうございました!

     

     

     

    *****

     

     

     

    まとめ

     

    『「最悪のUI」なウェブサイトの最悪な部分を解説をしてみる②』いかがでしたか?

     

    ①よりも更に操作性の悪いUIが沢山仕込まれていたかと思います。

     

    近いうちに「まとめ編」を投稿しようかと思いますので、そこでこのウェブサイトから学べる「最悪のUI」を反面教師にしてなにが「最高のUI」なのかを話せたら良いかなと思います。

     

    それではまた別の記事で〜!

     

     

    【まとめ編はこちらから】

    www.techblogchan.com