盤點那些讓人抓狂的奇葩網站功能與使用者體驗設計

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

Dark Patterns可能是無意的（瞭解更多關於Dark Patterns的資訊）。營銷人員或開發人員可能認為他們在做正確的事情，但沒有意識到他們實施的某項功能的問題和缺點。最糟糕的Dark Patterns是故意的。一個頁面欺騙你去做一些你不打算做的事情，因為使用者介面或措辭操縱了你的行動。使用者對最可疑的技術越來越聰明，但在某個地方，有人會發現他們被騙了，直到為時已晚。

如果使用得好，網路可以節省時間、旅行和精力。反過來說，Dark Patterns浪費了數百萬的工作時間和千瓦。我們不會羞辱任何特定的網站（他們知道自己是誰），但我們會在可能的地方說明改進和替代方案。

這些是我們的痛處。

1. 不直觀的使用者介面
2. 操縱性營銷
3. 糟糕的技術

不直觀的使用者介面

這些是你會遇到的最常見的Dark Patterns。創造一個好的使用者體驗需要時間和考慮……而你可以用這些礙眼的Dark Patterns迅速破壞所有這些努力。

APP誘導

一些網站和社交網路提示你安裝他們的應用程式–通常是在點選一個關於新訊息或追隨者的電子郵件提醒時。該連結在一個有兩個按鈕的網頁中開啟：

1. 一個巨大的 “Use Our App” 按鈕。點選它可以進入AppStore，在那裡你必須批准、下載、安裝，然後啟動該網站的原生應用（假設你的手機支援該應用）。然後你必須登入，弄錯密碼，請求重置，開啟連結，建立一個新密碼，然後進入系統。你可能已經忘記了你為什麼在那裡，所以回到原來的警報，重新開始。
2. 一個細小到人無法閱讀的 “continue in mobile web” 的連結來執行該操作。

不，謝謝–我不需要你的應用程式!

也許這個應用程式很光鮮，並在上面花費了數百萬美元，但很少能找到比網站功能更強的應用程式。當然，一個應用程式可以比網路系統收集更多的個人資料，所以它得到了更多的干擾性的推廣。

通過各種手段推廣一個應用程式，但在每次互動的開始就這樣做會讓使用者感到厭煩。有些人會安裝應用程式以停止嘮叨，但其他人會離開。在使用者使用網站一段時間後再提供應用程式會不會更有效？

網站通知訂閱

一句話：不。

有沒有人點選過 “Allow”？

通訊註冊、基於網路的推送通知、”讓我們聊天 “小工具和調查提示可能是有用的，但它們的實施普遍都很糟糕。

網站往往在你搜尋後第一次訪問時就提示你要訂閱。在這一點上，你不知道內容是否相關，是否有任何好處，或者該網站是否是你考慮經常訪問的地方。發現大多數人點選 “不 “並不令人驚訝。

提供通知或新聞簡報並沒有錯，但最好先確保使用者已經參與了網站。也許在文章的結尾或在他們訪問過幾次之後顯示一個提示。這樣做的干擾性較小，不會分散注意力，而且更有可能成功。

最後，請不要在使用者點選簡訊中的連結時提示他們註冊簡訊! 這將使他們更快地離開，而不是吸引他們進來。

奇葩導航

標題欄和下拉選單可能很無聊，但人們能理解它們。我們不想阻止UI的進化和設計的創造性，但有些導航控制是奇怪的，不符合邏輯的。

如果你需要用 “點選這裡” 的工具提示或其他幫助方法來提示使用者，請重新考慮你的設計。好的UI不需要解釋。

不必要的滾動跳躍

當頁面滾動時，顯示動畫或更新活動的選單項可以是一種吸引人的體驗。在以下情況下，它就不那麼有用了：

1. 動畫被過度使用。太多元素的動畫會分散瀏覽者的注意力–突出每一個專案意味著沒有什麼能引起使用者的注意。用一些微妙的效果來關注重要的資訊效果更好。
2. 它打破了上下文。滾動不應該導致意外的動作，如內容消失、模式對話方塊、表單提交、重定向到其他頁面等。

