本文聚焦 Airbnb 产品,描述10大可用性原则的应用场景,希望能够帮助你更系统地理解10大可用性原则。

一、系统状态的可见性

Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.——Nielson
系统应该在合理的时间内通过适当的反馈,始终让用户了解正在发生的事情。
这项原则通常被遵循并使用在如下几个场景:

  • 系统导航、Toast。让用户明确知道「我在哪」;
  • 按钮、图片等元素可被交互的表达与反馈。通过视觉、与空间上的反馈,向用户传达页面元素是可以被交互的,引导用户前往下一站;
  • 用户完成交互动作和系统操作后,系统需要给予用户对应的反馈。比如操作成功、完成注册等;

Airbnb 的房源详情页顶部导航,可以通过点击快速定位到房源的某类信息,让用户清晰地知道「我在哪?我还能去哪?」
尼尔森10大可用性原则-Airbnb - 图1
在发布房源时,系统顶部模拟了进度条显示出了当前步骤,以及当前的发布进度。
尼尔森10大可用性原则-Airbnb - 图2
及时的页面反馈与进度提示

二、贴近用户的真实环境

Match between system and the real world
The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.——Nielson
系统应该说用户的语言,用户熟悉的单词,短语和概念,而不是系统导向的术语。遵循现实世界的约定,使信息以自然和合乎逻辑的顺序出现。
这项原则说的直白一些,就是:「说人话」。
产品简单到傻瓜也能操作,是乔布斯和张小龙做产品的核心理念。坐拥10亿用户的微信之父张小龙说过,做产品要有傻瓜心态。不要炫耀自己的智商,不要让用户觉得自己是白痴,请用最简单直白的语言描述状况;就好比自然世界里,你和他人说话的时候必然使用简单的白话文进行直白的沟通以保证交流顺畅。
在房源的详情页、Airbnb PLUS 介绍页,系统用了大量高质量的摄影图片传达一种空间氛围感。同时,在介绍文案的措辞方面,简洁易懂,语言逻辑清晰。
尼尔森10大可用性原则-Airbnb - 图3
尼尔森10大可用性原则-Airbnb - 图4
简洁明了的文案与熟悉的操作,符合用户认知模型

三、用户有控制和来去自由的权利

User control and freedom
Users often choose system functions by mistake and will need a clearly marked 「emergency exit」 to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.——Nielson
用户通常会错误地选择了系统的某个功能,并且需要一个明确标记的」紧急出口「来离开不想要的状态,而不必进行扩展对话。支持撤消和重做。
用户拥有自由使用和控制系统的权利,最为常见的就是系统会为用户提供「撤销、重做、返回」的入口。
在故事专栏,当用户在浏览器当前标签页进入下一级页面时,系统都为用户提供了返回按钮,一方面方便用户来去自由,另一方营造出了一定的沉浸式浏览体验。
尼尔森10大可用性原则-Airbnb - 图5
掌控感,是用户体验最核心的因素之一。失控代表伤害用户体验,给足用户掌控的权利。

四、系统的一致性

Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.——Nielson
用户不应该怀疑不同的话语、情况或行为是否在表达同样的一件事情。系统设计需遵循平台惯例。

  • 移动端 APP 内的返回按钮位置通常会被放在左上角,当然有些 APP 会将返回按钮统一放在左下角,虽然返回按钮的位置不同于大多数 APP,但对于此 APP 的返回交互来说,其实还是一致的;
  • 除常用按钮位置需要符合一致性原则外,icon 的视觉设计也要遵循一致性原则,一个对象对应一个 icon.

在房源、故事集列表页,系统统一用了卡片式的视觉风格,并且每个卡片里的文字与背景图片的层次也都保持一致。
尼尔森10大可用性原则-Airbnb - 图6
在房源详情页,系统使用了统一的 iocn 风格和文字风格,传达房源的设施属性。
尼尔森10大可用性原则-Airbnb - 图7
保持一致性,减少用户决策时间,减少用户思考也是提升体验的路径之一

五、防止错误

Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.——Nielson
比良好的错误提示信息更好的方法是:一个走心的设计可以提前防止错误的发生。系统要么消除容易出错的情况,要么检查它们,并在用户采取行动之前向用户提供确认选项。

  • 比如某些操作不能进行,那就置灰或隐藏,不要在用户点击后才提醒不能操作。如果有某些内容不能选择,就置灰或者隐藏,不要等用户点击完成时才告知不能使用;
  • 同样,在用户容易出现错误操作的场景下,需要给出二次确认,如:删除和取消重要信息的操作。

如果房源在某天或多天已被预定或暂时不开放,则日历里将这些不可预定的日期置灰。
尼尔森10大可用性原则-Airbnb - 图8
用户在修改个人重要信息后,系统会让用户输入密码二次确认。
尼尔森10大可用性原则-Airbnb - 图9
减少错误发生,做智能设计,做聪明产品。常见手法:置灰与二次提醒

