移动端用户体验现状

原文：The State of Mobile User Experience / 原作者 Raluca Budiu / 发布于 2018-01-14
原文链接：https://www.nngroup.com/articles/state-mobile-ux/
题图：Gilles Lambert
翻译：朴寻

总结：距初代 iPhone 发布已 10 年过去了，移动端用户体验领域终于走向成熟。

初代 iPhone 发布于 2007 年 6 月。在 2008 年末，当我们开始研究第一版移动端报告时，大多数人仍然拥有具有糟糕用户体验的原始移动设备。当时，与大多数移动设备和大多数移动网站造成的痛苦相比，任何还算可以的设计都是愉快的体验。

三年前，当第三版移动报告出来时，我们对移动端可用性状态进行了全面评估。当时，我们很高兴地报告移动端与可用性不再是矛盾——我们终于看到许多网站和应用程序都具有良好的可用性。随着我们的第四版移动端用户体验研究报告的推出，我们又取得新的进展。

如今，大多数移动网站和应用程序都提供良好的用户体验。虽然偶尔会出现出于设计审美导致的可用性障碍和牺牲，但我们可以自信地说，自上次报告以来，该领域在过去两年中已取得了进步。大多数令人震惊的错误都不存在了。当我们尝试更新我们的许多移动端设计指南的示例时，发现许多公司已经解决了他们的问题，我们过去讨论的一些问题已不再常见。然而，我们也遇到了两年前我们认为几乎绝迹的问题又开始出现。在可用性业务中，错误（如趋势）往往是循环的：前一代人将这些问题归纳总结并建立了设计模式来避免这些问题，但是后来的几代人，由于没有解决这些体验问题的经历，以致在他们进行设计更新时再次犯同样的错误。在用户体验设计进程中，人们总是向前迈出两步，向后退一步。

内容与设计元素（Chrome）

内容优先于 UI 元素【即 chrome（译者注：这里的 Chrome 指视觉设计元素，非 Google Chrome 浏览器¹）】的重要性是从响应式设计中吸取的教训之一。汉堡菜单趋势便是这一教训的结果：设计师们试图最大限度地减少屏幕上可见的 UI 元素数量，因为这些元素占用了宝贵的内容空间。两年后，设计师继续重视移动设备上的屏幕空间，但他们已经达到 Chrome 隐藏的限制。将菜单汉堡包化的趋势已经沉寂了一段时间，但仍然非常普遍（正如我们在其他地方所说的那样，隐藏导航是某些站点的唯一选择）。许多人已经明白，如果有更好的模式（例如可见导航栏），则不应该再使用汉堡包导航。

通过视觉设计元素优先处理内容已经在其他设计领域中渐渐展现：例如我们不再看到顶部过滤器占据一半页面的结果页。或者 Nested-doll 导航模式² （其涉及让用户在遇到内容之前通过多个页面进行一系列选择）不再像以前那样流行。至少有些公司已经开始明白，最好在移动设备上平展导航结构：立即向人们展示各种内容，并允许他们稍后缩小到特定的兴趣类别。

15340615840496.png

Walgreens.com 使用的 Nested-doll 导航模式在以前很流行但却变得不那么普遍。用户在看到任何产品之前要先进行 4 个类别的选择。Walgreens 试图通过向一些类别选择页面添加产品图像来使内容更直观，这表明设计师可能意识到这种基于类别的设计的乏味。

15340622222922.png

Google Express for iOS 没有在食品杂货（Grocery）这个品类下列出所有子类别，而是在每个子类别下显示一些商品。当用户必须在不同的类别中进行选择时，该 app 正确地使用了基于内容的设计，而不是使用基于类别的设计。

使用手势

手势在小屏幕上解决了视觉设计元素过多的问题，但是众所周知，它们难以发现和学习。一些手势狂热者（由仅限手势操作的应用程序（如 Clear Todos）体现）已经趋于理性，但手势使用仍然是移动设计中更有希望的方向之一。

