這5個(gè)技巧幫你設(shè)計(jì)出眼前一亮的App引導(dǎo)頁

4 評(píng)論 24759 瀏覽 135 收藏 13 分鐘

現(xiàn)在新手引導(dǎo)已經(jīng)成手機(jī)客戶端標(biāo)配,但是通用的做法不見得是最有效的。這篇文章中我們將會(huì)看到為什么新手引導(dǎo)經(jīng)常無效,以及如何借鑒游戲設(shè)計(jì)的原理來提高用戶的參與度。

通過跟各種行業(yè)的移動(dòng)團(tuán)隊(duì)溝通,發(fā)現(xiàn)這些添加額外幫助的新手引導(dǎo)頁讓用戶困惑和沮喪。一個(gè)測(cè)試的參與者說“我只想打開app開始探索”。用戶測(cè)試表明用戶會(huì)跳過和忽略新手引導(dǎo)頁。最好的情況下,用戶會(huì)感覺到一點(diǎn)點(diǎn)不便;最壞的情況下,這會(huì)明顯阻止新用戶進(jìn)入app。

一些常(wu)見(xiao)的新手引導(dǎo)頁模式( 透明度標(biāo)注,演示視頻,3步引導(dǎo))

為什么這些模式會(huì)無效?

那么,為什么這些模式會(huì)不起作用,我們可以在游戲領(lǐng)域?qū)ふ掖鸢浮?/p>

游戲設(shè)計(jì)師都知道,不僅不能阻止新玩家進(jìn)入正在交火的房間,還要讓他們享受這些經(jīng)驗(yàn),雖然大部分的玩家在搞清楚武器和怎么反擊之前都會(huì)掛掉。

在游戲設(shè)計(jì)中,一些能讓玩家深入了解游戲的模式比另一些更有效,并且這些模式對(duì)于移動(dòng)端也同樣適用。雖然跟游戲里的死亡不同,但是不明白如何去做這一點(diǎn)對(duì)于用戶是一樣的。當(dāng)這種情況發(fā)生在大部分的用戶身上時(shí),你的app就完蛋了。

3-Figure-Portal-large-opt

(Portal讓玩家在一個(gè)安全的環(huán)境中學(xué)會(huì)新的技能)

Extra Credits在線教程系列從內(nèi)行人的角度展現(xiàn)了游戲的各個(gè)方面,“ 教程 101 ”是一個(gè)令人拍案叫絕的視頻,每個(gè)app的設(shè)計(jì)者都應(yīng)該好好看。

從“ 教程 101 ”中的各具特色的有效教程,我們可以提取出一些能用在app設(shè)計(jì)上的基本規(guī)則:

1、使用的文字要越少越好。

2、前期不能有太多內(nèi)容。

3、讓它變得有趣。

4、通過游戲來學(xué)習(xí)。

5、聆聽你的用戶。

規(guī)則一:文字越少越好

當(dāng)我們想解釋什么的時(shí)候,文字是最簡(jiǎn)單的工具。但是,當(dāng)我們希望用戶了解什么的時(shí)候,文字往往會(huì)起反作用。根據(jù)“ 教程 101 ”一定要避免只依靠文字,“ 因?yàn)樗鼤?huì)破壞速度和沉浸感,并且通常被最需要這些教程的用戶跳過。”

“只說,不展示”的方式,讓過多的文字無法戰(zhàn)士移動(dòng)應(yīng)用的優(yōu)勢(shì)。正確的做法是“展示,不說”,用互動(dòng)的方式讓用戶邊桌邊學(xué)。當(dāng)一個(gè)人事先練習(xí)了相關(guān)的做法,要比只是用文字告訴他們?cè)趺醋鲆尤菀妆挥涀 ?/p>

下面是一些例子:

Boomerang vs. Mailbox

4-Figure-Boomerang-large-opt

Boomerang安卓版的引導(dǎo)頁文字太多了,同樣也違背了第二條法則。

5-Figure-Mailbox-large-opt

Mailbox蘋果版的引導(dǎo)頁鼓勵(lì)大家邊做邊學(xué)。

DigiCal?vs.?Fantastical

6-Figure-DigiCal-large-opt

DigiCal安卓版,把文字提煉成了主題。

7-Figure-Fantastical-large-opt

