本文章簡單的介紹了一些空狀態設計原則和規範,幫助更多的設計小白更加深入的理解空狀態頁面,更好的完成設計。
正文
在互動設計、用戶體驗設計中,每一個細小環節都至關重要。比如說,空狀態 ( The Empty State ) 是許多應用程式設計開發過程中忽略的一點,卻也有著優化用戶體驗、改善應用程式的潛力。
一、什麼是空狀態?
空狀態:顧名思義就是空白的狀態,空狀態是對沒有數據頁面的補充,一種對零數據的設計形式(如下圖所示:無網絡、訂單為空、沒有關注的人以及無法連接網絡等等這些頁面就是所謂的「空狀態」。)
空狀態是APP設計中不可或缺的一部分,特別是新用戶初次接觸到產品APP時,必然會面對很多空狀態。
二、空狀態的分類
第一:根據空狀態產生的路徑,可以將空狀態分為3類:
系統層:本地請求異常;如:無網絡、伺服器異常等;
信息層:請求成功,數據異常;如內容已刪除、已下架等;
空白層:請求成功,無數據;最常見的空頁面或空狀態。
第二:根據空狀態的出現場景又可以將其分為4大類:
初體驗:初次註冊登錄的用戶很多功能都沒有熟悉;
無信息/無結果:某些功能還未使用過;
完成任務:完成某項功能後反饋的結果;
出錯:因為各種原因導致的錯誤頁面。
初體驗時,根據不同的產品,我們可以為用戶提供不同的引導
· 創作平臺引導用戶創造內容、推薦相關內容、開啟權限……
· 工具類app介紹相關功能、添加相關人、相關功能……
· 學習類app收集用戶目標、推薦相關課……
無信息/無結果時,告知用戶該如何解決問題,或者給用戶其他選擇
· 購物車為空時讓用戶購買或者給用戶推薦商品
· 無收藏時應到用戶去收藏
· 搜索為空時告知用戶換一個詞試一試
· 無評論時讓用戶搶個沙發
任務完成後,鼓勵或獎勵用戶
· 郵件全部回復完祝用戶擁有美好的一天
· 書看完時讓眼睛放鬆一下
· 打卡成功獎勵用戶勳章等等
程序出錯後,緩解用戶情緒,告知用戶解決辦法
· 網絡出錯檢查網絡/刷新頁面
· 404頁面讓用戶反饋情況到後臺、報錯等
三、設計空狀態頁面的好處
據調查顯示:「平均下來,APP在被下載之後的前3天時間裡,日活躍用戶(DAU)數量下降了77個百分點。30天內,下降比例達到80%」。用戶會嘗試多個同類APP,然後在接下來的3到7天內決定其中的哪些不合適。這時候就需要通過更多好的設計和體驗來留住用戶。
當然一個產品的好與壞不能全靠空狀態,但是空狀態對於新用戶的留存是很重要的。
Spotify的用戶體驗專家Tamara Hilmes提醒設計師們時說,空狀態是一個展示產品個性化的機會,因此,在進行空狀態設計時,需要認真考慮品牌和用戶的目標和背景。
四、空狀態設計原則
4.1、基本原則
準確:空狀態需要清晰明確地將當前系統狀態傳達給用戶
直觀:簡言之就是畫面要「小而美」簡單
高效:提供用戶快速有效地擺脫空狀態的方法
準確
準確原則要求在文字描述上做到清晰地闡述系統當前的狀態。
下圖為例,如果僅以「獲取不到數據」作為收件箱空狀態提示文字,用戶不清楚是系統異常、網絡異常還是僅僅因為收件箱沒有郵件而出現當前狀態。準確地將系統狀態及操作結果告知用戶是空狀態設計中十分重要的目標。
特殊原因導致的空狀態,也可以在附加文字中告知用戶其原因,例如郵箱帳號未登錄而導致收件箱為空的情況。
直觀
空狀態不僅要講究視覺的美感,還要講究體驗的「美感」,要讓用戶在不用思考的情況下, 獲得最大的價值。
高效
若空狀態在系統中可以通過觸發操作離開,建議在空狀態的文字或操作上進行展現。
以站內信空狀態為例,系統存在用戶可執行的解決方案,在設計上也要體現。上面提到的帳號未登錄導致站內信為空時,考慮附加文字提示『登錄帳號即可開始』。若系統存在直接觸發操作的方案,可通過連結或按鈕的形式提供入口給用戶,便於用戶快速有效地回到功能主流程中。
4.2、進階原則
有趣:有趣又易用,符合用戶的心理預期
品牌:介紹並強化品牌元素,通過恰當的方式、形式呈現
記憶:有創意或幽默色彩,呈現形式新穎,體現專業同時創造正面情緒
有趣
空狀態的設計在滿足了基本的設計原則後,還可根據產品的品牌特徵進行優化。一般對空狀態的圖片、文案來著手進行品牌化設計。
採用含著關懷情感的文案「哎呀,網絡好像出了點問題」代替「網絡未連接」這樣冰冷無感情的提示文字,同樣達到告知用戶系統狀態的目的,但修改後的文案明顯更能貼合服務工具型軟體的品牌形象。
同時結合文案主題,用有趣的插畫吸引用戶,達到緩解用戶焦慮、負面情緒的目的。例如下圖的刷新一下試試,企業IP作為粉刷匠在刷新Wi-Fi,比起一個失聯的行星就更有意思。
品牌
當空狀態滿足了用戶的基本需求後,就可以考慮如何樹立品牌形象了!
目前最簡單且有效的辦法是——企業IP+插畫+文案,雖然被很多人吐槽套路、片面,但是作為剛起步的創業類的app,這不失為一種好辦法。
設計專屬吉祥物形象,對產品進行擬人化表達,避免極其複雜的插畫,保障界面簡潔明快;
由於插畫不可交互,儘量與背景融合為一部分,避免使用明亮的色彩,誤導用戶點擊。
記憶
文章的開頭講過,空狀態對留住新用戶有著很關鍵的作用,那麼空狀態在用戶使用的幾秒鐘內一定要給用戶留下足夠深刻的印象才有可能留住這些新用戶,所以空狀態一定要有新意,甚至是要給用戶出其不意的視覺感受,這個階段考慮的問題要更多一些,受眾人群的特點、品牌的調性、想要達到的效果、解決問題的手法、還要注意對用戶而言是否直接有效並且準確。
阿里旗下「躺平」app的空狀態打破常規,非常優秀的抓住了用戶人群的特性,解決了用戶的需求的同時,還給用戶樹立了非常深刻的品牌印象。
產品所有能傳遞情緒的場景都應該與品牌情緒一致。採用負面情緒的空狀態有一定風險,可能會起到消極作用。
用戶更容易代入場景化的故事,產生情感共鳴。構思場景,需研究產品目標用戶群的特質,設計他們的共同回憶,將有關的場景、片段、元素進行拼貼、組合、關聯,再找到最能勾起情緒衝動的突破口,豐滿場景。
避免正面刻板的形象(一眼就能看到底的設計),儘可能簡單有趣、不落俗套,讓用戶看到這個畫面後可以有更多想像的空間,從而吸引用戶,驅動用戶的好奇心。
五、總結
囉嗦了很多,作為設計師,簡單總結了一些設計空狀態時整體的設計流程,如下:
1、功能入口:提供相關功能的入口和動作按鈕,解釋服務的功能和優點,引導用戶到其他頁面查看內容;
2、標題文案:說明當前狀態,解釋當前問題出現原因,介紹功能概要;
3、解說文案:如何走出當前狀態,如何解決當前問題,補充說明功能的屬性;
4、推薦數據:提供熱門數據、個性化推薦數據讓用戶選擇;如電商搜索無結果、購物車等頁面,推 薦用戶感興趣的商品,能有效地提升購買轉化率;
5、操作引導:提供相關操作的示意和引導,讓用戶能刪除或替換內容;
6、完成指導:送上任務達成的祝賀語,鞏固用戶的成就。
細節備註:
文字和圖形一樣,也是一種情緒的載體,注意文字的魅力,加注重文字的情緒表達,更易調動觀者的心。
1、避免命令的、指使的語氣,儘量使用輕快的、戲謔的、娛樂式的語氣,婉轉傳達用戶可以去做什麼;
2、避免傻瓜式的敘述、空洞的鋪陳,描述詞風格應該匹配產品調性;
3、如果出錯了,提供一個解決辦法。
4、反問開場,可以調動用戶情緒,嘗試錯愕驚訝、誇張的口吻,會使情感更生動。