原文：Apps Within Apps: UX Lessons from WeChat Mini Programs
作者：Feifei Liu (劉菲菲) (2018-09-09)
閱讀時(shí)間：12m28s

摘要：我們?cè)谥袊?guó)的用戶(hù)研究發(fā)現(xiàn)，嵌入式應(yīng)用的設(shè)計(jì)者不得不考慮使用環(huán)境、父平臺(tái)的核心功能以及該程序的使用方式。

截止 2018 年 3 月，作為中國(guó)最受歡迎的社交應(yīng)用，微信的每月活躍用戶(hù)數(shù)已達(dá) 10 億。微信的綜合服務(wù)涵蓋了中國(guó)用戶(hù)日常生活的方方面面，包括社交、購(gòu)物、賬單支付、新聞以及預(yù)定服務(wù)。2017 年底的產(chǎn)品更新中新增了一個(gè)新的主要功能：微信小程序（包括小游戲）。小程序和應(yīng)用相似，但它們是在微信中構(gòu)建的：感覺(jué)就像是一個(gè)更大的應(yīng)用中的應(yīng)用。因此，一個(gè)中國(guó)公司可通過(guò) 4 個(gè)不同的渠道與移動(dòng)設(shè)備上的用戶(hù)進(jìn)行交互：

1. 移動(dòng)網(wǎng)站
2. 原生應(yīng)用
3. 該公司的微信官方賬號(hào)
4. 微信小程序（本研究的主要焦點(diǎn)）

我們想了解人們?nèi)绾慰创@些不同渠道之間的差異，以及是否存在某些任務(wù)更適合其中某一個(gè)渠道而不是另一個(gè)。為了找出答案，我們?cè)诒本┡c 10 位微信用戶(hù)進(jìn)行了可用性測(cè)試研究。

即使你不打算設(shè)計(jì)一個(gè)微信小程序，這類(lèi)可擴(kuò)展的用戶(hù)界面的用戶(hù)體驗(yàn)也是很有趣的。傳統(tǒng)上，網(wǎng)站和軟件應(yīng)用是封閉的包，無(wú)法由用戶(hù)或第三方提供者進(jìn)行擴(kuò)展。相比之下，微信小程序是一種不同體驗(yàn)架構(gòu)，與以下產(chǎn)品相關(guān)：

• 用于廣泛的軟件包的外接程序，例如，瀏覽器工具欄和電子表格工具包（例如，可為執(zhí)行 ANOVAs 的少數(shù)用戶(hù)添加至 Excel，而不會(huì)使大量群體混淆的統(tǒng)計(jì)分析功能）
• Facebook Messenger App，支持應(yīng)用中 Gamesand Discover 的第三方游戲、新聞和購(gòu)物服務(wù)

• SaaS（Software as a Service）公司提供的整合應(yīng)用程序 （例如，通過(guò)整合功能頁(yè)面，Slack 用戶(hù)可直接在 Slack 應(yīng)用中鏈接到 Google Calendar 的事件或者 Trello 卡片）

  
  
  在美國(guó)的兩個(gè)「應(yīng)用中的應(yīng)用」的例子，F(xiàn)acebook Messenger（左邊）在應(yīng)用中包含了游戲，和 Slack（右邊）支持可直接鏈接到他們的應(yīng)用或者網(wǎng)站的第三方服務(wù)。

微信小程序的介紹

對(duì)于那些不熟悉小程序的人來(lái)說(shuō)，下面的這些例子將介紹它們是什么以及它們?nèi)绾喂ぷ鳌?/p>

• 小程序是在微信平臺(tái)中構(gòu)建的移動(dòng)應(yīng)用程序。包括游戲、食物配送、購(gòu)物、門(mén)票銷(xiāo)售、家庭服務(wù)、圖片編輯，等等。
  

  兩個(gè)小程序：食物配送小程序「餓了么」（左邊），旅行預(yù)訂小程序「攜程旅行」（右邊）（為了清晰起見(jiàn)，我們?cè)谄聊唤貓D上疊加了一些英文翻譯）。

