如何在新用戶引導流程中用好空狀態界面? - 優設網 - UISDC

如何在新用戶引導流程中用好空狀態界面?

2017/04/26 8867評論區

當新用戶打開你的APP的時候,最初的幾個界面將會直接影響用戶對你的網站的預期。為了確保用戶不會在第一次打開之后就卸載APP,你應該用好最初的空狀態頁面,通過引導,幫助用戶完成關鍵性任務,獲得成就感,達成目標,并不斷回來,成為你的APP的回頭客。換句話說,要在第一次交互之后,成功吸引用戶,讓他們流連忘返。

新用戶引導流程是這當中的關鍵。創造第一印象,你只有一次機會。今天的文章,我們將會提供一些使用空狀態來優化新用戶引導的策略和技巧。

什么是空狀態

對于許多APP而言,內容是它的核心價值。無論是新聞類APP,還是效率類應用,均是如此,因為對于用戶而言,絕大多數時候是為了內容而使用引用。這樣一來,一開始使用的時候所面對的空狀態界面,就顯得至關重要了:當用戶還沒有看到內容也沒有內容填充APP的時候,它將如何引導用戶完成從無到有的過程?

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

在 Expensify 這個APP當中,空狀態教會用戶如何起步,讓他們安全地使用產品。

引導流程中空狀態的價值

作為用戶首次使用所打開的界面,空狀態界面對于用戶熟悉產品有這毋庸置疑的價值。你應該利用這個機會盡可能地吸引用戶,教育用戶。

教育用戶

首先,空狀態界面應該幫助用戶了解上下文情況,讓用戶熟悉當前的狀況,為什么會發生這樣的情況,安撫用戶的情緒。此時應該這樣展現信息:向用戶展示界面有內容時候的樣子,或者向他們告知此時應該如何操作來獲取內容。

提供行動指示

絕大多數空狀態界面會告訴你,為什么會遭遇這樣的情況。但是真正有效的空狀態,會告訴你下一步要做什么。教育你的用戶很重要,但是在用戶最初遭遇空狀態的時候,你要驅動他們前進,前進了才是初步的成功。空狀態界面就是最佳的起點,你可以通過設計來鼓勵用戶前進。

創造愉悅的體驗

雖然絕大多數的APP都是功能性的(解決具體問題),也是可用的(易于學習,易于使用),同時它也應該是令人愉悅的。空狀態是你的APP同用戶構建起情感聯系、塑造個性的絕佳機會。

如何設計絕佳的空狀態

空狀態能夠吸引用戶,但是在產品和UI設計的過程中,常常會忽略它的這一屬性,甚至會忽略對空狀態的設計。因為在絕大多數時候,我們所設計的都是填充好內容的界面,布局都被精心挑選的內容塞滿了。但是,當內容還未來得及加入界面的時候,我們要如何展現界面呢?空狀態界面,其實是展現創造力和可用性的優秀舞臺。

避免走入死胡同

當用戶進入空界面之后,發現整個交互和操作都走入了死胡同,不管怎么操作都無法改變現狀,這才是最糟糕的局面。且不說陷入這樣的僵局給用戶帶來的混亂感和無效的多余操作,它本身的不可用讓用戶對APP所產生的失望情緒,才是最致命的。

看看 Modspot 兩個界面設計案例吧。第一個界面是用戶首次使用的空狀態頁面,巧妙的借助這個界面來引導用戶發布作品:

而第二個界面則是忽略空狀態界面設計時候的樣子,沒有演示,沒有引導,也沒有說明,對于不會主動嘗試的用戶而言,這就是個死胡同。

讓空狀態界面視覺上簡單清晰

空狀態本身內容并不多,即使加上說明和指引,也應該足夠簡單。將最重要的引導和說明突出展示,減少無關內容,降低干擾。簡而言之,需要將清晰直觀的文案,和強引導性的視覺設計結合起來。下面iOS版 Dropbox 的離線文件空狀態界面,就非常值得學習,簡單清晰的文本加上有趣的插畫,讓用戶瞬間明白了這個功能如何使用。

