今天的譯文來自Theresa Neil，也就是《移動(dòng)應(yīng)用UI設(shè)計(jì)模式》(O’Reilly大公雞)一書的作者；本文所討論的話題也是從這本書延展出來的：作者在實(shí)戰(zhàn)中運(yùn)用自己書中歸納出的設(shè)計(jì)模式，遇到問題，繼而開始重新思考…接下來進(jìn)入譯文。

對于設(shè)計(jì)師來說，設(shè)計(jì)模式庫是很棒的靈感來源，不過常見的實(shí)踐方式未必是最好的。本文中，我們將一起看一看為什么很多移動(dòng)應(yīng)用的新手教學(xué)模式并非那么有效，以及我們可以從游戲設(shè)計(jì)當(dāng)中汲取到哪些理念來幫助我們選擇更加有效的設(shè)計(jì)模式。

我們的移動(dòng)應(yīng)用UI設(shè)計(jì)模式一書推出之后，Intuit邀請我過去與他們的移動(dòng)團(tuán)隊(duì)進(jìn)行交流。一開始，我從比較高的層面講述了設(shè)計(jì)模式在不同領(lǐng)域(時(shí)裝、建筑、軟件等等)當(dāng)中的價(jià)值。講好之后，他們的高級(jí)UX經(jīng)理Alissa Briggs補(bǔ)充了一些案例，并告訴我，他們曾經(jīng)仔細(xì)研究了我的書中關(guān)于“視覺吸引”的那一章具有引導(dǎo)性的移動(dòng)應(yīng)用界面設(shè)計(jì)模式，嘗試了“對話框”、“提示”、“使用向?qū)А薄ⅰ盎脽羝钡雀鞣N方式，但仍然無法有效的引導(dǎo)用戶上手產(chǎn)品。這些本該相當(dāng)具有“幫助意義”的界面，在實(shí)際當(dāng)中使他們的用戶感到迷茫和挫敗。這讓我很驚訝。

Intuit在他們的Snap Payroll應(yīng)用中嘗試過的一些教學(xué)，用到的模式包括對話框、提示、幻燈片和使用向?qū)А?/p>

在這之后，我又與RetailMeNot合作，幫他們設(shè)計(jì)iOS與Android應(yīng)用當(dāng)中的新手教學(xué)。他們的產(chǎn)品團(tuán)隊(duì)希望確保用戶能明確的了解其產(chǎn)品的價(jià)值主張，以及怎樣使用特定的功能，例如收藏商鋪和優(yōu)惠券等等。

當(dāng)時(shí)我們認(rèn)為一個(gè)簡短的使用向?qū)?3步)或視頻演示會(huì)比較有效；另外他們有些利益相關(guān)者認(rèn)為幻燈片也是不錯(cuò)的方式，所以我們同樣進(jìn)行了嘗試。但最終的測試結(jié)果是，這些方案非但沒能吸引用戶，反而讓他們產(chǎn)生了負(fù)面感覺。

其中一名被測者告訴我：

“我只想立刻進(jìn)入應(yīng)用并進(jìn)行探索。”

總結(jié)下來，在測試當(dāng)中，用戶要么跳過這些教學(xué)，要么就是對各種對話框、向?qū)?、視頻演示或幻燈片當(dāng)中的內(nèi)容視而不見。更壞的情況是，這些教學(xué)會(huì)激怒那些想要立刻進(jìn)入應(yīng)用進(jìn)行嘗試的新用戶。

RetailMeNot的一些測試UI稿，用到的設(shè)計(jì)模式包括幻燈片、視頻演示、3步使用向?qū)А?/p>

為什么這些模式都失敗了？

為什么呢？我試著到游戲設(shè)計(jì)領(lǐng)域?qū)ふ掖鸢?。游戲設(shè)計(jì)師們從來都知道，你不能把新玩家一下子丟到戰(zhàn)場當(dāng)中，期待他們即刻開始享受游戲體驗(yàn)；否則他們在懂得怎樣使用武器之前就會(huì)被干掉。

