UE设计中应用内的应用：微信小程序的UX经验教训

我们在中国的用户研究发现，嵌入式应用程序设计人员必须考虑使用环境，父平台的核心功能以及程序的使用方式。

截至2018年3月，微信是中国最受欢迎的社交应用程序，每月活跃用户达到10亿。微信的集成服务涵盖了中国日常生活的方方面面，包括社交通讯，购物，账单支付，新闻和预订服务。2017年底的产品更新引入了该应用程序的一项新主要功能：微信小程序（包括小游戏）。小型程序类似于应用程序，但它们内置于微信中：它们感觉像大型应用程序中的应用程序。因此，中国公司可以在四个不同的渠道上与移动设备的用户进行交互：

1. 手机网站

2. 本机应用

3. 该公司的微信公众号

4. 微信小程序[本研究的主要重点]

我们想知道人们如何看待这些不同渠道之间的差异，以及某些任务是否比另一渠道更适合一个渠道。为了找到答案，我们对北京的10个微信用户进行了可用性测试研究。

即使您不会设计微信小程序，这种可扩展用户界面的用户体验含义也很有趣。传统上，网站和软件应用程序是封闭的程序包，用户或第三方提供商不能对其进行扩展。相比之下，微信迷你程序是一种不同的体验架构，与以下产品相关：

• 适用于各种软件包的加载项，例如浏览器工具栏和电子表格工具包（例如，可以将统计分析功能添加到Excel中，以供执行ANOVA的少数几个用户使用，而不会使大量用户感到困惑）

• Facebook Messenger App，在应用程序的“ 游戏”和“发现”部分中支持第三方游戏，新闻和购物服务。

• SaaS（软件即服务）公司提供的集成应用程序（例如，Slack用户可以安装集成程序，使他们可以直接从Slack应用程序内部链接到Google Calendar事件或Trello卡。）

美国的“应用内应用”示例：Facebook Messenger（左）在应用内包含游戏，Slack（右）支持可直接链接其应用或网站的第三方服务。

在美国，“应用程序内的应用程序”的两个示例：Facebook Messenger（左）在应用程序内包含游戏，而Slack（右）支持可直接链接其应用程序或网站的第三方服务。

微信小程序简介

对于不熟悉小型程序的人，下面是一些示例以及它们是如何工作的。

• 迷你程序是为微信平台构建的移动应用程序。有用于游戏，送餐，购物，售票，家庭服务，图像编辑等的迷你程序。

两个微信小程序：外卖小程序“你饿了”（左）和旅行预订程序C trip（右）。 （为清晰起见，我们在屏幕截图上叠加了一些英文翻译。）

两个微信小程序：外卖小程序“你饿了”（左）和旅行预订程序C trip（右）。（为清晰起见，我们在屏幕截图上叠加了一些英文翻译。）

• 用户不需要安装（或卸载）迷你程序。在我们的研究中，许多用户提到了此功能，并认为此功能将有助于节省手机上的存储空间。

• 发现主要来自在线社交共享和离线QR码扫描。许多迷你游戏鼓励用户与其他用户共享游戏，以便在游戏中获得奖励（例如，额外的生命或奖励积分）。在离线状态下，带有QR码的广告可以宣传小程序。例如，一家购物中心广告了一个预付停车费的小程序。

万达广场（购物中心）的一项迷你计划广告，帮助用户预付停车费

万达广场（购物中心）的一个迷你程序广告，可帮助用户预付停车费。

• 可以从微信主屏幕访问迷你程序，但默认情况下它们是隐藏的。由于微信的主要功能是聊天，因此主屏幕专用于最近的对话。要查看小程序，用户需要从顶部向下滑动；此操作将显示最近使用的小型程序列表。尽管对于普通的小程序用户而言，刷卡既方便又方便，但是，新用户或不常使用的用户不太可能会自己发现程序，除非他们不小心刷卡或有人与他们共享程序。

用户从微信主屏幕（左）向下滑动以查看最近使用的小程序列表（右）。

用户从微信主屏幕（左）向下滑动以查看最近使用的小程序列表（右）。

我们的研究表明，设计人员可以在应用程序内或与微信集成模型类似的其他受限平台场景中开发应用程序时应用这些见解。

微信小程序的5个UX教训

1.维护用户期望的核心功能和内容。

