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

 

 

 

 

*****

 

 

 

はじめに

 

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

techblogchan( @techblogchan )です。

 

最近「最悪のUI」のウェブサイト「User Inyerface」が海外メディアで取り上げられて、巷を賑わせているみたいです。

 

userinyerface.com

今回はこのサイトで少し遊んできたので、私から見て気がついたおかしい箇所からわかりやすいUIとはどのようなものかを逆説的に共有できたらいいなと思います! 

 

 

 

*****

 

 

 

「最悪のUIサイト」を作ったのは誰?

 

このサイトはベルギーの「BAGAAR」という会社が直感的に操作しやすいUIのルールにあえてことごとく反して制作しました。

 

以下が会社のHPです。

www.bagaar.be

 

普段から直感的な操作をしやすいように考えられているUIデザインに慣れ親しんでいる現代人ですが、このサイトを操作することでそのUIデザインの恩恵を改めて感じられるかもしれませんね!

 

 

 

*****

 

 

 

トップページ

 

このウェブサイトは「ゲーム」のようになっていて、とても操作性が悪い中最後まで辿り着けたらクリア!みたいになっているようなので早速挑戦してみました。

 

こちらがトップページです!

1ページ目

1ページ目

 ...なんかいきなり、ツッコミどころが多そうですね...笑

 

このページには自分的には2つ引っかかるポイントがあります。

  1. 謎の「NO」ボタン
  2. どこをクリックしたら次のページに行けるのか

 

 

謎の「NO」ボタン

「何これ」

の一言に尽きますね...。

 

特にボタンの上の文章とも関係しているようには見えないですし...

 

ただ、個人的にはこんなところにデカデカと「NO」ボタンがあるとなにか許可を求められているのかなと勘ぐってしまいます笑

 

 

どこをクリックしたら次のページに行けるのか

注目していただきたいのはページ最下部のこの部分。

1ページ目③

1ページ目③

 

一見「click」か「next page」を押せば遷移しそうですが、そのどちらでもないんです。

「HERE」を押してあげると次のページに遷移します。

 

...うーん。わかりにくいですね。

 

しかも

ポインターが変わらない

ポインターが変わらない

 

このように、マウスオーバーしてもポインターが clickable にならないのです!!

 

リンクを挿入する際にはできるだけそこにリンクがあるのだと分かり易くする工夫が必要ですね。

「なにかできそう感」が大事だとよく言われていますね!

 

 

 

*****

 

 

 

フォームページ(1)

 

ここがフォーム画面になっており、全部で4ページあるみたいです。

このフォームを全て入力すると晴れてゲームクリアになるみたいです。

 

フォームの1枚目はこちら

2ページ目①

2ページ目①

2ページ目②

2ページ目②

 

このページのツッコミどころは 

  1. クッキーの使用許可のタブ
  2. お問い合わせタブの謎の動き
  3. 残りフォームページを表す緑丸アイコンの点滅
  4. テキストボックスのplaceholderとvalueに値を入れている
  5. フォームのCancelボタンのデザイン
  6. パスワードの入力規則の記載方法
  7. 同意を求める文章
  8. パスワードの安全性についての文章

 

 ...と、たくさんありますね。笑

 

 

クッキーの使用許可のタブ

2ページ目③

クッキーの使用許可のタブ

これはページのメインコンテンツを下に押しやって最上部からニョキっと出てきてしまっていますね。

これだとページが見にくくなってしまっていますので、本来はページのコンテンツには被せるように表示するのが良いではないのかと思います!

 

 

お問い合わせタブの謎の動き

お問い合わせタブ

お問い合わせタブ

このgifでは少し分かりづらいですが、右上の上矢印を押せば押すほど永遠に上に伸びていく謎仕様です。

そして「Send」すると下に消えていきます。笑

 

 

残りフォームページを表す緑丸アイコンの点滅

チカチカしてて目に悪そうですね...。

点滅させる必要あるんでしょうかね。笑

 

「現在のフォームの番号だけ色を変える」

などにすべきかもしれませんね!

 

1 → 2 → 3 → 4 と順番に点滅しているので、現在位置を分かりにくくする要因になってしまうかもしれません。

 

  

テキストボックスのplaceholderとvalueに値を入れている

テキストボックスのplaceholderとvalue

テキストボックスのplaceholderとvalue

これはgifを見てもらったら一目瞭然なのですが、テキストボックスの placeholder にだけ値を入れればいいところを value にも入れてしまっているんですね。

 

 

フォームのCancelボタンのデザイン

この画像のボタンに違和感を感じませんか?