在游戲設(shè)計(jì)當(dāng)中，使玩家從零起步深度參與進(jìn)去的方法較其他領(lǐng)域來說更加成熟且有效。其實(shí)對于移動(dòng)應(yīng)用的設(shè)計(jì)來說，道理也是一樣的。雖然不涉及虛擬的“生命值”和“死亡”這些概念，但是新手用戶所體驗(yàn)到的挫敗和迷茫感是類似的。如果你讓太多新用戶感受到這些，那么你的產(chǎn)品基本要game over了。

Portal會(huì)首先讓新玩家進(jìn)入一個(gè)安全的環(huán)境，去熟悉各種操作方法。

Extra Credits的在線視頻系列深入的解析了游戲世界的方方面面。其中的“Tutorials 101”(Youtube)更是值得每個(gè)移動(dòng)應(yīng)用設(shè)計(jì)師觀看和學(xué)習(xí)。該視頻介紹了一些在游戲當(dāng)中創(chuàng)建新手教學(xué)的基本規(guī)則，我們完全可以擴(kuò)展到移動(dòng)設(shè)計(jì)領(lǐng)域：

1. 少些文字，多些互動(dòng)。
2. 不要一股腦展示所有的教學(xué)內(nèi)容。
3. 有意思，值得嘗試。
4. 在實(shí)際使用中鞏固學(xué)習(xí)效果。
5. 傾聽用戶的聲音。

規(guī)則1：少些文字，多些互動(dòng)

當(dāng)我們想要解釋什么的時(shí)候，文字通常是最方便的工具。但是，當(dāng)我們想讓用戶學(xué)習(xí)什么的時(shí)候，文字就不那么有效了。根據(jù)“Tutorials 101”的建議，我們應(yīng)該避免依賴文字，因?yàn)椤拔淖謺?huì)打亂使用節(jié)奏，破壞沉浸感；即使那些特別需要幫助的用戶也會(huì)輕易的跳過文字教學(xué)?！?/p>

太多的文字，相當(dāng)于“告訴，而非演示”，這與移動(dòng)應(yīng)用的設(shè)計(jì)理念是相悖的。新手教學(xué)應(yīng)該是“演示，而非告訴”；它應(yīng)該具有交互性，讓用戶通過使用進(jìn)行學(xué)習(xí)。只有讓用戶在“實(shí)戰(zhàn)”之前進(jìn)行演練，他們才能在真正需要完成任務(wù)的時(shí)候知道怎樣去做；單靠“告訴”是沒用的。

來看一些對比范例：

Boomerang vs. Mailbox

Android上的Boomerang應(yīng)用，新手教學(xué)完全是“告訴”，而且文字太多了。

iOS上的Mailbox應(yīng)用，具有交互性的新手教學(xué)，鼓勵(lì)用戶通過動(dòng)手操作來學(xué)習(xí)。

DigiCal vs. Fantastical

Android上的DigiCal應(yīng)用，教學(xué)中的文字與它們所描述的操作行為之間的剝離感太強(qiáng)了。

iOS上的Fantastical應(yīng)用，在教學(xué)中邀請用戶進(jìn)行操作演練，以掌握那些在實(shí)際使用中用的到的手勢。

Catch vs. Clear

Android上的Catch應(yīng)用，通過使用向?qū)д故咎厣δ芗安僮鞣绞?，但是用戶無法進(jìn)行操作，難以真正記住。

iOS上的Clear應(yīng)用，默認(rèn)視圖中的任務(wù)本身就是教學(xué)內(nèi)容，用戶可以根據(jù)其中的文字描述對每一條項(xiàng)目進(jìn)行操作練習(xí)。

(插幾句：對于Clear的新手教學(xué)我個(gè)人持保留意見。至少我自己第一次使用時(shí)完全沒耐心把那么多的“手勢學(xué)習(xí)任務(wù)”一個(gè)個(gè)完成；手勢太多，真完成了學(xué)習(xí)任務(wù)也記不??；如果刪掉這些教學(xué)任務(wù)，到了真正需要的時(shí)候，貌似又找不到類似“幫助”的內(nèi)容。不喜歡。- 譯者C7210)