15340630765318.png

Clear Todos for iPhone 第一个版本在 2012 年左右发布，其使用各种手势来弥补视觉界面元素的不足，但这些手势操作实在很难记住。

不幸的是，手势操作是一个鸡和蛋的问题：它们不会变得容易学习和使用直到建立一套跨应用程序和网站使用的标准手势，并且所有应用程序和网站都一致地使用这些手势。但是另一方面设计师对用户群的熟悉程度很低以致被迫远离手势操作。

Apple 已多次尝试扩展手势标准（推出适用于iPhone 6S 的 3D Touch）并将一些可见的设计元素交给手势操作来完成。他们的尝试最终以 iPhone X 结束——它摆脱了 iPhone 唯一的物理按键，用一系列轻扫手势取而代之。结果是更有效地使用屏幕，而牺牲了旧 Home 按键使用人群的一些初始学习障碍。

3D Touch 是一个很有前景的方向，但它仍然很少被应用程序使用。然而另外两个旧的手势越来越受欢迎，以至于被添加到基本手势标准中：滑动删除 用于一些包含删除的相关操作，以及用于内嵌在网页中的地图的双指滑动操作。虽然滑动删除 只是添加了一种方便的方法来对列表元素执行相关操作，但 双指滚动 解决了通常会在网页内嵌地图时遇到的滑动模糊的问题。用户对这些手势越来越熟悉，尽管我们仍然建议使用这些手势时也提供其他途径来执行相同的操作，或者至少给用户提供良好的操作提示。

15340648858818.png

双指滑动手势正在成为地图滑动的标准，并解决了滑动模糊的问题（用户试图滚动页面但意外滚动地图或反之亦然）。

移动 Web 和 App 之间更好的集成

从 web 跳转到 app 过去需要特定的用户操作：在 iOS 上，人们必须打开应用程序，然后在其中执行搜索。从 iOS 9开始，可以在 Mobile web 和 app 之间轻松切换：如果我在搜索引擎中搜索电影，一些搜索结果将无缝打开相应的应用程序页面（当用户安装了这些应用程序时）。


当选择了搜索结果页面上的电影链接时，控件从 Safari 移动到 iMDb 应用程序。 并在状态栏显示「返回应用程序」，且标有先前使用的应用程序（Safari）的名称。

从浏览器到应用程序，或者更普遍地说，从一个应用程序到下一个应用程序的无缝过渡确保了消费内容的体验是最佳的。因为在大多数情况下应用程序将具有比网站更好的用户体验（仅仅因为它们更接近于他们所设计的移动平台）。

不幸的是，通过这种设计我们也看到了用户新的负担：了解他们的位置且知道如何导航回来。应用程序仍然需要满足这种需求，例如我们仍然注意到许多应用程序（如上面的 iMDb ）在其深层页面上不包含 logo，这使得用户更难以在这个新的 app+web 拓展应用中定位自己当前的位置。

一个显着的改进是，可能与从浏览器切换到应用程序的难易程度有关，是插页式广告³ 的数量较少出现。（几乎）消失的是导航到新网站之前邀请用户下载应用程序的的插页式广告。大多数情况下，应用程序下载提示只出现在网页顶部的横幅广告中。

更好地利用手机功能

虽然不完美，但越来越多的网站和应用程序使用了手机的基本特性。由于 Apple Pay 和 Android Pay 等集成系统，许多电商网站的支付环节变得轻而易举；大多数网站和应用程序都考虑到用户当前的地理位置；生物识别身份验证有望让我们摆脱记住密码的问题，甚至可以让用户轻松地跨设备传输信息（从而自动登录），从而使桌面登录变得更加容易。

15340789929243.png

设置新 iPhone 时，可以从附近的设备进行自动传输而无需输入凭证进行身份验证。

更少的引导教程：停滞不前

