サイトを傷つける可能性のある回避可能な設計上の欠陥-eコマースプラットフォーム

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

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

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

「見栄え」や他の人がしていることをコピーすることについての懸念は、高速、低帯域幅、優れたユーザビリティなどの実際的な考慮事項よりも優先されます。あなたがあなたのサイトがどのように見えるべきかについて決定を下す必要があるクライアントの一人であるなら、この記事はあなたのためです。また、他の同様のサイトと同じようにではなく、クライアントと交渉してWebサイトを本来の姿に合わせる勇気を持っているデザイナーもいます。未来がもう到来する時が来ました。

1.コントラストが悪い

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

上記は、 Twitterのヘルプページ。デザインの背後にある哲学は、より重要な部分であるということのようですformatイオンが保持されると、ページ上でより暗く表示されます。したがって、このページの 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を広範囲に使用しています。それで彼らにとって十分なものであるなら、なぜあなたにとって十分ではないのでしょうか？

一つには、Flashは膨大なリソースを大量に消費します。また、脆弱性に満ちており、トロイの木馬の配信メカニズムとして悪意のあるハッカーの標的にされており、永続的なFlash Cookieなどが組み込まれているため、本質的にプライバシーリスクもあります。wise ローカル共有オブジェクトとして知られています。これらの Cookie はブラウザのセキュリティ設定をバイパスし、さらに多くの情報を含む可能性があります。format通常のクッキーよりもイオン。さらに悪いことに、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.迷惑なオーバーレイ

「InternationalBashTripAdvisor Day」（まだ）ではありませんが、不快なWebページの動作の例を惜しみなく提供しているので、これを無視するのは本当に贈り物の馬のようです。それで、私がそのポップアンダースクリーンショットを設定していたときにトリップアドバイザーが少し前に示したものは次のとおりです。

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

非常に重要なものを提供する場合を除いて、これらのものを絶対に使用しないでください。formatユーザーへのイオン。その例としては、ブラウザでリクエストしたゲームのプレイ方法の説明や、セキュリティやプライバシーに関する警告メッセージが挙げられます。

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

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

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

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