用户体验和可用性是与Web或应用程序设计密切相关的术语。人们遇到的技术术语越多，对这些术语之间的区别就越不理解，尤其是对于年轻的设计师而言。
因此，即使许多文章都讨论过了这一问题，但根据我多年的研究，还是有必要弄清用户体验和可用性之间的区别。
为了清楚说明这一点，本文将从6个方面讨论它们之间的区别：
- 定义
- 典型问题
- 基本要素
- 不同的目标
- 设计原则
- 最佳案例
01
定义
什么是用户体验？
用户体验是指用户在使用或与特定产品（例如网站或应用程序）交互时的主观感受和态度。它受用户界面功能、交互作用、产品品牌、心理预期、实际情感等因素影响，是产品设计中不可或缺的一部分。
什么是可用性？
可用性是交互式IT产品/系统的一项重要质量指标。它指的是产品有效性、易用性、易学性、高效性、无差错性，以及用户满意的程度。因此，它主要涉及产品的功能部分。简而言之，“不要让我思考”是可用性设计的典型原则之一。记住，不要犯任何可用性错误，因为它会减少网站转化次数。
根据定义，我们可以理解可用性只是用户体验其中的一个小的方面。可用性更多地关注产品的功能方面，而用户体验几乎涉及到所有让用户享受产品的方面。
02
基本要素
用户体验的四个要素：
- 可用性：完成任务容易吗？
- 适应性：用户愿意开始使用该产品吗？
- 期望：体验有趣且引人入胜吗？
- 价值：产品是否能够为用户提供价值？
可用性的四个要素：
- 功能：这个产品可以正常工作吗？
- 易学性：无需额外的学习即可使用该产品吗？
- 灵活性：除了主要任务，该产品还能做其他事情吗？
- 设计：这个产品的外观漂亮吗？
03
不同的目标
可用性：它易于使用吗？
对于一个网站或应用程序，可用性设计的唯一目标是“易于使用”。换句话说，当一个产品直观易懂，用户只需点击几下就可以轻松完成任何任务时，我们通常会说该产品具有很高的可用性。反之，如果大多数用户难以理解这个产品的界面和功能，且完成任务涉及复杂的过程，那么我们通常会说该产品的可用性很低。如果是这样，我们常常认为它的可用性需要改进。
用户体验：使用感觉好吗？
用户体验的概念是关于用户使用网站的前、中、后期获得的总体感觉。可用性与用户在使用网站时完成任务的难易程度有关；用户体验则关注于用户对网站如何与其进行交互的感知。因此，如果用户对一个产品感觉不佳，我们通常会说它需要增强其用户体验，包括功能、交互、界面等。
04
典型问题
在设计以用户为中心的产品时，设计师会分析产品的许多方面。
典型的用户体验方面：
- 设计和评估用户在开始和结束与产品交互过程中的操作。
- 最大限度地实现刺激、识别和引起情感共鸣。
典型的可用性方面：
- 评估产品的整体有效性和效率，并将其作为设计目标。
- 评估用户的舒适度和满意度，并将其作为设计目标。
- 设计易于使用的产品，并评估可用性问题。
05
设计原则
设计师通常遵循以下几个基本原则：
网站/应用程序用户体验设计的5个关键原则：
1）可用性至上
产品提供的功能通常是人们选择使用它的原因。因此，无论你设计哪种类型的网站或应用程序，可用性设计都是设计用户体验时应注意的首要问题之一。
2）内容是关键
为了使产品对所有人都可用，每个页面中的内容应该简单、简短、易于理解。因此，在网页的文本设计上花费大量的时间是非常必要的。
3）注重视觉设计
为了给用户带来更愉快的体验，产品应该具有良好的视觉设计。例如，你可能需要创建一个清晰、直观的层次结构布局，一个漂亮或时尚的配色方案，一个沉浸式视频、音频、图像或其他视觉效果。
4）保持设计的一致性
设计的一致性是使用户保持良好心情，并为其提供更好的体验的最重要的因素之一。
5）让用户享受等待
由于网络状况不佳或页面数据过多，有时不得不让用户等待。你可以添加一个加载动画或进度条，让用户享受等待的乐趣。
网站/应用程序可用性设计的5个关键原则：
1）2秒载入原则
高可用性的产品不会让用户等待太久。因此，为了提高产品的可用性设计，应尽最大努力将每页的加载时间减少到2秒以内。
2）以用户为中心的设计
可用性关注产品的功能部分，而产品应具有的功能通常取决于用户的需求。因此，要根据用户的需求来设计一切。
3）正确应对错误
除主要功能外，你还应该学会正确应对错误。所有产品都可能有问题，如何解释问题并指导用户克服问题，可以使你的产品轻松脱颖而出。
4）明确CTA按钮
CTA按钮对用户购买产品或完成任务有很大的帮助。清晰有效的CTA按钮绝对可以简化整个过程。
5）易于跟踪的导航
一个直观且易用的导航可以帮助用户快速找到所需的功能和信息。
可用性设计和用户体验设计都应遵循的原则：
1）测试
无论你现在从事哪种类型的设计，持续的测试都是基本规则之一。
2）无障碍
如今，几乎所有人都在手机上使用不同的网站或应用程序。因此，在设计产品时，还应该注意响应式设计，使其可以在不同的PC或移动设备上使用。
3）责任
对你的用户负责，并尝试从他们的角度思考问题。
06
最佳案例
我们选出了5个最佳的可用性设计和用户体验设计案例。它们可以使你更好地了解用户体验设计和可用性设计之间的区别。
5个最佳用户体验设计案例：
1）Line Friends在线商城
日间和夜间查看模式有助于突出显示页面内容并减少眼睛疲劳，通常能够为用户提供愉悦的体验。Line Friends在线商城是一个体贴的网站，它使用昼夜模式来有效地增强用户体验。
（此处为视频，请在原文中观看）
2）Bike Shop
为了帮助用户快速找到所需的自行车，Bike Shop使用了无缝、沉浸式的导航交互和动画来提供炫酷的用户体验。
（此处为视频，请在原文中观看）
3）Explore the Space
Explore the Space有非常吸引眼球的手绘设计风格，有助于吸引用户并简化整个浏览过程。
（此处为视频，请在原文中观看）
4）Rate Your Ride
Rate Your Ride使用可爱的表情符号来引导用户对骑行进行评分，并为他们提供不同且有趣的体验。
5）Tesla移动应用程序
Tesla移动应用程序使用直观、简单的侧边栏指导用户使用该应用程序，并了解有关其汽车的更多信息。它有效地简化了用户探索过程。
（此处为视频，请在原文中观看）
5个最佳可用性设计案例：
1）Baker Tilly
糟糕的导航体验是用户离开网站的主要原因之一。因此，导航可用性设计是设计师应该注意的重要方面。Baker Tilly提供清晰的导航菜单，每个网站访问者都可以拥有流畅愉快的导航体验。
（此处为视频，请在原文中观看）
2）集市酒店
集市酒店有一个很酷的手风琴式导航栏，它有效简化了整个导航过程。
（此处为视频，请在原文中观看）
3）Housing Search
搜索可用性设计是另一个不可低估的重要部分。Housing Search具有强大的搜索栏，可让访问者轻松快速地搜索到所需的房屋。它有助于增强整个网站的导航系统。
（此处为视频，请在原文中观看）
4）Bug Store电子商务网站
精确且结构良好的网站内容有助于清楚地说明网站的服务或产品，并引导访问者轻松完成任务。因此，内容可用性设计应该是设计过程的重点。Bug Store电子商务网站使用简单明了的层次化内容设计，使用户可以快速访问页面上的信息。
（此处为视频，请在原文中观看）
5）Useberry
就像之前说的，正确应对错误消息是提高网站可用性的有效方法。Userberry有一个非常有趣的404动画设计，可以帮助访问者了解错误，并指导他们顺利浏览网站。
因此，用户体验设计包括可以改善你的网站或应用程序用户体验的每个细节。可用性设计是用户体验设计的一部分，涵盖了所有可以帮助人们轻松使用你的网站或应用程序的内容。它们是不同的，但在某种程度上也有一定的相似性。
07
你可能想知道的其他事情
1.可用性在创建良好的用户体验中起着重要作用
可用性高的产品使用起来很方便，能够让用户在使用产品时感到舒适，还可以减少用户在操作产品时出错的可能性。如果它能唤起良好的情感体验，让用户感到快乐和愉悦，那么这个产品的用户体验设计就很好。
2.网站的可用性和无障碍之间的区别
无障碍是指网站是否可用，并且可以方便地被正常人甚至残疾人访问。无障碍测试的重点是测试残疾人是否可以访问该网站，且是否与他们使用的各种工具兼容。
可用性是指网站使用的简易性和直观性。如果用户可以在没有任何说明的情况下使用网站，则可以将其称为高可用性。可用性测试侧重于衡量网站的易用性。记住，你应该在开始设计之前进行可用性评估。
08
结论
可用性包括有效性、效率和满意度，使用户能够尽可能轻松地完成某些任务。另一方面，用户体验涵盖了用户与产品交互的更广泛的方面。
参考文章：
作者：Summer ye
译者：设计小菌
原文请戳【阅读原文】
为尊重版权和译者
转载请联系我们
我 们
服务.体验.交互设计传道者
公众号
「yizhizhaojun」
一只朝菌设计学园
联络微信
平菇老师
「zhaojundesign」
「一只朝菌设计学园」由毕业于清华大学人机交互专业的学长创办，致力于创造卓越的设计知识学习课堂，专注交互设计、用户体验设计、服务设计领域的专业知识教育。
教师团队来自于清华大学、同济大学、上海交大、北京理工大学、北京邮电大学、中山大学、华南理工、江南大学、香港大学、香港理工、台湾科技大学、Imperial、POLIMI、Delft、Oslo、Goldsmiths、Edin、Glas、Manc、Lancaster、Loughborough、Leeds、Arts London、BCU等国内外高校，以及Microsoft、阿里巴巴、腾讯、网易、华为、央视、百度、美团点评等企业集团。
清华大学有训曰：行胜于言。「一只朝菌」谨承母校百年教诲，时刻铭记师者之责，为好学者传道授业，为有志者掌灯引行。