几年前，任何有名气的应用程序都以一个冗长的教程开始，该教程涵盖了应用程序中几乎所有可用的功能。这些教程最令人烦恼，大多也是无效的，没有用户能够记住冗长教程中列出的过多功能。他们也没有动力去记住他们中的任何一个，毕竟谁能提前说出哪些功能真的有用呢？

如今这些引导教程已经在很大程度上取代了应用程序的启动页（闪屏），旨在说服用户通过 登录墙⁴ 创建帐户。理想情况下，这些登录墙应该完全消失，用户应该能够体验应用程序而无需注册。最初的启动页已经演变成广告功能，但是大多数人都不愿意被广告所包围，特别是他们已经花费了大量精力下载应用的情况下。

向后退步

尽管整体上响应式设计趋势已经产生了积极的影响，但是建立跨多种交互模式的需求已经使一些人涌向奇怪的解决方案，例如使用分割按钮或手风琴菜单。分割按钮菜单背后的意图是复制桌面端在主导航中各类别的 hover-plus-click 交互操作，也就是说，允许同时访问某个类别的页面和其子菜单。然而，这是实用性很差的解决方案，不仅是因为它在一个小空间中塞进两个目标，使得获取每一个目标的难度更大，而且还违反了用户的预期和他们迄今所学习到的移动操作模式。

另一个令人惊讶的发展是访客结账模式的消失。过去曾经提供此功能的网站和应用程序已经移除了这个功能。有些则会依靠 Apple Pay 或使用 PayPal 来提供访客结账支付。但许多网站或应用仍然强迫用户创建帐户，尽管他们可能是一次性购买者。从好的方面来说，许多设计都简化了注册流程，现在通常只需要一封电子邮件和一个密码就能创建一个帐户。

浮层（overlay）的流行程度有所提高，许多网站用浮层来实现菜单功能。两年前，许多移动浮层都是错误的，而且创造了有趣的效果（例如浮层后面的内容突然出现在它上面）。今天的浮层效果要好得多。但它们通常看起来像是一整个页面，人们会这样对待它们：期望能够使用「后退」按钮关闭它们并导航回上一个视图。通常情况下，当预期的退回上一个视图事件没发生时，他们会迷失方向进而退出整个网站。当整个流程在浮层中移动时（就像越来越流行的顺序菜单一样），误操作的机会会增加，人们忘记应该使用菜单的后退按钮来确保在浮层中进行正确的导航，而是使用浏览器或手机的后退按钮。

15340826076304.png

LATimes.com：菜单显示在一个看起来像新页面的浮层中（左）。尽管左上角有关闭按钮，人们仍然会想要点击浏览器的后退按钮来关闭浮层层。如果他们这样做，他们将被带到之前访问过的页面（搜索引擎页面 - 右），而不是 LATimes.com 的主页。

结论

第一款 iPhone 发布后的十年来，移动端用户体验领域终于达到了合理的成熟水平。根据 comScore 最近的一份报告，在世界的许多地方，超过一半的上网时间花在移动设备上。因此移动端可用性赶上桌面端可用性是毫无疑问的，但这并不意味着移动网站和应用程序已经达到了完美的可用性状态：没有完美的设计。它只是意味着它们中很多都提供了不错的用户体验，并且修复了过去的许多众所周知的错误。

1. 这里的 Chrome 指视觉设计元素，是围绕用户的数据为用户提供有关操作屏幕内容的信息或命令（而不是作为内容的一部分）。这些设计元素由底层系统提供，无论是操作系统、网站还是应用程序。详见：Browser and GUI Chrome ↩
2. Nested-doll Pattern：一种线性菜单模式，当用户在站点地图中上下移动时，用户会逐渐点击或滑动以显示其他菜单选项。将用户从广泛的概述页面引导到具体某个页面。详见：Wayfinding For The Mobile Web ↩
3. 插页式广告 ↩
4. 登录墙 ↩