• 用戶(hù)無(wú)需安裝（或者卸載）一個(gè)小程序。在我們的研究中，許多用戶(hù)都提到了這個(gè)功能，并認(rèn)為這有助于節(jié)省手機(jī)存儲(chǔ)空間。

• 小程序的發(fā)現(xiàn)渠道主要是線(xiàn)上的社交分享和線(xiàn)下的二維碼掃描。許多小程序鼓勵(lì)用戶(hù)向其他用戶(hù)分享游戲，以便在游戲中獲得獎(jiǎng)勵(lì)（比如，額外的生命值或者獎(jiǎng)勵(lì)點(diǎn)）。線(xiàn)下，帶有二維碼的廣告可對(duì)小程序進(jìn)行推廣。例如，一家購(gòu)物中心為一個(gè)預(yù)付停車(chē)費(fèi)的小程序做了廣告。
  

  萬(wàn)達(dá)廣場(chǎng)（購(gòu)物中心）為一個(gè)小程序做的廣告，以幫助用戶(hù)預(yù)防停車(chē)費(fèi)。

• 小程序可通過(guò)微信主頁(yè)進(jìn)行訪(fǎng)問(wèn)，但默認(rèn)是隱藏的。因?yàn)槲⑿诺闹饕δ苁橇奶欤黜?yè)專(zhuān)用于最近的聊天對(duì)話(huà)。要查看小程序的話(huà)，用戶(hù)需要從頂部向下滑；通過(guò)這個(gè)操作可以顯示最近使用的小程序列表。盡管對(duì)于常用的小程序用戶(hù)來(lái)說(shuō)，滑動(dòng)既簡(jiǎn)單又方便，但新用戶(hù)或者不常用的用戶(hù)則不太可能自己發(fā)現(xiàn)小程序，除非他們不小心向下滑動(dòng)或者其他用戶(hù)向他們分享了一個(gè)小程序。
  
  在微信主頁(yè)（左邊），用戶(hù)可向下滑動(dòng)以查看最近使用的小程序列表（右邊）。

我們的研究提供了一些設(shè)計(jì)師在應(yīng)用中，或者其他類(lèi)似于微信的集成模型的有限平臺(tái)場(chǎng)景中開(kāi)發(fā)應(yīng)用時(shí)可運(yùn)用的見(jiàn)解。

從微信小程序中學(xué)到的關(guān)于用戶(hù)體驗(yàn)的 5 個(gè)經(jīng)驗(yàn)

1. 保持用戶(hù)期望的核心功能和內(nèi)容。

已經(jīng)使用過(guò)你的公司的（完整的） app 的用戶(hù)對(duì)你所提供的內(nèi)容和服務(wù)有了心理模型和期望。如果一個(gè)應(yīng)用的小程序版本讓用戶(hù)很難找到他們想要的核心內(nèi)容，他們將會(huì)使用他們更熟悉的 app。

京東購(gòu)物小程序（左邊）和京東移動(dòng) app（右邊）的對(duì)比表明了，移動(dòng) app 中可瀏覽的內(nèi)容更多，包括輪播圖、促銷(xiāo)信息和更多模塊。

另外一名用戶(hù)，一位 24 歲的女性，在使用提供食物配送服務(wù)的美團(tuán)小程序時(shí)也有類(lèi)似的問(wèn)題。“當(dāng)我打開(kāi) app 時(shí)，我要做的的第一件事就是獲得一些優(yōu)惠券。這個(gè)應(yīng)用會(huì)在你每次登錄時(shí)自動(dòng)顯示一些優(yōu)惠券，我不知道小程序是否也會(huì)這么做?！彼蜷_(kāi)小程序，然后非常失望，“沒(méi)有，沒(méi)有任何優(yōu)惠券。這些都太貴了。而且，輪播圖中展示的促銷(xiāo)活動(dòng)也不像公司 app 中那么多?！?/p>

