在新用戶引導(dǎo)流程中,如何用好空狀態(tài)界面?

6 評(píng)論 11194 瀏覽 82 收藏 13 分鐘

今天的文章,我們將會(huì)提供一些使用空狀態(tài)來(lái)優(yōu)化新用戶引導(dǎo)的策略和技巧。

當(dāng)新用戶打開(kāi)你的APP的時(shí)候,最初的幾個(gè)界面將會(huì)直接影響用戶對(duì)你的網(wǎng)站的預(yù)期。為了確保用戶不會(huì)在第一次打開(kāi)之后就卸載APP,你應(yīng)該用好最初的空狀態(tài)頁(yè)面,通過(guò)引導(dǎo),幫助用戶完成關(guān)鍵性任務(wù),獲得成就感,達(dá)成目標(biāo),并不斷回來(lái),成為你的APP的回頭客。換句話說(shuō),要在第一次交互之后,成功吸引用戶,讓他們流連忘返。

新用戶引導(dǎo)流程是這當(dāng)中的關(guān)鍵。創(chuàng)造第一印象,你只有一次機(jī)會(huì)。今天的文章,我們將會(huì)提供一些使用空狀態(tài)來(lái)優(yōu)化新用戶引導(dǎo)的策略和技巧。

什么是空狀態(tài)

對(duì)于許多APP而言,內(nèi)容是它的核心價(jià)值。無(wú)論是新聞?lì)怉PP,還是效率類應(yīng)用,均是如此,因?yàn)閷?duì)于用戶而言,絕大多數(shù)時(shí)候是為了內(nèi)容而使用引用。這樣一來(lái),一開(kāi)始使用的時(shí)候所面對(duì)的空狀態(tài)界面,就顯得至關(guān)重要了:當(dāng)用戶還沒(méi)有看到內(nèi)容也沒(méi)有內(nèi)容填充APP的時(shí)候,它將如何引導(dǎo)用戶完成從無(wú)到有的過(guò)程?

對(duì)于默認(rèn)為空的狀態(tài),或者僅僅只有基本默認(rèn)設(shè)定的設(shè)置界面,也非常適合引導(dǎo)新用戶熟悉產(chǎn)品。除了給用戶對(duì)內(nèi)容的期待之外,空狀態(tài)界面還適合教用戶使用APP。即使新用戶引導(dǎo)流程在這里被壓縮到一個(gè)步驟,它也能夠稱職地引導(dǎo)用戶做正確的事情。

在 Expensify 這個(gè)APP當(dāng)中,空狀態(tài)教會(huì)用戶如何起步,讓他們安全地使用產(chǎn)品。

引導(dǎo)流程中空狀態(tài)的價(jià)值

作為用戶首次使用所打開(kāi)的界面,空狀態(tài)界面對(duì)于用戶熟悉產(chǎn)品有這毋庸置疑的價(jià)值。你應(yīng)該利用這個(gè)機(jī)會(huì)盡可能地吸引用戶,教育用戶。

教育用戶

首先,空狀態(tài)界面應(yīng)該幫助用戶了解上下文情況,讓用戶熟悉當(dāng)前的狀況,為什么會(huì)發(fā)生這樣的情況,安撫用戶的情緒。此時(shí)應(yīng)該這樣展現(xiàn)信息:向用戶展示界面有內(nèi)容時(shí)候的樣子,或者向他們告知此時(shí)應(yīng)該如何操作來(lái)獲取內(nèi)容。

提供行動(dòng)指示

絕大多數(shù)空狀態(tài)界面會(huì)告訴你,為什么會(huì)遭遇這樣的情況。但是真正有效的空狀態(tài),會(huì)告訴你下一步要做什么。教育你的用戶很重要,但是在用戶最初遭遇空狀態(tài)的時(shí)候,你要驅(qū)動(dòng)他們前進(jìn),前進(jìn)了才是初步的成功??諣顟B(tài)界面就是最佳的起點(diǎn),你可以通過(guò)設(shè)計(jì)來(lái)鼓勵(lì)用戶前進(jìn)。

創(chuàng)造愉悅的體驗(yàn)

雖然絕大多數(shù)的APP都是功能性的(解決具體問(wèn)題),也是可用的(易于學(xué)習(xí),易于使用),同時(shí)它也應(yīng)該是令人愉悅的??諣顟B(tài)是你的APP同用戶構(gòu)建起情感聯(lián)系、塑造個(gè)性的絕佳機(jī)會(huì)。

如何設(shè)計(jì)絕佳的空狀態(tài)