已经使用过公司（大型）应用程序的人会对您提供的内容或服务有心智模型和期望。如果应用程序的迷你版本使用户难以找到所需的核心内容，那么人们将使用他们熟悉的应用程序。

在我们的测试过程中，一名36岁的女性用户抱怨JD购物小程序的首页不如JD移动应用程序提供更多信息：“在[移动应用程序]主页上，我可以浏览折扣信息[她滑动通过顶部的图像轮播]。它还会显示我查看和购买的所有内容，并推荐更多类似的商品。所有这些信息都不会显示在迷你程序中。”她感到迷你程序的内容较少，因此她不想购物。

通过对JD购物小程序（左）和JD移动应用程序（右）的比较，该移动应用程序具有更多内容可供浏览，包括轮播，促销和栏目。

通过对JD购物迷你程序（左）和JD移动应用程序（右）的比较，该移动应用程序具有更多内容可供浏览，包括轮播，促销和栏目。

另一个用户（24岁的女性）在名为Meituan的送餐服务的小程序版本中也遇到了类似的问题。“打开送货应用程序时，我要做的第一件事就是获得一些优惠券。每次您登录时，该应用程序都会自动显示一些优惠券，我不知道迷你程序是否会这样做。”她打开了迷你程序，很失望：“不，没有任何[优惠券]。这一切都很昂贵。此外，[轮播]中显示的促销活动不及公司应用程序中显示的促销活动那么多。”

如果小型程序不能完成移动应用程序所能做的一切，那么它应该支持切换解决方案，这是用户在小型程序和移动应用程序或网站之间移动以查看全部内容的简便方法。

2.始终考虑使用环境。在移动设备上，支持快速活动和中断设计。

在我们的研究过程中，许多人抱怨说，如果在微程序中收到微信消息，他们将无法轻松地检查该消息，然后继续执行该程序中的任务。相反，他们必须退出程序才能查看消息。不幸的是，一些小程序没有保存用户的进度，迫使他们重新开始。由于微信从本质上讲是一种社交工具，因此应设计微型程序来容纳多任务处理。为了最大程度地减少中断的机会，流程应高效且交互成本最低。以下是实现这些原则的一些建议：

• 保存用户的进度，以便他们以后可以返回到任务。 一款名为Happy Ball的 赛车迷你游戏  允许用户保存进度并稍后再返回。一位20岁的男性用户对此功能表示赞赏：“我主要在公共交通工具上和无聊的时候在课堂上玩耍。这都是零散的时间。这使我可以停下来再回到它，而不会失去自己的位置，这很好。”

• 向用户发送提醒，让他们继续从上次停止的地方继续。知道用户可能会在结帐时中断，如果用户未完成任务就离开JD mini程序的支付页面，JD将在大约半天内发送微信通知。这种提醒可以帮助忘记了自己在购物车中遗留物品的用户。

如果用户离开了JD shopping mini程序的付款页面，JD.com的微信帐户将发送一条提醒消息，说明购物车中仍然有商品。

如果用户离开了JD shopping mini程序的付款页面，JD.com的微信帐户将发送一条提醒消息，说明购物车中仍然有商品。

• 通过基于微信账户数据的默认值，最大程度地减少用户的工作量。 例如，由于JD帐户已连接到用户的微信帐户，因此JD mini程序可以自动在付款页面上填写用户的信息（地址和电话号码）。因此，即使是第一次打开JD mini程序的用户也可以享受“一键式付款”，而不必输入其详细信息。

3.利用平台的核心功能。

许多用户提到，他们从群聊或朋友那里了解了大多数迷你程序和迷你游戏。好的迷你程序会利用微信的核心功能，即通讯。例如，京东的迷你计划在首页上促进了团购，甚至超过了移动应用。（如果有足够多的人同意购买商品，团购工作就是通过提供产品折扣来进行的。如果一件商品没有得到足够的订单，则没人会得到该产品。）在微信中强调团购是有意义的，因为该平台使用户可以轻松地与他们的微信好友共享链接，并邀请他们参加团购。

鼓励用户共享对您的业务有利。但是，请不要过度使用它！在我们的测试过程中，许多用户抱怨迷你程序（尤其是迷你游戏）迫使他们与他人共享内容。参与者解释说：“如果我需要分享游戏来获得奖励并继续玩，我什至不希望获得奖励。”和“强制分享是最糟糕的。”一位20岁的男性用户说，“人们如果您真的有很好的内容，他们将自己分享-不要强迫我像金字塔计划那样做。”

