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

2022-9-26    純純

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

 

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

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

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

 

       undefined     

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

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

 

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

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

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

 

       undefined     

 

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

 

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

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

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

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

 

       undefined     

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

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

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

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

       undefined     

 

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

·購(gòu)物車(chē)為空時(shí)→讓用戶(hù)購(gòu)買(mǎi)或者給用戶(hù)推薦商品

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

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

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

       undefined     

 

 

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

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

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

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

       undefined     

 

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

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

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

       undefined     

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

 

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

 

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

 

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

 

 

 

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


       undefined     

4.1基本原則 


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

直觀：簡(jiǎn)言之就是畫(huà)面要“小而美”→簡(jiǎn)單

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

 

準(zhǔn)確

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

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

       undefined     

 

 

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

 

直觀：

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

       undefined     

 

高效

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

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

       undefined     

 

 

4.2進(jìn)階原則undefined       

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

品牌：介紹并強(qiáng)化品牌元素，通過(guò)恰當(dāng)?shù)姆绞?、形式呈現(xiàn)

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

 

有趣

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

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

 

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

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

       undefined品牌

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

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

 

       undefined     

 

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

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

 

 

記憶

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

 

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

       undefined     

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

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

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

 

五、總結(jié)

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

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

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

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

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

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

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

 

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

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

日歷

鏈接

個(gè)人資料

存檔