サイトを傷つける可能性のある回避可能な設計上の欠陥

ウェブは良くなるはずだった、それが約束だった。 そして、アクセシビリティとユーザビリティの考慮事項への意識が高まるにつれ、そうなると思います。 しかし、奇妙なことに、私たちは25年以上経っており、実際には事態は全般的に悪化しています。 どうしてそうなのでしょう?

教育のせいにすることはできません。 その本質的な価値を持つインターネットの設計と開発のすべてのコースは、優れた設計原則、使いやすさ、およびアクセシビリティの基礎をカバーしています。 W3Cガイドラインはこれまでよりも厳格で明確に定義されているため、エンジニアリング標準を非難することはできません。 また、テクノロジーが高品質のサイトの開発をサポートしているため、テクノロジーのせいにすることはできません。

いいえ、このパラドックスへの答えは実際には非常に簡単です。 それは、デザイナーがマーケティング担当者とクライアントの要求によって力を奪われてきたからです。 したがって、デザイナーはテキストと背景のコントラストが良好であることを知っていますが、マーケティング担当者が黒ではなく「ダークシルバー」のテキストを使用する方が見栄えが良いと考えているため、その優れたデザイン原則を実装できません。もちろん、「その青いフォントを洗い流した Twitter 見出し」を使用するため、「すべての若者が私たちのサイトでよりよく識別できます。」

「見栄えが良い」こと、および他のすべてのユーザーが行っていることをコピーすることに対する懸念は、高速、低帯域幅、使いやすさなどの実用的な考慮事項よりも優先されます。 あなたがあなたのサイトがどのように見えるべきかについて決定を下す必要があるクライアントの一人なら、この記事はあなたのためです。 また、他の類似のサイトと同じようにするのではなく、クライアントと交渉してウェブサイトを本来の姿に近づける勇気があるデザイナーにとってもそうです。 未来がすでに到来する時が来ました。

1.コントラストが悪い

これは最近流行になっています。 過去25年間に繰り返し私たちに向けられたメッセージが繰り返されることを考えると、コントラストの低下を避けなければならないのは驚くべきことです。 このファッションの前兆は Twitter ブートストラップですが、他の人からインスピレーションを得た可能性もあります。 例を見てみましょう:

上記は、 Twitterのヘルプページ。 デザインの背後にある哲学は、情報の一部が保持されるほど重要であるほど、ページに表示される色が暗くなることです。 したがって、ページのH1見出しは黒いテキストで表示されます。これは非常に重要であると考えられているためです。

スクリーンショットでは明確ではありませんが、テキストの本文は実際には濃い灰色(フルブラックではありません)です。これは重要であるように見えますが、見出しほど重要ではないためです。

リンクは標準の青色ではなく、「Twitter 青」は、非常に淡い色合いで、白い背景とは対照的ではありません。

ページの下の方にあるH2の見出しは、本文のテキストよりも薄い灰色で、一部の人々は混乱するでしょう。 見出しは、大きな注意散漫になる場合を除いて、他のテキストよりも見やすくする必要があります(この場合、見出しが必要かどうかを疑問視する必要があります)。

左パネルのナビゲーションオプションも淡いグレーと淡い青の色合いで表示されますが、ここでもこれらのアイテムを重要ではないものにフェードインして、メインのコンテンツ領域から注意をそらさないようにすることが考えられます。

最後に、すべての中で最も淡い領域はフィードバックゾーンです。これは明らかに、すべての中で最も重要でない部分です。 それでも Twitter このサイトよりも良い仕事をしています:

この例から導き出せる唯一の論理的な結論は、質問に対する答えをユーザーに知られたくないということです。 それは、あなたがその表現を許してあげるなら、淡い色を超えています。

2.悪いエンコーディング

これは単に極端な遅延の症状であり、ページがどのようにレンダリングされるかを確認する必要さえありません。 この時代では、このような失敗をするのは不可能に思えますが、それでもなんとかして人々はなんとかやっています。 次の例に示すように、彼らは間違った理由のためにそれをなんとかやっています。

誰かがエンコーディングをUTF-8に設定するのを忘れた普通のケースのように見えますよね? このページのエンコーディングはUTF-8に設定されているため、そうではありません。 サイトの設計者はすべてを正しく行い、メタデータ内のすべてのアポストロフィをエンティティ文字39にエスケープするという極端な長さにも関わらず、それが必要でなくてもかまいません。 ここで明らかに起こったことは、MS Wordのスマートクォートを含む誤ってエンコードされたテキストがコンテンツセクションに貼り付けられているため、デザインへのコンテンツの挿入で問題が発生したため、すべてのブラウザーで正しくレンダリングされないため、ページはUTF-8に設定されており、コンテンツはUTF-8でエンコードされていません。

