新手引導(dǎo)的設(shè)計(jì)也能很高級(jí)?

1 評(píng)論 11208 瀏覽 88 收藏 19 分鐘

編輯導(dǎo)語(yǔ):當(dāng)我們第一次使用某一APP產(chǎn)品時(shí),都會(huì)有新手引導(dǎo)這一功能出現(xiàn),其目的是可以使用戶快速上手產(chǎn)品,降低用戶熟悉產(chǎn)品的時(shí)間。那么對(duì)于新手引導(dǎo)的設(shè)計(jì)形式也越發(fā)多樣化,本文將對(duì)新手引導(dǎo)的設(shè)計(jì)本質(zhì)和關(guān)鍵類型進(jìn)行分析,值得閱讀學(xué)習(xí)。

說(shuō)到新手引導(dǎo),大家腦海中第一時(shí)間想到的是什么?是第一次打開(kāi) APP 時(shí)的開(kāi)屏介紹,亦或是功能說(shuō)明的氣泡提示?

新手引導(dǎo)的設(shè)計(jì)也能很高級(jí)?

其實(shí)都沒(méi)錯(cuò),新手引導(dǎo)作為連接設(shè)計(jì)師和用戶的一種重要手段,其擔(dān)負(fù)的使命是降低用戶在使用APP時(shí)的學(xué)習(xí)成本,從初學(xué)者盡快成為使用者。而在當(dāng)下,新手引導(dǎo)的使用場(chǎng)景早已跳出首次進(jìn)入應(yīng)用的介紹,形式也更加多樣,甚至延伸出線索引導(dǎo)的高級(jí)形式,潛移默化地引導(dǎo)用戶,以至于用戶學(xué)會(huì)時(shí)都沒(méi)有意識(shí)到自己已經(jīng)被引導(dǎo)。以下我們將走進(jìn)新手引導(dǎo)的世界,掌握新手引導(dǎo)的設(shè)計(jì)本質(zhì)和關(guān)鍵類型。

一、為什么需要新手引導(dǎo)?

新手引導(dǎo),英文術(shù)語(yǔ)為OnBoarding。其實(shí)在沒(méi)有手機(jī)互聯(lián)網(wǎng)的時(shí)代就已經(jīng)存在于企業(yè)管理中,而且到現(xiàn)在也還一直存在著 [1]。是的,它就是我們?nèi)肼毠緯r(shí)的新員工入職培訓(xùn),這個(gè)培訓(xùn)過(guò)程上至企業(yè)文化,下至日常技能,可以幫助新員工快速進(jìn)入工作狀態(tài),融入公司環(huán)境。

有研究表明,好的入職培訓(xùn)甚至可以提高員工的對(duì)工作的滿意度和公司忠誠(chéng)度 [2]脫胎于入職培訓(xùn),在互聯(lián)網(wǎng)發(fā)展期間,相對(duì)于員工的滿意度和忠誠(chéng)度而言,APP則開(kāi)始關(guān)心用戶的激活率、留存率和轉(zhuǎn)化率。而硅谷分析師 Andrew Chen 的研究中表明,平均APP在安裝后的三天內(nèi)會(huì)失去 77% 的用戶 [3]。這就促使APP需要在用戶進(jìn)入的第一時(shí)間傳遞自己的價(jià)值和必要的使用技巧,以保證用戶不會(huì)因?yàn)楦兄坏紸PP的用處,或者使用過(guò)程中遇到困難而卸載APP。

在這個(gè)背景下,新手引導(dǎo)便被廣泛提倡和運(yùn)用,F(xiàn)acebook和Google也均將新手引導(dǎo)體驗(yàn)納入設(shè)計(jì)規(guī)范之中 [4] [5]。使用場(chǎng)景也逐漸地從首次進(jìn)入APP開(kāi)屏介紹,拓展至新功能上線、日常使用幫助等整個(gè)用戶使用旅程中。

二、新手引導(dǎo)有哪些類型?

我們前文所說(shuō)的開(kāi)屏介紹,氣泡提示其實(shí)都只是引導(dǎo)的一種表現(xiàn)手段,從信息傳達(dá)角度來(lái)看,引導(dǎo)可分為三種類型,即圖文引導(dǎo)、交互引導(dǎo)和線索引導(dǎo),這三種類型用戶完成的概率逐一降低,學(xué)習(xí)效果卻逐一增強(qiáng)。我們要結(jié)合實(shí)際業(yè)務(wù)場(chǎng)景靈活搭配使用。

