ダークパターン:Webの日陰の側面を解明する
公開: 2021-11-17私たちはウェブが大好きです。 ティム・バーナーズ・リー卿の驚くべき発明がなかったら、私たちは皆、さまざまなキャリアを見つけなければならなかったでしょう! しかし、私たちの情熱にもかかわらず、Webは不快な場所になる可能性があります。
暗いパターンは意図しない場合があります。 マーケティング担当者や開発者は、自分たちが正しいことをしていると思っていたかもしれませんが、実装した機能の問題と欠点を理解していませんでした。 最悪のダークパターンは意図的なものです。 UIまたは文言がアクションを操作するため、ページはあなたをだまして意図しないことをさせます。 ユーザーは最も疑わしいテクニックにますます賢明になっていますが、どこかで誰かが手遅れになるまで自分がだまされていることに気付かないでしょう。
Webを上手に使用すると、時間、移動、およびエネルギーを節約できます。 反対に、ダークパターンは数百万時間とキロワットを浪費します。 特定のサイト(サイトが誰であるかを知っている)を恥じることはありませんが、可能な場合は改善点と代替オプションを説明します。
これらは私たちのペットのおしっこです。
直感的でないユーザーインターフェイス
これらは、遭遇する最も一般的なダークパターンです。 優れたユーザーエクスペリエンスを作成するには、時間と配慮が必要です。これらの目障りなダークパターンを使用すると、すべての作業をすばやく台無しにすることができます。
「アプリをインストールしてください!」
一部のサイトやソーシャルネットワークでは、アプリのインストールを求めるメッセージが表示されます。通常は、新しいメッセージやフォロワーに関するメールアラートをクリックしたときに表示されます。 リンクは、2つのボタンがあるWebページで開きます。
- 巨大な「アプリを使う」ボタン。 それをクリックすると、AppStoreが表示されます。ここで、サイトのネイティブアプリを承認、ダウンロード、インストールしてから起動する必要があります(お使いの携帯電話でサポートされていることを前提としています)。 次に、ログインし、パスワードを間違え、リセットを要求し、リンクを開き、新しいパスワードを作成して、システムにアクセスする必要があります。 なぜそこにいたのかを忘れている可能性があるので、元のアラートに戻ってやり直してください。
- アクションを実行するための微視的な「モバイルWebで続行」リンク。

おそらく、このアプリは素晴らしく、何百万ドルも費やしてきましたが、ウェブサイトよりも多くの機能を備えたアプリを見つけることはめったにありません。 もちろん、アプリはWebシステムよりも多くの個人データを収集できるため、より煩わしい宣伝が行われます。
必ずアプリを宣伝してください。ただし、すべてのやり取りの開始時にアプリを宣伝すると、ユーザーは煩わしくなります。 しつこいことをやめるためにアプリをインストールする人もいれば、去る人もいます。 ユーザーがサイトをしばらく使用しているときにアプリを提供する方が効果的でしょうか?
「通知を受け取りますか?」
一言で言えば:いいえ。