要點(diǎn)：如果有辦法“演示”，就不要“告訴”。讓用戶通過操作來學(xué)習(xí)，文字只起到補(bǔ)充解釋或邀請操作演練的目的。

規(guī)則2：不要一股腦展示所有的教學(xué)內(nèi)容

“如果你一開始就展示所有的教學(xué)內(nèi)容，想把所有東西都教給玩家，他們會(huì)不堪重負(fù)，失去參與的欲望?！盩utorials 101這樣告訴我們。把“玩家”換成“用戶”，這句話與移動(dòng)設(shè)計(jì)的關(guān)聯(lián)就很明顯了。

如果新手教學(xué)中的信息量過大，那么即使用戶真的會(huì)去學(xué)習(xí)，到了實(shí)際需要用到的時(shí)候，他們也會(huì)忘記之前學(xué)到的東西。要在用戶需要幫助的時(shí)候，將教學(xué)信息以簡短、易消化的碎片形式提供給他們。要知道，新手教學(xué)同樣是使用戶產(chǎn)生第一印象的地方，你想讓用戶產(chǎn)生“給我更多”的愿望，還是“少給我點(diǎn)吧”？

Dooo vs. Todoist

iOS上的Dooo應(yīng)用，一上來就使用了11個(gè)界面展示新手教學(xué)內(nèi)容。

iOS上的Todoist應(yīng)用，每次只在當(dāng)前需要的地方展示一條提示，例如添加任務(wù)或查看選項(xiàng)菜單。

UserTesting最近在“Six UX Lessons Learned From the New Facebook App,Paper”一文中確認(rèn)，“用戶更喜歡操作指導(dǎo)”，這里所說的“操作指導(dǎo)”指的就是應(yīng)用在用戶第一次實(shí)際使用時(shí)提供的一系列情境化的操作提示。

要點(diǎn)：不要在用戶實(shí)際使用產(chǎn)品之前將所有的教學(xué)內(nèi)容都展示給他們，而是在用戶真正需要引導(dǎo)和幫助的時(shí)候提供最精簡最有用的信息。

規(guī)則3：有意思，值得嘗試

Tutorials 101中提到的規(guī)則是“讓教學(xué)更加好玩”。當(dāng)然，不是所有的移動(dòng)應(yīng)用都能和“好玩”搭上邊，但正如視頻中提到的“教學(xué)應(yīng)該像游戲當(dāng)中其他任何部分一樣有趣”這個(gè)道理同樣適用于移動(dòng)設(shè)計(jì)領(lǐng)域。

即使我們很難讓應(yīng)用的新手教學(xué)變得真正好玩，將它設(shè)計(jì)的讓用戶感到有意思、值得嘗試，并能與應(yīng)用整體體驗(yàn)無縫整合起來也是很有必要的。

我們對比一下NBC News和Flipboard這兩款閱讀類應(yīng)用的引導(dǎo)設(shè)計(jì)方式。NBC News使用了靜態(tài)的幻燈片模式，其中除了字體還算“有趣”之外，整個(gè)教學(xué)從本質(zhì)上講就是平鋪直敘：文字過多、信息量大、乏味、缺乏交互性。

而Flipboard(2013)給人的初體驗(yàn)則完全不同：沒有文字性的介紹，界面下半部分會(huì)略微翻起一部分，讓你可以看到“下面”還有東西；翻起的部分自動(dòng)合上之后，你便知道可以將這部分“掀起”來查看更多內(nèi)容。如果這時(shí)你還沒有做出任何動(dòng)作，界面底部會(huì)出現(xiàn)提示“向上翻頁繼續(xù)”。

而隨后的每一次翻頁動(dòng)效都能增強(qiáng)用戶對操作手勢及其結(jié)果的關(guān)聯(lián)感知。

要點(diǎn)：在教學(xué)中增加用戶參與的深度。嘗試在合適的地方增加“有意思”的交互元素，創(chuàng)建一種“快速學(xué)習(xí)、直接運(yùn)用”的氛圍。

