哈嘍，這里是蘭亭妙微UI設(shè)計公司，今天分享的是「如何化解錯誤時刻」。
說到用戶體驗設(shè)計，大家首先想到的都是“正常場景”：注冊流程順暢、支付順利完成、輸入順利通過。但現(xiàn)實并非如此，用戶總會不小心犯錯誤，系統(tǒng)偶爾也會掉鏈子。但這些“問題時刻”往往最容易被忽略。要是產(chǎn)品沒法幫用戶解決問題，所有錯誤的后果都得用戶承擔(dān)，最后只會讓他們焦慮。換句話說，錯誤是用戶體驗的最大危機(jī)，也是削弱用戶對產(chǎn)品信任的關(guān)鍵節(jié)點。
相關(guān)干貨：
這里的“微設(shè)計”比我們常說的“微交互”范圍更廣，包括文案、視覺元素，還有各種反饋設(shè)計。這些小細(xì)節(jié)看似不起眼，卻能精準(zhǔn)安撫用戶的出錯焦慮，幫他們重新找回掌控感。
微設(shè)計的三個核心要素：
在深入探討具體案例之前，讓我們先來探究一下用戶遇到錯誤的背景和原因。下面簡要總結(jié)了用戶出錯的類型、背后的心理，還有哪些場景容易出錯。
在用戶體驗理論中，錯誤分“失誤”和“錯誤”兩種，前者是用戶在執(zhí)行操作時無意識犯下的錯誤，后者是一開始就想錯了。
失誤：行為不當(dāng)
目標(biāo)是對的，但采取的行動有問題。例如不小心點錯了按鈕、著急打錯了字，大多是做熟悉的事時分心、沒留意造成的。
錯誤：判斷失誤
從一開始就誤解了情況。比如看到一個顯眼的按鈕，以為是自己要的功能，結(jié)果點擊后才發(fā)現(xiàn)不對。這種情況多是因為界面的信息混亂、層級不清晰，呈現(xiàn)的內(nèi)容含糊不清。
通常“失誤”發(fā)生在執(zhí)行階段，“錯誤”發(fā)生在規(guī)劃階段，但實際中兩者經(jīng)常一起出現(xiàn)。重點是搞清楚 “為什么會出錯”，并給出解決方案。
出錯不只是功能出問題，更會讓用戶慌張：“萬一沒法恢復(fù)怎么辦？”（恐懼）、“我無法控制這種情況”（無助），甚至 “可能我根本不會用這東西”（自責(zé)）。最糟的就是自責(zé)——用戶不怪產(chǎn)品怪自己，壓力越來越大，最后干脆關(guān)掉頁面、放棄使用。
所以設(shè)計師的任務(wù)很明確：別讓用戶背鍋，明確告訴他們“能補(bǔ)救”。先給情緒上的安慰：“沒關(guān)系，你可以再試一次。”
有些時候，用戶的選擇壓力和出錯焦慮會被放大，心里越?jīng)]底，越不敢動。
操作不可逆：刪除文件、轉(zhuǎn)賬、重置數(shù)據(jù)等，一旦點錯就沒法恢復(fù)，讓人不敢操作。
操作反復(fù)失?。哼B不上網(wǎng)、輸密碼總錯，越試越沮喪，甚至?xí)?“是不是只有我用不了？”
尤其是對準(zhǔn)確性要求高的場景，比如金融、商務(wù)、B2B工具，出錯體驗的設(shè)計更關(guān)鍵。有時候?qū)τ诔鲥e的恐懼，比錯誤本身更影響用戶行為。
支付/轉(zhuǎn)賬：錯誤導(dǎo)致資金損失的壓力以及造成損失的可能性。
傳輸/刪除關(guān)鍵數(shù)據(jù)：知道沒法恢復(fù)，更不敢操作。
表單反復(fù)驗證失?。菏〉拇螖?shù)越多，就會越沮喪。
應(yīng)對錯誤的核心是“雙管齊下”：提前預(yù)防 (別讓錯誤發(fā)生) +及時恢復(fù) (錯了能輕松補(bǔ)救)。單獨用哪一個都不夠，需要根據(jù)場景靈活設(shè)計。
從根本上阻止可能出錯的情況，或者用視覺提示幫用戶識別風(fēng)險。比如禁用按鈕、提供有限的選項、防止重復(fù)點擊。某種程度上哪怕稍微限制一點用戶的自由，也比讓他們出錯好。
例如訂酒店時，對于有住宿天數(shù)要求的酒店，預(yù)定的天數(shù)少于住宿天數(shù)時，無法進(jìn)行預(yù)訂；類似的還有“信息沒填完時，登錄按鈕是置灰的”、“加載時不能點按鈕，避免重復(fù)操作”，都是這個道理。
在搜索框、輸入框里加入自動補(bǔ)全或關(guān)鍵詞建議，不需要讓用戶記住全部信息，輸入又快又準(zhǔn)。尤其在輸入地址或者比較復(fù)雜的內(nèi)容時，這種方法能大大提高效率。
例如在輸入地址時，搜索詞會高亮顯示，并且會可能提供清晰的搜索建議：想搜的是地鐵、公交還是某家店鋪，方便用戶減輕記憶負(fù)擔(dān)，快速做出選擇；在移動設(shè)備中，鍵盤的局限性導(dǎo)致打字失誤的情況頻繁發(fā)生，飛書的錯別字自動修正提示，能夠很好地提高輸入速度和準(zhǔn)確性。
對于需要重復(fù)做的操作，可以把常用的選項設(shè)為默認(rèn)，幫助用戶少費心。但默認(rèn)選項不一定永遠(yuǎn)是對的，如果存在錯誤的可能性，得讓用戶能檢查修改，不然反而會“誘導(dǎo)錯誤”。
例如在外賣軟件中，可以把常用地址加上默認(rèn)標(biāo)識，省去了再次添加收貨地址的麻煩。但當(dāng)默認(rèn)地址和當(dāng)前的位置差很遠(yuǎn)，超出配送范圍時，購物車中的商品會呈置灰狀態(tài)無法進(jìn)行購買。
用戶進(jìn)行多步驟任務(wù)時 (比如注冊)，萬一不小心退出了再進(jìn)來，保持之前填的內(nèi)容還在。這樣不需要用戶重新填，也不會忘記已經(jīng)完成了哪些步驟，減少失誤的發(fā)生。
編輯文章時，內(nèi)容可以自動保存到草稿箱中。哪怕退出登錄過兩天再進(jìn)入，草稿箱里的內(nèi)容都還在，對于用戶來說也是一種很貼心的體驗。
對于需要記住很多選擇的流程(比如訂酒店)，把選好的日期、人數(shù)、篩選條件固定在屏幕頂部，隨時能看。這種設(shè)計方法允許用戶在不依賴不準(zhǔn)確記憶的情況下再次確認(rèn)信息，從而及早預(yù)防錯誤。
像Airbnb會把要去的地點、 入住時間和人數(shù)這些篩選條件固定在頁面的頂部，讓用戶可以持續(xù)查看當(dāng)前的預(yù)訂情況，這樣在找房子的時候會覺得更踏實。
對于刪除文件或重置數(shù)據(jù)這類不可逆的操作，一定要增加 “確認(rèn)步驟”，進(jìn)一步確認(rèn)用戶的意圖。
一旦出錯無法恢復(fù)的操作可能會引發(fā)用戶的強(qiáng)烈焦慮，因此需要清晰傳達(dá)操作的影響，并通過問題和警告來確認(rèn)操作，例如：“您確定要刪除xx？刪除后不可恢復(fù)，請謹(jǐn)慎操作。”
但注意不能濫用確認(rèn)彈窗，過于頻繁的確認(rèn)彈窗可能會讓用戶在不仔細(xì)看內(nèi)容的情況下，習(xí)慣性地點擊“確定”，增大出錯的風(fēng)險。只在重要且不可逆轉(zhuǎn)的操作中使用。
例如刪除文件時進(jìn)行二次確認(rèn)，同時告知刪除后文件的位置、刪除后文件是否可以找回等一系列內(nèi)容，讓用戶對于刪除的內(nèi)容有清晰的認(rèn)知；對于確認(rèn)后無法再修改的信息，也最好來個再次確認(rèn)，讓用戶做到心里有數(shù)。
對于表單輸入這類容易出錯的場景，好的使用體驗是在輸入時就“實時”提供反饋，而不是等所有信息都填完點擊提交之后再提示錯誤。
比如字符超了、密碼格式不對，立即用紅色文字、錯誤圖標(biāo)、邊框高亮、震動動效等形式反饋出來，減少重復(fù)輸入的麻煩。
例如發(fā)動態(tài)時，如果輸入的標(biāo)題字?jǐn)?shù)不符合要求，會在標(biāo)題處有一段反饋提示，提醒用戶輸入符合要求的標(biāo)題；填寫多個表單時，如果有多個表單未填寫，每個輸入框下面都會有錯誤反饋，而且每條錯誤反饋的內(nèi)容會根據(jù)不同字段而調(diào)整，而不是用“請?zhí)顚憙?nèi)容”這種模板化的反饋。
對于操作后不好修改的場景中 (比如發(fā)表文章、發(fā)布視頻、視頻渲染)，可以先給用戶看 “最終效果預(yù)覽”。確認(rèn)沒問題再提交，這樣用戶就能提前發(fā)現(xiàn)錯漏，心里也踏實。
例如在發(fā)布動態(tài)的時候上傳視頻封面后，在推薦列表、視頻動態(tài)中能提前預(yù)覽封面效果，有問題可以及時修改，省去了動態(tài)發(fā)布后再去修改的麻煩；視頻軟件中渲染一個視頻通常需要幾分鐘甚至幾十分鐘，通過提供“渲染預(yù)覽”可以快速檢查錯誤減少不必要的時間浪費。
“撤銷”功能允許用戶立即挽回錯誤，增強(qiáng)掌控感，減輕錯誤帶來的負(fù)擔(dān)，例如刪錯內(nèi)容、發(fā)錯郵件后，點一下就能恢復(fù)。有了這個功能，用戶用著更放心，也敢大膽嘗試各種功能。
在花瓣中采集圖片后，會提供一個撤銷的功能，方便用戶快速撤銷采集有誤的圖片；在使用微信發(fā)消息、使用郵箱發(fā)郵件的時候，也都支持在發(fā)出去幾分鐘內(nèi)撤回，盡可能幫用戶挽回錯誤。
如果錯誤不可避免，需要使用通俗易懂的提示文案告訴用戶哪里出現(xiàn)了錯誤，出現(xiàn)了什么樣的錯誤，而不是用一些模板化的或是含糊不清的提示文案，讓用戶感到困惑。
例如上圖中的登錄失敗提示，會明確告知什么地方出現(xiàn)了錯誤、出現(xiàn)多次錯誤后會有什么后果、如何操作能解決錯誤，這才是一個格式的錯誤提示；填寫新增地址信息時，如果手機(jī)號碼有問題，會明確提示“手機(jī)號有誤”，而不是只說 “輸入內(nèi)容有誤”。
接著上一條，不僅要說清楚錯誤的原因，還要告訴用戶“該怎么做”，引導(dǎo)用戶立即采取行動。例如添加“重試”、“返回主頁” 按鈕，引導(dǎo)用戶回到正確的操作流程里。
如果訪問的頁面有問題，可以提供返回首頁或者聯(lián)系客服的入口，讓用戶可以繼續(xù)探索其他內(nèi)容；例如蘋果的Face ID連續(xù)5次識別失敗后，系統(tǒng)會鎖定面容ID功能，并提示輸入密碼驗證后才能重新啟用。
通過自動定位和聚焦錯誤輸入項來鼓勵快速更正。發(fā)現(xiàn)錯誤后，系統(tǒng)自動定位到出錯的輸入框，縮短錯誤從識別到更正的過程。尤其在那些表單特別多的后臺頁面中，這種錯誤定位的功能還是很有必要的。
利用情感化的視覺設(shè)計，例如柔和的色彩、插圖和動效等，提供了視覺上的舒適感，緩解用戶的焦慮和緊張。這不僅是簡單的錯誤反饋，還是展現(xiàn)品牌個性的好機(jī)會。
比如谷歌瀏覽器離線時經(jīng)典的“恐龍小游戲”，讓用戶等待網(wǎng)絡(luò)連接的同時進(jìn)行有趣的游戲體驗，能讓用戶沒那么煩躁。
總的來說，減少錯誤的根本策略是避免不必要的差異化，并遵循熟悉的界面、交互和設(shè)計慣例。這里的“熟悉”不僅是風(fēng)格問題，更是整個用戶體驗設(shè)計的通用標(biāo)準(zhǔn)。
當(dāng)然，再標(biāo)準(zhǔn)的設(shè)計也沒法完全杜絕錯誤的發(fā)生。這時候，貼心的微設(shè)計就派上用場了——幫助用戶快速發(fā)現(xiàn)錯誤、輕松改過來。
這些細(xì)節(jié)，正是體驗設(shè)計師存在的價值，也是產(chǎn)品賦予用戶的最大信任。你還有哪些化解錯誤的小妙招呢？歡迎留言咱們一起聊聊～
轉(zhuǎn)載：優(yōu)設(shè)
蘭亭妙微（藍(lán)藍(lán)設(shè)計）www.axaxx.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
藍(lán)藍(lán)設(shè)計的小編 http://www.axaxx.cn