ニュースレターの登録、Webベースのプッシュ通知、「チャットしましょう」ウィジェット、および調査プロンプトは役立つ可能性がありますが、それらの実装は普遍的にひどいものです。
多くの場合、サイトでは、Web検索に続いて初めてアクセスした瞬間にサブスクライブするように求められます。 その時点では、コンテンツが関連性があるかどうか、それが何か良いかどうか、またはサイトが頻繁にアクセスすることを検討する場所にあるかどうかはわかりません。 ほとんどの人が「いいえ」をクリックするのを発見するのは当然です。
通知やニュースレターを提供することに何の問題もありませんが、ユーザーが最初にサイトに関与していることを確認するのが最善です。 おそらく、記事の最後または数回訪問した後にプロンプトを表示します。 邪魔にならず、気を散らすことが少なく、成功する可能性が高くなります。
最後に、ユーザーがニュースレターのリンクをクリックしたときに、ニュースレターにサインアップするようにユーザーに促さないでください。 それは彼らを引き込むよりも速く彼らを追い払うでしょう。
風変わりなナビゲーション
ヘッダーバーとドロップダウンメニューは退屈かもしれませんが、人々はそれらを理解しています。 UIの進化とデザインの独創性を止めたくはありませんが、一部のナビゲーションコントロールは奇妙で非論理的です。
「ここをクリック」ツールチップまたはその他のヘルプ方法でユーザーにプロンプトを表示する必要がある場合は、設計を再検討してください。 優れたUIには説明は必要ありません。
不必要なスクロールジャッキング
ページのスクロール時にアニメーションを表示したり、アクティブなメニュー項目を更新したりすることは、魅力的な体験になる可能性があります。 次の場合はあまり役に立ちません。
- アニメーションは酷使されています。 アニメーション化する要素が多すぎると、視聴者の気が散ります。すべてのアイテムを強調表示すると、ユーザーの注意を引くものが何もないことを意味します。 重要なメッセージに焦点を当てるためのいくつかの微妙な効果がより効果的に機能します。
- それは文脈を壊します。 スクロールによって、コンテンツが消えたり、モーダルダイアログが表示されたり、フォームが送信されたり、他のページにリダイレクトされたりするなど、予期しないアクションが発生することはありません。
アニメーションは乗り物酔いやめまいを引き起こす可能性もあるため、CSSのprefers-reduced-motion
メディアクエリを使用して効果を無効にすることを検討してください。
無限スクロールページの作成はやめてください。 関連コンテンツへのリンクは便利ですが、ユーザーの同意なしにランダムコンテンツを自動ロードすると、帯域幅が無駄になります。 どちらのページもブックマークしにくくなり、ページフッターの連絡先やその他の情報にアクセスできなくなります。
不要な複数ページの記事
私たちは皆、テキストの段落とそれに続く次のページへのリンクを含む「記事」を見てきました。 これらのページは通常、実質的なコンテンツのないリンクベイトですが、多数の広告とページのインプレッションをくぐり抜けるまで、それを発見することはできません。
Webマーケターにこの慣行をやめるように頼むのは無駄ですが、開発者がこのナンセンスに屈しないように人々を教育するかどうかを再考するかもしれません。
操作的マーケティング
ウェブは世界最大の市場であり、無限の種類の物理的およびデジタル製品を販売する能力があります。 売り上げを伸ばすためにダークパターンに頼ることを選択しない限り、ユーザーは何度も戻ってきます。
サブスクリプションの苦労
通知またはニュースレターの購読解除は、単純ではないにしても、購読と同じくらい簡単である必要があります。 サブスクリプション解除のハードルをジャンプするようにユーザーに求めると、サイトへの不満と信頼の喪失につながります。 ユーザーに元の出生証明書、3つの住所証明、および最新の医療記録をファックスで送信するように要求する信頼できる理由はありません。
偽装広告
広告は多くのサイトで多用されていますが、最悪の例は次のとおりです。
- メニューまたはオプションのように見えます。
- 元のサイトからのニュースや情報記事のふりをします。 また
- ソフトウェア製品に関するページに大きな「ダウンロード」ボタンなどのUIコントロールを表示します。

