如何通過空狀態(tài)留住用戶

2022-9-26    純純

在交互設(shè)計(jì)、用戶體驗(yàn)設(shè)計(jì)中，每一個(gè)細(xì)小環(huán)節(jié)都至關(guān)重要。比如說，空狀態(tài) ( The Empty State ) 是許多應(yīng)用程序設(shè)計(jì)開發(fā)過程中忽略的一點(diǎn)，卻也有著優(yōu)化用戶體驗(yàn)、改善應(yīng)用程序的潛力。

 

一.什么是空狀態(tài)？

空狀態(tài)：顧名思義就是空白的狀態(tài)，空狀態(tài)是對(duì)沒有數(shù)據(jù)頁面的補(bǔ)充，一種對(duì)零數(shù)據(jù)的設(shè)計(jì)形式（如下圖所示：無網(wǎng)絡(luò)、訂單為空、沒有關(guān)注的人以及無法連接網(wǎng)絡(luò)等等這些頁面就是所謂的“空狀態(tài)”。）

空狀態(tài)是APP設(shè)計(jì)中不可或缺的一部分，特別是新用戶初次接觸到產(chǎn)品APP時(shí)，必然會(huì)面對(duì)很多空狀態(tài)。

 

       undefined     

二：空狀態(tài)的分類

第一：根據(jù)空狀態(tài)產(chǎn)生的路徑，可以將空狀態(tài)分為3類

 

系統(tǒng)層：本地請(qǐng)求異常；如：無網(wǎng)絡(luò)、服務(wù)器異常等

信息層：請(qǐng)求成功，數(shù)據(jù)異常；如內(nèi)容已刪除、已下架等；

空白層：請(qǐng)求成功，無數(shù)據(jù)；最常見的空頁面或空狀態(tài)；

 

       undefined     

 

第二：根據(jù)空狀態(tài)的出現(xiàn)場(chǎng)景又可以將其分為4大類：

 

初體驗(yàn)：初次注冊(cè)登錄的用戶很多功能都沒有熟悉

無信息/無結(jié)果：某些功能還未使用過

完成任務(wù)：完成某項(xiàng)功能后反饋的結(jié)果

出錯(cuò)：因?yàn)楦鞣N原因?qū)е碌腻e(cuò)誤頁面

 

       undefined     

初體驗(yàn)時(shí)，根據(jù)不同的產(chǎn)品，我們可以為用戶提供不同的引導(dǎo)

· 創(chuàng)作平臺(tái)→引導(dǎo)用戶創(chuàng)造內(nèi)容、推薦相關(guān)內(nèi)容、開啟權(quán)限……

· 工具類app→介紹相關(guān)功能、添加相關(guān)人、相關(guān)功能……

·學(xué)習(xí)類app→收集用戶目標(biāo)、推薦相關(guān)課……

       undefined     

 

無信息/無結(jié)果時(shí)，告知用戶該如何解決問題，或者給用戶其他選擇

·購物車為空時(shí)→讓用戶購買或者給用戶推薦商品

·無收藏時(shí)→應(yīng)到用戶去收藏

·搜索為空時(shí)→告知用戶換一個(gè)詞試一試

·無評(píng)論時(shí)→讓用戶搶個(gè)沙發(fā)

       undefined     

 

 

任務(wù)完成后，鼓勵(lì)或獎(jiǎng)勵(lì)用戶

·郵件全部回復(fù)完→祝用戶擁有美好的一天

·書看完時(shí)→讓眼睛放松一下

·打卡成功→獎(jiǎng)勵(lì)用戶勛章等等

       undefined     

 

程序出錯(cuò)后，緩解用戶情緒，告知用戶解決辦法

·網(wǎng)絡(luò)出錯(cuò)→檢查網(wǎng)絡(luò)/刷新頁面

·404頁面→讓用戶反饋情況到后臺(tái)、報(bào)錯(cuò)等

       undefined     

三：設(shè)計(jì)空狀態(tài)頁面的好處

 

據(jù)調(diào)查顯示：“平均下來，APP在被下載之后的前3天時(shí)間里，日活躍用戶(DAU)數(shù)量下降了77個(gè)百分點(diǎn)。30天內(nèi)，下降比例達(dá)到80%”。用戶會(huì)嘗試多個(gè)同類APP，然后在接下來的3到7天內(nèi)決定其中的哪些不合適。這時(shí)候就需要通過更多好的設(shè)計(jì)和體驗(yàn)來留住用戶

 