ほとんどの人はâとしてレンダリングされるスマートアポストロフィの小さな問題を見落とすことをいとわないでしょうが、それは非常に迷惑であり、見出しに間違いが発生するとさらに悪化します。 重要なのは、コンテンツをWebにリリースするときにコンテンツが正しく表示されていることを確認する必要があり、常に適切なエンコーディング(ほとんどの目的でUTF-8またはUTF-16になる)を使用していることを確認する必要があるということです。 ウェブサイトは主に第一印象に関するものであり、誰かがあなたのビジネスから得ている第一印象が「だらしない」または「怠惰」である場合、それは本当に良くないことを覚えておいてください。

3. Flashの使用

これを行う理由はまったくありません。 フラッシュはその日でしたが、その日は終わりました。 それでも多くのサイト、特にギャンブルサイト(最も不適切なサイト)はまだFlashを使用しています。 さらに、Webで最大かつ最も成功しているサイトのいくつかは、さまざまな状況でFlashを広範囲に使用しています。 それで彼らにとって十分なものであるなら、なぜあなたにとって十分ではないのでしょうか?

XNUMXつには、Flashは膨大なリソースを消費します。 また、脆弱性に満ちており、トロイの木馬の配信メカニズムとして悪意のあるハッカーによって標的にされており、ローカル共有オブジェクトとも呼ばれる永続的なFlash Cookieが組み込まれているため、本質的にプライバシーリスクでもあります。 これらのCookieはブラウザのセキュリティ設定をバイパスし、通常のCookieよりもはるかに多くの情報を含む可能性があります。 さらに悪いことに、LSOは異なるブラウザー間でデータを共有するため、一般ユーザーがプライバシーを維持することがさらに困難になります。

せいぜい、心配するだけの十分なFlashを知っているユーザーは、Flashの使用を怠惰または時代遅れであると見なしますが、ユーザーはあなたのビジネスをセキュリティ意識の欠如、プライバシーの懸念の無視、またはさらに悪いものとして認識する可能性もあります。あなたが信頼できないこと。

Flashで実行できることはすべて通常のHTML 5で実行できるため、HTMLで機能を複製する方法がわからないことをユーザーに示すFlashをまだ使用している場合は、コストがかかりすぎます。そうする、または意図的にFlashのダークサイドを悪用している。 Flashの使用を考えていて、不正な意図がない場合は、問題を起こすだけの価値はありません。

4.自動再生ビデオ

ユーザーが普段我慢できないことがあるとすれば、サイトが動画コンテンツを提供している場合、ユーザーがそれを再生したいと思うのは不愉快な仮定です。 ニュースWebサイトは特にこの罪に有罪であり、それらの多くは、自動再生しているビデオに、果てしない再生リストをビデオに恥知らずに追加することさえします。 YouTubeではデフォルトで自動再生リストもオンになっていますが、少なくとも最初の動画は自動再生されません。 もちろん、ユーザーは自動再生をオプトインする必要があり、オプトアウトする必要はありません。

限られた帯域幅プランのユーザー、特にモバイルユーザー(ほとんどのユーザー)は、自分のサイトが気づかずにブラウザーでビデオを読み込んで再生していることを理解しません。 ビデオの自動再生が適切と見なされるのは、ビデオが非常に小さく(バイト単位で)自己完結型であり、ユーザーエクスペリエンスに付加価値がある場合のみです。

非常に多くのユーザーがこの動作を煩わしいと説明し、実際にそれを無効にする方法を尋ねている場合、それは本当に煩わしいはずです。 そして、はい、Firefox、Chrome、Chromiumのユーザーが自動再生を完全に無効にするのは実際には非常に簡単ですが、about:configを調べたり、プラグインをインストールして、本来あるべきではない動作をブロックしたりするのが本当に快適なユーザーは何人かそもそも悪用?

そこで搾取について話したことに気づきましたか? これは、HTML 5の作成者が自動再生の可能性を含めることによって何も悪いことをしなかったためです。 彼らがこのように間違ってそれを使うことを彼らが予期していなかっただけです。