サイトは、使用されている広告デザインを常に判断できるとは限りませんが、配置を制御します。 人々を混乱させるために目立つ場所に広告を配置すると、広告収入が増える可能性がありますが、それらのユーザーは戻ってきますか?
ショッピングカートへの商品の自動追加
関連製品または推奨製品のリストを確認すると便利です。 同意なしにユーザーのカートに追加することは別の問題です。 何人の人がそれが役立つと思いますか?
- せいぜい、ごく一部のユーザーが余分なアイテムに気づき、それを保持することを決定します。
- 比率を大きくすると削除されます。
- 一部の人は配達まで気付かず、その後不平を言い、払い戻しを要求します。
これらの活動は、顧客サポート、のれん、および継続的な返品購入を犠牲にして売上を増加させます。 苦情や払い戻しに対処することで、収益性の短期的な増加を相殺することができます。
隠されたショッピングコスト
製品の選択、サインアップ、配信の詳細の入力、支払い情報の投稿に時間を費やして、価格が競合サイトよりも高くなっていることを発見するのは楽しいことではありません。 要約ページには、配達、保険、取り扱いなどの隠れた費用が表示されるようになりました。この料金については、気付かないことを願っています。
価格は明確で正直でなければなりません。さもないと、顧客はeコマースサービスへの信頼を失うことになります。 配送料が大幅に異なる場合は、購入を確定する前に、ユーザーに国または郵便番号の入力を求めてください。
人工在庫不足と可用性タイマー
アイテムの在庫があるかどうかを知ることは有用ですが、一部のeコマースサイトは信頼性を高めます。 彼らが提供する情報が多ければ多いほど、彼らは信じられなくなります。
"今買う! 在庫が2つ、過去3分間に15が購入され、597人がこのページを閲覧しています。」
これらの高圧戦術は、車や休暇などのデジタルまたは高価値のアイテムに適用されると、より疑わしくなります。
アイテムが何日も在庫がある場合、ユーザーはすぐにこれらのメッセージが無価値であることに気付きます。 サイトのマーケティングメッセージが信頼できない場合でも、購入を継続しますか?
オプトアウトの羞恥心
特定の大規模なeコマース企業でさえ、愚かな恥辱のテクニックにふけっています。 サインアップの質問に続いて、大きな「同意する」ボタンと、次のような小さなオプトアウトリンクが表示されます。
- 「いいえ—無制限の無料配達は望んでいません。」
- 「いいえ—絶滅危惧種のふわふわした動物の窮状は気にしません。」
- 「いいえ—私は惑星が燃えるのを見たいです。」
この練習は機能しますか? 多分。 しかし、それは顧客との誠実な関係を確立し、サイトへの信頼を高めますか?
複雑なCookieのキャンセル
EUの一般データ保護規則(GDPR)では、サイトは必須ではないCookieや同様の追跡技術のオプトアウト通知を表示する必要があります。 欠陥がありますが、法律は意味のあるものであり、ヨーロッパ全体で法的要件となっています。 他の国でも同様の規則がありますが、通常はそれほど厳格ではありません。
ほとんどのユーザーはオプトインして、考えずに先に進みます(これは法律の要点を部分的に無効にします)。 オプトアウトも同様に簡単ですが、一部のサイトでは次のことを行う必要があります。
- オプションを見つける前に、専門用語のページ/タブをくぐり抜けます。
- GDPR規則に違反している場合でも、数十のチェックボックスをクリックします。 と
- 彼らが「あなたの好みを保存する」間、最大1分待ちます(何に?)。
一部のユーザーは「全員に同意」を押すように説得される可能性がありますが、他のユーザーはサイトを放棄するか、Cookieの通知を非表示にするために読み取りモードに切り替えます。 せいぜい、オプトアウトを難しくすることは、サイトが何かを隠すものがあるという印象を与えます。 最悪の場合、この暗いパターンは合法性の境界にあり、罰金や弁護士費用の増加につながる可能性があります。