讓空狀態具備直覺性

當然,空狀態頁面要漂亮,但是它不僅僅要具備視覺美,它還需要恰到好處地讓用戶明白上下文場景。即使它只是新用戶引導的一個環節,你也要讓它的信息傳達價值最大化,比如告訴用戶如何讓界面狀態從空變為非空。

下面以Google Photos 這個應用為例簡單說明一下。作為Google的產品,它在視覺上做的相當棒,精美的布局和漂亮的圖形都非常不錯。然而,它的空狀態并不足以幫助用戶了解上下文背景,也沒有回答下面的問題:

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

空狀態界面不應該為用戶創造更多的問題,而是要盡量解決問題。告訴用戶當前界面是什么,以及要如何獲得更多。

強化個性

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

拳擊手套插畫和Challenge 這個主題相互映襯,文案著重引導用戶創建新的Challenge ,強化交互。

鼓勵用戶操作

你的首要目的是說服用戶做點什么。在空狀態界面中引導用戶交互,不僅僅是告訴他們如何操作,還需要告訴他們這么做有什么好處。

來看看 Facebook Massenger 的空狀態頁面吧,當用戶抵達這一頁面的時候,頁面中萌翻的吉祥物會鼓勵用戶使用 Messenger 拍攝視頻和照片,并告訴他們有多少好友正在做同樣的事情,可以在此分享內容。直接點擊安裝就可以解除這一空狀態。用戶在此可以選擇了解這一服務,也可以選擇直接安裝,無論是哪個導向,都是有利于開發者的。

如果可能,提供個性化的內容

個性化的內容服務本就是為了讓你的產品和用戶需求更好的匹配,而個性化的服務本身就是你的產品值得炫耀的價值所在。

所以,當用戶初次探索你的產品的時候,應該可以根據他們登錄帳號或者其他的信息,為他們提供個性化的內容推薦、定制服務。就像下面這個閱讀APP一樣,在空狀態頁面中為用戶提供推薦的圖書:

在界面中注入情感

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

當然,這種采用負面情緒的空狀態是有風險的,有些人會在這種情形下進行更多社交行為以規避它,有的用戶則會討厭這種方式。但是沒關系,有情感反應總比沒有來的好。

鞏固交互

當用戶在空狀態界面的引導下,完成任務的時候,同用戶一起慶祝,告訴他們做的很好,是構建情感聯系的可行方案。當用戶達成任務的時候,你可以趁熱打鐵,讓用戶做更多,來維持狀態。

比如在 Writeupp 這個應用中,用戶需要達成列表中一系列任務。當用戶完成全部任務之后,APP會給出“Well Done!”這樣的祝賀語。為了鞏固用戶的成就,APP會提供后續的步驟和任務,讓他們繼續前進。

結語

當你在設計UI的時候,空狀態頁面從來都不應該是空的,它應該作為用戶引導流程的一個起點,整個產品體驗的重要一環而存在,推動用戶前進,是你的產品服務的重要入口。

【這些文章都在探討新用戶引導】

  1. 《覺得自己學了假設計?真正的新用戶引導應該這么設計》
  2. 《實例教學!10步打造更好的新手入門體驗》

原文地址:smashingmagazine
原文作者:NICK BABICH
優設譯文:@陳子木

本文由優設網原創翻譯,請尊重版權和譯者成果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:[email protected]

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
設計微博:擁有粉絲量180萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.tawbbt.live/user-onboarding-empty-states

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計圈干貨 界面設計 排版布局 版式設計 職場 優設專訪 優設大課堂 設計師干貨 設計達人 配色 web前端開發 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 海報設計 設計規范 設計趨勢 用戶體驗設計 動效設計 logo設計 平面設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

二八杠千术