這5個技巧幫你設計出眼前一亮的App引導頁

4 評論 24694 瀏覽 135 收藏 13 分鐘

現在新手引導已經成手機客戶端標配,但是通用的做法不見得是最有效的。這篇文章中我們將會看到為什么新手引導經常無效,以及如何借鑒游戲設計的原理來提高用戶的參與度。

通過跟各種行業的移動團隊溝通,發現這些添加額外幫助的新手引導頁讓用戶困惑和沮喪。一個測試的參與者說“我只想打開app開始探索”。用戶測試表明用戶會跳過和忽略新手引導頁。最好的情況下,用戶會感覺到一點點不便;最壞的情況下,這會明顯阻止新用戶進入app。

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

為什么這些模式會無效?

那么,為什么這些模式會不起作用,我們可以在游戲領域尋找答案。

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

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

3-Figure-Portal-large-opt

(Portal讓玩家在一個安全的環境中學會新的技能)

Extra Credits在線教程系列從內行人的角度展現了游戲的各個方面,“ 教程 101 ”是一個令人拍案叫絕的視頻,每個app的設計者都應該好好看。

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

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

2、前期不能有太多內容。

3、讓它變得有趣。

4、通過游戲來學習。

5、聆聽你的用戶。

規則一:文字越少越好。

當我們想解釋什么的時候,文字是最簡單的工具。但是,當我們希望用戶了解什么的時候,文字往往會起反作用。根據“ 教程 101 ”一定要避免只依靠文字,“ 因為它會破壞速度和沉浸感,并且通常被最需要這些教程的用戶跳過?!?/p>

“只說,不展示”的方式,讓過多的文字無法戰士移動應用的優勢。正確的做法是“展示,不說”,用互動的方式讓用戶邊桌邊學。當一個人事先練習了相關的做法,要比只是用文字告訴他們怎么做要更加容易被記住。

下面是一些例子:

Boomerang vs. Mailbox

4-Figure-Boomerang-large-opt

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

5-Figure-Mailbox-large-opt

Mailbox蘋果版的引導頁鼓勵大家邊做邊學。

DigiCal?vs.?Fantastical

6-Figure-DigiCal-large-opt

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

7-Figure-Fantastical-large-opt

Fantastical蘋果版,邀請用戶通過引導頁完成一系列操作來達到學習的目的。

Catch (2013) vs. Clear

8-Figure-Catch-large-opt

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

9-Figure-Clear-preview-opt

Clear的蘋果版,默認視圖預裝了一個任務,可以讓用戶通過做去學習。

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

規則二:前期不能有太多內容

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

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

Dooo vs. Todoist

10-Figure-Dooo-large-opt

Dooo 蘋果版壓倒性的11頁的引導頁。

11-Figure-ToDoList-large-opt

Todoist 蘋果版,一個小提示邀請用戶去完成第一個任務。然后另一個提示介紹了選擇菜單。

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

12-Facebook_paper-large-opt

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

規則三:獎勵

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

即使我們不能讓我們的app變得有趣,也可以通過其他的方法讓獎勵融入整個app的使用之中。一個能做到這一點的好辦法是,跟用戶互動,讓他實際去完成事情。這賦予了用戶一種力量感去加強了他們的學習。

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

這里沒有介紹性的文字,下半部的屏幕開玩笑似的翻起一點來,挑逗你讓你在它翻下去之前看看底下的內容。當它再次這么做時,你很可能已經明白向上滑動 查看下面內容的提示了。但是當你仍然沒有滑動,你將得到一個邀請“繼續向上滑動“。每個隨后的翻轉鞏固了這個查看內容的手勢。有趣并且有意義。

NBC News?VS. Flipboard?(2013)?

13-Figure-NBCNews-large-opt

NBC NEWS的IOS版用了有趣的字體,但是長篇大論的敘述并沒有價值。

14-Figure-Flipboard-large-opt

FLIPBOARD的安卓和IOS版嵌入了好玩的提示來吸引用戶,并且強化操作APP的關鍵手勢。

規則四:通過使用強化學習

還記得那些“啊哈!”瞬間在科學課堂么?當你通過做實驗明白了一個原理。這是我們這里將要討論的,當然了,老師已經給你解釋了相關原理,但是你真正的學會它是通過實驗做到的。

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

然后,當用戶后面執行這樣的動作時,同樣的反饋會加強他們的學習。

這條規則補充了第二條“不要什么都放在前面”。讓用戶逐步深入的去了解APP,而不是立刻把什么都展現出來。通過時間的推移去揭示更多的功能或者當他們進步時給予意想不到的獎勵,你將會在用戶使用程序的時候加強他們的學習。

15-Figure-Polar-DuoLingo-large-opt

Palar提供了一個小貼士,用戶完成了一些測驗之后。Duolingo的用戶當他們學會了高級的技巧時會得到一個獎勵。

16-Figure-AnyDo-large-opt

Any.do把一個工具放在安卓的桌面屏幕上,鼓勵用戶參與并且自然而然的提供獎勵。

學習并不是一次性的事情。使用一個app的過程中應該加強那些在引導頁中希望用戶學會的事情。

規則五:聆聽你的用戶

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

正確的進行用戶測試將會很容易的發現你的絆腳石,觀察你的用戶看看他們是在哪里卡住了和在哪里出了問題。聆聽他們在與app互動時候的評價。在結束前不要打斷他們;如果你在他們使用的過程中問他們問題,這就很有可能把他們引導向你想要的答案。

Snap Payroll的設計師們最終發現通過用戶測試,一個經驗性的引導,或者上下文提示,產生了最好的效果。經過四輪在RetailMeNot的測試,我們得到了同樣的結果。

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

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

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

 

原文來自:優設

原文地址:smashingmagazine

 

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 還不錯啊

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

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

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

    回復