如果一個(gè)小程序無(wú)法做到移動(dòng)應(yīng)用中能做到的一切，那么它應(yīng)該支持切換──這是用戶(hù)在小程序和移動(dòng) app 或網(wǎng)站之間移動(dòng)以便查看完整內(nèi)容的一個(gè)方便途徑。

2. 始終考慮使用環(huán)境。在移動(dòng)設(shè)備上，支持快速操作，并且為中斷而設(shè)計(jì)。

在我們的研究中，很多人抱怨說(shuō)，如果他們?cè)谑褂眯〕绦虻倪^(guò)程中收到了微信消息，他們無(wú)法方便地查看信息，然后再回到小程序中繼續(xù)他們的任務(wù)。相反地，他們不得不退出小程序以查看消息。

不幸的是，一些小程序未保存用戶(hù)的進(jìn)度，而是強(qiáng)制他們?cè)俅沃匦麻_(kāi)始任務(wù)。因?yàn)?，微信的核心是一個(gè)社交工具，小程序應(yīng)當(dāng)為了適應(yīng)多任務(wù)處理而設(shè)計(jì)。為了最大限度降低中斷的可能性，流程應(yīng)當(dāng)高效、且交互成本最小。以下是實(shí)施這些原則的一些建議：

• 保存用戶(hù)的進(jìn)度，以便他們稍后可以返回到任務(wù)中。一個(gè)叫做 Happy Ball 的賽車(chē)小游戲允許用戶(hù)保存他們的進(jìn)度，并在稍后再次返回游戲。一位 20 歲的男性用戶(hù)稱(chēng)贊了這一功能：“我主要在公共交通工具上或者在課堂上感覺(jué)無(wú)聊時(shí)玩這個(gè)游戲，都是碎片化的時(shí)間。這個(gè)功能允許我中斷游戲，并且再次返回時(shí)不會(huì)丟失我的信息，這一點(diǎn)非常好?！?/p>

• 向用戶(hù)發(fā)送提醒，以便用戶(hù)回到他們離開(kāi)的地方繼續(xù)任務(wù)。因?yàn)橹烙脩?hù)在支付的過(guò)程中可能會(huì)被打斷，所以當(dāng)用戶(hù)在未完成任務(wù)的情況下離開(kāi)京東小程序的支付頁(yè)面時(shí)，京東將在大約半天內(nèi)向用戶(hù)發(fā)送一個(gè)微信提醒。對(duì)于忘記了他們的購(gòu)物車(chē)?yán)镞€保留有商品的用戶(hù)，這種類(lèi)型的提醒非常有幫助。
  

  如果用戶(hù)離開(kāi)了京東購(gòu)物小程序的支付頁(yè)面，京東的微信賬號(hào)將發(fā)送一個(gè)提示消息，提醒用戶(hù)購(gòu)物車(chē)?yán)锶杂猩唐贰?/div>

• 通過(guò)獲取微信賬號(hào)的數(shù)據(jù)提供良好的默認(rèn)值，以最大限度減少用戶(hù)的工作量。例如，京東小程序的支付頁(yè)面會(huì)自動(dòng)填充用戶(hù)信息（地址和電話(huà)號(hào)碼），因?yàn)榫〇|的賬號(hào)連接到了用戶(hù)的微信賬號(hào)。因此，即使是第一次打開(kāi)京東小程序的用戶(hù)也可以享受「一鍵支付」，而無(wú)需輸入他們的詳細(xì)信息。

3. 利用平臺(tái)的核心功能。

