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