動畫也會導致暈動症和眩暈，所以考慮使用CSS的 prefers-reduced-motion 媒體查詢來禁用效果。

請不要再建立無限滾動的頁面了! 與相關內容的連結是有用的，但未經使用者同意自動載入隨機內容會浪費頻寬。它使人很難將任何一個頁面加入書籤，使人無法在頁面頁尾到達聯絡細節和其他資訊。

不必要的多頁文章

我們都見過這樣的 “文章”，它包含一段文字，然後是一個通往下一頁的連結。這些頁面通常是連結誘餌，沒有實質性的內容–但你不會發現，直到你涉足眾多的廣告和頁面印象。

要求網路營銷人員停止這種做法是徒勞的，但如果開發者教育人們不要屈服於這種無稽之談，也許他們會重新考慮！

操縱性營銷

網路是世界上最大的市場，有能力銷售無限多的實體和數字產品。使用者會一次又一次地回來……除非你選擇訴諸於Dark Patterns來促進銷售。

訂閱掙扎

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

偽裝的廣告

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

1. 看起來像一個選單或選項；
2. 假裝是原網站的新聞或資訊文章；或
3. 顯示使用者介面控制，如在一個關於軟體產品的頁面上顯示一個大的 “DOWNLOAD” 按鈕。

下載網站上的廣告，使你遠離實際的下載。

網站不能總是決定使用什麼廣告設計，但他們可以控制廣告的位置。把廣告放在顯眼的位置來迷惑人，可能會增加廣告收入，但這些使用者會回來嗎？

自動將產品新增到購物車中

看到相關或推薦產品的列表可能是有用的。在未經使用者同意的情況下將它們新增到使用者的購物車是另一回事。有多少人會覺得它有幫助？

• 最多隻有一小部分使用者會注意到這個額外的專案並決定保留它。
• 更大比例的人將會刪除它。
• 有些人在交貨前不會注意到，然後抱怨並要求退款。

這些活動增加了銷售額，但卻犧牲了客戶支援、商譽和持續的退貨購買。處理投訴和退款可以抵消任何短期利潤率的增加。

隱藏的購物成本

花時間選擇一個產品，註冊，輸入你的送貨細節，併發布你的付款資訊，發現價格已經高於競爭網站，這不是一件令人愉快的事。總結頁面現在顯示了隱藏的費用，如送貨、保險、處理和 “希望你不會注意這個” 的費用。

定價應該是清晰和誠實的，否則客戶會對電子商務服務失去信心。當送貨費用差別很大時，應提示使用者在承諾購買前輸入他們的國家或郵政編碼。

人為的庫存稀缺性和可用性定時器

知道一件商品何時有庫存是很有用的，但有些電子商務網站會擴大可信度。他們提供的資訊越多，他們就越不可信：

“立即購買! 僅剩2件，過去3分鐘內已賣出15件，當前共597人正在瀏覽該商品“。

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

使用者很快就意識到，當物品在許多天內仍有庫存時，這些資訊是毫無價值的。當網站的營銷資訊不可信時，他們還會繼續購買嗎？

選擇退出的羞辱

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

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

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

複雜的Cookie取消

歐盟的《通用資料保護條例》（GDPR）要求網站對非必要的cookies和類似的跟蹤技術顯示退出通知。這是有缺陷的，但該立法是善意的，而且是整個歐洲的法律要求。其他國家可能有類似的規則，儘管它們通常沒有那麼嚴格。

大多數使用者會選擇加入，然後不假思索地繼續前進（這在一定程度上違背了立法的意義）。選擇退出應該同樣容易，但有些網站卻要求你這樣做：

• 在找到選項之前，要瀏覽數頁/標籤的專業術語；
• 點選幾十個覈取方塊，儘管這違反了GDPR規則；以及
• 在他們 “儲存你的偏好”（儲存什麼？）時，要等待長達一分鐘。

這可能會說服一些使用者點選 “同意所有”，但其他人會放棄網站或切換到閱讀模式以隱藏cookie通知。在最好的情況下，讓選擇退出變得困難，給人的印象是網站有什麼東西要隱藏。在最壞的情況下，這種Dark Patterns處於合法性的邊緣，可能導致罰款或增加律師費用。

