狀態三件套: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:互動設計精髓》。