新手引導(dǎo)的設(shè)計(jì)也能很高級(jí)?

1.? 圖文引導(dǎo)

作為日常設(shè)計(jì)中接觸最多的形式,圖文引導(dǎo)即通過(guò)視頻、圖片、文字等形式直接呈現(xiàn)給用戶,以引導(dǎo)用戶了解APP和告知用戶功能的更新。其載體多種多樣,常用的幾種形式中,從對(duì)用戶的干擾性上依次可以為全屏式、彈窗式、氣泡式。

全屏介紹作為干擾性最大的一種形式,會(huì)覆蓋全部的APP畫面,僅推薦在用戶在首次進(jìn)入APP時(shí)使用。如Layout from Instagram 是一款I(lǐng)nstagram旗下幫助用戶剪輯布局圖片的工具型APP,用戶在下載進(jìn)入APP的第一時(shí)間內(nèi),Layout利用簡(jiǎn)易的四步動(dòng)畫全屏介紹幫助用戶快速了解了該APP的主要使用技巧,在給用戶留下APP簡(jiǎn)單易用的第一印象后,最后自然地鏈接到APP歡迎頁(yè),以一句詢問(wèn)句“準(zhǔn)備創(chuàng)建自己的布局?”為引子,既表明了該APP的定位是照片布局,又激起了用戶想要自己上手試試剛剛學(xué)到技巧的欲望。

新手引導(dǎo)的設(shè)計(jì)也能很高級(jí)?

彈窗引導(dǎo)跟全屏引導(dǎo)相同,也是一種會(huì)打斷用戶正常操作的形式。但由于其畫面占比較小,會(huì)利用蒙版稍微露出后面的界面,不至于完全打斷用戶的使用流程,陷入我不知道在哪的境地,一般會(huì)用在產(chǎn)品迭代的新功能引導(dǎo)。而為了更好地幫助用戶掌握新的功能,推薦在用戶實(shí)際想要使用該功能或者到達(dá)該功能頁(yè)面的時(shí)候進(jìn)行引導(dǎo),這樣用戶會(huì)有更強(qiáng)的學(xué)習(xí)意愿。而用戶正在進(jìn)行其他任務(wù),強(qiáng)制進(jìn)行引導(dǎo)打斷,可能會(huì)引起用戶的負(fù)面情緒,請(qǐng)謹(jǐn)慎使用。

新手引導(dǎo)的設(shè)計(jì)也能很高級(jí)?

相比于彈窗提示,還有一種更輕量的引導(dǎo)方式,它就是氣泡提示。氣泡提示是在用戶使用過(guò)程中,通過(guò)氣泡方式進(jìn)行功能引導(dǎo)的表現(xiàn)形式。這種方式不會(huì)打斷用戶的正常使用流程,因此幾乎不會(huì)干擾到用戶,還能起到新功能提示的作用,但是也正因?yàn)椴粫?huì)打斷用戶,頁(yè)面占比也很小,用戶很容易忽視,建議在小功能迭代時(shí)使用。

需要注意的是,一個(gè)頁(yè)面最多有一個(gè)氣泡提示,如果同時(shí)出現(xiàn)多個(gè)不同的氣泡,反而會(huì)讓用戶產(chǎn)生迷惑,還會(huì)有廣告彈窗的既視感,降低用戶對(duì)該產(chǎn)品在其心中的品質(zhì)。為了避免這種情況,就需要在設(shè)計(jì)時(shí)統(tǒng)籌把握所有氣泡提示的出現(xiàn)時(shí)機(jī),約束其出現(xiàn)的唯一條件,以免跟其他氣泡提示撞車。

新手引導(dǎo)的設(shè)計(jì)也能很高級(jí)?

2. 交互引導(dǎo)

從前文可以看出,圖文引導(dǎo)由于其直接,單刀直入的特點(diǎn),適合在用戶使用APP初期,幫助用戶構(gòu)建APP使用理念,以及新功能上線時(shí)使用。同時(shí)也正因?yàn)楸硎鲞^(guò)于直白,用戶在引導(dǎo)過(guò)程中幾乎全靠記憶,因此從傳遞給用戶信息到用戶真正上手的間隔時(shí)間不應(yīng)過(guò)長(zhǎng),否則用戶容易出現(xiàn)實(shí)際上手又忘記的情況。