フォームのCancelボタン

フォームのCancelボタン

これは結構あるあるな話なのですが、このUIには良くないところが2つあります。

 

1つが「ボタンの位置」です。

後ろに戻るボタンは左下に、完了ボタンはそれより右側に置くのが直感的なデザインと言われております。

 

もう1つが「ボタンの色」です。

通例「次に進むためのボタン」を濃い色に、「戻るためのボタン」を薄い色にするのです。これもまたそうすることが直感的な操作に結びつくと言われています。

 

この話を踏まえた上で上記画像を見てみたら、ピンときてなかった人も

「なんとなく確かにそんな感じする」

と思えるのではないでしょうか?

 

 

パスワード入力規則の記載方法

パスワードの命名規則

パスワードの命名規則

単純にとてもわかりにくいですよね!

 

まずひとつ言えるのは、もっと入力テキストボックスの近くに文章を配置してあげたら良いなと思います。

 

それと、「文字の色」もよくないなと思います。

緑色で書くと、PASSしているかのような印象を与えてしまいます。

「入力規則などは初めは黒で記載しておいて、入力された条件が守られていなかった場合に赤で表示」

のようにするのが一般的かなと思います。

 

あとより良くするためには、例えば

「入力規則を満たさないと入力ができないようにする」

などの工夫があってもよいかもしれませんね!

 

 

同意を求める文章

同意を求める文章

同意を求める文章

「I do not accept the Terms & Conditions」

 

どうしても

「チェックを入れる = 同意(「是」的なニュアンス)」

というイメージがあるので思わず、同意するよって意味でチェック入れてしまいそうになりますね。

 

なのでこういう同意を求める際の文章は否定形で書くとUIが著しく悪くなるというのがわかりますね!

 

 

パスワードの安全性についての文章

エラー文

エラー文

ここで注目したいのは

「Your password is not unsafe」

ですね。

 

「あなたのパスワードは安全じゃなくないです」的なニュアンスですね...。

 

うーーーん、わかりにくい!!

なら「あなたのパスワードは安全です」でいいじゃん...ってなりますね。笑

 

UIというか自然言語としての問題な気もしますが、このような回りくどい言語の表現は避けたほうが良いですね。

フォーム画面での文章は一読で分かるよう、シンプルな表現を心がけましょう!

 

 

それともう1つ、重要なミスをしているのです。

それは「色」です。

 

どうしても赤い文字だとエラーという印象を感じてしまいます。

 

なので、この場合はにしてあげると、ユーザーに対して

「パスワードの入力が成功した」

という印象を与えることができると思います。

 

 

 

*****

 

 

 

モーダル

 

このサイト実は、1分(恐らく)おきに入力を急かすモーダルが出てくるのです。

(その時点でかなりぶっ飛んでますが笑)

 

このモーダルの中にもツッコミを入れておきたいなと思います。

 

モーダル

モーダル

「Hurry up, time is ticking!」

 

ほんとにこんなサイトあったら最早ネタとしか思えなさそうです笑

 

ポイントは3点!

  1. Lock
  2. 全画面表示
  3. close

 

 

Lock

「Lockボタンを押すとモーダルを固定できるよ〜!」

ってことなんでしょうか?

 

使用用途が不明なので必要ない機能だと思います!

 

全画面表示

...一応押してみました。

 

モーダル全画面表示

モーダル全画面表示

 

これも1つ目と同じように謎機能ですね。

モーダルを全画面表示にするメリット...

 

んー。

こちらも同様に要らない機能かと思われます!

 

 

close

多分closeを発見できない方もいると思われます。

 

モーダルclose

モーダルclose

これです。

 

恐らく遊び心だと思われます。

 

closeのcが

コピーライトの「©」になってますからね笑

 

やるならトコトンふざける感があって面白かったです!

 

 

  

*****

 

 

 

まとめ

 

思いの外、記事が長くなってしまったので残りはパート2で!

パート2でも残りのフォームにおける「最悪なUI」を解説できたら良いなと思います。

 

パート1でのポイントは以下のとおりです。

POINT
  • ユーザーにクリックさせたい部分には「なにかできそう感」を!
  • ボタンのアクション内容によって配置、色を考える
  • 入力規則を設けるならvalidationをする

重要なものは今回の中だとここらへんかなと思います。

 

次回もまだまだ「最悪のUI」の世界は終わっていないのでパート1以上の衝撃をお楽しみにしていてください。

 

それではまたパート2で〜!

 

 

 

【まだパート②読んでないよ〜って方はここから】

www.techblogchan.com

 

 

 

*****