黑暗模式：揭開網路的陰暗面

我們喜歡網路。如果不是蒂姆·伯納斯·李爵士的驚人發明，我們所有人都不得不尋找不同的職業！儘管我們充滿熱情，但網路可能是一個令人不快的地方。

嘗試免費演示

深色圖案可能是無意的。營銷人員或開發人員可能認為他們在做正確的事情，但沒有意識到他們實施的功能的問題和缺點。最糟糕的黑暗模式是故意的。頁面會誘使您做一些您不打算做的事情，因為 UI 或措辭會操縱您的操作。用戶對最可疑的技術越來越聰明，但某個地方的某個人將無法發現他們已被欺騙，直到為時已晚。

如果使用得當，網路可以節省時間、旅行和能源。另一方面，深色模式會浪費數百萬的工作時間和千瓦。我們不會羞辱任何特定網站（他們知道自己是誰），但我們會在可能的情況下說明改進和替代選項。

這些是我們的寵兒。

不直觀的用戶界面

這些是您會遇到的最常見的深色圖案。創建出色的用戶體驗需要時間和考慮……而且您可以通過這些突兀的深色圖案很快破壞所有這些努力。

「安裝我們的應用程序！」

某些網站和社交網路會提示您安裝他們的應用程序——通常是在單擊有關新消息或關注者的電子郵件提醒時。該鏈接在帶有兩個按鈕的網頁中打開：

1. 一個巨大的「使用我們的應用程序」按鈕。單擊它會進入 AppStore，您必須在其中批准、下載、安裝，然後啟動該站點的本機應用程序（假設您的手機支持該應用程序）。然後您必須登錄、弄錯密碼、請求重置、打開鏈接、創建新密碼並訪問系統。你可能已經忘記了你為什麼在那裡，所以回到最初的警報並重新開始。
2. 一個微觀的「在移動網路中繼續」鏈接來執行操作。

不，謝謝——我不需要你的應用程序！

也許這個應用程序很出色並且已經花費了數百萬美元，但很少能找到比網站功能更多的應用程序。當然，與網路系統相比，應用程序可以收集更多的個人數據，因此它的宣傳更具侵入性。

盡一切可能推廣應用程序，但在每次交互開始時進行推廣會讓用戶感到厭煩。有些人會安裝該應用程序以停止嘮叨，但其他人會離開。當用戶使用該網站一段時間後，提供該應用程序會更有效嗎？

「你想收到通知嗎？」

一句話：沒有。

有沒有人點擊過「允許」？

時事通訊註冊、基於網路的推送通知、「讓我們聊天」小部件和調查提示可能很有用，但它們的實現普遍很糟糕。

網站通常會在您進行網路搜索後首次訪問時提示您訂閱。那時，您不知道內容是否相關，是否有好處，或者該站點是否是您考慮經常訪問的地方。發現大多數人點擊「不」也就不足為奇了。

提供通知或時事通訊並沒有錯，但最好確保用戶首先與網站互動。或許在文章末尾或在他們訪問過幾次之後顯示一個提示。它不那麼干擾，不那麼分散注意力，並且更有可能成功。

最後，請不要在用戶單擊時事通訊中的鏈接時提示用戶註冊時事通訊！它會比吸引他們更快地趕走他們。

古怪的導航

標題欄和下拉菜單可能很無聊，但人們理解它們。我們不想停止 UI 進化和設計創新，但一些導航控制項很奇怪和不合邏輯。

如果您需要使用「單擊此處」工具提示或其他幫助方法提示用戶，請重新考慮您的設計。好的 UI 不需要解釋。

不必要的 Scroll-Jacking

當頁面滾動時顯示動畫或更新活動菜單項可能是一種引人入勝的體驗。在以下情況下它不太有用：

1. 動畫被過度使用。動畫元素過多會分散觀眾的注意力——突出顯示每個項目意味著沒有任何內容引起用戶的注意。一些專註於重要信息的微妙效果效果更好。
2. 它打破了上下文。滾動不應導致意外操作，例如內容消失、模態對話框、表單提交、重定向到其他頁面等。

動畫也會導致暈車和眩暈，因此請考慮使用 CSS 首選減少運動媒體查詢來禁用效果。

請停止創建無限滾動頁面！相關內容的鏈接很有用，但未經用戶同意自動載入隨機內容會浪費帶寬。很難為任一頁面添加書籤，從而無法在頁腳中找到聯繫方式和其他信息。

不必要的多頁文章

我們都見過「文章」，其中包含一段文本，然後是指向下一頁的鏈接。這些頁面通常是沒有實質性內容的鏈接誘餌——但在您瀏覽大量廣告和頁面印象之前，您不會發現這一點。