簡(jiǎn)道云是一款線上應(yīng)用搭建平臺(tái),在用戶使用前期會(huì)通過(guò)圖文引導(dǎo)的方式引導(dǎo)用戶了解該平臺(tái)如何使用,每一步都包含了一個(gè)功能介紹視頻,一共六大步,信息量過(guò)大,導(dǎo)致用戶看完想自己嘗試的時(shí)候往往只記得其中一兩個(gè)知識(shí)點(diǎn),還留下操作復(fù)雜的第一印象。

新手引導(dǎo)的設(shè)計(jì)也能很高級(jí)?

因此當(dāng)我們無(wú)法通過(guò)簡(jiǎn)潔明了的信息引導(dǎo)用戶時(shí),這時(shí)候就應(yīng)該引入交互引導(dǎo)。顧名思義,相對(duì)于圖文短平快的引導(dǎo)方式,交互引導(dǎo)是一種需要用戶參與其中,邊學(xué)邊操作的引導(dǎo)模式,這種方式一般將核心的技巧拆分成幾個(gè)關(guān)鍵任務(wù),讓用戶可以在引導(dǎo)之后立刻上手操作,加深知識(shí)的印象,在工具型產(chǎn)品中被廣泛運(yùn)用。

Framer是一款交互原型工具,支持使用代碼做動(dòng)效,在它的前期新手引導(dǎo)中就采用了交互引導(dǎo)的方式。在它的布局中,直接將實(shí)際的畫布呈現(xiàn)給用戶,左邊放置了教學(xué)視頻,右邊則放置了同樣的畫板給用戶,用戶可以實(shí)時(shí)地跟隨用戶進(jìn)行實(shí)操,而在最下方則展示了具體的知識(shí)點(diǎn)和步驟點(diǎn)。整個(gè)引導(dǎo)下來(lái),用戶基本可以上手這款軟件。

新手引導(dǎo)的設(shè)計(jì)也能很高級(jí)?

?3. 線索引導(dǎo)

如果說(shuō)圖文引導(dǎo)和交互引導(dǎo),用戶在其中是被動(dòng)地接受信息,那么線索引導(dǎo)則是用戶主動(dòng)跟隨設(shè)計(jì)者留下的線索自主發(fā)現(xiàn)的方式。就好比同樣地介紹一棵樹(shù),圖文式是拿著圖片告訴用戶,交互式是帶著用戶去觸摸,而線索式則是用戶聽(tīng)到樹(shù)葉被風(fēng)吹動(dòng)的聲音,自己找到。其中哪種更有成就感和記憶更深刻自然不言自明。

而在iOS的系統(tǒng)設(shè)計(jì)之中,為了保持整體設(shè)計(jì)的克制簡(jiǎn)潔,線索引導(dǎo)這種方式就被廣泛地應(yīng)用。設(shè)計(jì)手法主要表現(xiàn)為動(dòng)畫線索[6]和經(jīng)驗(yàn)線索。

動(dòng)畫線索是將元素的出場(chǎng)和入場(chǎng)動(dòng)畫作為線索,并通過(guò)一種常見(jiàn)的手段作為觸發(fā)條件。比如從A點(diǎn)到B點(diǎn)一般我們會(huì)走道路一,但是現(xiàn)在又支持更加快捷的道路二,如何不露聲色地告訴用戶呢?就需要在用戶走道路一的途中,讓用戶自己看到道路二。

新手引導(dǎo)的設(shè)計(jì)也能很高級(jí)?

上面可能說(shuō)得有點(diǎn)抽象,我們舉個(gè)具體的例子。Safari是iOS自帶的瀏覽器軟件,它支持同時(shí)創(chuàng)建多個(gè)網(wǎng)頁(yè),而在其管理網(wǎng)頁(yè)的頁(yè)面,用戶想要?jiǎng)h除一個(gè)網(wǎng)頁(yè),但又沒(méi)有任何提示,用戶會(huì)下意識(shí)地去點(diǎn)擊縮略圖右上角的“×”,而移除縮略圖的過(guò)程則采用一個(gè)向左移動(dòng)出屏幕的動(dòng)畫,從而傳遞了線索給到用戶。這時(shí)候如果用戶嘗試左滑縮略圖會(huì)驚喜地發(fā)現(xiàn)刪除縮略圖的第二種方式。這里我們可以對(duì)比看下夸克APP,夸克同樣支持兩種移除方式,但是當(dāng)用戶點(diǎn)擊“×”時(shí)是原地消失,如果不引入其他引導(dǎo),用戶很難學(xué)會(huì)第二種滑動(dòng)移除的方式。

