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