編者按：優秀的設計當中有值得學習的優點，而糟糕的設計也同樣不是一無是處的，你可以從中學到很多價值非凡的……教訓。Ben 撰寫的這篇文章基于一組著名的諷刺性的 UX 設計案例，他們的諷刺足夠辛辣，但是同樣也映射到現實中的許多設計，看看我們能從中學到什么吧！以下是正文。
更多UX設計干貨：
糟糕的用戶體驗會讓戳瞎你的眼睛。
作為設計師，我們天生喜歡設計精美的東西。
我們習慣于從蘋果、Airbnb 和 Linear 中尋找設計模式的靈感。我們拍攝街頭制作精美的海報。我們收藏帶有創意動畫的網站。但有時，丑陋的事物能給我們帶來比你想象的更多啟示。
在認知科學中，有一個心理學原理叫做「消極偏見」，它說的是人類對消極經歷比積極經歷更敏感——這就是我們會記住壞經歷多于好經歷的原因。
糟糕的設計不僅會傷害我們的眼睛，它還常常會留在我們心中，成為激勵我們的強大工具。在接下來的文章中，讓我們看看 Reddit 上著名的 badUIBattles 論壇板塊中最糟糕（也是最搞笑）的設計案例，看看我們能從中學到什么。
祝你順利取消訂閱
上面的諷刺設計可能看起來很極端很有趣，但不幸的是，如今許多公司都使用類似的欺騙模式，讓用戶難以取消訂閱他們的服務。上述設計有兩個主要問題：
問題 1：隱藏的取消訂閱按鈕，使得用戶難以找到退出方式。
雖然你不希望用戶退訂，但隱藏退訂按鈕并不會讓他們更喜歡你的產品。如果用戶決定采取行動但找不到按鈕，你只會讓體驗變得更糟，并在客戶與你的品牌/產品互動的最后一刻，給他們留下不好的印象。
但不幸的是，這是許多公司為阻止訂閱者退訂而采用的模式。下面的電子郵件是 Tattly 發給退訂用戶的，其中包含過多的文字和多個 CTA，為試圖退訂的用戶帶來不必要的麻煩。
你能在郵件中找到取消訂閱按鈕嗎？
問題 2：不熟悉的模式讓用戶感到困惑
與上面的例子類似，由于風扇把你的光標吹走了，你永遠無法觸及按鈕，許多公司使用「暗黑模式」（就是反邏輯反習慣的設計模式）來誘騙用戶點擊錯誤的按鈕，以留在產品中——比如切換號召性用語按鈕的位置，以便用戶「誤點擊」，因為大多數情況下，用戶都熟悉突出顯示主操作按鈕。
Cake 顛倒按鈕的順序和顏色樣式來誘騙用戶不取消訂閱
你應該怎么做呢？
如何說再見與如何說你好同樣重要
你應該做的是讓流程透明化。確保將取消訂閱按鈕放置在用戶期望的位置，例如設置頁面、帳戶頁面或結算頁面。
如果你想了解用戶離開的原因，以便制定策略，請抓住機會，在用戶點擊取消訂閱時添加一個簡單的問卷或者反饋頁面，讓他們自愿分享離開的原因。采用這種方式之后，你也許會對獲得的有用反饋的數量感到驚訝。
提供有意義的優惠
如果你想建立一種機制來阻止客戶離開，有時提供一些有意義的、有價值的東西，比如一次性折扣或免費試用延期，可以幫助客戶在最后一刻重新考慮是否要留下。
例如，在取消Hotjar 的服務時，如果取消的主要原因是費用太高，產品方會為你提供臨時折扣，以便你不必取消訂閱。
另一個例子是Jasper。如果你決定對訂閱降級，他們會為你提供 30 天的免費延期，這樣你就有更多時間探索產品。
Hotjar 為用戶提供 2 個月的免費訂閱服務，以說服他們不要取消。
當你取消時，Jasper 提供額外 30 天的延長試用期。
祝你加載成功
加載界面是產品中最容易被低估和忽略的界面之一。
想象一下在咖啡館等咖啡的場景。當你能看到店員在做什么時，你會感到更舒服——磨豆子、煮牛奶——因為這讓你確信事情取得進展，你將會拿到你的咖啡。但想象一下員工在后廚工作，你看不到他們。沒有可見性，很難估計要等多久，讓你感到焦慮和惱火——而這就是加載界面的重要性所在。
你還記得被 windows 系統更新加載進度條支配的恐懼嗎
當你看到數字產品的加載屏幕時，也會有同樣的看法。Fiona Fui-Hoon Nah 開展了一項關于用戶等待時間和反饋對用戶容忍度影響的研究，發現用戶在看到進度條后會等待 22.6 秒，然后才會放棄瀏覽網頁；而如果沒有進度條，由于無法看到進度，用戶的等待時間會下降到只有 9 秒。
有進度條時用戶等待的時間與無進度條時用戶等待的時間有明顯差別
你應該怎么做呢？
勞動幻覺
在設計加載界面時，請嘗試利用勞動錯覺的心理學原理：即使只是很小的步驟，顯示可見的進度也會讓用戶感覺正在發生有意義的事情。使用現實而具體的信息來告知用戶預計的等待時間，以及正在進行中的步驟。
這有助于用戶保持用戶參與度，并減少感知上的等待時間。Veed.io 就是一個很好的例子，它使用動畫和狀態更新讓用戶在等待時了解當前情況，將無聊的加載時間變成了有趣的時刻。
Veed 的加載界面（等待創建視頻）
讓用戶保持參與度
在某些情況下，加載時間會很長，例如下載大型文件。在這種情況下，與其強迫用戶坐下來等待，不如嘗試啟用后臺靜默進行，以便用戶可以繼續他們的操作而不會受到之前任務大的影響。如果無法隱藏到后臺，請抓住機會向用戶介紹你的產品，以便用戶一直停留在你的產品當中。
我在 PlayStation 上非常喜歡的游戲之一是 MLB The Show。但是，由于文件大小約為 30 GB，因此安裝完整游戲需要相當多的時間。MLB The Show 設法解決的問題是在用戶開始玩游戲時提供輕量版的 Demo 游戲。當他們玩完 Demo 游戲（通常約 1 小時）之后，完整游戲就幾乎可以玩了。
Mlb the show 中的 Demo 模式
我們只是想確保你不是人工智能。
我相信你在生活中不止一次見過 CAPTCHA ，也就是我們俗稱的「驗證碼」——這是企業用來阻止機器人訪問或濫用其服務的一種流行技術。
然而，你是否知道，對于用戶來說，CAPTCHA 的失敗率接近 29%？此外，視障人士報告稱，CAPTCHA 是當今視障人士訪問網站最困難的障礙之一。
這意味著一件事——雖然 CAPTCHA 可以防止機器人濫用軟件，但它們通常也會阻止大量合法用戶。
視障人士上網體驗報告
你應該怎么做呢？
關于 Captcha 的重新思考
在采用 CAPTCHA 之前，請考慮它是否是你唯一的選擇，或者是否可以采用其他方法（例如電子郵件或電話驗證）。
如果需要使用 Captcha，請查看所有可能的選項，以避免讓用戶感到沮喪。例如，reCAPTCHA ，也就是使用點擊復選框或選擇特定圖像等技術來實現，這與傳統的基于文本的 CAPTCHA 相比，這些技術對大多數用戶來說相對簡單且不那么令人沮喪。
reCAPTCHA
祝你輸入密碼順利
你是否嘗試過用遙控器在智能電視上打字，或在 PS4 或 Xbox 上輸入 Wi-Fi 密碼？這是一種令人痛苦和沮喪的體驗——就像上面的例子一樣。
很多時候，在設計產品時，我們會針對特定類型的設備（網頁、移動設備或應用）優化體驗，但我們并不總是考慮這會對訪問產品的所有用戶產生怎樣的影響。如果你給用戶帶來不便，無論你的產品有多好，他們都不會使用它。
你應該怎么做呢？
使用數據了解流行的屏幕尺寸
解決此問題的一種方法是了解用戶最常用的設備或屏幕尺寸。這種洞察可幫助你確定需要針對哪些設備或屏幕尺寸優化你的產品。
根據這些數據，你可以確保所有主要屏幕尺寸或設備都得到照顧。例如，由于大量 Netflix 用戶使用智能電視訪問他們的應用程序。Netflix 允許用戶通過二維碼或短網址登錄電視。這種方法無需使用遙控器輸入超長的帳號密碼，從而顯著改善了用戶體驗。
Netflix 的二維碼登錄方法
深色模式
深色模式的發明和實現并不是因為設計師認為黑色很酷。
研究表明，深色模式可以為長時間盯著屏幕的用戶提供更舒適的體驗。此外，深色模式還更節能，因為它們消耗的電量更少。
然而，大多數深色模式的實現方式都是錯誤的。許多公司認為暗黑模式僅僅是切換到純黑色（#000000）和白色文本，或者只是反轉當前顏色。這種方法通常會導致可讀性差、眼睛疲勞加劇，用戶體驗更差。
你應該怎么做呢？
使用深灰色，不要使用純黑色
經驗法則是避免使用 #000000（純黑色）作為背景顏色。相反，應使用較柔和的深灰色（如 #121212）作為背景。
這些顏色可減輕眼睛疲勞，并帶來更精致、更專業的外觀。Google的 Material Design指南還建議使用深灰色作為背景，以平衡舒適度和可讀性。
Google Material Design 指南
確保高對比度，但不要太過
處理深色模式時，請仔細檢查以確保你的文本和 UI 元素符合 WCAG 標準的最低對比度 4.5:1。WebAIM 對比度檢查器等工具可以幫助微調對比度，以確保你的暗黑模式符合無障礙標準。
祝你能夠成功輸入你的名字。
你是否遇到過這樣的情況：網站要求你填寫姓名，但你卻發現網站不接受你姓名的格式？例如，我認識一些名字只有一個字母的人，他們經常被阻止填寫，因為大多數表格不接受單個字母。
另一個常見問題是網站將名字和姓氏字段分開。雖然這有助于數據結構化，但它常常導致用戶感到沮喪，因為用戶需要多次點擊才能完成一個簡單的步驟。
你應該怎么做呢？
盡可能合并字段
只要可行，就將名字和姓氏合并到一個標記為「全名」的字段中。這樣，用戶可以更輕松地輸入全名，并減少因格式限制而導致錯誤的可能性。如果需要，你可以依靠算法將輸入分解為組件。https: //uxmovement.com 的 Antony這樣描述它：
「并非每個用戶都有姓和名。他們的文化背景決定了他們的名字的形成方式。例如，如果你來自拉丁美洲，你很可能有兩個姓氏，分別來自父母。如果你是中國人，你的姓氏和名字的位置是相反的，并且總是一起使用它們。」
設定明確的期望
盡可能添加占位符（例如「John Doe」），以幫助用戶了解要輸入的內容。確保字段標記正確，以便用戶確切知道填寫表單所需的內容。
使用占位符來設定明確的期望
用貪吃蛇輸出你的年齡
除了姓名字段的問題之外，大多數生日的字段輸入也搞得過于復雜。我遇到的一個常見問題是，日歷選擇器在選擇生日時通常會設置為當前日期。也就是說，作為用戶，我需要回滾到 20 年或更久才能選擇我的生日日期。
另一個相關問題是，強迫用戶必須使用日期組件（例如，月、日和年的下拉菜單），而不提供直接輸入日期的選項。
你應該怎么做呢？
建立有效的默認參數
盡可能根據你的用戶設置智能默認值。例如，如果你的用戶平均年齡約為 30 歲，則將年份默認為當前年份減 30。這可讓大多數用戶免于無休止地滾動日歷來選擇他們的出生日期。
允許直接輸入
盡可能讓用戶直接輸入生日，而不是只依賴日期部分。使用清晰的標簽（例如「MM/DD/YYYY」）來設定期望，讓用戶更輕松地輸入信息。
日期輸入
總而言之，盡管這些 UX 示例被認為是極端和有趣的，但不幸的是，這些糟糕的 UX 方面中的許多都出現在我們日常使用的許多軟件中。
通過學習這些有趣和最糟糕的設計，我們可以了解如何創造不僅可以避免挫敗感而且還可以積極取悅和參與的用戶體驗。
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
熱評 黃磊磊