新手引導(dǎo)的設(shè)計(jì)也能很高級(jí)?

無(wú)獨(dú)有偶,iPhone的音量調(diào)節(jié)引導(dǎo)也是采用了這個(gè)原理。在IOS 13中為了降低對(duì)用戶的干擾,將音量反饋改到了側(cè)邊,而在這一版里,音量調(diào)節(jié)除了支持按鍵,也新增了手勢(shì)上下拖動(dòng),但是蘋果是如何教會(huì)用戶這個(gè)新的交互方式的呢?具體如下:用戶通過(guò)按鍵調(diào)節(jié)音量時(shí)先顯示寬邊音量條,繼續(xù)調(diào)整時(shí)向左縮小為窄邊條,從而在認(rèn)知層面告知用戶音量是有兩種寬度,且兩者之間是可以互相切換的,而部分用戶就會(huì)嘗試向右拖動(dòng)控制音量條,從而學(xué)會(huì)這種方式。

新手引導(dǎo)的設(shè)計(jì)也能很高級(jí)?

以上我們可以看到,動(dòng)畫線索一般來(lái)說(shuō)會(huì)有兩種方式實(shí)現(xiàn)用戶的意圖,一種是基礎(chǔ)的常識(shí)性操作,一種是更高級(jí)的操作。而在蘋果的App Store應(yīng)用商店中,用戶退出一個(gè)頁(yè)面則包含了三種實(shí)現(xiàn)方式,這個(gè)留給各位讀者自己發(fā)現(xiàn)。除了動(dòng)畫線索,在蘋果系統(tǒng)中還有一種線索引導(dǎo)方式 — 經(jīng)驗(yàn)線索。這種方式就好比你已經(jīng)知道如何從A到B的經(jīng)驗(yàn),那么以后在類似的場(chǎng)景中,你會(huì)優(yōu)先使用之前的操作經(jīng)驗(yàn)達(dá)成目的。

新手引導(dǎo)的設(shè)計(jì)也能很高級(jí)?

還是以Safari舉例,在iOS 15的改版中,用戶想要進(jìn)入網(wǎng)頁(yè)管理頁(yè)面,除了支持點(diǎn)擊圖標(biāo),也支持用戶上滑網(wǎng)址進(jìn)入,而這個(gè)交互操作是映射了用戶進(jìn)入系統(tǒng)任務(wù)管理后臺(tái)的上滑操作經(jīng)驗(yàn)。
新手引導(dǎo)的設(shè)計(jì)也能很高級(jí)?

雖然線索引導(dǎo)沒(méi)有過(guò)多的干擾,將自由都留給了用戶,但是我們可以看出來(lái)這種方式較為隱晦,基本上是留給愛(ài)探索,想要更便捷操作的用戶,而對(duì)于普通用戶也保留了基本的交互方式,因此從另一個(gè)角度來(lái)看,蘋果之所以不做單獨(dú)的介紹,一方面是為了系統(tǒng)的簡(jiǎn)潔,另一方面是目標(biāo)群體數(shù)量不大的原因。

三、如何設(shè)計(jì)出恰到好處的新手引導(dǎo)?

通過(guò)上一部分,我們了解了新手引導(dǎo)的三種類型及其使用場(chǎng)景。那在實(shí)際業(yè)務(wù)中需要注意什么,才能設(shè)計(jì)出恰到好處的引導(dǎo)設(shè)計(jì)呢?這里我總結(jié)了三問(wèn),幫助大家更好地理解和運(yùn)用。

1. 為什么要引導(dǎo)?(why)