規(guī)則4：在實(shí)際使用中鞏固學(xué)習(xí)效果

還記得你在物理課上通過一個(gè)簡單的實(shí)驗(yàn)理解了定律之后的興奮感嗎？這就是我們現(xiàn)在要說的。當(dāng)然，在實(shí)驗(yàn)之前，老師已經(jīng)解釋過相關(guān)的概念了，但正是動(dòng)手實(shí)驗(yàn)讓你真正理解了知識(shí)。

移動(dòng)應(yīng)用中的新手教學(xué)也是同理。如果你已經(jīng)按照前面三條規(guī)則去做了，那么這一條會(huì)顯得非常自然。形式上可以很簡單，例如，在可交互的新手教學(xué)中，如果用戶完成了某個(gè)操作任務(wù)，便為其提供一些視覺或聽覺上的反饋。然后，當(dāng)用戶在實(shí)際使用應(yīng)用的過程中再次執(zhí)行了這個(gè)操作，那么相同形式的視覺或聽覺反饋便可以鞏固他們的記憶(如果使用音效進(jìn)行反饋，要記得提供設(shè)置，允許用戶關(guān)掉音效，因?yàn)橐坏┯脩羰煜ち诉@一操作，反反復(fù)復(fù)的聽覺反饋就會(huì)成為干擾)。

這個(gè)方式對于“不要一股腦展示所有的教學(xué)內(nèi)容”這一規(guī)則也能起到補(bǔ)充作用。在用戶實(shí)際使用的過程中，在他們已經(jīng)了解了最基本的使用方法之后，通過提示引導(dǎo)用戶逐步了解更多的“高級(jí)”功能，或是在他們正確的完成某些操作之后給到一些預(yù)期之外的反饋(例如某種“獎(jiǎng)勵(lì)”)，你便可以使用戶在實(shí)際使用應(yīng)用的過程當(dāng)中鞏固他們所學(xué)到的。

Polar(左圖)會(huì)在用戶玩過幾輪投票之后給到手勢操作的提示。Duolingo(右圖)則更加游戲化，當(dāng)用戶完成了特定的學(xué)習(xí)目標(biāo)之后，會(huì)獲得獎(jiǎng)勵(lì)并升級(jí)。

規(guī)則5：傾聽用戶的聲音

考慮到你是花了幾個(gè)月甚至更長時(shí)間去打造自家產(chǎn)品的“專家”，恐怕你并非向用戶解釋應(yīng)用工作方法的最佳人選。正如Turorials 101中講到的：

“當(dāng)你作為設(shè)計(jì)師在一個(gè)項(xiàng)目里工作了一兩年，你會(huì)很容易將那些對普通人來說難以理解的概念誤認(rèn)為是顯而易見、符合直覺的。”

在這個(gè)問題上，簡單而得當(dāng)?shù)目捎眯詼y試可以清除大部分的障礙。觀察你的用戶，看看他們卡在什么地方，在哪里遇到問題；在他們使用產(chǎn)品或原型的過程中，仔細(xì)傾聽他們的各種看法和評(píng)論，同時(shí)記得不要立刻向他們提問，否則將導(dǎo)致他們無意之中猜測你想聽到怎樣的回答。

Snap Payroll的設(shè)計(jì)師們在可用性測試當(dāng)中發(fā)現(xiàn)，操作指導(dǎo)(或稱情境化提示)可以產(chǎn)生最好的教學(xué)效果。而我們?yōu)镽etailMeNot進(jìn)行了4輪可用性測試之后，得出了同樣的結(jié)論。

要點(diǎn)：你認(rèn)為自己在精心雕琢新手教學(xué)的設(shè)計(jì)，然而對產(chǎn)品的過分了解有可能蒙蔽你的雙眼。不妨嘗試可用性測試，讓你的目標(biāo)用戶幫你發(fā)現(xiàn)問題所在，并進(jìn)一步找到最適合自己產(chǎn)品的新手教學(xué)形式。
source:beforweb