當(dāng)然一個(gè)產(chǎn)品的好與壞不能全靠空狀態(tài)，但是空狀態(tài)對(duì)于新用戶的留存是很重要的。

 

Spotify的用戶體驗(yàn)專家Tamara Hilmes提醒設(shè)計(jì)師們時(shí)說，空狀態(tài)是一個(gè)展示產(chǎn)品個(gè)性化的機(jī)會(huì)，因此，在進(jìn)行空狀態(tài)設(shè)計(jì)時(shí)，需要認(rèn)真考慮品牌和用戶的目標(biāo)和背景。

 

 

 

四：空狀態(tài)設(shè)計(jì)原則


       undefined     

4.1基本原則 


準(zhǔn)確：空狀態(tài)需要清晰明確地將當(dāng)前系統(tǒng)狀態(tài)傳達(dá)給用戶

直觀：簡言之就是畫面要“小而美”→簡單

高效：提供用戶快速有效地?cái)[脫空狀態(tài)的方法

 

準(zhǔn)確

準(zhǔn)確原則要求在文字描述上做到清晰地闡述系統(tǒng)當(dāng)前的狀態(tài)。

下圖為例，如果僅以“獲取不到數(shù)據(jù)”作為收件箱空狀態(tài)提示文字，用戶不清楚是系統(tǒng)異常、網(wǎng)絡(luò)異常還是僅僅因?yàn)槭占錄]有郵件而出現(xiàn)當(dāng)前狀態(tài)。準(zhǔn)確地將系統(tǒng)狀態(tài)及操作結(jié)果告知用戶是空狀態(tài)設(shè)計(jì)中十分重要的目標(biāo)。

       undefined     

 

 

特殊原因?qū)е碌目諣顟B(tài)，也可以在附加文字中告知用戶其原因，例如郵箱賬號(hào)未登錄而導(dǎo)致收件箱為空的情況。

 

直觀：

空狀態(tài)不僅要講究視覺的美感，還要講究體驗(yàn)的“美感”，要讓用戶在不用思考的情況下，  獲得最大的價(jià)值，

       undefined     

 

高效

若空狀態(tài)在系統(tǒng)中可以通過觸發(fā)操作離開，建議在空狀態(tài)的文字或操作上進(jìn)行展現(xiàn)。

以站內(nèi)信空狀態(tài)為例，系統(tǒng)存在用戶可執(zhí)行的解決方案，在設(shè)計(jì)上也要體現(xiàn)。上面提到的賬號(hào)未登錄導(dǎo)致站內(nèi)信為空時(shí)，考慮附加文字提示‘登錄賬號(hào)即可開始’。若系統(tǒng)存在直接觸發(fā)操作的方案，可通過鏈接或按鈕的形式提供入口給用戶，便于用戶快速有效地回到功能主流程中。

       undefined     

 

 

4.2進(jìn)階原則undefined       

有趣：有趣又易用，符合用戶的心理預(yù)期

品牌：介紹并強(qiáng)化品牌元素，通過恰當(dāng)?shù)姆绞健⑿问匠尸F(xiàn)

記憶：有創(chuàng)意或幽默色彩，呈現(xiàn)形式新穎，體現(xiàn)專業(yè)同時(shí)創(chuàng)造正面情緒

 

有趣

空狀態(tài)的設(shè)計(jì)在滿足了基本的設(shè)計(jì)原則后，還可根據(jù)產(chǎn)品的品牌特征進(jìn)行優(yōu)化。一般對(duì)空狀態(tài)的圖片、文案來著手進(jìn)行品牌化設(shè)計(jì)。

采用含著關(guān)懷情感的文案“哎呀，網(wǎng)絡(luò)好像出了點(diǎn)問題”代替“網(wǎng)絡(luò)未連接”這樣冰冷無感情的提示文字，同樣達(dá)到告知用戶系統(tǒng)狀態(tài)的目的，但修改后的文案明顯更能貼合服務(wù)工具型軟件的品牌形象。

 

同時(shí)結(jié)合文案主題，用有趣的插畫吸引用戶，達(dá)到緩解用戶焦慮、負(fù)面情緒的目的

