估值 28 億的 「Slack 」,是如何打造完美的用戶注冊(cè)體驗(yàn)?
任何一個(gè)細(xì)小的設(shè)計(jì),都可以做得很精彩。
設(shè)計(jì)師用了都說好的 Slack 究竟有何奧秘,今天我們就先從它完美的注冊(cè)體驗(yàn)講起。之所以說它完美,我覺得要?dú)w功于簡(jiǎn)潔的界面,順暢的流程,以及充滿心機(jī)的細(xì)節(jié)設(shè)計(jì)上。
為了讓文章更「干」,我將它的體驗(yàn)設(shè)計(jì)「小心機(jī)」歸納為四個(gè)部分:
一、第一印象很重要
注冊(cè)過程是產(chǎn)品和用戶的 first date,而注冊(cè)入口又是和用戶的 first sight,因此注冊(cè)入口就是給用戶留下好的第一印象的關(guān)鍵。
Slack 使用了全屏的氛圍圖,并用講實(shí)例的方式告訴你「如此牛逼的團(tuán)隊(duì)也在使用我們的產(chǎn)品」,這滿滿的格調(diào)會(huì)讓用戶迫切地想見識(shí)一下 Slack 的真面目呢。
非常簡(jiǎn)潔而有說服力的說明,伴隨著簡(jiǎn)單明了的步驟,讓用戶以為創(chuàng)建一個(gè)自己的賬號(hào),僅需輸入郵箱這么簡(jiǎn)單的一個(gè)步驟,這么好的事還不快試試?
二、我的產(chǎn)品會(huì)說話
和用戶的互動(dòng)都是建立信任的過程,注冊(cè)時(shí)尤為重要。好的產(chǎn)品會(huì)像朋友一樣,讓用戶沒有壓力,產(chǎn)生安全感甚至依賴感。而這樣的一個(gè)朋友也一定是個(gè)會(huì)說話的朋友。
通常我們看到的注冊(cè)流程是這樣的:
單調(diào)乏味的表單,冰冷的人機(jī)交互,讓用戶覺得注冊(cè)填寫是一項(xiàng)任務(wù)。
而 Slack 是怎么做的呢:
Slack 注冊(cè)過程以對(duì)話的形式設(shè)計(jì)表單文案,一問一答,很生動(dòng),「What’s your name?」 仿佛是和人一起交流,沒有任何認(rèn)知負(fù)擔(dān),而且給用戶輕松愉快的使用體驗(yàn)。
另一個(gè)有情感化設(shè)計(jì)的細(xì)節(jié)是頁面下方用戶是否愿意接收郵件的欄目 。普通網(wǎng)頁的文案是這樣冷漠而機(jī)械:
而 Slack 的文案 是這樣:
括號(hào)中的「very occasional」很口語化,并有種稍帶撒嬌情緒的感覺,讓人無法拒絕(像筆者這種特別怕廣告郵件干擾的人都為之心軟保留了 check box 里的對(duì)勾呢)。
三、給你足夠的安全感
人機(jī)交互的過程中用戶總會(huì)因?yàn)椴挥押玫脑O(shè)計(jì)沒有安全感,尤其在填表單這種需要用戶大量輸入的場(chǎng)景下,安全感十分重要。Slack 富有安全感的設(shè)計(jì)細(xì)節(jié):
- 告訴用戶這個(gè) Team Name 之后還可以修改,所以不需要太過謹(jǐn)慎,不需要有太多的壓力。
- 用實(shí)例清楚明了地告訴用戶你可以這樣填寫,即使用戶懶得閱讀前面的提示文字,也可以一眼看懂 team 命名規(guī)范。
- 另外一點(diǎn)是 Slack 注冊(cè)整個(gè)流程中每一頁都只解決一個(gè)問題,而右邊大篇幅的界面都用縮略圖的形式告訴用戶你所填寫的這一項(xiàng)信息最后會(huì)應(yīng)用在哪里。這就很大程度上解決了用戶在認(rèn)知上的困惑,比如搞不清楚 user name 和 team name,等等。
這里插播一個(gè)反例:比如某注冊(cè)表單中各種名稱需要填寫,寶寶真的搞不清也懶得搞清楚這些名稱都是什么作用啊。
四、沒有懶的用戶,只有差的設(shè)計(jì)
用戶體驗(yàn)很多時(shí)候要包容用戶的惰性,讓用戶更舒服。正是有了懶人,才有了越來越多為懶人服務(wù)的工具,也才讓我們?nèi)祟愇拿鞲酉冗M(jìn),懶人萬歲啊~Y(^o^)Y
回到正題,表單設(shè)計(jì)的一大原則就是盡量減少用戶的輸入,減少輸入有兩招:
- 真的減少,即根據(jù)用戶習(xí)慣自動(dòng)填寫內(nèi)容
- 心理上減少,比如通過界面信息布局設(shè)計(jì)讓用戶感覺需要填寫的信息很少,或通過讓用戶感受到輸入信息的必要性進(jìn)而減少用戶抵觸心理等。
Slack 就用到了這兩種。首先,填寫 web address 時(shí)自動(dòng)根據(jù)團(tuán)隊(duì)名稱填寫,允許用戶進(jìn)行修改。
另外,每一個(gè)頁面都僅僅解決一個(gè)問題,用整個(gè)頁面將這個(gè)問題詮釋得生動(dòng)貼切,左邊是問題和提示,右邊是大效果圖告訴你你所填的這一項(xiàng)內(nèi)容會(huì)用在哪里。
這樣的界面就形象地告訴了用戶「為什么你必須填這一項(xiàng)信息」,讓用戶從心理上對(duì)輸入信息沒有抵觸,也就在心理上減少了輸入負(fù)擔(dān)。
最后 Slack 的新用戶向?qū)Ш妥?cè)體驗(yàn)無縫銜接,給用戶了一個(gè)完整的流程閉環(huán)。
在新用戶向?qū)Ы缑?,除了氣泡?biāo)記提示之外,還有以對(duì)話形式的 slackbot,它可以解答新用戶的各種問題,在尋求幫助的同時(shí),用戶也恰好體驗(yàn)了產(chǎn)品。
這整個(gè)「注冊(cè) – 向?qū)?– 使用」的流程讓人感覺緊密相連,沒有場(chǎng)景的生硬切換,而是環(huán)環(huán)相扣的順暢感。
雖然只是一個(gè)小小的注冊(cè)場(chǎng)景,但是卻有設(shè)計(jì)師大量的心思花在細(xì)節(jié)設(shè)計(jì)上。所以,任何一個(gè)細(xì)小的設(shè)計(jì),都可以做得很精彩。共勉。
作者:春卷
來源:https://zhuanlan.zhihu.com/p/23327244
本文由 @春卷 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
appannie和ASO100