ひどいテクノロジー
HTMLなどのテクノロジは、すぐに使用でき、アクセス可能で、下位互換性があります。 これらのメリットを捨てるには特別な努力が必要です。
ブラウザの機能を壊す
戻るボタンは、ユーザーインターフェイスに対するWebの最大の貢献でした。 それは実用的であり、最小限の技術的経験を持つ人なら誰でも理解できます。 それでも、サイトは新しいウィンドウ/タブを開いたり、前のページを期限切れにしたり、ユーザーにブラウザーコントロールを使用しないように指示したりすることでそれを破っています。
ブラウザの機能を損なう技術的な理由はありません。 コントロールを回避しようとすることは、ユーザーを混乱させ、Webシステムを使いにくくする設計上の問題です。
避けるべきその他の問題:
- 右クリックメニューまたはロングタップメニューを無効にしないでください。
- コピーを無効にしたり、さらに「有用な」テキストを追加したりしないでください。
- URLの更新に失敗して、シングルページアプリのブックマークを壊さないでください。
しかし、これらすべての問題の中で最悪のものは、次のリストにあります。
パスワードフィールドへの貼り付けを無効にする
何らかの理由でペーストを無効にする必要はありません。 パスワードフィールドへの貼り付けを無効にするのは不快ですが、大規模なサイトではこの制限が発生します。彼らはもっとよく知っているはずです。 私はそれが主要な国際銀行によって採用されているのを見てきました。
この方法は、おそらくセキュリティ上の理由から実装されています。 ユーザーが貼り付けることができない場合、他の場所からのパスワードを再利用できないのは当然のことです。 残念ながら、それはまた人々がパスワードマネージャーアプリケーションを使用することを妨げます。 入力するのが実用的でない、安全性が高く、長く、ランダムな文字列を生成することはできなくなりました。
さらに、開発者はDevToolをいじくり回して貼り付け制限を無効にすることができます。 他の人は苦労し、弱いパスワードを使用する可能性が高くなります。 貼り付けを無効にしないでください。作業が少なくなり、システムのセキュリティが向上します。
ワールドクラスのサポートチームで、卓越したWordPressホスティングサポートを体験してください! Fortune500クライアントを支援しているのと同じチームとチャットします。 私たちの計画をチェックしてください
愚かなパスワードの制限
「パスワードは8〜12文字である必要があり、少なくとも1つの大文字、数字、記号が必要です。ただし、「」」/「/」または「;」は使用しないでください。
厳格なパスワード制限を実装する正当な理由はありません。 自問してみてください:
- システムはパスワードをハッシュするのではなく、プレーンテキストとしてデータベースに保存していますか?
- セキュリティの専門家は、 password 、 qwerty 、 123456などの簡単なパスワードを使用しないようにすることを提案しましたか? これは真実ですが、人々がより複雑なパスワードを使用することを防ぎ、ブルートフォースクラッキングのための便利なテンプレートを提供します。
単一のルールが強力なパスワードを適用します:長い最小長。 文字を追加するたびに、複雑さとクラッキング時間が指数関数的に増加します。
モバイルコンテンツジャンプ
スマートフォンでコンテンツを読むことは、苛立たしい経験になる可能性があります。 コンテンツが画面外にジャンプすると、記事に夢中になり、場所を失います。 次に、必死に上下にスクロールするのに数秒かかります。 さらに悪いことに、リンクまたはボタンが移動した瞬間にクリックすると、予期しないアクションが発生します。 一部の読者は、勢いを失い、諦め、顧客に転向する前に立ち去ります。
コンテンツのジャンプは、画像またはiframe(通常は広告)がビューポートのスクロールポイントの上に読み込まれるときに発生します。 コンテンツが読み込まれると、ブラウザはそのサイズを決定してページに配置できます。 したがって、500pxの高さの画像(フルサイズで表示)は、コンテンツを同じ量だけ押し下げます。
Googleの累積レイアウトシフト(CLS)メトリックは、コンテンツジャンプを測定し、それに応じてサイトにペナルティを課します。 これは複雑な問題でしたが、現在、いくつかの技術的な解決策が利用可能です。
- 幅と高さの属性を
img
およびiframe
要素に追加するか、CSSaspect-ratio
プロパティを使用してアセットが読み込まれる前にページ上のスペースを予約します。 - 広告、画像、ソーシャルメディアウィジェットなど、読み込みが遅いアセットを囲むコンテナ要素のサイズを設定します。
- できるだけ早く大きな画像をリクエストし、HTML
head
でプリロードリンクを使用することを検討してください。 - Webフォントの使用を最適化し、同様のサイズのフォールバックを使用して、レイアウトのずれを最小限に抑えます。
- クリックなどのユーザーアクションの後にトリガーされるDOM更新でない限り、ページの上部に要素を挿入することは避けてください。
- CSS包含を使用して、コンテンツブロックのレンダリングを最適化します。 他の人のサイズや位置に影響を与えない要素を定義できる場合があります。
ソーシャルサインオンが失敗したとき
OAuthなどのテクノロジーを使用すると、ユーザーはGoogle、Facebook、Twitter、LinkedIn、Githubなどの別のアカウントを使用してサイトにすばやく登録できます。 うまく実装されていれば、よりスムーズなサインアッププロセスを提供し、時間を節約し、より高いコンバージョンにつながる実用的なオプションです。
実装が不十分な場合、サイトはその後、電子メール、個人情報、さらには「記録用」のパスワードの入力を要求します。
すべてのプロバイダーがユーザー情報を渡すわけではないため、サイトでこれらの詳細を機能させる必要がある場合は、OAuthを使用しないでください。 OAuthは、登録プロセスを遅くする不要なステップになることはありません。
Webパフォーマンスが低い
HTTPアーカイブによると、平均的なWebページの読み込みにはデスクトップデバイスで7秒、モバイルで20秒かかります。 1つのページビューで70のHTTPリクエストが作成され、2MBを超えるデータがダウンロードされ、1.3gのCO²が大気中に放出されます(WebサイトのCarbon Calculatorを参照)。 これは平均です—多くのサイトはもっと悪いです。
遅いサイトを作ることを始める人は誰もいませんが、機能を追加することはしばしばパフォーマンスの改善を上回ります。 13Kbで再生可能なQuakeクローンを作成できることを考えると、「About us」ページのマーケティングワッフルの2つの段落で、154倍のダウンロードが必要な理由を疑問視する必要があります。
パフォーマンスに対処するには、さまざまな手法を組み合わせる必要がありますが、重要なポイントを1つだけ覚えておく必要があります。それは、それほど多くのものを送信しないことです。
卑劣なソーシャルメディアウィジェット
「いいね」ボタンなどのソーシャルメディアウィジェットは無実に見えますが、次のようになります。
- それぞれが数百キロバイトのJavaScriptコードを追加し、ページのパフォーマンスに影響を与えます。
- このコードは、サイトのJavaScriptと同じ権限で実行されるため、セキュリティ上のリスクがあります。
- ウィジェットは、アクティブ化されていない場合でもユーザー追跡を実装します。 これは、一部の地域で法的な問題につながる可能性があります。
- ほとんど誰もそれらを使用していません。1%のユーザーエンゲージメントを見ることができれば幸いです。
ウィジェットも不要です。 ほとんどのソーシャルメディアサイトは、パフォーマンス、セキュリティ、またはプライバシーを危険にさらすことなく共有を維持する標準リンクを提供します。
- メール:
mailto:?subject=[title]&body=[url]
- Facebook:
https://www.facebook.com/sharer.php?u=[url]
- Twitter:
https://twitter.com/share?url=[url]&text=[title]
- LinkedIn:
https://www.linkedin.com/shareArticle?url=[url]&title=[title]
- Reddit:
https://reddit.com/submit?url=[url]&title=[title]
ここで、 [url]
は現在のページのURLであり、 [title]
はメインの見出しです。 標準の<a>
リンクは正常に機能しますが、標準のボタンと同じように動作させる場合は、ポップアップウィンドウでページを開くように拡張できます。
CAPTCHA
CAPTCHAは、ComputersとHumansを区別するためのCompletely AutomatedPublicTuringテストの略です。 ボットや他のマシンがWebシステムにアクセスするのを防ぐのに役立ちます。 判読できない画像に表示されているテキストを入力するか、自転車が入っている四角をクリックするように求められることがよくあります。 (車に取り付けられた自転車は重要ですか?その三輪車はどうですか?その壁の後ろに自転車はありますか!?)

