黑暗模式：揭開網絡陰暗面

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

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

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

這些是我們的煩惱。

不直觀的用戶界面

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

“安裝我們的應用程序！”

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

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

也許該應用程序很出色，並且已經花費了數百萬美元，但很難找到比網站功能更多的應用程序。 當然，應用程序可以收集比網絡系統更多的個人數據，因此它會獲得更具侵入性的推廣。

以各種方式推廣應用程序，但在每次交互開始時都這樣做會惹惱用戶。 有些人會安裝該應用程序以停止嘮叨，但其他人會離開。 當用戶使用該網站一段時間後，提供該應用程序會更有效嗎？

“你想接收通知嗎？”

一句話：沒有。

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

網站通常會在您在網絡搜索後第一次訪問時提示您訂閱。 那時，您不知道內容是否相關，是否有好處，或者該站點是否是您考慮經常訪問的地方。 發現大多數人點擊“否”並不奇怪。

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

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

古怪的導航

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

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

不必要的滾動劫持

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

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

動畫也可能導致暈動病和眩暈，因此請考慮使用 CSS prefers-reduced-motion媒體查詢來禁用效果。

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

不必要的多頁文章

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

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

操縱營銷

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

訂閱鬥爭

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

偽裝廣告

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

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

網站無法始終確定使用何種廣告設計，但它們確實控制了展示位置。 在顯眼位置放置廣告迷惑人們可能會增加廣告收入，但這些用戶會回來嗎？

自動將產品添加到購物車

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

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

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

隱藏的購物成本

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

定價應該清晰和誠實，否則客戶將對電子商務服務失去信心。 當交付成本差異很大時，提示用戶在承諾購買之前輸入他們的國家或郵政編碼。

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

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

“立即購買！ 有 2 件商品，過去 3 分鐘內購買了 15 件，有 597 人正在查看此頁面。”

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

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

選擇退出羞辱

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

• “不——我不想要無限制的免費送貨。”
• “不——我不在乎瀕臨滅絕的毛茸茸動物的困境。”
• “不——我確實想看到地球燃燒。”

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

訂閱時事通訊

想知道我們是如何將流量提高到 1000% 以上的嗎？

加入 20,000 多人的行列，他們會通過 WordPress 內幕技巧獲得我們的每週時事通訊！

現在訂閱

複雜的 Cookie 取消

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

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

• 在找到選項之前瀏覽行話的頁面/標籤；
• 點擊幾十個複選框，即使這違反了 GDPR 規則； 和
• 等待他們“保存您的偏好”（保存到什麼？）。

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

可怕的技術

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

破壞瀏覽器功能

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

沒有技術原因會破壞瀏覽器功能。 試圖規避這些控制是一個設計問題，它會混淆用戶並降低 Web 系統的可用性。

其他需要避免的問題：

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

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

禁用密碼字段粘貼

出於任何原因禁用粘貼是不必要的。 禁用密碼字段上的粘貼是令人討厭的，但您會在大型網站上遇到此限制 - 他們應該更清楚。 我已經看到它被主要的國際銀行所採用。

這種做法可能是出於可疑的安全原因而實施的。 如果用戶不能粘貼，那麼他們就不能重用其他地方的密碼。 不幸的是，它還阻止人們使用密碼管理器應用程序。 不再可能生成難以鍵入的高度安全、長而隨機的字符串。

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

愚蠢的密碼限制

“您的密碼必須介於 8 到 12 個字符之間，並且至少需要一個大寫字符、一個數字和一個符號 - 但請不要使用 ` ' ” / \ 或 ;”

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

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

單一規則強制使用強密碼：最小長度較長。 每增加一個字符都會成倍增加複雜性和破解時間。

移動內容跳轉

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

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

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

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

當社交登錄很糟糕時

OAuth 等技術允許用戶使用 Google、Facebook、Twitter、LinkedIn 或 Github 等其他帳戶在網站上快速註冊。 實施得當，這是一個實用的選項，可提供更流暢的註冊流程、節省時間並帶來更高的轉化率。

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

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

網絡性能不佳

根據 HTTP 存檔，在桌面設備上加載平均網頁需要 7 秒，在移動設備上加載需要 20 秒。 單個頁面瀏覽會發出 70 個 HTTP 請求，下載超過 2MB 的數據，並向大氣排放 1.3 克二氧化碳（請參閱網站碳計算器）。 這是一個平均值——許多網站的情況更糟。

沒有人打算製作一個緩慢的網站，但添加功能通常會超過性能改進。 鑑於可以創建 13Kb 的可播放 Quake 克隆，您不得不質疑為什麼“關於我們”頁面上的兩段營銷華夫餅需要 154 倍的下載量！

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

鬼鬼祟祟的社交媒體小工具

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

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

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

• 電子郵件： mailto:?subject=[title]&body=[url]
• 臉書： https://www.facebook.com/sharer.php?u=[url]
• 推特： https://twitter.com/share?url=[url]&text=[title]
• 領英： https://www.linkedin.com/shareArticle?url=[url]&title=[title]
• Reddit： https://reddit.com/submit?url=[url]&title=[title]

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

驗證碼

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

驗證碼存在三個基本問題：

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

驗證碼在大多數網站上都是多餘的。 您可以考慮替代 CAPTCHA 的替代選項，從而減少人力：

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

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

概括

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

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

做正確的事，建立對您品牌的信任，您將留住客戶，而無需訴諸黑暗模式。

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