空狀態(tài)能夠吸引用戶,但是在產(chǎn)品和UI設(shè)計(jì)的過(guò)程中,常常會(huì)忽略它的這一屬性,甚至?xí)雎詫?duì)空狀態(tài)的設(shè)計(jì)。因?yàn)樵诮^大多數(shù)時(shí)候,我們所設(shè)計(jì)的都是填充好內(nèi)容的界面,布局都被精心挑選的內(nèi)容塞滿了。但是,當(dāng)內(nèi)容還未來(lái)得及加入界面的時(shí)候,我們要如何展現(xiàn)界面呢?空狀態(tài)界面,其實(shí)是展現(xiàn)創(chuàng)造力和可用性的優(yōu)秀舞臺(tái)。

避免走入死胡同

當(dāng)用戶進(jìn)入空界面之后,發(fā)現(xiàn)整個(gè)交互和操作都走入了死胡同,不管怎么操作都無(wú)法改變現(xiàn)狀,這才是最糟糕的局面。且不說(shuō)陷入這樣的僵局給用戶帶來(lái)的混亂感和無(wú)效的多余操作,它本身的不可用讓用戶對(duì)APP所產(chǎn)生的失望情緒,才是最致命的。

看看 Modspot 兩個(gè)界面設(shè)計(jì)案例吧。第一個(gè)界面是用戶首次使用的空狀態(tài)頁(yè)面,巧妙的借助這個(gè)界面來(lái)引導(dǎo)用戶發(fā)布作品:

而第二個(gè)界面則是忽略空狀態(tài)界面設(shè)計(jì)時(shí)候的樣子,沒(méi)有演示,沒(méi)有引導(dǎo),也沒(méi)有說(shuō)明,對(duì)于不會(huì)主動(dòng)嘗試的用戶而言,這就是個(gè)死胡同。

讓空狀態(tài)界面視覺(jué)上簡(jiǎn)單清晰

空狀態(tài)本身內(nèi)容并不多,即使加上說(shuō)明和指引,也應(yīng)該足夠簡(jiǎn)單。將最重要的引導(dǎo)和說(shuō)明突出展示,減少無(wú)關(guān)內(nèi)容,降低干擾。簡(jiǎn)而言之,需要將清晰直觀的文案,和強(qiáng)引導(dǎo)性的視覺(jué)設(shè)計(jì)結(jié)合起來(lái)。下面iOS版 Dropbox 的離線文件空狀態(tài)界面,就非常值得學(xué)習(xí),簡(jiǎn)單清晰的文本加上有趣的插畫,讓用戶瞬間明白了這個(gè)功能如何使用。

讓空狀態(tài)具備直覺(jué)性

當(dāng)然,空狀態(tài)頁(yè)面要漂亮,但是它不僅僅要具備視覺(jué)美,它還需要恰到好處地讓用戶明白上下文場(chǎng)景。即使它只是新用戶引導(dǎo)的一個(gè)環(huán)節(jié),你也要讓它的信息傳達(dá)價(jià)值最大化,比如告訴用戶如何讓界面狀態(tài)從空變?yōu)榉强铡?/p>

下面以Google Photos 這個(gè)應(yīng)用為例簡(jiǎn)單說(shuō)明一下。作為Google的產(chǎn)品,它在視覺(jué)上做的相當(dāng)棒,精美的布局和漂亮的圖形都非常不錯(cuò)。然而,它的空狀態(tài)并不足以幫助用戶了解上下文背景,也沒(méi)有回答下面的問(wèn)題:

  • 合集(Collection)是什么?
  • 我如何能獲得一個(gè)合集?

空狀態(tài)界面不應(yīng)該為用戶創(chuàng)造更多的問(wèn)題,而是要盡量解決問(wèn)題。告訴用戶當(dāng)前界面是什么,以及要如何獲得更多。

強(qiáng)化個(gè)性

個(gè)性化的設(shè)計(jì)讓你的APP更加令人難忘。雖然在空狀態(tài)界面中能呈現(xiàn)出的“個(gè)性”看起來(lái)并不多,但是即使是微小的個(gè)性化設(shè)計(jì),都能讓你的界面看起來(lái)和同類產(chǎn)品截然不同,它會(huì)讓用戶從這里開(kāi)始體會(huì)到你的產(chǎn)品的不同之處。你可以看看Khaylo Workout 是如何在空狀態(tài)界面中借助文案和插畫來(lái)體現(xiàn)個(gè)性的。

拳擊手套插畫和Challenge 這個(gè)主題相互映襯,文案著重引導(dǎo)用戶創(chuàng)建新的Challenge ,強(qiáng)化交互。

鼓勵(lì)用戶操作

你的首要目的是說(shuō)服用戶做點(diǎn)什么。在空狀態(tài)界面中引導(dǎo)用戶交互,不僅僅是告訴他們?nèi)绾尾僮?,還需要告訴他們這么做有什么好處。