許多用戶(hù)提到，他們對(duì)大部分小程序和小游戲的了解來(lái)自于群聊或者好友。一個(gè)好的小程序會(huì)利用微信的核心功能，即通信。例如，京東的小程序甚至比移動(dòng) app 更能促進(jìn)主頁(yè)上的團(tuán)購(gòu)。（如果有足夠的人同意購(gòu)買(mǎi)這件商品，團(tuán)購(gòu)將對(duì)這個(gè)產(chǎn)品提供折扣。如果一個(gè)商品沒(méi)有得到足夠的訂單，就沒(méi)有人可以獲得這個(gè)產(chǎn)品。）在微信這個(gè)環(huán)境中強(qiáng)調(diào)團(tuán)購(gòu)非常有意義，因?yàn)檫@個(gè)平臺(tái)使得用戶(hù)可以很方便地與他們的好友分享鏈接，然后邀請(qǐng)他們參與團(tuán)購(gòu)。
鼓勵(lì)用戶(hù)分享對(duì)你的業(yè)務(wù)是有好處的，但別過(guò)度。在我們的測(cè)試中，許多用戶(hù)抱怨說(shuō)，小程序，特別是小游戲，強(qiáng)迫他們向其他用戶(hù)分享內(nèi)容。參與者解釋說(shuō)，“如果我需要通過(guò)分享游戲來(lái)獲得獎(jiǎng)勵(lì)，并繼續(xù)玩下去，我甚至寧愿不要獎(jiǎng)勵(lì)，”并且“強(qiáng)制分享是最糟糕的?！币晃?20 歲的男性用戶(hù)說(shuō)，“如果你的內(nèi)容真的非常好，人們會(huì)主動(dòng)分享的──不要像傳銷(xiāo)一樣強(qiáng)迫我分享。”

4. 設(shè)計(jì)小程序需考慮不常使用的用戶(hù)。

我們的許多研究參與者說(shuō)，他們更喜歡那些提供他們僅偶爾使用的服務(wù)的小程序，以節(jié)省手機(jī)空間。例如，一個(gè)用戶(hù)解釋說(shuō)：“如果我一個(gè)月只需要使用一次這個(gè)功能，我會(huì)使用小程序。例如，干洗。我不需要下載一個(gè)用于干洗的應(yīng)用。我只需要使用小程序就好了?！痹O(shè)計(jì)師應(yīng)當(dāng)了解偶爾使用的用戶(hù)的需求，并在小程序中直接解決它們。

用于郵政運(yùn)輸?shù)捻権S快遞小程序就是一個(gè)很好的例子。與更全面的移動(dòng) app 相比，這個(gè)小程序通過(guò)圍繞最常用的用戶(hù)任務(wù)（安排收件時(shí)間）進(jìn)行設(shè)計(jì)，解決了用戶(hù)偶爾使用的需求。

順豐快遞的小程序（左邊）的主要功能是收件時(shí)間安排，這是偶爾使用該服務(wù)的用戶(hù)的主要需求；相比之下，相應(yīng)的移動(dòng) app 則具有更多的功能。

不常用用戶(hù)需要極高的可用性，并強(qiáng)調(diào)快速學(xué)習(xí)，因?yàn)槟荒茉O(shè)想用戶(hù)將通過(guò)長(zhǎng)期使用來(lái)積累關(guān)于設(shè)計(jì)的知識(shí)。傳統(tǒng)可用性準(zhǔn)則也適用于小程序，以下是我們研究中的一個(gè)例子：

• 設(shè)計(jì)簡(jiǎn)單的導(dǎo)航以實(shí)現(xiàn)易學(xué)性。例如，家樂(lè)福的小程序在導(dǎo)航欄中使用了圖標(biāo)和文本，這對(duì)老年人來(lái)說(shuō)很友好。一位 55 歲的男性用戶(hù)，他甚至不知道如何搜索一個(gè)小程序， 但他可以輕松地在這個(gè)小程序中瀏覽不同的類(lèi)別和商品，因?yàn)樗銐蚝?jiǎn)單直觀(guān)。
  
  家樂(lè)福的小程序使用清晰的導(dǎo)航、圖標(biāo)和大圖片；這些特點(diǎn)有助于新手用戶(hù)和年長(zhǎng)用戶(hù)的使用。

5. 支持無(wú)縫的跨渠道轉(zhuǎn)換。

客戶(hù)可通過(guò)不同的渠道與組織進(jìn)行交流：移動(dòng)應(yīng)用，移動(dòng)網(wǎng)站，桌面網(wǎng)站，微信小程序，微信官方賬號(hào)，等等。設(shè)計(jì)師應(yīng)該考慮客戶(hù)的整個(gè)使用流程，提供一個(gè)跨渠道的無(wú)縫用戶(hù)體驗(yàn)。