雖然說(shuō)這個(gè)話在我這篇文章里是有點(diǎn)廢話的感覺(jué),但是我還是希望大家能意識(shí)到使用引導(dǎo)的必要性。真正好的設(shè)計(jì)是不需要引導(dǎo)的,它應(yīng)該是基于用戶日常生活中的經(jīng)驗(yàn),用戶可以自己摸索學(xué)會(huì)。就像喬布斯發(fā)布iPhone 4的時(shí)候一樣,觸屏交互這種自然合理的交互方法并沒(méi)有進(jìn)行刻意的教學(xué),因?yàn)橛脩粝乱庾R(shí)地看到圖標(biāo)在那里就會(huì)去點(diǎn),就像看到桌子上有個(gè)蘋果,拿起來(lái)一樣自然。而當(dāng)時(shí)使用按鍵交互的方式才是增加了用戶的學(xué)習(xí)成本。

因此希望在明確使用引導(dǎo)前,你需要知道為什么要引導(dǎo)?是因?yàn)楣δ苤笜?biāo),還是為了改善用戶體驗(yàn),并對(duì)癥下藥,畢竟無(wú)需必要,勿增實(shí)體。

2. 為什么要用這種引導(dǎo)?(how)

當(dāng)我們明確要使用引導(dǎo)后,我們要時(shí)刻問(wèn)自己當(dāng)下使用的引導(dǎo)是不是合適的,我建議從兩個(gè)維度去判斷,一個(gè)是復(fù)雜度,要知道用戶是懶惰的,也是沒(méi)耐心的,多一點(diǎn)的時(shí)間成本和理解成本對(duì)用戶來(lái)說(shuō)都是阻礙。另外一個(gè)是干擾度,我們最好從干擾最小的方案開(kāi)始設(shè)計(jì),實(shí)在不行再去考慮干擾較大的方案,并時(shí)常將自己代入其中,問(wèn)自己如果看到這個(gè)引導(dǎo)是覺(jué)得貼心還是糟心。

3. 為什么要在這時(shí)候用引導(dǎo)?(when)

到這里我們已經(jīng)基本明確了引導(dǎo)的表現(xiàn)形式,這一步相對(duì)來(lái)說(shuō)最簡(jiǎn)單,但是考慮的場(chǎng)景可能也最復(fù)雜。用戶使用你的產(chǎn)品是整體使用,因此我們不能單點(diǎn)地去考慮將該設(shè)計(jì)放在該場(chǎng)景是否合適,而應(yīng)該梳理用戶使用產(chǎn)品的整個(gè)旅程,遍歷所有用戶需要該引導(dǎo)的可能場(chǎng)合,甚至在不同的場(chǎng)景需要不同的表現(xiàn)方式,覆蓋引導(dǎo)前的告知、引導(dǎo)中的可退出、引導(dǎo)后的可找回,一次性將用戶的試錯(cuò)成本降到最低。

四、結(jié)語(yǔ)

恭喜你看到了這里,通過(guò)這篇文章我們了解了新手引導(dǎo)的來(lái)源,包含圖文引導(dǎo)、交互引導(dǎo)和線索引導(dǎo)三大類型,并說(shuō)明了新手引導(dǎo)在實(shí)際設(shè)計(jì)時(shí)的建議,希望在今后的設(shè)計(jì)中如果遇到引導(dǎo)的設(shè)計(jì),可以更加游刃有余,結(jié)合實(shí)際業(yè)務(wù)場(chǎng)景給出最合適的提案。如果你還覺(jué)得意猶未盡的話,這里有個(gè)網(wǎng)站(https://www.reallygoodux.io/),里面收納了很多產(chǎn)品的新手引導(dǎo),可以再去看看~

參考資料:

[1] Bauer, T. N., & Erdogan., B. (2011),Organizational socialization: The effective onboarding of new employees

[2] Ashford, S. J., & Black, J. S. (1996). Proactivity during organizational entry: The role of desire for control.

[3] https://andrewchen.com/new-data-shows-why-losing-80-of-your-mobile-users-is-normal-and-that-the-best-apps-do-much-better/

[4] https://developers.facebook.com/docs/facebook-login/userexperience/

[5] https://material.io/design/communication/onboarding.html#usage

[6] 洋爺. Apple 的設(shè)計(jì)哲學(xué) · 交互篇

 

本文由 @為何 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 從新手引導(dǎo)的來(lái)源和說(shuō)明了新手引導(dǎo)在實(shí)際設(shè)計(jì)時(shí)的建議分享了許多干貨~

    回復(fù)