來(lái)看看 Facebook Massenger 的空狀態(tài)頁(yè)面吧,當(dāng)用戶抵達(dá)這一頁(yè)面的時(shí)候,頁(yè)面中萌翻的吉祥物會(huì)鼓勵(lì)用戶使用 Messenger 拍攝視頻和照片,并告訴他們有多少好友正在做同樣的事情,可以在此分享內(nèi)容。直接點(diǎn)擊安裝就可以解除這一空狀態(tài)。用戶在此可以選擇了解這一服務(wù),也可以選擇直接安裝,無(wú)論是哪個(gè)導(dǎo)向,都是有利于開(kāi)發(fā)者的。

如果可能,提供個(gè)性化的內(nèi)容

個(gè)性化的內(nèi)容服務(wù)本就是為了讓你的產(chǎn)品和用戶需求更好的匹配,而個(gè)性化的服務(wù)本身就是你的產(chǎn)品值得炫耀的價(jià)值所在。

所以,當(dāng)用戶初次探索你的產(chǎn)品的時(shí)候,應(yīng)該可以根據(jù)他們登錄帳號(hào)或者其他的信息,為他們提供個(gè)性化的內(nèi)容推薦、定制服務(wù)。就像下面這個(gè)閱讀APP一樣,在空狀態(tài)頁(yè)面中為用戶提供推薦的圖書(shū):

在界面中注入情感

空狀態(tài)還能為你展示你的產(chǎn)品富有人性的一面。積極的情緒刺激能夠讓你和用戶之間構(gòu)成情感聯(lián)系。想要在空狀態(tài)下呈現(xiàn)什么樣的感覺(jué),傳達(dá)什么樣的感情,都取決于你的目的,你想要達(dá)成的目標(biāo)。作為一款社交軟件,Google Hangouts 的目的很明顯,是要引導(dǎo)用戶盡量分享、交流和溝通,所以它所傳遞的情感也更加社交化。

當(dāng)然,這種采用負(fù)面情緒的空狀態(tài)是有風(fēng)險(xiǎn)的,有些人會(huì)在這種情形下進(jìn)行更多社交行為以規(guī)避它,有的用戶則會(huì)討厭這種方式。但是沒(méi)關(guān)系,有情感反應(yīng)總比沒(méi)有來(lái)的好。

鞏固交互

當(dāng)用戶在空狀態(tài)界面的引導(dǎo)下,完成任務(wù)的時(shí)候,同用戶一起慶祝,告訴他們做的很好,是構(gòu)建情感聯(lián)系的可行方案。當(dāng)用戶達(dá)成任務(wù)的時(shí)候,你可以趁熱打鐵,讓用戶做更多,來(lái)維持狀態(tài)。

比如在 Writeupp 這個(gè)應(yīng)用中,用戶需要達(dá)成列表中一系列任務(wù)。當(dāng)用戶完成全部任務(wù)之后,APP會(huì)給出“Well Done!”這樣的祝賀語(yǔ)。為了鞏固用戶的成就,APP會(huì)提供后續(xù)的步驟和任務(wù),讓他們繼續(xù)前進(jìn)。

結(jié)語(yǔ)

當(dāng)你在設(shè)計(jì)UI的時(shí)候,空狀態(tài)頁(yè)面從來(lái)都不應(yīng)該是空的,它應(yīng)該作為用戶引導(dǎo)流程的一個(gè)起點(diǎn),整個(gè)產(chǎn)品體驗(yàn)的重要一環(huán)而存在,推動(dòng)用戶前進(jìn),是你的產(chǎn)品服務(wù)的重要入口。

 

原文作者:NICK BABICH

原文地址:smashingmagazine

譯者:@陳子木

譯文來(lái)自:優(yōu)設(shè)

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 寫的很好,贊+1

    來(lái)自北京 回復(fù)
  2. 為啥都是英文APP截圖 ??

    來(lái)自廣東 回復(fù)
    1. 現(xiàn)在的國(guó)內(nèi)app基本都是競(jìng)品抄競(jìng)品,在創(chuàng)新上沒(méi)有什么太大的改變。有大創(chuàng)新的基本也就是BAT這類公司,他們也都會(huì)去查看國(guó)外的競(jìng)品,所以你懂…….

      來(lái)自廣東 回復(fù)
  3. 回復(fù)
  4. 空狀態(tài)頁(yè)面從來(lái)都不應(yīng)該是空的,它應(yīng)該作為用戶引導(dǎo)流程的一個(gè)起點(diǎn)。贊同這個(gè)觀點(diǎn)

    來(lái)自廣東 回復(fù)
    1. +1

      來(lái)自北京 回復(fù)