2022-9-26 純純
在交互設計、用戶體驗設計中,每一個細小環節都至關重要。比如說,空狀態 ( 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的空狀態打破常規,非常優秀的抓住了用戶人群的特性,解決了用戶的需求的同時,還給用戶樹立了非常深刻的品牌印象。
產品所有能傳遞情緒的場景都應該與品牌情緒一致。采用負面情緒的空狀態有一定風險,可能會起到消極作用。
用戶更容易代入場景化的故事,產生情感共鳴。構思場景,需研究產品目標用戶群的特質,設計他們的共同回憶,將有關的場景、片段、元素進行拼貼、組合、關聯,再找到最能勾起情緒沖動的突破口,豐滿場景。
避免正面刻板的形象(一眼就能看到底的設計),盡可能簡單有趣、不落俗套,讓用戶看到這個畫面后可以有更多想象的空間,從而吸引用戶,驅動用戶的好奇心。
五、總結
簡單總結了一些設計空狀態時整體的設計流程,如下:
功能入口:提供相關功能的入口和動作按鈕,解釋服務的功能和優點,引導用戶到其他頁面查看內容
標題文案:說明當前狀態,解釋當前問題出現原因,介紹功能概要
解說文案:如何走出當前狀態,如何解決當前問題,補充說明功能的屬性
推薦數據:提供熱門數據、個性化推薦數據讓用戶選擇;如電商搜索無結果、購物車等頁面,推 薦用戶感興趣的商品,能有效地提升購買轉化率
操作引導:提供相關操作的示意和引導,讓用戶能刪除或替換內容
完成指導:送上任務達成的祝賀語,鞏固用戶的成就
細節備注:
文字和圖形一樣,也是一種情緒的載體,注意文字的魅力,加注重文字的情緒表達,更易調動觀者的心。
避免命令的、指使的語氣,盡量使用輕快的、戲謔的、娛樂式的語氣,婉轉傳達用戶可以去做什么;
避免傻瓜式的敘述、空洞的鋪陳,描述詞風格應該匹配產品調性;
如果出錯了,提供一個解決辦法
反問開場,可以調動用戶情緒,嘗試錯愕驚訝、夸張的口吻,會使情感更生動
作者:木子淺談
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司