新手引導(dǎo)設(shè)計(jì)規(guī)范
互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中的新手引導(dǎo)則,是讓用戶在短時(shí)間內(nèi)快速了解產(chǎn)品的特色以及產(chǎn)品的使用方式,輕松上手去體驗(yàn)產(chǎn)品的功能,完成自己的目標(biāo)。
一、新手引導(dǎo)是什么
《增長(zhǎng)黑客》中提到:
欲望-摩擦=轉(zhuǎn)化,摩擦是指阻礙人們完成他們想完成的行動(dòng)的令人心煩的障礙。摩擦的強(qiáng)弱直接影響到用戶的轉(zhuǎn)化,而最大的摩擦點(diǎn)就是用戶旅程的起點(diǎn)——“新用戶體驗(yàn)”。
新手引導(dǎo)的存在就是為了消除“新用戶體驗(yàn)”中的摩擦點(diǎn)。
回想我們初入公司時(shí),公司都會(huì)給大家安排入職培訓(xùn),讓新人快速融入新環(huán)境,開始新的工作,而這其實(shí)就是公司為我們安排的“新手引導(dǎo)”,新手引導(dǎo)英文onboarding,原意其實(shí)指的就是入職培訓(xùn)。
互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中的新手引導(dǎo)則,是讓用戶在短時(shí)間內(nèi)快速了解產(chǎn)品的特色以及產(chǎn)品的使用方式,輕松上手去體驗(yàn)產(chǎn)品的功能,完成自己的目標(biāo)。
總的來說,新手引導(dǎo)有2個(gè)目的:
- 讓新用戶掌握核心功能;
- 提高產(chǎn)品留存率。
二、設(shè)計(jì)原則
根據(jù)工作中的項(xiàng)目總結(jié)出7項(xiàng)基本的設(shè)計(jì)原則,這些原則可為設(shè)計(jì)實(shí)踐提供準(zhǔn)則,也可作為評(píng)價(jià)設(shè)計(jì)的好壞的內(nèi)在標(biāo)準(zhǔn):
1. 建立情感聯(lián)系
通過擬人化的形象和文案與用戶建立情感連接,讓用戶產(chǎn)生繼續(xù)走下去的欲望。
建立情感聯(lián)系是人的基本需求,當(dāng)人開始對(duì)事物付出自己的情感后,會(huì)變得更愿意去進(jìn)行深入的了解,也更難去舍棄。
2. 建立用戶目標(biāo)
提示用戶利益點(diǎn)和里程碑進(jìn)程,例如淘金幣的簽到,展示7天打卡進(jìn)程以及每天的獎(jiǎng)勵(lì),從而吸引用戶每天都來簽到,為用戶建立每天簽到的目標(biāo)。
3. 及時(shí)反饋,強(qiáng)化利益點(diǎn)
在用戶進(jìn)行操作后及時(shí)給與反饋,突出利益點(diǎn)刺激用戶,讓用戶明確知道自己可以通過操作獲得什么。
4. 設(shè)計(jì)節(jié)奏感
通過階段性反饋刺激用戶,減少用戶的疲倦感,如果將新手引導(dǎo)的用戶歷程比作觀影,在不同階段給與用戶小高潮,最終在劇終將劇情推入最高峰,這樣的節(jié)奏感可以讓用戶在操作過程中更加有沉浸感。
5. 分級(jí)開放功能
在面對(duì)一些內(nèi)容繁多的產(chǎn)品時(shí),我們往往會(huì)采用分級(jí)開放功能的方式,來避免用戶一次承受過大的學(xué)習(xí)量。按照功能的重要與核心程度,分前中后期分級(jí)開放功能,減少單次學(xué)習(xí)量,給用戶較長(zhǎng)的過渡期。同時(shí)還能避免用戶在前期不了解產(chǎn)品的情況下,會(huì)出現(xiàn)的誤操作,減少功能無法使用的束縛感。
6. 避免樣式單一
當(dāng)我們采用統(tǒng)一的引導(dǎo)樣式時(shí),用戶很容易發(fā)現(xiàn)提示的位置,并歸納為重復(fù)點(diǎn)擊,從而形成“慣性思維”。而我們要做的,就是根據(jù)具體功能的不同來變換引導(dǎo)的樣式。打斷玩家的“慣性思維”,讓玩家多動(dòng)腦子想一想,真正的理解引導(dǎo)的內(nèi)容,而不是一直處于放空狀態(tài)的無意識(shí)的點(diǎn)點(diǎn)點(diǎn)。
7.精簡(jiǎn)文字表達(dá)
盡可能通過視覺化形式展示信息,若必須使用文字,則盡可能精簡(jiǎn),通過分段、標(biāo)紅等幫助用戶查看到關(guān)鍵信息。
三、設(shè)計(jì)模式
設(shè)計(jì)模式一詞來源于《設(shè)計(jì)系統(tǒng)》這本書,用于指代任何可復(fù)用的界面組成要素,包括按鈕、文本框、圖標(biāo)、配色、字體,以及可復(fù)用的交互行為與功能流程等等。這些要素用于解決特定的設(shè)計(jì)問題,滿足特定的產(chǎn)品需求。
設(shè)計(jì)師可根據(jù)場(chǎng)景直接使用設(shè)計(jì)模式完成新手引導(dǎo)的界面設(shè)計(jì),也可以設(shè)計(jì)模式為起點(diǎn),衍生出更具業(yè)務(wù)場(chǎng)景的解決方案滿足個(gè)性化設(shè)計(jì)需求。
下文將以定義、組成元素、使用場(chǎng)景、使用規(guī)則以及示例,來介紹常用的6種新手引導(dǎo)的設(shè)計(jì)模式:
1. 引導(dǎo)頁(yè)
定義:
引導(dǎo)頁(yè)出現(xiàn)在用戶首次打開APP的時(shí)候,基本上由3-5個(gè)頁(yè)面組成。在用戶使用產(chǎn)品前先給用戶營(yíng)造好產(chǎn)品的基調(diào)和氛圍,宣傳產(chǎn)品功能和亮點(diǎn)或告知用戶最核心的操作方式。引導(dǎo)頁(yè)的內(nèi)容一定要仔細(xì)挑選,保證能帶給用戶新鮮感和吸引他們的注意力,否則對(duì)用戶來說反而是種干擾,只會(huì)直接選擇快速劃過。
組成元素:文字介紹+圖片介紹+操作引導(dǎo)。
使用場(chǎng)景:用戶首次APP,全面展示APP的功能。
使用規(guī)則:
- 引導(dǎo)頁(yè)最多不超過5頁(yè);
- 圖片介紹盡可能符合真實(shí)的使用場(chǎng)景,并且有趣;
- 有明確的操作引導(dǎo)用戶進(jìn)行下一步操作,例:翻頁(yè)指示、下一步按鈕。
2. 蒙層引導(dǎo)
定義:
蒙層引導(dǎo),顧名思義,就是在產(chǎn)品的整個(gè)界面上方用一個(gè)黑色半透明蒙層進(jìn)行遮罩,蒙層上方對(duì)界面進(jìn)行圈注,旁邊配以手勢(shì)、文字、符號(hào)、插畫等。這種引導(dǎo)方式可以讓用戶聚焦了解被圈注的功能點(diǎn)或手勢(shì)說明,不被頁(yè)面中其他的元素所干擾。
組成元素:黑色蒙層+高亮內(nèi)容+內(nèi)容介紹+操作引導(dǎo)。
使用場(chǎng)景:展示新功能、說明界面中功能位置的改動(dòng)、講解操作方式、體現(xiàn)特定的手勢(shì)交互劃分說明界面的整體結(jié)構(gòu)。
使用規(guī)則:
- 內(nèi)容聚焦:讓用戶一眼就能看到高亮內(nèi)容,切勿被其他元素干擾;
- 內(nèi)容介紹必須保持與高亮內(nèi)容的親密性;
- 操作按鈕顯而易見,可能的話將整個(gè)頁(yè)面都設(shè)置為點(diǎn)擊熱區(qū)。
3. 氣泡/彈窗提示
定義:一般會(huì)出現(xiàn)在用戶初次進(jìn)入頁(yè)面時(shí),它的表現(xiàn)形式是在操作按鈕旁邊彈出一個(gè)氣泡提示框或者直接彈出彈窗。
組成元素:氣泡+文字;彈窗+圖文信息+按鈕。
使用場(chǎng)景:告知用戶有新功能上線、引導(dǎo)用戶使用核心功能、或告知用戶一些隱藏菜單的內(nèi)容,當(dāng)不想過多干擾用戶操作時(shí)使用氣泡,若當(dāng)前提示內(nèi)容較為重要,且內(nèi)容較多,建議使用彈窗。
使用規(guī)則:
- 在用戶進(jìn)入相關(guān)場(chǎng)景后才出現(xiàn);
- 氣泡提示需采用較為突出的顏色吸引用戶,且用戶必須點(diǎn)擊指示內(nèi)容后才會(huì)消失,否則很容易被忽略;
- 彈窗內(nèi)盡可能以圖文方式介紹。
4. 動(dòng)畫/視頻引導(dǎo)
定義:動(dòng)畫、視頻的共同優(yōu)點(diǎn)是非常直觀并且具有吸引力。用戶可以根據(jù)動(dòng)態(tài)演示,很快地理解整個(gè)產(chǎn)品。但這類引導(dǎo)方式內(nèi)容不宜過長(zhǎng),不然傳遞的信息量太大會(huì)導(dǎo)致用戶失去耐心或干脆什么也沒記住。
組成元素:文字介紹+內(nèi)容+操作引導(dǎo)。
使用場(chǎng)景:適合操作比較復(fù)雜或動(dòng)態(tài)演示比較有直觀的產(chǎn)品。
使用規(guī)則:
- 用戶無法自己控制演示進(jìn)度的展示方式,因此內(nèi)容演示最好控制在10秒以內(nèi);
- 只引導(dǎo)關(guān)鍵內(nèi)容,避免信息量過大;
- 保證演示內(nèi)容的質(zhì)量,用戶可清晰觀察到演示內(nèi)容,否則建議圖文的形式。
5. 操作式引導(dǎo)
定義:
操作式引導(dǎo)會(huì)結(jié)合產(chǎn)品實(shí)際使用場(chǎng)景,一步一步地引導(dǎo)你進(jìn)行操作,鼓勵(lì)用戶參與其中,邊學(xué)邊用。這種方式很容易讓用戶沉浸其中、快速學(xué)習(xí),并且因?yàn)橛屑皶r(shí)的操作反饋,所以用戶很容易獲得強(qiáng)烈的成就感。
組成元素:內(nèi)容介紹+引導(dǎo)內(nèi)容+操作引導(dǎo)。
使用場(chǎng)景:工具類產(chǎn)品和游戲。
使用規(guī)則:
- 操作引導(dǎo)突出且明確指示出操作的方式,否則用戶很容易因?yàn)椴僮魇〉拇鞌「卸艞墸?/li>
- 保持內(nèi)容與操作的親密性;
- 操作成功后及時(shí)給予反饋。
6. 預(yù)設(shè)任務(wù)
定義:
預(yù)設(shè)任務(wù)是指在用戶進(jìn)入產(chǎn)品后,自動(dòng)為用戶創(chuàng)建了一些和產(chǎn)品形態(tài)相關(guān)的示例,而不是留給用戶一個(gè)空頁(yè)面。在引導(dǎo)的同時(shí)突出了產(chǎn)品的特色,借用本身的形態(tài)讓用戶沉浸在產(chǎn)品的真實(shí)場(chǎng)景中去學(xué)習(xí),在后續(xù)產(chǎn)品的使用中上手速度更快。
組成元素:引導(dǎo)內(nèi)容+操作引導(dǎo)。
使用場(chǎng)景:此類引導(dǎo)最常用于工具類產(chǎn)品,比如原型工具、設(shè)計(jì)軟件、文檔、任務(wù)清單等產(chǎn)品。
使用規(guī)則:
- 不要限制用戶的操作,應(yīng)用此類引導(dǎo)需要讓用戶自由探索;
- 需要提前設(shè)計(jì)好用戶操作路徑;
- 引導(dǎo)內(nèi)容要符合該產(chǎn)品實(shí)際核心使用場(chǎng)景。
四、進(jìn)階應(yīng)用
在平常設(shè)計(jì)時(shí)應(yīng)用以上的7個(gè)設(shè)計(jì)原則和6個(gè)設(shè)計(jì)模式,基本上就算掌握了新手引導(dǎo)的初階設(shè)計(jì),那進(jìn)階應(yīng)用是啥呢?
就拿淘金幣最近的一次改版來說,最新版本的淘金幣頻道新人場(chǎng)景下取消了傳統(tǒng)的新手引導(dǎo)(什么?沒有新手引導(dǎo)算是進(jìn)階??),取而代之的是鎖定的莊園、新人特有的兌換樓層和任務(wù)。淘寶為什么這么做,難道是數(shù)據(jù)指出新手引導(dǎo)沒有用?其實(shí)不然,仔細(xì)分析淘寶呈現(xiàn)給新人的內(nèi)容其實(shí)是對(duì)上文設(shè)計(jì)原則和模式的靈活運(yùn)用。
對(duì)于淘金幣新人來說,首先要學(xué)習(xí)金幣是什么,然后還要學(xué)習(xí)金幣莊園游戲的規(guī)則,學(xué)習(xí)量其實(shí)很大,因此相對(duì)于原來的操作式引導(dǎo),淘金幣運(yùn)用了分級(jí)開放原則,先讓用戶學(xué)習(xí)什么是金幣,當(dāng)經(jīng)歷7天后,再去解鎖莊園然后再去學(xué)習(xí)什么是莊園的游戲玩法,在此之前一直用獎(jiǎng)勵(lì)金這個(gè)突出利益點(diǎn)吸引用戶每天來。
此外,這里還運(yùn)用到預(yù)設(shè)任務(wù)的引導(dǎo)模式,嚴(yán)格來說是預(yù)設(shè)任務(wù)的一種變體,這里其實(shí)預(yù)設(shè)了3種任務(wù):1.簽到;2.金幣兌換;3.金幣任務(wù)。
一方面是培養(yǎng)用戶簽到習(xí)慣,另一方面通過兌換和任務(wù)的樓層讓用戶自己去試一試,直接體驗(yàn)金幣是什么,通過金幣任務(wù)去獲得金幣,獲得后兌換優(yōu)惠券,以此來理解金幣是什么。用戶就這樣在無意識(shí)地引導(dǎo)中學(xué)習(xí)逐漸學(xué)會(huì)淘金幣和莊園游戲。
寫在最后
新手引導(dǎo)的設(shè)計(jì)規(guī)范像是一本武功秘籍,跟著秘籍上的招式練習(xí)武功必將突飛猛進(jìn),然而真正的高手練習(xí)到最后都是把所有招式融會(huì)貫通,做到無招勝有招。
希望大家能借此設(shè)計(jì)規(guī)范多加實(shí)踐,歡迎一起交流。
參考文獻(xiàn):
《增長(zhǎng)黑客》——范冰
《Design System》——Alla Kholmatova
作者:章遷,蘇寧全產(chǎn)業(yè)會(huì)員研發(fā)中心,交互設(shè)計(jì)師
本文由 @章遷 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議。
可是對(duì)于B端的新手指引應(yīng)該怎么做呢?
那PC端的新手引導(dǎo)怎樣做?
好的引導(dǎo)應(yīng)該是像小說的背景說明一樣順其自然。