六、系统识别胜过用户记忆

Recognition rather than recall
Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.——Nielson
通过使用对象,动作和选项的可视化表达,最大限度地减轻用户的记忆负担。用户不应该记住从对话的一部分到另一部分的信息。

  • 为用户保留查看和搜索历史是一个很常见的系统识别的例子;
  • 用户在填写一个长页面表单时,系统可以根据实际情况提供一个实时预览的功能,避免出现用户填了下面忘了上面的情况;
  • 用户在填写完表单(比如订单页面)后,系统可以再次向用户展示所填信息,以最终确认;
  • 用户为了完成一项目标任务,从一个页面跳转到另一个页面后,系统可以再次展示上一个页面内与目标任务相关的核心信息,以减轻用户的记忆负担。

系统会在首页第一屏为用户展示浏览历史(登录后)。
尼尔森10大可用性原则-Airbnb - 图10
搜索框也会保留最近5次的搜索历史。
尼尔森10大可用性原则-Airbnb - 图11
尽可能减少用户的记忆负担,解放用户的大脑,用来思考。常见手法:保留历史提示,上次登录方式,实时预览功能,最近浏览….

七、灵活易用的使用体验

Flexibility and efficiency of use
Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.——Nielson
一些被精心设计的体验也许会被专家用户察觉到,使系统需要能够满足无经验和有经验的用户。允许用户进行频繁的操作。
当用户在滚动屏幕浏览房源详细信息时,系统将预定的基本信息(如:价格、日期、人数等)固定在浏览器的右侧,方便用户在浏览过程中随时开始预定步骤。
尼尔森10大可用性原则-Airbnb - 图12
提供一些小巧思与能够带来aha moment的兴奋型需求。常见的功能,能够让用户方便频繁使用。常见手法:置顶,回到顶层….

八、美观和简约的设计

Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.——Nielson
对话中不应该包含无关紧要或很少需要的信息。在对话中每增加一个相对重要的信息,就意味着需要弱化其他信息。
高颜值不需要理由。
尼尔森10大可用性原则-Airbnb - 图13
尼尔森10大可用性原则-Airbnb - 图14
尼尔森10大可用性原则-Airbnb - 图15
少即是多,美即正义。在内容突出的理念下,弱化设计,突出内容。让设计美而简单。

九、帮助用户识别,诊断,并从错误中恢复

Help users recognize, diagnose,and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.——Nielson
错误信息应该用通俗易懂的语言表达(不要用代码),较准确的反应问题,并且提出解决方案。
实在无法避免的报错时,不要单纯只是报错,要提供解决方案。就好比小时候犯错,你绝不能光说:「啊,我错了。」老师或家长必然会追问:「错哪儿啦?」你要是说不出缘由,则必定被认为认错不诚恳不真心。
当用户填写错误时,系统会及时给出提示以及解决方法。
尼尔森10大可用性原则-Airbnb - 图16
只提错,不给解决方案的都是耍流氓~要么给出解决方案,要么别bb~~ 常见手法:报错提示正确方式

十、帮助文档

Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.——Nielson
如果系统能让用户不需要阅读文档就会使用那是最好的,但通常情况下还是需要帮助文档的。任何信息应该容易被搜索,且专注于用户的目标任务,并列出具体的步骤来告知用户。

  • 对于一些可以用一句话说清楚的帮助,可以直接在对象旁边提供鼠标悬停出发的 tips,或者简明的辅助说明;
  • 对于较复杂的,一两句话说不清楚的帮助,则需要跳转至对应的帮助页面;
  • 系统需要有一个帮助中心,为用户提供模糊搜索、分类搜索,来为用户提供更全面的帮助。

在个人资料页面,对于用户关心的隐私信息,系统会给出非常有亲和力的解释文案。此外,在系统很多页面都有对应功能的帮助链接以跳转至帮助中心。
尼尔森10大可用性原则-Airbnb - 图17
系统的帮助中心,提供了搜索和问题分类引导,方便用户快速定位问题。
尼尔森10大可用性原则-Airbnb - 图18
△ 本文图片版权归 Airbnb 所有
为用户提供及时的帮助,在用户需要的时候及时出现解决。这一点飞书与语雀做的都还不错。 常见手法:FAQ 边界提示

总结

号称以设计驱动的 Airbnb 公司,的确在产品设计、用户研究、UX设计方面展现出了较高的功力。网站甚至移动端APP 的框架层、范围层、视觉层的设计都体现出了高度的用户体验一致性和品牌感。可以看出,Airbnb 对 design system 的重视一级高度的执行力。什么是好的产品品牌认知和识别,我可以简单的理解为:「脱掉」Logo,用户照样认识你。