如何做好空狀態(tài)設(shè)計(jì)?來(lái)看這份全面總結(jié)

0 評(píng)論 6937 瀏覽 23 收藏 10 分鐘

編輯導(dǎo)語(yǔ):空狀態(tài)對(duì)用戶體驗(yàn)是很重要的,但實(shí)際上它常常被忽略。良好的空狀態(tài)設(shè)計(jì)能提升產(chǎn)品體驗(yàn),有效的留存用戶。了解空狀態(tài)的概念以及如何使用它們,可以有效提高產(chǎn)品的特色和價(jià)值。本文作者就從什么是空狀態(tài)、它都有什么類型、為什么容易被忽視、空狀態(tài)的優(yōu)勢(shì)是什么、如何設(shè)計(jì)空狀態(tài)這五個(gè)方面,為我們做了詳細(xì)地說(shuō)明。

在產(chǎn)品設(shè)計(jì)過(guò)程中,設(shè)計(jì)師有很多機(jī)會(huì)創(chuàng)造愉悅和有意義的體驗(yàn),其中一個(gè)經(jīng)常被忽視的體驗(yàn)就是空狀態(tài)。空狀態(tài)是用戶在使用產(chǎn)品時(shí)某個(gè)界面無(wú)法顯示的時(shí)刻,即沒有其他元素。

以網(wǎng)購(gòu)為例,回想一下常見的空狀態(tài)情況:

  • 搜索商品卻沒有找到的狀態(tài);
  • 查看商品時(shí)加載不出來(lái)或出錯(cuò)的狀態(tài);
  • 購(gòu)物車?yán)餂]有商品時(shí)的狀態(tài);
  • 地址管理頁(yè)面中收貨地址為空的狀態(tài);
  • 提交訂單后的狀態(tài)。

良好的空狀態(tài)可以讓用戶知道正在發(fā)生的情況,發(fā)生的原因以及該怎么做。

下面是兩個(gè)正面的空狀態(tài)設(shè)計(jì)示例:

首次啟動(dòng)產(chǎn)品時(shí),Dropbox Paper為用戶提供了良好的空狀態(tài)設(shè)計(jì),頁(yè)面上的提示按鈕能指引用戶完成下一步操作。

當(dāng)沒有搜索到結(jié)果時(shí),頁(yè)面上提供了有用的參考信息,并讓用戶知道發(fā)生了什么。

以下是一些負(fù)面的空狀態(tài)設(shè)計(jì):

這個(gè)空狀態(tài)只提示了一些反饋信息,沒有為用戶提供明確引導(dǎo)或告訴用戶該怎么操作。

在這個(gè)空狀態(tài)設(shè)計(jì)中,我們只看到一個(gè)幾乎空白的網(wǎng)頁(yè)上面有一個(gè)很棒的插圖,但是它沒有提供任何信息或指示,也不能引導(dǎo)用戶進(jìn)行下一步。

一、空狀態(tài)的類型

這是四種常見的空狀態(tài)類型:

  1. 首次使用:新產(chǎn)品沒有內(nèi)容可以顯示時(shí),例如打開新注冊(cè)的印象筆記時(shí)會(huì)遇到這種情況;
  2. 內(nèi)容被清除:當(dāng)用戶完成類似清空消息或收件箱等操作后,會(huì)出現(xiàn)一個(gè)空白的屏幕;
  3. 出現(xiàn)錯(cuò)誤:產(chǎn)品由于網(wǎng)絡(luò)問(wèn)題造成離線時(shí),會(huì)出現(xiàn)空狀態(tài)的使用;
  4. 無(wú)結(jié)果:如果用戶進(jìn)行搜索,但是查詢內(nèi)容為空時(shí)會(huì)發(fā)生這種情況。

曾在谷歌擔(dān)任總監(jiān)的Ankit Jain提到,用戶可能會(huì)嘗試使用很多APP,但在最初的3-7天內(nèi)決定要“停止使用”哪些應(yīng)用。

對(duì)于使用體驗(yàn)好的APP,大多數(shù)用戶保留7天甚至更長(zhǎng)的時(shí)間,所以成功的關(guān)鍵是在前3-7天內(nèi)盡可能的吸引用戶。

二、設(shè)計(jì)空狀態(tài)的優(yōu)勢(shì)

經(jīng)過(guò)深思熟慮而設(shè)計(jì)的空狀態(tài)可以幫助提高產(chǎn)品參與度,使用戶滿意并減少流失。

在《用戶真正需要什么》一書中,知名企業(yè)管理專家斯科特·麥克凱恩提出了為用戶設(shè)計(jì)個(gè)性化的卓越體驗(yàn)的六條指導(dǎo)原則。他寫道,用戶想要:

  1. 令人信服的體驗(yàn)
  2. 個(gè)人關(guān)注
  3. 互相忠誠(chéng)
  4. 與眾不同
  5. 協(xié)調(diào)
  6. 創(chuàng)新