5.無限スクロール

これは、マーケティング担当者によって完全に乗っ取られた、かつては斬新で興味深いコンセプトのXNUMXつであり、本来のエンターテイメントではなく、フラストレーションの原因となっています。 マーケティング担当者は、Webページでエンドレススクロールを使用すると、より多くの時間ユーザーをページに留めることができると考えました。

しかし、もう一度、検索結果は物語を語ります。 この例を見てください:

ご覧のように、一般的なトーンは、無限スクロールが煩わしいということです。 これはユーザーエクスペリエンスを向上させるものではなく、使いやすさに大きな問題を引き起こします。また、ページが大きくなり、より多くのコンテンツを生成するときに、メモリとパフォーマンスの問題を引き起こす可能性があります。 これは特に、ユーザーが複数のタブを開いている場合、およびプロバイダーが複数のタブで無限スクロールサイトにメディアリッチコンテンツを配信している場合、間違いなく問題が発生します。

6.不要なときにポップアンダーまたはポップオーバーウィンドウを生成する

ユーザーエクスペリエンスに追加されないものは、それを損ないます。 ユーザーエクスペリエンスを損なうと憤慨が生じ、実行可能な代替手段がある場合、ユーザーはサイトを回避します。 そのため、トリップアドバイザーのような非常に安全な場所にあるサイトは、米軍兵士がアフガニスタンの子供たちにプロパガンダのテディベアを投げかけるように、さりげなくポップアンダーの窓を投げつけます。 しかし、クマが少なくとも喜びをもたらすところでは、ポップアップは煩わしさをもたらすだけです。

トリップアドバイザーのこの動作の最悪の点は、ユーザーが既にサイトにアクセスしているため、ユーザーが何をしているかにまったく意味がないことです。 トリップアドバイザーがポップアンダーとしてユーザーが既に使用しているのと同じウィンドウを複製する、考えられる唯一の理由は次のとおりです。

  • Googleの直帰率分析をだます
  • あなたがバウンスをする場合、あなたにあなたが考え直そうとすること

これらはどちらも特に良い考えのようには思えません。 もちろん、これを実行する他の理由が考えられますが、それらが存在する場合、それらは明白ではありません。

7.迷惑なオーバーレイ

「International Bash TripAdvisor Day」(まだ)ではありませんが、不愉快なWebページの動作の例を惜しみなく提供しているので、これを無視するのは本当に贈り物の馬のようです。 ポップアンダーのスクリーンショットをセットアップしたときにトリップアドバイザーが表示したのは次のとおりです。

あなたはおそらくこれについて何がそんなに愚かであるかすでに推測できるでしょう。 それは私がすでに彼らのサイトにいるということです。 私はすでに彼らのサイトでの買い物を考えています。 したがって、このポップオーバーは、私の邪魔をする以外に何も達成していません。 少なくとも、ニュースレターを購読したり、「無料の」電子書籍をダウンロードしたりするように私に懇願するような類似のオーバーレイのXNUMXつではありません。

ユーザーにいくつかの非常に重要な情報を提供する場合を除いて、これらのものを絶対に使用しないでください。 その例としては、ブラウザで要求したゲームのプレイ方法や、セキュリティまたはプライバシーの警告メッセージなどがあります。

それは主に常識の問題です(これがおそらくマーケティング担当者が失敗する理由です)

本当に明白なことは、自分だけにメリットがあるWebで何かをするとき、ユーザーに利益をもたらさず、何らかの形でユーザーに不便をかけるか、プライバシーを侵害するか、または実際に彼らにお金をかけることです(自動再生の場合のように)ビデオと無限スクロールWebサイト)、ユーザーはそれを再送します。 たぶんすべてのユーザーではないかもしれませんが、さらに多くの人に影響を与えるには、声に出て活動する多数派の十分な数です。

ウェブサイトにこれらの設計上の欠陥がある場合は、これらの欠陥を修正するために直ちに行動を起こす必要があります。 彼らはあなたの公開イメージを傷つけ、ユーザーをあなたのサイトから遠ざける可能性があります。

ヘッダー画像提供 ダン・ドラゴミール

ボグダン・ランセア

ボグダンはインスパイアードマグの創設メンバーであり、この期間でほぼ6年の経験を積んでいます。 余暇には、クラシック音楽を学び、視覚芸術を探索するのが好きです。 彼はフィクシーにもかなり夢中です。 彼はすでに5を所有しています。