• 簡(jiǎn)化渠道轉(zhuǎn)換。一個(gè)很好的例子是，當(dāng)用戶(hù)想要的商品恢復(fù)庫(kù)存時(shí)，京東商城是如何提醒用戶(hù)的。由于與微信官方賬號(hào)不同，小程序無(wú)法發(fā)送通知，所以京東小程序提供了相應(yīng)的京東官方微信賬號(hào)的二維碼；通過(guò)關(guān)注這個(gè)賬號(hào)，用戶(hù)便可接收來(lái)自京東的消息，并知道他們的商品何時(shí)有貨。在我們的測(cè)試中，一名用戶(hù)按照這個(gè)流程收到了他打算訂購(gòu)的 VR 眼睛的通知。他評(píng)論說(shuō)，“這家公司考慮非常周到?！?br>

  如果用戶(hù)對(duì)小程序中某個(gè)不可用的功能感興趣，京東商城小程序?qū)⒁龑?dǎo)用戶(hù)使用另一個(gè)不同的渠道（京東的微信官方賬號(hào)）（當(dāng)商品恢復(fù)庫(kù)存時(shí)可收到通知）。

• 在要求用戶(hù)切換到另一個(gè)渠道之前，先提供一些內(nèi)容。在渠道之間切換會(huì)帶來(lái)很高的感知成本：用戶(hù)需要相信為了實(shí)現(xiàn)這種轉(zhuǎn)換而付出的努力是值得的。在我們的測(cè)試中，一個(gè)小程序要求用戶(hù)關(guān)注該公司的微信賬號(hào)，以獲取更多關(guān)于其產(chǎn)品的信息。由于這個(gè)請(qǐng)求過(guò)早（她只是剛剛打開(kāi)小程序并點(diǎn)擊了一個(gè)按鈕），于是她立即退出了這個(gè)小程序。
  

  在用戶(hù)剛打開(kāi)程序并點(diǎn)擊了主頁(yè)上的一個(gè)按鈕之后，這個(gè)小程序就要求用戶(hù)關(guān)注該公司的微信賬號(hào)。一個(gè)研究參與者直接退出了這個(gè)小程序。

• 提供切換渠道的簡(jiǎn)單路徑。在我們的研究中，一位 37 歲的女性用戶(hù)非常喜歡一個(gè)叫做 Heika Camera 的小程序，它可以美化她的貓的照片。她想要下載手機(jī)應(yīng)用，但是她在小程序中搜尋之后，卻找不到任何可以訪(fǎng)問(wèn)移動(dòng)應(yīng)用的途徑。
  
  

結(jié)語(yǔ)

微信小程序是一種新的互動(dòng)渠道；像這樣的新渠道可能隨時(shí)隨地出現(xiàn)。設(shè)計(jì)師必須保持敏銳，并調(diào)整他們的產(chǎn)品以適應(yīng)這種新的互動(dòng)方式。
為了利用這些新機(jī)會(huì)，了解它們的優(yōu)勢(shì)和局限非常重要。如果你發(fā)現(xiàn)自己在應(yīng)用程序中設(shè)計(jì)應(yīng)用程序，或?yàn)楣δ苡邢薜那溃ɡ纾?a target="_blank" rel="nofollow">智能手表、語(yǔ)音助手）進(jìn)行設(shè)計(jì)，請(qǐng)記住以下幾點(diǎn)：

• 根據(jù)使用環(huán)境和使用頻率為產(chǎn)品增值。
• 考慮切換渠道的成本以及如何使轉(zhuǎn)換無(wú)縫。
• 為該平臺(tái)的用戶(hù)提供內(nèi)容和視覺(jué)效果。

以上翻譯包含個(gè)人理解，僅作為個(gè)人學(xué)習(xí)筆記使用。如有錯(cuò)誤，求指正呀，非常感謝 ^^
感謝原文作者及所有分享想法與經(jīng)驗(yàn)的人 ^^