這些原則應(yīng)用到空狀態(tài)設(shè)計(jì)中能提高產(chǎn)品滿意度,為企業(yè)帶來(lái)益處。以下三個(gè)方面也能從好的空狀態(tài)設(shè)計(jì)中獲益:

  1. 用戶入門:除了增強(qiáng)用戶體驗(yàn)外,還提供了建立深度信任和繼續(xù)使用產(chǎn)品的機(jī)會(huì);
  2. 品牌建設(shè):提高知名度,提升公司形象,促進(jìn)公司發(fā)展并增加品牌價(jià)值;
  3. 個(gè)性化:可以是有趣的、嚴(yán)肅的、活潑的,創(chuàng)造一種個(gè)性又多元的感覺。

設(shè)計(jì)良好的空狀態(tài)不僅有助于提供令人信服的體驗(yàn),讓用戶能更多地參與到產(chǎn)品中并讓人滿意。

三、空狀態(tài)被忽視的原因

忽略空狀態(tài)時(shí)會(huì)發(fā)生什么?

沒有指導(dǎo)的空白頁(yè)面會(huì)造成混亂、不確定和失望,這可能導(dǎo)致較高的放棄率并降低產(chǎn)品的整體滿意度。

既然精心設(shè)計(jì)的空狀態(tài)有明顯的積極結(jié)果,為什么它們?nèi)菀妆缓鲆暎?/p>

首先,設(shè)計(jì)師往往將精力集中在設(shè)計(jì)中更可見的部分,通常很少考慮空狀態(tài)出現(xiàn)的情況,因此常常被忽略;

其次只有2-5%的用戶能遇到空狀態(tài),所以通常不把它們視為優(yōu)先事項(xiàng);

最后,人們并不能總是很好地理解空狀態(tài)的發(fā)生以及如何處理,所以它們退居二線,轉(zhuǎn)而使用更流行的頁(yè)面。

四、如何有目的地進(jìn)行空狀態(tài)設(shè)計(jì)

通過(guò)下面這些方法,可以確??掌聊坏脑O(shè)計(jì)是有用有效的,反饋豐富全面。

1. 同理心

增加驚喜、愉悅、情感和個(gè)性是在產(chǎn)品設(shè)計(jì)過(guò)程中創(chuàng)造更好體驗(yàn)的方式。對(duì)于空白頁(yè),同理心增加了多樣性,并創(chuàng)造了一個(gè)更吸引人的個(gè)性化體驗(yàn)。

2. 意象

形象化的描述一種減少壓力并提高注意力的狀態(tài)。例如:在錯(cuò)誤頁(yè)面的空狀態(tài)背景上添加一些風(fēng)景插圖可以帶來(lái)更愉悅的用戶體驗(yàn)。

3. 有用的指導(dǎo)

根據(jù)產(chǎn)品的類型,可以使用空狀態(tài)來(lái)指導(dǎo)用戶。有了新的賬戶后,引導(dǎo)用戶快速開始,從而減少了放棄的機(jī)會(huì)。

4. 入門內(nèi)容

對(duì)于某些產(chǎn)品,提供良好的入門內(nèi)容有助于他們直觀地看到正在發(fā)生的事情以及下一步可以做什么。

5. 提供操作步驟

??硕芍赋?,“做出決定所需的時(shí)間會(huì)隨著選擇的數(shù)量和復(fù)雜性而增加”。當(dāng)操作要求最多保持在一個(gè)或兩個(gè)時(shí),用戶可能會(huì)更快地采取行動(dòng)。

當(dāng)人們剛接觸Instagram這個(gè)平臺(tái)時(shí),他們還沒有關(guān)注任何人,一個(gè)好的空狀態(tài)設(shè)計(jì)可以為他們提供“添加關(guān)注的人”選項(xiàng)。

五、結(jié)論

在UX設(shè)計(jì)中很容易忽略空狀態(tài),因?yàn)樗鼈兒苌俪霈F(xiàn),而且有時(shí)候不容易理解。但是我們往往低估了空狀態(tài)設(shè)計(jì)帶來(lái)的價(jià)值,因?yàn)樗鰪?qiáng)了用戶體驗(yàn),并且有助于創(chuàng)建更具凝聚力的產(chǎn)品。

 

原文:uxdesign.cc/empty-state-ux-design-cf62eb765d60

原文作者:Shane Ketterman

譯者:Clippp,微信公眾號(hào):Clip設(shè)計(jì)夾。每周精選設(shè)計(jì)文章,專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計(jì)思考。

本文由 @Clippp 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來(lái)自Pexels,基于CC0協(xié)議。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!