狀態三件套:loading、空態、錯誤態
AI 生成的介面預設只有一種狀態:數據齊全、網絡流暢、一切正常。可用戶遇到的頭一屏常常是另外三種:沒數據、在等待、出錯了。這三種非正常時刻恰恰是體驗分水嶺,這一節把三件套逐個拆開,每件配一局 A/B 對決。
給 AI 一句「做個筆記應用」,它交出來的介面永遠預裝着幾條漂亮的假數據。可真實用戶的第一屏沒有數據,第一次搜索可能超時,第一次同步可能失敗。這三種時刻怎麼表現,AI 不會主動想,你不提要求,它就一律敷衍。
| 狀態 | AI 預設的敷衍版 | 該有的樣子 |
|---|---|---|
| 空態 | 一片空白,或一行灰字「暫無數據」 | 教下一步:説明這裏是幹嘛的,給一個動作入口,最好帶示例 |
| loading | 一個幹轉的圈,轉多久都是那個樣 | 説進行到哪:內容形狀先出來,進度看得見 |
| 錯誤態 | alert 彈一串程式碼,或者乾脆沒反應 | 説人話給出路:發生了什麼、為什麼、怎麼辦 |
上一節的體貼清單在這裏全用得上:空態考的是有預見,loading 考的是會及時通知,錯誤態考的是不因自己的問題煩你。三件套一件件來。
Cooper 在《About Face 4》第 8 章講樂於助人的軟件時打過一個比方:向店員問路,好店員除了指路還會順手告訴你更划算的選擇。空態就係用戶喺度問路:我到咗,然後呢?一片空白等於店員聳了聳肩。
好空態回答三個問題:這裏是幹嘛的、我現在能做什麼、做出來大概長什麼樣。前兩個用一句話加一個按鈕解決,第三個給示例數據或模板。下面兩個筆記應用都是第一次打開,點你認為更體貼的那個。
體貼的軟件會及時通知:用戶關心的進展要讓他看得見。一個幹轉的圈只傳達了一個信息「在忙」,轉到第五秒,用戶開始懷疑是卡死了。骨架屏先把內容的形狀畫出來,等於告訴用戶馬上到了、到了以後長這樣;再配一條進度説明,焦慮就壓下去大半。
等多久該給什麼反饋,那套三檔決策心理學篇講過了,這裏放一張跳轉卡,不重教。
跨章引用 · 等待心理學:難受的從來不是那 5 秒0.1 秒 / 1 秒 / 10 秒三檔反饋決策、預期管理為什麼比提速管用,心理學篇第 2 節講透了,點這裏跳過去。Cooper 在《About Face 4》第 15 章對錯誤信息的立場很硬:老式錯誤對話框要麼責備用戶,要麼拿技術故障甩鍋,多數根本不該出現。真到了必須説的時候,向用戶交代清楚三件事:發生了什麼、為什麼會這樣、現在怎麼辦。三樣齊了才算説人話,缺了「怎麼辦」的錯誤信息等於把用戶堵在死胡同裏。
還有一條底綫:措辭不能責備用戶。第 15 章的原則是用戶視角裏沒有過錯,把「您輸入了非法字符」換成「呢度淨係支持字母同數字」,資訊一樣,態度天差地別。下面兩個同步失敗的提示,點更體貼的那個。
upload.ts:214 (code 10060)
三要素公式抄下來還不夠,得練手感。下面三條錯誤文案都出自 AI 產出的真實水平,逐條點「改寫」,看弱文案怎麼按三要素重寫,順便記住每條弱在哪。
三件套講完,拿一張自查表收口。想着你最近讓 AI 生成的那個頁面,下面五種狀態,做了哪種就勾哪種,覆蓋率當場出分。這張表也是給 AI 提需求的模板:第 9 節會教你把它整張寫進提示詞。
非正常時刻是分水嶺:AI 預設只做「一切正常」,空態、loading、錯誤態三件套你不寫進需求,它就全敷衍。
空態要教下一步:説明這裏是幹嘛的、給動作入口、給示例。空態是新用戶的第一屏,一片白等於把人往外推。
loading 要説進行到哪:骨架屏先給內容形狀,配進度説明。等待反饋的三檔時機在 psy-2,不重教。
錯誤態三要素:發生了什麼、為什麼、怎麼辦,措辭不責備用戶(Cooper,《About Face 4》第 15 章)。更進一步的思路是讓錯誤壓根發生不了,下一節講防錯與可逆。
內容來源:小山學堂「交互工程」專題原創;部分交互原則整理自《About Face 4:交互設計精髓》。