要求網路營銷人員停止這種做法是徒勞的，但也許他們會重新考慮開發人員是否教育人們不要屈服於這種廢話！

操縱營銷

網路是世界上最大的市場，有能力銷售各種各樣的實體和數字產品。用戶會一次又一次地返回……除非您選擇採用黑暗模式來促進銷售。

訂閱之爭

取消訂閱通知或時事通訊應該和訂閱一樣簡單，如果不是更簡單的話。要求用戶跳過取消訂閱的障礙會導致沮喪和對網站失去信心。沒有可信的理由要求用戶傳真他們的出生證明原件、三份地址證明和最新的醫療記錄。

變相廣告

許多網站都過度使用廣告，但最糟糕的例子是：

1. 看起來像一個菜單或選項；
2. 假裝是來自原始站點的新聞或信息文章；或者
3. 在有關軟體產品的頁面上顯示 UI 控制項，例如大的「下載」按鈕。

 

下載站點上的廣告，使您遠離實際下載。

網站不能總是確定使用什麼廣告設計，但它們確實控制展示位置。在顯眼位置投放廣告以迷惑人們可能會增加廣告收入，但這些用戶會回來嗎？

自動將產品添加到購物車

查看相關或推薦產品的列表可能很有用。未經用戶同意將它們添加到用戶的購物車是另一回事。有多少人會覺得它有幫助？

• 充其量，一小部分用戶會注意到額外的項目並決定保留它。
• 更大的比例將刪除它。
• 有些人直到交貨時才會注意到，然後投訴並要求退款。

這些活動以犧牲客戶支持、商譽和持續的退貨購買為代價來增加銷售額。處理投訴和退款可以抵消盈利能力的任何短期增長。

隱藏的購物成本

花時間選擇產品、註冊、輸入您的交貨詳細信息並發布您的付款信息以發現價格已高於競爭站點，這並不令人愉快。摘要頁面現在顯示隱藏成本，例如交付、保險、處理和我們希望您不會注意到這些費用。

定價應該清晰而誠實，否則客戶將對電子商務服務失去信心。當送貨成本差異很大時，提示用戶輸入他們的國家或郵政編碼，然後再進行購買。

人工庫存短缺和可用性計時器

了解商品何時有貨是很有用的，但一些電子商務網站會提高可信度。他們提供的信息越多，他們就越不可信：

「立即購買！2 件庫存商品，過去 3 分鐘內購買了 15 件，597 人正在瀏覽此頁面。」

當應用於汽車和假期等數字或高價值物品時，這些高壓策略變得更加可疑。

用戶很快就會意識到，當商品庫存多天時，這些信息毫無價值。當網站的營銷信息不可信時，他們會繼續購買嗎？

選擇退出羞辱

甚至某些大型電子商務公司也沉迷於愚蠢的羞辱技術。他們會提出一個註冊問題，然後是一個大的「同意」按鈕和一個較小的選擇退出鏈接，例如：

• 「不——我不想要無限制的免費送貨。」
• 「不——我不在乎瀕臨滅絕的毛茸茸動物的困境。」
• 「不——我確實想看到這顆星球燃燒起來。」

這個練習有用嗎？也許。但它是否與客戶建立了誠實的關係並增加了對網站的信任？

訂閱時事通訊

想知道我們是如何將流量增加超過 1000% 的嗎？

加入 20,000 多名其他人的行列，他們會收到我們的每周時事通訊，其中包含 WordPress 內幕技巧！

現在訂閱

複雜的 Cookie 取消

歐盟的通用數據保護條例 (GDPR) 要求網站顯示非必要 cookie 和類似跟蹤技術的選擇退出通知。它有缺陷，但立法是善意的，並且是整個歐洲的法律要求。其他國家/地區可能有類似的規定，但通常不那麼嚴格。

大多數用戶會不假思索地選擇加入並繼續前進（這在一定程度上違背了立法的要點）。選擇退出應該同樣容易，但有些網站要求您：

• 在找到選項之前瀏覽行話的頁面/標籤；
• 即使這違反了 GDPR 規則，也要單擊數十個複選框；和
• 等待一分鐘，他們會「保存您的偏好」（為了什麼？）。

它可能會說服一些用戶點擊「全部同意」，儘管其他用戶會放棄該網站或切換到閱讀模式以隱藏 cookie 通知。充其量，讓選擇退出變得困難會給網站留下一些隱藏的印象。在最壞的情況下，這種黑暗模式處於合法性邊緣，可能會導致罰款或增加律師費用。

這個對話一直在繼續……

糟糕的技術

HTML 等技術開箱即用、可訪問且向後兼容。捨棄這些好處需要特別努力。