4.设计不经常使用的小程序。

我们的许多研究参与者表示，他们偏爱仅用于偶尔使用的服务的小型程序，以  节省手机空间。例如，用户解释说：“如果我每个月只需要使用一次该功能，那么我将使用小型程序。例如，干洗。我不需要下载干洗应用程序。设计人员应该  弄清偶然用户的需求，并直接在微型程序中解决它们。

SF Express mini计划就是一个很好的例子。与功能更全面的移动应用程序相比，该微型程序通过将设计集中在最常见的用户任务“ 计划提取”周围，从而解决了偶尔使用的问题  。

SF Express的小程序（左）具有“计划提取”功能，这是偶尔使用该服务的用户的主要需求。 相反，相应的移动应用程序（右）具有更多功能。

SF Express的小程序（左）具有“计划提取”功能，这是偶尔使用该服务的用户的主要需求。相反，相应的移动应用程序（右）具有更多功能。

不经常使用需要极高的可用性，并且强调快速学习，因为您不能假设用户会随着使用时间的延长而积累有关设计的知识。传统的可用性准则也适用于小型程序。这是我们研究的一个例子：

• 设计简单的导航以提高学习能力。例如，家乐福的迷你程序在导航栏中使用了图标和文本，这对老年人很友好。一个55岁甚至不知道如何搜索迷你程序的男性用户，可以轻松浏览该程序中的不同类别和项目，因为它足够简单直观。

家乐福的迷你程序使用了清晰的导航，图标和大图片。 这些功能支持新手和高级用户。

家乐福的迷你程序使用了清晰的导航，图标和大图片。这些功能支持新手和高级用户。

5.支持无缝的跨渠道过渡。

客户可以通过许多不同的渠道与组织进行交互：移动应用程序，移动网站，桌面网站，微信小程序，微信官方帐户等。设计师应考虑整个客户旅程，从而 在各个渠道之间提供  无缝的用户体验。

• 简化频道切换。一个很好的例子是JD购物如何在用户想要的商品重新入库时通知用户。由于与微信公众号不同，迷你程序无法发送通知，因此JD迷你程序提供了相应JD微信公众号的QR码；使用此帐户，用户可以从JD接收消息，并确定他们的商品何时可用。在我们的测试过程中，用户遵循了此过程，并收到了要订购的VR眼镜的通知。他评论说：“这家公司非常体贴。”

如果他们对迷你计划中不可用的功能感兴趣（当产品有库存时会收到通知），那么JD购物迷你计划会将用户引导到其他渠道（JD的WeChat官方帐户）。 

如果他们对迷你计划中不可用的功能感兴趣（当产品有库存时会收到通知），那么JD购物迷你计划会将用户引导到其他渠道（JD的WeChat官方帐户）。

• 在要求用户切换到另一个频道之前，请先传递一些内容。在通道之间进行切换具有很高的感知成本：用户需要相信，进行这种过渡值得付出努力。在我们的测试过程中，一个微型程序要求用户关注该公司的微信帐户，以获取有关其产品的更多信息。因为这个  请求太早了  （她几乎没有打开迷你程序并单击一个按钮），所以她立即离开了程序。

迷你程序要求用户在打开程序并单击主页上的按钮后立即订阅公司的微信帐户。 一名研究参与者立即退出了迷你计划。  

一个小程序要求用户订阅该公司的微信账号后，很快便打开该程序，点击主页上的一个按钮。一名研究参与者立即退出了迷你计划。

• 提供方便的通道切换路径。在我们的研究过程中，一位37岁的女性用户非常喜欢迷你程序Heika Camera，该程序可以美化Hercat的图片。她想下载该移动应用程序，但是她浏览了一下，找不到从迷你程序访问该移动应用程序的任何方法。

结论

微信小程序是一个新的互动渠道；这样的新渠道有望在任何地方，任何时间出现。设计师必须灵活，并使他们的产品适应这种新的交互方式。

为了利用这些新机会，重要的是要了解它们的优势和局限性。如果发现自己在应用程序内设计应用程序或为功能受限的频道（例如，  智能手表，  语音助手）进行设计，请牢记以下几点：

• 根据使用环境和使用频率为产品增值。

• 考虑切换通道的成本以及如何无缝过渡。

• 为该平台的用户提供内容和视觉效果。