ウェブサイトのデザインが失敗する原因とは？ユーザーエクスペリエンスの「アンチパターン」について簡単に説明します

ウェブサイトのユーザーとして、ウェブサイトを使用する際に時々煩わしい点があることに気付くかもしれません。たとえば、ログイン フォーム、ナビゲーション、または Web アプリケーション全体が原因で、タスクを完了することが困難になる場合があります。ウェブサイトのデザインでこれらの問題が発生する原因は何でしょうか?

答えは複雑です。最初の問題は、デザイナーが実際のユーザーに対するテストという非常に重要な点を見落としている可能性があることです。この問題の原因は通常、デザイナーが Web サイトの特定の部分のインタラクションの詳細を処理する方法を知っていると想定していることにあります。多くのデザイナーは、他のケースでも同様のやり取りを見たことがあるし、元のデザイナーもテストしたはずだから、わざわざやる必要はないと感じているからです。ただ、それを使用してください。その結果、私たちは他の人が書いたオープンソースの CSS コード ライブラリを頻繁にチェックし、実際のシナリオでテストすることなく、それを自分のデザインに直接コピーすることになります。このように、私たちは知らず知らずのうちに、確立されたテンプレートで構成された作品を構築してきました。

いくつかのテンプレートは非常に効果的ですが、問題のあるテンプレートもあります。これらのテンプレートを車輪と考えると、車に直接取り付ける車輪は実際には自転車の車輪であることが多いですが、これはまったく無関係です。ですから、車のホイールを再設計して、それを車に取り付けてみるべきです。

考慮すべき事項:

- あなたのユーザーは、Amazon、Google のターゲット ユーザー、さらには競合他社のターゲット ユーザーと同じではない可能性があります。デザイン テンプレートが効果的かどうかを知りたい場合は、「神様」（ユーザー）に自分でテストしてもらう必要があります。おそらくあなたのクルーはドバイ出身でしょう（冗談ではありません！これは弊社での最近の事例です）。つまり、あなたのユーザーのニーズは、他のウェブサイトのターゲットユーザーのニーズとは異なります。

- しかし、人間の脳が情報とどのように相互作用するかはすでに分かっているのではないでしょうか?

そうですが、この知識は非常にマクロかつ広範囲にわたるものであることを繰り返し強調しなければなりません。絶対的なものは何もありません。たとえば、ハーバード大学が最近行った実験では、マウスをクリックする速さに基づいて年齢を正しく推測するゲームを研究者が設計しました。

http://www.dailymail.co.uk/sciencetech/article-2313388/Age-test-drive-dotty-Online-quiz-reveals-old-REALLY-based-reaction-time.html）。私も参加させて頂きましたが、とても先駆的な試みでした！

年齢、身体的状態、文化、その他の側面が異なるユーザーには、まったく異なるニーズがある場合があります。これが、大規模で包括的なソリューションを使用することが逆効果になる理由です。

アンチパターンとは何ですか?

アンチパターンとは、実際には明らかに現れるものの、非効率的であるか、最適化が必要な設計パターンです。このアプローチは、Web アプリや Web サイト、具体的にはログイン ページ、情報の入力、メッセージの閲覧など、ユーザーがアクションを実行するあらゆる場所で見られます。

アンチパターンを識別するにはどうすればいいですか?

Web デザイナーであれば、デザイン上の明らかな問題 (たとえば、いずれかの項目をクリックする前に折りたたまれるドロップダウン メニューなど) を簡単に見つけることができるでしょう。ただし、アンチパターンに見られる設計上の問題はより微妙です。ウェブサイト上でタスクを完了することに集中しているユーザーはこの質問をスキップしますが、それでも少し煩わしいものです。

これらの問題を明らかにするには、ネットワーク統計ツールをオンにするのが最適です。 Google Analytics は無料でインストールも簡単なので良い選択です。

測定されたデータの中で、次のような問題の「症状」（アンチパターンである可能性があります）を探す必要があります。

ページ訪問数の減少

もともと多くのユーザーが特定のページに誘導されていたのに、突然大量のユーザーが消えてしまった。このとき、このページで何が問題だったのかを詳しく調べる必要があります。自分自身に問いかけてください。ユーザーは次のステップに進むためにインタラクティブなアクションを必要としますか? ユーザーは進む方法がわかりませんか? ページ全体がアニメーションになっていますか? 知るにはこれらの質問を調査する必要があります。後でユーザー調査や分析を行うために、これらの質問を書き留めておきます。

目的のないクリック

ユーザーがページ全体をクリックしている場合、何をクリックすればよいかわからないことを意味します。

繰り返し上下にスクロールする

ユーザーがページを上下にスクロールし続ける場合、欲しいものが見つからないか、欲しいコンテンツが何なのかまったくわからないことを意味します。