破壞瀏覽器功能

後退按鈕是 Web 對用戶界面的最大貢獻。它是實用的，任何技術經驗最少的人都可以理解。然而，網站通過打開新窗口/選項卡、使上一頁過期或告訴用戶不要使用瀏覽器控制項來破壞它。

沒有技術原因會破壞瀏覽器功能。試圖繞過這些控制項是一個設計問題，它會使用戶感到困惑並降低 Web 系統的可用性。

其他需要避免的問題：

1. 不要禁用右鍵單擊或長按菜單。
2. 不要禁用複製或添加更多「有用」的文本。
3. 不要因未能更新 URL 而破壞單頁應用程序中的書籤。

但所有這些問題中最糟糕的是我們的列表中的下一個。

禁用密碼欄位粘貼

出於任何原因禁用粘貼是不必要的。在密碼欄位上禁用粘貼是令人討厭的，但您會在大型站點上遇到此限制 – 他們應該更清楚。我見過主要的國際銀行使用它。

這種做法可能是出於可疑的安全原因而實施的。如果用戶不能粘貼，他們就不能從別處重複使用密碼是理所當然的。不幸的是，它還阻止人們使用密碼管理器應用程序。不再可能生成高度安全的、長的、隨機的字元串，而這些字元串是不切實際的。

此外，開發人員可以通過一些 DevTool 修補來禁用粘貼限制。其他人會掙扎，他們更有可能使用弱密碼。永遠不要禁用粘貼 – 這對您來說是更少的工作並提高了系統安全性。

與我們世界一流的支持團隊一起體驗卓越的 WordPress 託管支持！與支持我們財富 500 強客戶的同一團隊聊天。查看我們的計劃

愚蠢的密碼限制

「您的密碼必須在 8 到 12 個字元之間，並且至少需要一個大寫字元、一個數字和一個符號——但請不要使用『』」/或;」

沒有充分的理由實施嚴格的密碼限制。問你自己：

1. 系統是否將密碼作為純文本存儲在資料庫中而不是散列？
2. 安全專家是否建議阻止人們使用簡單的密碼，例如 password、qwerty 或 123456？這是真的，但它也可以防止人們使用更複雜的密碼，並為暴力破解提供了一個方便的模板。

單一規則強制執行強密碼：長的最小長度。每個額外的字元都會成倍地增加複雜性和破解時間。

移動內容跳轉

在智能手機上閱讀內容可能是一種令人沮喪的體驗。當內容跳出屏幕時，您會全神貫注於文章中，而您會失去自己的位置。然後你花了幾秒鐘瘋狂地上下滾動。或者更糟的是，您會在鏈接或按鈕移動的那一刻單擊它，並且會發生意外的操作。一些讀者會失去動力，放棄，在你將他們轉化為客戶之前離開。

當圖像或 iframe（通常是廣告）載入到視口滾動點上方時，就會發生內容跳轉。載入內容後，瀏覽器可以確定其尺寸並將其放置在頁面上。因此，一個 500 像素高度的圖像（以全尺寸顯示）會將內容向下推相同的量。

Google 的累積布局偏移 (CLS) 指標衡量內容跳躍並相應地懲罰網站。這是一個複雜的問題，但現在有幾種技術解決方案可用：

• 將寬度和高度屬性添加到 HTML img 和 iframe 元素或使用 CSS 縱橫比屬性在資源載入之前在頁面上保留空間。
• 為包含載入速度較慢的資產（如廣告、圖像和社交媒體小部件）的容器元素設置尺寸。
• 儘早請求更大的圖像，並考慮在您的 HTML 頭中使用預載入鏈接。
• 優化 Web 字體使用並使用類似大小的後備來最小化布局變化。
• 避免向頁面頂部插入元素，除非它是在用戶操作（例如單擊）之後觸發的 DOM 更新。
• 使用 CSS 包含來優化內容塊的呈現。可以定義不會影響其他元素的大小或位置的元素。

當社交登錄很糟糕時

OAuth 等技術允許用戶使用其他帳戶（如 Google、Facebook、Twitter、LinkedIn 或 Github）在站點上快速註冊。實施得很好，這是一個實用的選擇，它提供了一個更流暢的註冊過程，節省了時間，並帶來了更高的轉化率。

如果實施不當，網站隨後會要求您輸入電子郵件、個人詳細信息，甚至是「作為他們的記錄」的密碼。

並非所有提供商都會傳遞用戶信息，因此如果您的站點需要這些詳細信息才能正常運行，請避免使用 OAuth。OAuth 不應該成為減慢註冊過程的不必要步驟。

網路性能不佳

