Facebook Paper新用戶引導(dǎo)背后的設(shè)計(jì)思路
從 設(shè)計(jì)上講,Paper 是我個(gè)人很喜歡的產(chǎn)品,除了它創(chuàng)新的移動(dòng) App 交互方式和眾多令人驚喜的設(shè)計(jì)細(xì)節(jié),初次使用時(shí)的磁性女聲引導(dǎo)也頗為令人稱(chēng)道。這篇文章是在看過(guò) 4 月 18 日 Facebook 在 YouTube 上發(fā)布的 Paper 團(tuán)隊(duì)小范圍技術(shù)分享會(huì)中關(guān)于新用戶引導(dǎo)的演講后,想與大家分享所作。
背景:4 月 18 日,F(xiàn)acebook 在 YouTube 上發(fā)布了 Paper 團(tuán)隊(duì)小范圍技術(shù)分享會(huì)的視頻,會(huì)中 5 位 Paper 團(tuán)隊(duì)成員分別介紹了在 Paper 的開(kāi)發(fā)過(guò)程中包括新用戶引導(dǎo)、UI、動(dòng)畫(huà)、手勢(shì)交互等方面的設(shè)計(jì)思路和具體方法,并配以案例說(shuō)明;也是在這場(chǎng)分享會(huì)中,官方首次公布了 Paper 背后的動(dòng)畫(huà)引擎 Pop 即將開(kāi)源的消息。
打開(kāi) Paper 可以看到,不像常見(jiàn)的 App,Paper 的主界面中是沒(méi)有導(dǎo)航欄的。這樣做的目的是,在有限的屏幕上盡可能多地呈現(xiàn)給用戶有用的內(nèi)容,而不是被各種功能按鈕所占領(lǐng)。可以比較一下 Facebook for iOS 和 Paper 的首屏:
后者的有效內(nèi)容占比明顯多于前者(下圖,黃色之外):
但這樣做是有風(fēng)險(xiǎn)的:用戶已經(jīng)習(xí)慣了進(jìn)入一個(gè) App 中點(diǎn)擊導(dǎo)航按鈕來(lái)進(jìn)行各類(lèi)操作了,現(xiàn)在失去了導(dǎo)航,必須得想其它的辦法來(lái)告訴用戶如何使用這個(gè) App——什么樣的方式比較好呢?
Paper 的辦法是引導(dǎo) / 教程(Tutorial)。Tutorial 有不少好處,例如會(huì)讓用戶學(xué)習(xí) App 使用的過(guò)程變得有趣,像尋寶一般;但缺點(diǎn)也耳目昭彰,例如可能會(huì)打斷用戶體驗(yàn)(想 想如果正在進(jìn)行某項(xiàng)操作,卻被屏幕上飛出來(lái)的引導(dǎo)打斷的感覺(jué)有多糟;更不要提當(dāng)看到與當(dāng)下操作無(wú)關(guān)的引導(dǎo)時(shí)的心情了),以及可能會(huì)給用戶強(qiáng)迫感(為什么一 定要逼我學(xué)習(xí)這些功能?特別是當(dāng)剛打開(kāi) App 就出現(xiàn) 5 步 Tutorial 時(shí):我還不清楚你的 App 是做什么的,怎么可能學(xué)會(huì)記住?),等等。
Paper 做 Tutorial 的原則
- 不要一次性告訴用戶所有功能及操作方法
- 每個(gè)功能點(diǎn)的 Tutorial 在用戶操作的相應(yīng)場(chǎng)景中才出現(xiàn)
- 及時(shí)給用戶反饋(如下圖,當(dāng)用戶按照引導(dǎo)傾斜手機(jī)后,顯示成功反饋)
- 保證整個(gè)過(guò)程在 App 中
- Tutorial 可被關(guān)閉(避免給用戶強(qiáng)迫感)
- 通過(guò)觀察各類(lèi)游戲的交互獲得靈感,讓 Tutorial 盡可能有趣
Tutorial 的出現(xiàn)機(jī)制
為了適時(shí)提供用戶需要的幫助,同時(shí)秉承避免打擾用戶的原則,Paper 定義了 Tutorial 出現(xiàn)的機(jī)制:
- Tutorial 必須在相關(guān)的場(chǎng)景中出現(xiàn)
也就是說(shuō),假如用戶正在 Settings 頁(yè),那么系統(tǒng)決不會(huì)顯示與 Settings 無(wú)關(guān)的 Tutorial。
- 根據(jù)相關(guān)性測(cè)試判斷一段 Tutorial 是否該出現(xiàn)
舉個(gè)例子:用戶正在瀏覽一個(gè)帖子,此時(shí)系統(tǒng)本應(yīng)為他 / 她顯示與瀏覽帖子相關(guān)的 Tutorial;突然用戶點(diǎn)擊了通知按鈕,若此時(shí)繼續(xù)顯示帖子相關(guān) Tutorial,則與用戶正在進(jìn)行的操作(查看通知)無(wú)關(guān)。
Paper 不想向用戶顯示與當(dāng)下動(dòng)作無(wú)關(guān)的引導(dǎo),因此設(shè)置了 Tutorial 的相關(guān)性變量。當(dāng)檢測(cè)狀態(tài)顯示相關(guān)性為 True 時(shí)才啟動(dòng) Tutorial;若為 False,則擱淺當(dāng)前 Tutorial 至教程中心。
- Tutorial 的啟動(dòng)延遲
這樣做的好處有二:
1、用戶在 A-B-C 連貫操作時(shí),避免在操作 A 和操作 B 間出現(xiàn) A 和 B 的 Tutorial。
2、給用戶自己弄明白功能的時(shí)間,只有系統(tǒng)認(rèn)為用戶需要幫助時(shí)才啟動(dòng) Tutorial。
Paper 團(tuán)隊(duì)做引導(dǎo)的感悟
- 用戶喜歡引導(dǎo),前提是引導(dǎo)對(duì)用戶真的起到幫助的作用
因此引導(dǎo)要做到真正幫助用戶解決問(wèn)題,在合適的時(shí)間點(diǎn)給用戶合適的內(nèi)容。 - 用戶面對(duì)新 App 的典型反應(yīng)是「我想先自己試試,搞不懂的話再查看幫助」
因此要給用戶自己嘗試的機(jī)會(huì),而不是立刻就出現(xiàn)引導(dǎo)。 - 找到「幫助用戶」和「煩用戶」之間的平衡
過(guò)多的、非當(dāng)前場(chǎng)景相關(guān)的引導(dǎo)會(huì)令用戶厭煩,合適且適時(shí)的引導(dǎo)才真正會(huì)起到引導(dǎo)的作用。
p.s. 這段視頻,對(duì)于從事移動(dòng)應(yīng)用開(kāi)發(fā)、尤其是對(duì)類(lèi)似 Paper 的動(dòng)態(tài)動(dòng)畫(huà)有興趣的同學(xué)是非常值得一看的,干貨很多。本人不才,不懂動(dòng)畫(huà),只看得懂 General Principles,講到具體實(shí)現(xiàn)方式就歇菜了 T^T。因此,如果有同學(xué)有興趣看看后 4 個(gè)演講并與大家分享,go for it!
視頻地址:http://v.youku.com/v_show/id_XNzAzMDA5NDY0.html
原文地址:daily.zhihu
作者:@Sitsism
交互式很好,但是要美國(guó)iTunes才能下載,還必須IOS7