UIの使いづらさにイラッとする!これがフォームで使いにくい最悪なユーザインターフェイスだ -User Inyerface
Post on:2019年7月11日
使いにくいUI、間違いやすいインタラクション、誤解されるデザインパターンを再現したUser Inyerfaceを紹介します。ベルギーの制作会社「Bagaar」による、使いにくい最悪なユーザインターフェイスを楽しむゲームです。
けっこうイラッとするので、心に余裕がある時にお楽しみください。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019071201-01.png)
という訳で、さっそくUser Inyerfaceのゲームを試してみました。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019071202-01.png)
ゲームをスタートしようとクリックしたら、NOボタンw
「次のページに行くにはここをクリックしてください」の「ここ(HERE)」をクリックして、スタートです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019071203-01.png)
ゲームは全部で、4ページです。
1ページ目は、パスワードとメールの入力フォーム。入力するパスワードとメールは適当で大丈夫です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019071202-03.png)
おぅ、画面を見ただけで、つっこみどころが満載です。キャンセルでかすぎ!
まずは、適当にパスワードを入力してみます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019071202-02.png)
エラー、出ました!
- パスワードには少なくとも10文字が必要。
- パスワードには少なくとも1つの大文字を含むべき。
- パスワードには少なくとも1つの数字が必要。
- パスワードにはあなたのEメールの少なくとも1文字を必要。
- パスワードは少なくとも1つのキリル文字を含めることが可能。
メールアドレスの文字とかキリル文字とか、、、キリル文字は、「きりる」と入力すると辞書で変換できると思います。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019071203-02.png)
そして、入力するのに一定時間がすぎると、急いでのメッセージが表示されます。仕方無いので、閉じるために右上のボタンをクリックすると、、、
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019071203-03.png)
拡大ボタンかい!
閉じるは、左下の「©lose」でした。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019071203-04.png)
1ページには他にもいろいろ仕込まれているのですが、2ページ目に進みます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019071202-05.png)
プロフィール写真をアップロードしようと、ボタンをクリックすると「Download」ボタン、、、こんなアバターの画像なんていらない。
アップロードは、グレーテキストのuploadをクリックして、今ダウンロードしたアバター画像をアップロードしました。役に立ったw
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019071202-06.png)
その下では、興味があることを3つ選択します。
よく見ると、「Select all」「Unselect all」の罠ボタンが!
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019071203-05.png)
3ページ目は、情報入力フォーム。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019071202-07.png)
年齢を入力するのに、スライダーは使いづらい!
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019071202-08.png)
国を選ぶのは、国旗かい! しかもモノクロ、、、
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019071203-06.png)
最後の4ページ目は、フォームのスパム対策で見かけるCAPTCHA(キャプチャ)。「glasses」をチェックします。これは、簡単簡単!
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019071203-07.png)
と思ったら、チェックが画像の下ではなく、画像の上!
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019071201-02.png)
無事終了♪
イラッとしましたが、意外と楽しめました。
sponsors