根據 HTTP Archive，在桌面設備上載入網頁平均需要 7 秒，在移動設備上載入需要 20 秒。單頁視圖發出 70 個 HTTP 請求，下載超過 2MB 的數據，並向大氣中排放 1.3 克 CO²（請參閱網站碳計算器）。這是一個平均值——許多網站更糟。

沒有人打算製作一個緩慢的網站，但添加功能通常比性能改進更重要。鑒於可以創建 13Kb 的可玩 Quake 克隆，您必須質疑為什麼「關於我們」頁面上的兩段營銷華夫餅需要 154 倍的下載！

解決性能問題需要多種技術的組合，但您只需要記住一個關鍵點：不要發送太多東西！

偷偷摸摸的社交媒體小工具

諸如「喜歡」按鈕之類的社交媒體小部件看起來很無辜，但是：

1. 每一個都會增加數百 KB 的 JavaScript 代碼，這會影響頁面性能。
2. 該代碼存在安全風險，因為它以與站點的 JavaScript 相同的許可權運行。
3. 即使在未激活時，小部件也會實現用戶跟蹤。這可能會導致某些地區的法律問題。
4. 幾乎沒有人使用它們：您會很幸運地看到 1% 的用戶參與度。

小部件也是不必要的。大多數社交媒體網站都提供標準鏈接，這些鏈接可以保留共享，而不會對性能、安全或隱私造成任何風險，例如

• 電子郵件：mailto:?subject=黑暗模式：揭開網路的陰暗面&body=[url]
• 臉書：https://www.facebook.com/sharer.php?u=[url]
• Twitter：https://twitter.com/share?url=[url]&text=Dark Patterns：揭開網路的陰暗面
• LinkedIn：https://www.linkedin.com/shareArticle?url=[url]&title=黑暗模式：揭開網路的陰暗面
• Reddit：https://reddit.com/submit?url=[url]&title=黑暗模式：揭開網路的陰暗面

其中 [url] 是當前頁面的 URL，而 Dark Patterns: Unraveling the Web’s Shady Side 是主要標題。標準 <a> 鏈接工作正常，但如果您希望它們的行為與標準按鈕相同，您可以增強它以在彈出窗口中打開頁面。

驗證碼

CAPTCHA 是完全自動化的公共圖靈測試的縮寫，用於區分計算機和人類。它有助於防止機器人或其他機器訪問網路系統。您經常會被要求輸入難以辨認的圖像中顯示的文本或單擊包含自行車的方塊。（裝在汽車上的自行車算不算？那輛三輪車呢？那堵牆後面有自行車嗎！？）

驗證碼要求您識別公交車。

CAPTCHA 存在三個基本問題：

1. 對於具有完美視力的非殘疾人來說，它們是故意困難的。那些有視力或其他障礙的人應該如何應對？
2. 隨著機器人和人工智慧技術的改進，它們必須變得更加複雜。
3. 他們將訪問安全的責任放在用戶身上——而不是網站所有者或開發者，即主要受益者。

CAPTCHA 在大多數網站上都是矯枉過正的。您可以考慮減少人工操作的 CAPTCHA 替代選項：

• 當機器人添加數據時，隱藏的蜜罐欄位會阻止表單提交。
• 檢查輸入或按鍵等鍵盤事件是否正確觸發。
• 檢查完成和提交表單所需的時間——機器人活動通常是即時的。
• 創建一個兩階段提交過程，要求用戶在提交前確認他們的數據或其他問題。

這些將阻止大多數機器人。可以繞過任何技術，但需要針對您的站點進行額外的開發工作。當有數千個其他站點存在已知漏洞時，很少有機器人開發人員會打擾。

概括

網路是個好地方，但一些可疑的做法可能會破壞這種看法。當然，你可以在任何地方被騙，但網路允許犯罪者以很少的成本或努力接觸到成千上萬的人。當數十億的大企業肆無忌憚地使用黑暗模式時，這是徹頭徹尾的可恥！

網站使用深色圖案是因為它們有效。但這是短期的想法。訪客總是對邪惡的技術變得明智，並且可能永遠不會回來。

做正確的事，建立對您品牌的信任，這樣您就可以留住客戶，而不必訴諸黑暗模式。

對您遇到的黑暗模式有任何其他想法嗎？請在下面的評論部分分享它們！

通過以下方式節省時間、成本並最大限度地提高站點性能：

• 來自 WordPress 託管專家的即時幫助，24/7。
• Cloudflare 企業集成。
• 全球受眾覆蓋全球 28 個數據中心。
• 使用我們內置的應用程序性能監控進行優化。

所有這些以及更多，都在一個沒有長期合同、協助遷移和 30 天退款保證的計劃中。查看我們的計劃或與銷售人員交談以找到適合您的計劃。