這種對話一直在進行，一直在進行……。

糟糕的技術

像HTML這樣的技術是可用的、可訪問的，而且開箱即是向後相容的。拋棄這些優點需要特別的努力。

破壞瀏覽器的功能

後退按鈕是網路對使用者介面的最大貢獻。它很實用，任何有最低技術經驗的人都能理解。然而，網站卻通過開啟新的視窗/標籤、使前一頁失效或告訴使用者不要使用瀏覽器控制來破壞它。

破壞瀏覽器功能沒有任何技術原因。試圖規避控制是一個設計問題，它使使用者感到困惑，並使網路系統的可用性降低。

其他需要避免的問題：

1. 不要禁用右鍵或長點選單。
2. 不要禁用複製或進一步新增 “有用 “的文字。
3. 不要因為沒有更新URL而破壞你的單頁應用中的書籤功能。

但所有這些問題中最糟糕的是我們清單上的下一個問題。

禁用密碼欄位的貼上功能

以任何理由禁用貼上功能都是不必要的。禁用密碼欄位上的貼上是令人厭惡的，但你會在大型網站上遇到這種限制–他們應該更清楚。我見過一些大型國際銀行採用這種做法。

這種做法可能是出於可疑的安全原因而實施的。如果使用者不能貼上，他們就不能重複使用其他地方的密碼，這是合理的。不幸的是，這也使人們無法使用密碼管理器應用程式。現在已經不可能生成高度安全的、長的、隨機的字串，而這些字串的輸入是不實際的。

此外，開發人員可以通過一些DevTool的調整來禁用貼上限制。其他人會很難，他們更可能使用弱的密碼。千萬不要禁用貼上功能–這對你來說是個小麻煩，而且可以提高系統的安全性。

愚蠢的密碼限制