Fantastical蘋果版,邀請(qǐng)用戶通過引導(dǎo)頁完成一系列操作來達(dá)到學(xué)習(xí)的目的。

Catch (2013) vs. Clear

8-Figure-Catch-large-opt

Catch的安卓版介紹了一系列功能但是不讓用戶嘗試。

9-Figure-Clear-preview-opt

Clear的蘋果版,默認(rèn)視圖預(yù)裝了一個(gè)任務(wù),可以讓用戶通過做去學(xué)習(xí)。

如果有辦法去展示就不要只是用文字說明,用文字來說明“原因”,然后用做去展示“效果”。

規(guī)則二:前期不能有太多內(nèi)容

“如果你試圖在剛開始的時(shí)候把一切都交給玩家,”?Extra Credits 在“教程101”里說“他們會(huì)淹沒在大量信息中但是參與不足。將“玩家”替換成“用戶”,這句話同樣適用于app的設(shè)計(jì)。

一次性給用戶大量的內(nèi)容,他們往往會(huì)在真正需要的時(shí)候忘了;真正需要做的是在用戶需要的時(shí)候提供簡(jiǎn)短容易消化的信息。請(qǐng)記住你在這里會(huì)給用戶留下第一印象,你難道不希望留下更多用戶的第一印象么?

Dooo vs. Todoist

10-Figure-Dooo-large-opt

Dooo 蘋果版壓倒性的11頁的引導(dǎo)頁。

11-Figure-ToDoList-large-opt

Todoist 蘋果版,一個(gè)小提示邀請(qǐng)用戶去完成第一個(gè)任務(wù)。然后另一個(gè)提示介紹了選擇菜單。

UserTesting的最近的文章斷言“用戶喜歡引導(dǎo)頁”,這里的“引導(dǎo)頁”指的是用戶在第一次使用的時(shí)候一系列的互動(dòng)提示。

12-Facebook_paper-large-opt

別在信息超載的用戶面前一下子把所有的內(nèi)容都給出來,給他們合適的一小塊,在他們需要的時(shí)候。

規(guī)則三:獎(jiǎng)勵(lì)

事實(shí)上,你可能還記得“教程101”中這條規(guī)則是“使他有趣”。當(dāng)然了,“有趣”并不適用于所有的app。但是當(dāng)視頻的解說者說,“你的教程應(yīng)該跟游戲的其他部分一樣有吸引力”,從另一種意義來說,這條規(guī)則也適用于我們的領(lǐng)域。

即使我們不能讓我們的app變得有趣,也可以通過其他的方法讓獎(jiǎng)勵(lì)融入整個(gè)app的使用之中。一個(gè)能做到這一點(diǎn)的好辦法是,跟用戶互動(dòng),讓他實(shí)際去完成事情。這賦予了用戶一種力量感去加強(qiáng)了他們的學(xué)習(xí)。

即使有趣并不是正確的基調(diào),增加幽默感有的時(shí)候仍然是合適的。我們來看兩個(gè)實(shí)現(xiàn)它的不同的方法,NBC News和Flipboard,后者使用了正確的方法。盡管NBC News的新手引導(dǎo)頁使用了“有趣的”字體,它仍然看上去像個(gè)演講稿。另一方面,F(xiàn)lipboard一打開就采用了一種與眾不同的戲劇性的方式。

這里沒有介紹性的文字,下半部的屏幕開玩笑似的翻起一點(diǎn)來,挑逗你讓你在它翻下去之前看看底下的內(nèi)容。當(dāng)它再次這么做時(shí),你很可能已經(jīng)明白向上滑動(dòng) 查看下面內(nèi)容的提示了。但是當(dāng)你仍然沒有滑動(dòng),你將得到一個(gè)邀請(qǐng)“繼續(xù)向上滑動(dòng)“。每個(gè)隨后的翻轉(zhuǎn)鞏固了這個(gè)查看內(nèi)容的手勢(shì)。有趣并且有意義。

NBC News?VS. Flipboard?(2013)?

13-Figure-NBCNews-large-opt

NBC NEWS的IOS版用了有趣的字體,但是長(zhǎng)篇大論的敘述并沒有價(jià)值。

14-Figure-Flipboard-large-opt