例如下圖的刷新一下試試，企業(yè)IP作為粉刷匠在刷新Wi-Fi，比起一個(gè)失聯(lián)的行星就更有意思

       undefined品牌

當(dāng)空狀態(tài)滿足了用戶的基本需求后，就可以考慮如何樹立品牌形象了！

目前最簡單且有效的辦法是——企業(yè)IP+插畫+文案，雖然被很多人吐槽套路、片面，但是作為剛起步的創(chuàng)業(yè)類的app，這不失為一種好辦法

 

       undefined     

 

設(shè)計(jì)專屬吉祥物形象，對(duì)產(chǎn)品進(jìn)行擬人化表達(dá)，避免極其復(fù)雜的插畫，保障界面簡潔明快；

由于插畫不可交互，盡量與背景融合為一部分，避免使用明亮的色彩，誤導(dǎo)用戶點(diǎn)擊。

 

 

記憶

文章的開頭講過，空狀態(tài)對(duì)留住新用戶有著很關(guān)鍵的作用，那么空狀態(tài)在用戶使用的幾秒鐘內(nèi)一定要給用戶留下足夠深刻的印象才有可能留住這些新用戶，所以空狀態(tài)一定要有新意，甚至是要給用戶出其不意的視覺感受，這個(gè)階段考慮的問題要更多一些，受眾人群的特點(diǎn)、品牌的調(diào)性、想要達(dá)到的效果、解決問題的手法、還要注意對(duì)用戶而言是否直接有效并且準(zhǔn)確。

 

阿里旗下“躺平”app的空狀態(tài)打破常規(guī)，非常優(yōu)秀的抓住了用戶人群的特性，解決了用戶的需求的同時(shí)，還給用戶樹立了非常深刻的品牌印象。

       undefined     

產(chǎn)品所有能傳遞情緒的場(chǎng)景都應(yīng)該與品牌情緒一致。采用負(fù)面情緒的空狀態(tài)有一定風(fēng)險(xiǎn)，可能會(huì)起到消極作用。

用戶更容易代入場(chǎng)景化的故事，產(chǎn)生情感共鳴。構(gòu)思場(chǎng)景，需研究產(chǎn)品目標(biāo)用戶群的特質(zhì)，設(shè)計(jì)他們的共同回憶，將有關(guān)的場(chǎng)景、片段、元素進(jìn)行拼貼、組合、關(guān)聯(lián)，再找到最能勾起情緒沖動(dòng)的突破口，豐滿場(chǎng)景。

避免正面刻板的形象（一眼就能看到底的設(shè)計(jì)），盡可能簡單有趣、不落俗套，讓用戶看到這個(gè)畫面后可以有更多想象的空間，從而吸引用戶，驅(qū)動(dòng)用戶的好奇心。

 

五、總結(jié)

簡單總結(jié)了一些設(shè)計(jì)空狀態(tài)時(shí)整體的設(shè)計(jì)流程，如下：

 
功能入口：提供相關(guān)功能的入口和動(dòng)作按鈕，解釋服務(wù)的功能和優(yōu)點(diǎn)，引導(dǎo)用戶到其他頁面查看內(nèi)容

  1. 標(biāo)題文案：說明當(dāng)前狀態(tài)，解釋當(dāng)前問題出現(xiàn)原因，介紹功能概要

  2. 解說文案：如何走出當(dāng)前狀態(tài)，如何解決當(dāng)前問題，補(bǔ)充說明功能的屬性

  3. 推薦數(shù)據(jù)：提供熱門數(shù)據(jù)、個(gè)性化推薦數(shù)據(jù)讓用戶選擇；如電商搜索無結(jié)果、購物車等頁面，推 薦用戶感興趣的商品，能有效地提升購買轉(zhuǎn)化率

  4. 操作引導(dǎo)：提供相關(guān)操作的示意和引導(dǎo)，讓用戶能刪除或替換內(nèi)容

  5. 完成指導(dǎo)：送上任務(wù)達(dá)成的祝賀語，鞏固用戶的成就

 

細(xì)節(jié)備注：

文字和圖形一樣，也是一種情緒的載體，注意文字的魅力，加注重文字的情緒表達(dá)，更易調(diào)動(dòng)觀者的心。

分享本文至：

日歷

鏈接

個(gè)人資料

存檔