用戶體驗設計中那些針對「等待」的好設計
人機交互中的等待,簡單可以看做以下過程:
我們的設計目標,是盡可能減少用戶感知到的等待時間。我能想到的,有如下幾種方式:
1. “欺騙”用戶,隱藏等待
例如, 微信和Path分享圖片,點擊“發送”,圖片立即出現在時間線上。實際上并未上傳到服務器。用戶直接收到“發送成功”的視覺反饋,而上傳的過程被隱藏了。 涉及狀態切換的按鈕,比如“喜愛”、“收藏”,一般會先給用戶一個操作成功的視覺反饋,無需等待服務器返回“操作成功”的實際結果。這樣的好處是,大多數情況下用戶不需要焦慮等待內容上傳完畢。壞處是,偶爾網絡連接不好,用戶的獲得反饋和實際情況不一致。
示意圖如下:
2. “欺騙”用戶,縮減等待
這種方式我只想到一個案例,就是大家耳熟能詳的 Instagram 提前上傳策略(Secrets to Lightning Fast Mobile Design // Speaker Deck):
示意圖如下:
3. 將模態的等待,轉化為非模態的等待
Weico 客戶端有一個非常貼心的特性。當用戶點擊一個網頁或視頻鏈接時,用戶不會被鎖定在一個模態的加載狀態,鏈接內容會以小窗的形式在左下角不影響閱讀的區域進 行非模態加載。用戶可以繼續瀏覽微博時間線,直到內容加載完成。令人焦慮的等待時間被用戶的持續瀏覽消解了。
示意圖如下:
4. 以上三種都是通過對流程的設計來減少或化解實際等待時間。而在交互設計中最常使用的手法,應該是通過不斷給予用戶當前狀態反饋,從而縮減感知到的等待時間,即過場、加載動畫等。
這是一個蠻大的話題,以個人能力無法展開闡述。有興趣的同學可以去玩一下這個東東:http://jsfiddle.net/gUkgX/1/embedded/result/
嘗試估算每種按鈕給出結果的時間,你有什么體驗?
大概你已經猜到了,每個按鈕的給出結果的時間都是10s。但是由于反饋的形式不同,人們感知到的時間也各不相同。以此為啟發,再根據實際情況的限制和使用場景,我們可以設計出不同形態的的滾動條、旋轉菊花甚至彈幕和小游戲,來降低被感知的等待時間。
第一種最好設施,第二種的提前上傳策略怎么搞啊,你能預判用戶可能的操作嗎
打個比方,比如美圖秀秀、美拍之類,內容提交前,會有文字輸入界面,可編輯標題。此時用戶的提交行為已經可以確定。后臺完全可以聯網先上傳圖片或者視頻了。