CAPTCHAには3つの基本的な問題があります。
- それらは、完全な視力を持つ障害のない人間にとって意図的に困難です。 視覚障害やその他の障害のある人はどのように対処することが期待されていますか?
- ボットとAI技術が向上するにつれて、それらはより複雑になる必要があります。
- 彼らは、主な受益者であるサイトの所有者や開発者ではなく、ユーザーにアクセスセキュリティの責任を負わせています。
CAPTCHAは、ほとんどのWebサイトでやり過ぎです。 人的労力の少ないCAPTCHAの代替オプションを検討できます。
- 非表示のハニーポットフィールドは、ボットがデータを追加するときにフォームの送信をブロックします。
-
input
やkeydown
などのキーボードイベントが適切にトリガーされることを確認します。 - フォームに記入して送信するのにかかる時間を確認してください。ボットのアクティビティは瞬時に発生することがよくあります。
- 送信する前にデータまたは追加の質問を確認するようにユーザーに求める2段階の送信プロセスを作成します。
これらはほとんどのボットを停止します。 どの手法もバイパスすることは可能ですが、サイトに固有の追加の開発作業が必要になります。 既知の脆弱性を持つ他のサイトが何千もある場合、ボット開発者はほとんど気になりません。
概要
ウェブは素晴らしい場所ですが、いくつかの疑わしい慣行はその認識を台無しにする可能性があります。 もちろん、どこにでも閉じ込めることができますが、Webを使用すると、加害者はほとんど費用や労力をかけずに何千人もの人々に連絡を取ることができます。 そして、数十億の大企業がダークパターンを無謀に使用する場合、それはまったく恥ずべきことです。
サイトは機能するため、ダークパターンを使用します。 しかし、それは短期的な考え方です。 訪問者は常に悪意のあるテクニックに賢くなり、二度と戻ってこないかもしれません。
正しいことを行い、ブランドへの信頼を築くと、ダークパターンに頼ることなく顧客を維持できます。
あなたが遭遇したダークパターンについて他に何か考えがありますか? 以下のコメントセクションでそれらを共有してください!