编者按:这篇文章出自用户体验设计行业内的资深机构 NNGroup,他们一直谨慎而专业地对行业进行审视、分析和总结,这篇文章更新于 2023 年第一天,他们通过真实的用户调研和持续的观察,梳理了最近几年移动端 UX 设计的变化,下面是正文。
从 iPhone 诞生到现在已经15年了,移动端的用户体验设计的综合素质已经相当稳定了。移动端的标准已经制定完全,移动端 Web 应用和本地应用之间的界限也越来越模糊了。
最初的 iPhone 是在 2007 年 6 月发布的。2008 年底,我们开始发布了第一版「移动端设计报告」,当时绝大多数的用户所使用的移动端设备,用户体验是相当糟糕的。当时,与绝大多数的移动端网页和硬件设备相比,程度能到「勉强能用」的APP或者网页,都已经算是极佳的用户体验了。
而在5年前,我们发布第四版「移动端设计报告」的时候,我们对移动端产品的可用性状况进行了全面的评估。但是我们很高兴地发现,绝大多数的移动端 APP 和网页都提供了良好的用户体验。随后的第五版报告中,我们看到了持续的进步。
此刻,移动端用户体验终于抵达了成熟期。移动端设计变得更加稳定,而多实验性设计和功能的接受度有所降低。此外,移动端成为主流,用户几乎会在移动端设备上尝试完成几乎所有人物(尽管用户仍然喜欢在大屏幕上完成更重要的任务)。很少有公司现在不碰移动端的业务。
在今天的这篇文章中,我们将会突出探讨移动端设计的现状以及一些突出的主题。
基于第五版的移动端可用性报告,我们进行了远程测试和面对面的可用性测试,涉及 19 名美国的参与者,它们测试了总计 60 个不同的网站和 APP。
过去几年中,最大的变化是设计风格的融合。在更早一些时候,许多网站和 APP 的设计者会尝试新的交互方式和布局结构,而如今我们可以肯定的说移动端交互已经稳定下来了。很多设计模式已经成为标准,并且大家对于什么时候用什么设计元素有了清晰的认知,比如导航栏和汉堡菜单,如今已经达成某种平衡,绝大多数的网站和 APP 会选择其中一个作为主要的导航模式。尽管按照「信息气味理论」,汉堡菜单的数值偏低,但是它依然成为了主流的方案之一。
这种融合出现在方方面面。比如 iOS 和 Android 如今就变得和彼此更加相似,这也使得设计师可以可以毫无挂碍地为两个平台设计近乎完全相同的 UI,而不会影响最终 APP 的可用性。其中最典型的变化,就是 苹果官方出的 iPhone 和谷歌官方出品的 Pixel 系列都将屏幕的 Home 实体按键去除,而界面交互几乎完全仰赖手势操作。苹果将 3D Touch 去掉之后,Android 和 iOS 如今使用着完全一样的长按呼出菜单。
最近一次移动端可用性设计会当中,我们很惊讶地碰到一位参与者,他不知道我们所说的「完整网站」是什么意思。在很长一段时间当中,移动端访问网页的时候,打开的是专门针对移动端设备开发的精简后的「移动版」网页,而原本针对桌面端设计的网页会「更加完整」。
虽然有一小部分用户可能会青睐于在手机上访问桌面版的页面,但是绝大多数人不需要这样做甚至不知道有「桌面版」存在。由于响应式设计的存在,如今绝大多数的网站从功能到内容都可以兼顾桌面和移动端两种环境,内容不适配移动端的情况越来越少,几乎不存在了。
对于开发者而言,本地原生应用和 web 应用在技术层面上几乎完全不相同。而对于用户而言,两者仅仅是渠道有所不同两种应用工具。
在过去5年当中,两者甚至在渠道之间的界限也都变得越来越模糊,至少在用户层面的感知是这样的。
首先,web 应用和原生应用之间的差异正在变小。随着渐进式web应用(PWA)的出现,我们现在拥有和本地应用高度相似的移动端网站,它们可以拥有一个独立的图标,单独在后台运行,甚至可以接入推送通知等手机功能,而这些在之前是不可能拥有的。
BMW.com 的网站以 PWA 应用的方式存在
同时,原生应用需要和网络更加靠近才行。原本必须要安装到本地的应用正在变得更加轻量、易于「安装」,iOS 平台上推出了 App Clips,而 Android 平台上一会儿有对应的即时应用程序,它们让用户无需安装即可提前体验 APP 在本地于运行时的功能。
这种机制又更加靠近 PWA 应用的体验,两者之间的界限变得更加模糊难明。
登录和注册的用户体验升级是移动端用户体验进化的标志之一。设计师汲取了来自方方面面的经验教训,非常确定在移动端小屏幕上输入密码是一件乏味的事情。
如今有很多不同的方式让登录和注册变简单,有的是基于身份验证机制(面部识别、指纹验证等),有的是基于已有的支付接口(Apple Pay、Google Pay、支付宝等)的方式,有的则是内置于浏览器和系统的密码管理器,设计师已经在尽力缩短登录的流程。
而注册的新趋势是「无密码帐号」,无需定义密码即可创建帐号,着是基于一次性密码(OTP)和魔术连接(magic link)的机制,其中,一次性密码我们应该都很熟悉了,密码或者验证码通常是系统发送到绑定的帐号或者手机号上,借此实现注册和登录。
苹果的密钥机制则更进一步,系统自动创建,然后加密存储于云端,用户甚至不用知道他们的密码具体是什么。
我们在几年前已经注意到,设计师已经开始有意识地针对小屏幕的限制来设计网页和 APP,如今,这种趋势更加明显,设计师将不必要的 UI 元素熟练地隐藏起来,让用户在滚动浏览中自然获取信息,首屏也不再是堆满功能按钮的垃圾堆。
然而另一方面,我们依然注意到很多网页还是会因为一些不必要的元素被刻意拉长,其中很多确实是基于「用户是通过移动端访问网页」的这种场景来进行设计的。但是,需要强调的是,用户仅仅只有在认为你的内容有价值的时候才会继续滚动,如果重要信息之前是一屏无关紧要的低价值信息或者装饰的时候,他们可能会在滚动之前就直接放弃了,而这种情况在注意力被高度稀释的今天,只会越来越频繁地发生。
BankofAmerica.com 的页面中无效的装饰信息拉长了整个页面。
在几年前观察的时候,我们就注意到移动端页面上叠加了过多内容的情况,而如今这个问题也同样被放大,变得更加流行。很多网页一打开就出弹出框已经是基本操作,更有甚者直接拉满,右下角是聊天气泡,顶上是弹出框请求 Cookie 权限,中间是广告和促销,就这种局面下还有网页本身的汉堡菜单和导航栏藏在首屏上。
不幸的是,即时用户不被这些东西烦死,互相叠加覆盖的功能同样很容易出现各种可用性问题。有的是功能本身在不同设备上加载时因为兼容性差异自然出现的,还有的则是因为用户以为它们是无关的新页面,直接关掉。
另外一个重要的趋势是应用内内置浏览器的流行,这种技术的好处在于,用户在应用内点击某个链接的时候,无需跳转出去直接就能在应用内加载页面内容。它的优点在于留存用户,但是它的缺点也在于它容易让用户感觉迷惑和混乱,突然打开网页可能会让用户忘了他们在哪,并且可能因此很难再次打开对的链接。此外,应用本身的 UI 元素也会干扰内置浏览器的使用,比如屏幕内出现2个汉堡菜单这种情况。另外,由于内置浏览器的可用性,可能会有的页面 UI 元素无法完全加载,
页面出现多个汉堡菜单,导航功能和 APP 自带的导航栏同时存在。
页面中按钮被覆盖,无法完全加载。
必须承认的是,移动端的用户体验比以往任何时候都要好,网页、本地原生应用之间的一致性正在变好,用户已经适应了绝大多数常见的交互模式,在移动端上请求桌面端页面的情况发生的频率在降低,但是移动端体验距离完美还有很长的一段距离。