FLIPBOARD的安卓和IOS版嵌入了好玩的提示來吸引用戶,并且強(qiáng)化操作APP的關(guān)鍵手勢(shì)。

規(guī)則四:通過使用強(qiáng)化學(xué)習(xí)

還記得那些“啊哈!”瞬間在科學(xué)課堂么?當(dāng)你通過做實(shí)驗(yàn)明白了一個(gè)原理。這是我們這里將要討論的,當(dāng)然了,老師已經(jīng)給你解釋了相關(guān)原理,但是你真正的學(xué)會(huì)它是通過實(shí)驗(yàn)做到的。

這種方法對(duì)于新手引導(dǎo)頁一樣有用。如果你遵循了前面三個(gè)規(guī)則,這個(gè)補(bǔ)充規(guī)則很大程度上能照顧好它自己。它可能是一個(gè)伴隨動(dòng)作的非常微妙的視覺或者聽覺反饋。

然后,當(dāng)用戶后面執(zhí)行這樣的動(dòng)作時(shí),同樣的反饋會(huì)加強(qiáng)他們的學(xué)習(xí)。

這條規(guī)則補(bǔ)充了第二條“不要什么都放在前面”。讓用戶逐步深入的去了解APP,而不是立刻把什么都展現(xiàn)出來。通過時(shí)間的推移去揭示更多的功能或者當(dāng)他們進(jìn)步時(shí)給予意想不到的獎(jiǎng)勵(lì),你將會(huì)在用戶使用程序的時(shí)候加強(qiáng)他們的學(xué)習(xí)。

15-Figure-Polar-DuoLingo-large-opt

Palar提供了一個(gè)小貼士,用戶完成了一些測(cè)驗(yàn)之后。Duolingo的用戶當(dāng)他們學(xué)會(huì)了高級(jí)的技巧時(shí)會(huì)得到一個(gè)獎(jiǎng)勵(lì)。

16-Figure-AnyDo-large-opt

Any.do把一個(gè)工具放在安卓的桌面屏幕上,鼓勵(lì)用戶參與并且自然而然的提供獎(jiǎng)勵(lì)。

學(xué)習(xí)并不是一次性的事情。使用一個(gè)app的過程中應(yīng)該加強(qiáng)那些在引導(dǎo)頁中希望用戶學(xué)會(huì)的事情。

規(guī)則五:聆聽你的用戶

考慮到你已經(jīng)深入你的app,建立和完善它好幾個(gè)月了,誰是檢驗(yàn)它的最佳人選?可能不是你,按照“教程101”中解說員說的“當(dāng)你是一個(gè)為這個(gè)項(xiàng)目工作了一兩年的設(shè)計(jì)師,很容易對(duì)一些不容易理解的事情想當(dāng)然?!?/p>

正確的進(jìn)行用戶測(cè)試將會(huì)很容易的發(fā)現(xiàn)你的絆腳石,觀察你的用戶看看他們是在哪里卡住了和在哪里出了問題。聆聽他們?cè)谂capp互動(dòng)時(shí)候的評(píng)價(jià)。在結(jié)束前不要打斷他們;如果你在他們使用的過程中問他們問題,這就很有可能把他們引導(dǎo)向你想要的答案。

Snap Payroll的設(shè)計(jì)師們最終發(fā)現(xiàn)通過用戶測(cè)試,一個(gè)經(jīng)驗(yàn)性的引導(dǎo),或者上下文提示,產(chǎn)生了最好的效果。經(jīng)過四輪在RetailMeNot的測(cè)試,我們得到了同樣的結(jié)果。

17-SnapTax-RMN-contextual-tips-large-opt

Snap Payroll的小提示的用戶測(cè)試結(jié)果非常的好,同樣的結(jié)論也在RetailMeNot的測(cè)試中得出。

熟悉感會(huì)像百葉窗一樣蒙蔽你,讓用戶在用戶測(cè)試中告訴你他們需要什么。

 

原文來自:優(yōu)設(shè)

原文地址:smashingmagazine

 

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

    來自四川 回復(fù)
  2. 有話不說,憋著難受 :mrgreen:

    來自山東 回復(fù)
  3. 感覺這文章并沒有做到深入淺出。。

    來自廣東 回復(fù)
  4. 您好,文章寫的非常棒,請(qǐng)問Extra credits在線教程在哪里能找到

    回復(fù)