“你的密碼必須在8到12個字元之間，至少需要一個大寫字母、一個數字和一個符號–但請不要使用` ‘ ” / / 或 ;”

實施嚴格的密碼限制沒有什麼好理由。問問你自己：

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

一個單一的規則可以強制執行強密碼：一個很長的最小長度。每一個額外的字元都會以指數形式增加複雜度和破解時間。

移動內容跳躍

在智慧手機上閱讀內容可能是一種令人沮喪的體驗。當你全神貫注於一篇文章時，內容跳出了螢幕，你失去了你的位置。然後你花了幾秒鐘瘋狂地向上和向下滾動。或者更糟糕的是，你會在一個連結或按鈕移動的瞬間點選它，而發生一個意想不到的動作。一些讀者會失去動力，放棄，並在你將他們轉化為客戶之前離開。

當影象或iframe（通常是廣告）載入到視口滾動點以上時，就會發生內容跳轉。一旦內容載入完畢，瀏覽器就可以確定其尺寸並將其放在頁面上。因此，一個500px高度的影象（以全尺寸顯示）會把內容往下推等量。

谷歌的累積佈局偏移（CLS）指標衡量內容跳躍，並對網站進行相應的懲罰。這是一個複雜的問題，但現在有幾個技術解決方案：

• 為HTML img 和 iframe 元素新增寬度和高度屬性，或使用CSS aspect-ratio 屬性，在資產載入之前在頁面上保留空間。
• 設定容器元素的尺寸，以包圍載入較慢的資產，如廣告、影象和社交媒體小工具。
• 儘早申請較大的圖片，並考慮在你的HTML head 使用預載入連結。
• 優化網頁字型的使用，並使用同樣大小的後備字型，以儘量減少佈局的變化。
• 避免在頁面頂部插入元素，除非是在使用者行為（如點選）之後觸發的DOM更新。
• 使用CSS遏制來優化內容塊的渲染。也許可以定義一些不會影響其他元素的大小或位置的元素。

當社會化登入很糟糕的時候

諸如OAuth等技術允許使用者使用另一個賬戶（如谷歌、Facebook、Twitter、LinkedIn或Github）在網站上快速註冊。實施得好，它是一個實用的選擇，提供了一個更流暢的註冊過程，節省了時間，並導致更高的轉換率。

如果實施得不好，網站隨後會要求你輸入你的電子郵件、個人詳細資料，甚至密碼，”供他們記錄”。

並非所有的供應商都會傳遞使用者資訊，因此，如果你的網站需要這些細節來實現功能，請避免使用OAuth。OAuth絕不應該成為一個不必要的步驟，拖慢註冊過程。

網路效能差

根據HTTP檔案，網頁在桌面裝置上的平均載入時間為7秒，在移動裝置上為20秒。一個頁面的瀏覽會產生70個HTTP請求，下載超過2MB的資料，並向大氣排放1.3g的二氧化碳（見網站碳計算器）。這只是一個平均數–許多網站更糟糕。

沒有人打算做一個慢的網站，但增加功能往往超過了效能的提高。鑑於有可能在13Kb內建立一個可玩的Quake克隆，你不得不質疑為什麼在 “關於我們” 頁面上的兩段營銷廢話需要154倍的下載量！”！

解決效能問題需要各種技術的結合，但你只需要記住一個關鍵點：不要傳送那麼多東西！

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

社交媒體小部件，如 “Like” 按鈕，看起來很無辜，但是：

1. 每一個都增加了數百KB的JavaScript程式碼，影響頁面效能。
2. 該程式碼是一個安全風險，因為它的執行許可權與網站的JavaScript相同。
3. 這些小工具即使在沒有啟用的情況下也會實施使用者跟蹤。這在某些地區可能會導致法律問題。
4. 幾乎沒有人使用它們：你能看到1%的使用者參與就不錯了。

小工具也是不必要的。大多數社交媒體網站提供了標準連結，這些連結可以保留分享，而不會對效能、安全或隱私造成任何風險，例如：

• Email: 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> 連結可以很好地工作，但如果您希望它們的行為與標準按鈕相同，您可以增強它以在彈出視窗中開啟頁面。

CAPTCHAs

CAPTCHA是 “完全自動公共圖靈測試” 的簡稱，用於區分計算機和人類。它有助於防止機器人或其他機器訪問網路系統。你經常被要求輸入一個難以辨認的影象中的文字，或者點選包含自行車的方塊。(安裝在汽車上的自行車算嗎？那輛三輪車呢？那面牆後面有自行車嗎！）。

要求你識別巴士的驗證碼

CAPTCHAs有三個基本問題：

1. 他們故意讓擁有完美視力的非殘疾人士感到困難。那些有視覺或其他障礙的人如何應對？
2. 隨著機器人和人工智慧技術的提高，它們必須變得更加複雜。
3. 他們把訪問安全的責任放在使用者身上–而不是網站所有者或開發者，主要受益者。

CAPTCHAs在大多數網站上都是多餘的。你可以考慮CAPTCHAs的替代方案，以減少人類的努力：

• 隱藏的honeypot欄位在機器人新增資料時阻止表單提交。
• 檢查鍵盤事件，如 input 或 keydown，是否被適當地觸發。
• 檢查完成和提交表單所需的時間–機器人的活動往往是瞬時的。
• 建立一個兩階段的提交過程，要求使用者在提交前確認他們的資料或一個額外的問題。

這些將阻止大多數機器人。繞過任何一項技術都是可能的，但這需要針對你的網站進行額外的開發工作。當有數以千計的其他網站有已知的漏洞時，很少有機器人開發者會去理會。

小結

網路是一個偉大的地方，但一些可疑的做法會破壞這種看法。當然，你可以在任何地方被騙，但網路允許犯罪者以很少的成本或努力接觸成千上萬的人。而當數十億的大企業肆無忌憚地使用Dark Patterns時，這簡直是一種恥辱

網站使用Dark Patterns是因為它們有效。但這是短期思維。訪客總是對邪惡的技術變得明智，並且可能永遠不會再回來。

做正確的事情，在你的品牌中建立信任，你就會留住客戶，而不必訴諸於Dark Patterns。

你對你所遇到的Dark Patterns有什麼其他想法嗎？請在下面的評論部分分享它們！