よくあるアンチパターン

ユーザビリティの問題は必ずしもアンチパターンの核心と同じではありませんが、追跡すべき痕跡はあります。デザインにおける多くのアンチパターンが、使い勝手が悪いために悪いアイデアだと見なされているのは残念なことです。以下にアンチパターンの例をいくつか示します。

1. クリック可能な要素がクリック可能に見えない

(翻訳者注: ボタンがクリック可能かどうかがわからないのはなぜでしょうか? ボタンの色はページ上のテキストと同じです。青に設定されておらず、他のテキストリンクのようにボタンとして扱われていません。太字や下線も付いていません。クリック可能であることを示すアイコンや矢印、ヒントはありません)

含まれる質問は次のとおりです。

1. ボタンが小さすぎる

2. テキストリンクには視覚的な区別がありません（青が最適）

3. ボタンが平らすぎるため、ユーザーに「これは実際にボタンです!」と伝えることができません。

4. ホバー状態が欠如していると、{cursor:pointer;}タグを使用しないなどの問題が発生することもあります。

2. ホバーの問題

ホバー効果のあるコンポーネント (ボタンまたはタイトル) の背後に情報を非表示にすることは、インターフェイスを整理するのに便利な方法ですが、マウスがホット領域を離れた後、情報がすぐに非表示にならないように注意してください。ユーザーは思ったほど早く反応しません。デザイナーとして、情報を見えるようにするためにホバー操作を繰り返すのがいかに不快であるか想像してみてください。

3. 一貫性のない文脈

ページ上に 3 種類のリンクがあるとします。 1 つはユーザーをホームページに戻し、1 つはユーザーをサイト外に誘導し、3 つ目はポップアップ ウィンドウを開きます。これはユーザーにとって非常に混乱を招きます。

4. バッチ実行なし

複雑なリストでは、リスト内の要素の追加、削除、ステータスの変更など、ユーザーが実行する必要がある機能がある場合は、必ずバッチ処理機能を提供してください。一度に 1 つずつ処理すると、ユーザー エクスペリエンスが非常に悪くなることは間違いありません。

5. 最初の画面スペースを埋め尽くすコンテンツが多すぎる

調査によると、ユーザーは実際には最初の画面を超えたコンテンツを読むことにより多くの注意を払っていることがわかっています。しかし、何らかの理由で、最初の画面にできるだけ多くのコンテンツを詰め込むという慣行は今でも存在しています。したがって、私の提案は、スペースを賢く使用し、コンテンツを分離することです。

6. ポゴスティックナビゲーション

ポゴスティック ナビゲーションとは、ユーザーがアクションを完了するために、メイン ナビゲーションから 1 つまたは 2 つのレベルを下げ、その後メイン ナビゲーションに戻り、別のレベルから再び下げる必要があるナビゲーションです。 「バウンス ナビゲーション」は Jared Spool によって考案されたもので、ユーザーはジャンプするマウスのように階層内を前後に継続的に移動する必要があります。

7. すべてのエラーメッセージをクリアする

このモードのシナリオは、ユーザーがフォームに入力すると、システムから特定の情報が要件を満たしていないことが通知されるというものです。このとき、Web サイトはユーザーが入力した情報のすべてまたは一部を自動的にクリアし、再度入力する必要があります。

8. 間違った宛先ページ

つまり、ユーザーが一連のインタラクティブな動作を完了すると、予期しない別のページが表示されるということです。このパターンは、eコマースサイトでよく見られます。ユーザーはオンライン取引を行う前にログインする必要があります。ログインすると、クレジットカード情報を入力するためのフォームではなく、ホームページに移動します。

手術

現在作業中のプロジェクトで、このアンチパターンまたは関連する症状が現れるかどうかを確認します。プロジェクトに関与していない友人や協力者にサイトを歩いてもらい、何が起こるか見てみましょう。サイトのどこかでユーザーはイライラしていませんか? ユーザー エクスペリエンスがスムーズでない場所は、多くの場合、アンチパターンの前兆です。

上記の例は氷山の一角にすぎません。あなたがデザインした Web サイトで、他にどのようなアンチパターンを目にしたことがありますか?

原作者と出典:

サラ・カーン、2013年5月8日

http://webdesign.tutsplus.com/articles/user-experience-articles/the-world-of-ux-anti-patterns/

(元の投稿はWeibo UDCから。再投稿する場合は出典を明記してください http://udc.weibo.com/ )

元のタイトル: ウェブサイトのデザインが失敗する原因は何か? ユーザー エクスペリエンスの「アンチパターン」に関する簡単な説明

キーワード: 何、ウェブサイト、問題、議論、ユーザー、経験、ネガティブなパターン、ウェブマスター、ウェブサイトのプロモーション、収益化