互联网产品设计之可用性
⇨⇦
可用性定义：产品可用性也叫用户可用性，是指产品真正能够提供客户功能信息的实用性。假设所有的功能都是没问题的，那接下来的工作就是确保它能够按用户期望的方式行事。
产品功能的可见性
如果一个元素（链接，选项，按钮…）不能被看见和被确认，那它就不存在。
如果用户看不到自己想要找的东西，或者原本应该看到的东西，那就是遇到了严重的可用性问题。如果你正在进行产品设计，不要指望用户会耐心十足地到处点击去寻找重要的辅助信息，阅读合同条款中晦涩难懂的条文，或者做一些可能从根本上影响用户操作的事情。
以下几种情况会使得功能元素＂不可见＂，在产品设计中应避免：
不在用户要寻找的位置；
被其他元素挡住了；
即使在显眼的位置也不能被识别；
根本就不存在。
在报纸还是单页印刷的时代，报摊的报纸都是折叠着摆放的。因此，除非有人拿起报纸打开它，否则只能看到头版的部分信息，其他部分就被称为＂不明显位置＂。区分可见部分与不可见部分的就是＂折痕＂。
随着网站的出现，＂折痕＂被赋予了新的意义。＂折痕以下＂意味着这些内容都不是即时可见的，除非用户向下滚动页面。和报纸不同，浏览器窗口中的＂折痕＂并没有确切的位置。因为折痕的位置取决于浏览器窗口的大小，如果你使用的是大屏幕，并且把浏览器窗口放到最大，就会看到网页的更多内容。但是，如果你把窗口变小一些，看到的内容也会变少。在智能手机或上网本上，最大可见区域通常比全尺寸电脑显示器上的可见区域小。
另外，屏幕分辨率可以大大影响浏览器窗口中看到的内容，屏幕分辨率越低折痕越高，下图中亚马逊官网在1920*1080与1280*720分辨率下的折痕位置：
亚马逊官网（1920*1080分辨率）
亚马逊官网（1280*720分辨率）
事实上，亚马逊网站的主页非常长。有些内容是必需的，因为它们可能有助于搜索引擎的优化。但是这些内容处于页面很不明显的位置，很多人有可能永远也不会看到它们。
网站中有些内容是要明显显示的，下面列出了绝对要显示在明显位置的内容：
品牌和主要导航
帮助信息
站内搜索框
购物车和结算链接
咨询链接
语言切换入口
快速应用的关键输入区
关键输出区（置于输入区的附近）
通常可以放心地置于页面底部的内容包括：法律声明；隐私政策；地址和联系电话。
创建适于滚动的页面
所谓适于滚动的页面，是利用布局向用户传递强烈的信号，告诉用户要进行页面滚动还能看到更多内容。无论折痕落在什么位置，都要让布局穿过某个元素（比如图片），让用户知道滚动页面可以看到更多的内容。适于滚动的诀窍就是在图形消逝的地方让内容中断。网页的下边缘越干净，就越不适于滚动。
底部图片中断，利于页面滚动
假若一个设计从物理上把两个相关的信息分开，也可能会带来问题。比方说，我要在页面顶端的一个输入框提交信息，我就会希望输出结果也显示在输入框所在的位置（比如，提交内容）。即使在适于滚动的界面上，我们也不希望用户过多地滚动页面。为了点击屏幕外的提交按钮，不得不滚动一点页面，真是让人极其恼火。随着屏幕变小，越多越多的按钮、输入框以及输出框，需要在页面的顶端或底端出现，这也是人体工程学方面的考虑。
微博发表文字信息，发送按钮位于右上角
位于底部的发布按钮
避免设计广告盲区
广告盲区是指人们忽视网站上各种Banner广告的倾向。USATODAY.com通过采访和网站统计了解到，大多数用户对三件事情感兴趣：运动、天气和股票。所以，网站的设计方案是把这三项内容都放在吸引人的彩色方框中，并置于网页的顶端。这样做的结果是什么？没有人点击这些内容，于是出现了广告盲区。
红框内即为广告盲区
在产品设计中，可以采用以下方式避免广告盲区：
让特定的用户看到特定广告，达到精准投放效果。
将广告设于页面底部，而非顶部。最新的研究显示，获得最高关注的不是页面顶端，而是在第一屏的底部。这对广告设计有着直接的应用借鉴，能够避免广告盲区效应的损害。
以对联形式悬挂于首页两侧， 规格较大，不会产生上下的广告盲区，广告位置可以强烈冲击访客视觉。
网站的重要内容避免过度设计
避免遮挡重要内容
网页浏览总的体验极大地影响着用户购买产品、继续使用服务乃至注册的欲望。然而我们都知道，有些网站只能有限度地浏览，唯有付费后才能看更多的内容。用户必须注册并提供个人信息、付一些钱，或是做其他事情才能访问页面。
京东的做法是一个正面的案例，京东提供了未登录也可选择商品加入购物车的技术支持，具体来说就是，一个未登陆用户访问了京东网站，这个客户在 2 点、 3 点、 4 点分别加了三件商品入购物车，这样京东的后台也记录了这个用户的购物车里面已经有三件商品，并且只要每次该用户查看自己的购物车，京东后台都能够展示相应的数据（涉及session与cookie技术，本文暂不深入），在用户最后要结算的时候才会提示用户登录/注册账号。
我们在产品设计中要确保产品的可见性，试着在设计中解决如下问题：
重要的信息不要隐藏在用户找不到的地方。
不要让任何东西挡住要显示的信息。
避免将重要的信息设计成了广告盲区…
在有折痕的页面中对信息进行分组，不要将重要的信息隐藏到折痕下面。
付费方式不要对免费体验的部分造成影响。
产品要让用户易于理解
在可用性方面，说到＂易于理解＂，就是让用户的回答必须是＂是＂！
共同参照概念
共同参照的意思，是指无论是谁使用某个东西，都可以和它的设计者保持相同一致的理解
文字
文字描述在产品设计中一直都发挥着重要的作用。比如，图书中的文字往往多于图片，iPhone上有了非常炫酷的图标也还要有关联文字。文字构成了大多数使用手册、菜单、产品说明、以及公共内容等的核心内容。
关于文字的可用性，要记住两件事情：
无论描述什么，都要简洁、明确表述
不要认为每个人都能正确理解你写的信息
用户不能理解的错误提示
创建共同参照的要点方法：
不要认为一切都是理所当然的
提前考虑用户可能遇到的问题
回答用户没有想到的问题
根据用户的实际使用情境检查内容
不同的使用情境，会随时影响所需（提供）的信息
图片
一张图片会胜过千言万语。图像可以提升文字效果。最重要的是，图像可以形象地说明一个仅用文字很难描述清楚的事物。文字能够很好地传达事实和数据。但是照片、图形等往往能更好地传达物体微妙且常常富于情感方面的内容。
此外，图片可以展示一些东西如何使用、穿戴，等等。如果产品的使用方式略微与众不同，图片就会相当有用。
最后，只用图片和图像或许不能展示全部的内容。为了把信息表述清楚，请使用两种以上的共同参照要点方法。
天猫显示的商品图，不仅展示了商品细节、如何使用使用，还结合视频全面展示商品，这是一个很好的共同参照
图标
我们知道，图标固然很有吸引力，但它实际上在沟通起来相当逊色。事实上，只有4个图标最终被大多数人认可：
放大镜（查找）
房子（主页）
信封（联系我们/邮件）
打印机（打印）
经验告诉我们，如果你真的需要一个图标，最好使用类似微软、苹果或谷歌的设计。人们通过网站或应用程序学习东西，也期望能把这些知识应用到其他网站和应用程序中。不要设计太有创意的图标。虽然它们很漂亮，但设计成本很高。真正有创意的图标一般只有被点击才有意义，否则做得再好看也没有用。产品中任何东西的理念都是它可以做什么，而不是它看起来怎么样。
QQ的图标也会加入鼠标移入显示文字，这样做让用户更容易理解图标的含义
音频、视频
带宽增大、格式标准化的统一和易于使用的第三方服务的出现，使得人们可以将真正的多媒体内容快速地添加到网站和应用中。视频与音频的出现增加了用户交互的趣味性，人们可以通过听和看视频更快速的获取想要得到的资源。视频和音频往往都会是比较好的共同参照。
为保证我们的产品能够让用户易于理解，我们要做到以下几点：
说明、帮助文案要精确而全面。
不要使用让用户可能难以理解的缩写、官话或生僻词汇。
使用正确建立共同参照的图片。
要让所有用户都能理解网页内容或者线下流程。
使图标包含描述性文字，包括alt属性（当鼠标悬停在一个词或图像上，就会自动弹出一个小黄框）。
从视觉设计的角度来创建成熟的共同参照。
可视化描述内容不要误导用户。
产品的一致性
产品规则不会出乎意料地改变。
一致性是实现清晰简洁的功能设计的关键之一，它让我们周围的世界变得更容易理解，从而使得我们的生活变得简单。苹果公司的设计师曾经说过，‘当事物表现不同时，应该保持视觉上的不一致；而当事物表现相同时，应该保持视觉上的一致性。’
例如，如果你一直把＂提交＂作为按钮标签，就不要突然将它改为＂发送＂和＂接受＂，以免大家疑惑。不要只是出于创意而混用术语。一旦建立了自己的语言习惯，就要坚持使用，特别是在有关表单和对话框的地方。
保持事物的单一性
既想要保持用词的标准性，也要为用户提供简单直接的选择。比如，选择性别时：
男；
女；
这是一个单一列表，其中所有的词语（把这些想象成网站上的菜单标签）都有明确的区别，没有任何重复，用户也可以轻易的做出选择。如果换成下面的情况，你会怎么选？
男；
女；
未成年人；
菜单分类清晰、明确
用标准化提升一致性
使用标准化的设计可以为用户的使用保驾护航，比如，做一款安卓应用要符合Google的相关规范，同样，iOS也有着自己的设计规范。标准化的关键不是阻碍创新，而是让解决方案清晰可见。
在设计不同客户端产品时，我们要确保熟练掌握其设计规范，这样才能设计出符合用户使用习惯的产品。
一个按钮，一个功能
多按钮的遥控器
我们都见到过让人讨厌的遥控器，面板上有很多个按钮。尽管这个东西有很多其他的可用性问题，但至少它没有多功能按钮。如果你希望一个按钮有多种功能，那基本上就是在自讨苦吃。人们总是不理解为什么一个应用程序或一个网站突然就切入到＂不同的模式＂里了。
例如，我可以使用遥控器上的菜单按钮来激活或关闭电视屏幕上的菜单。这很好。但是在菜单键周围还有四个光标按钮用于导航。左箭头按钮为后退功能，而在菜单关闭的情况下，它可以快速浏览12个不同的屏幕高宽比（宽屏，电影扩展16∶9，字幕变焦，等等）。如果我同时按下左箭头和右箭头，就会看到设置菜单，但它不同于按下菜单键时看到的菜单。总之，多功能按钮可以说是非常糟糕的。
苹果公司在消除多功能按钮和避免多用途方面做得十分出色。iPhone只有一个按钮，并且它只做一件事情：返回手机主屏幕。其他所有的操作都通过触摸屏上的＂软＂按钮完成。苹果鼠标也只有一个按钮。也就是说，如果你按住苹果鼠标一两秒钟，就会看到另一个菜单，就像PC上的鼠标右键。这是一个折中的方法，但它能正常工作并且易于操作。
当然，一键并不总是更为简单。多按钮也不总是坏事，只要它们能够合理分组，表明按钮的相关功能，并且不会在不同的时间代表不同的功能。
一个图标，一个功能
与按钮密切相关的是图标的操作。例如，谷歌备受欢迎的Gmail应用程序曾经是出了名地爱重复使用图标。毕竟，设置图标是为了对隐藏在图标背后的功能提供快速的认知提示。
当然，并不是只有谷歌这么做。Windows产品，也同样也有重用图标的案例。
由此看来，尽管经过多年的研究和消费者投诉，就连那些大企业都还没有真正接受＂一个图标，一个功能＂的最佳实践理念。
不同的图标提供不同的功能，这样才能让用户对我们的产品不产生疑虑。
网易云音乐，细致的图标
让我们的产品具备一致性是极其重要的，我们要做到以下几点：
设计中不要存在看起来相同，但实际操作不相同的东西。
设计中不要存在看起来不同，但操作相同的东西。
不要为了创新而牺牲了对象或功能的一致性。
不要重复利用图标来实现不同的功能。
尝试在你的产品或服务中增加功能的一致性，也可采用他人开发的最佳实践。
使用颜色和物理分组对按钮和其他控件进行分类，让用户马上明白它们是有关联的。
产品的可预见性
让用户清楚地知道下一步会发生什么。
一致性与可预见性的一个显著区别是：一致性意味着某些东西每次都做相同的事情，可预见性意味着它会做你期望它做的事情。举一个简单的例子，花瓣网上每一个素材都有收藏的图标，这是一致性。用户点击图标意味着收藏了该素材，这是可预见性。
一致性与可预见性
让用户知道该期待什么
可预见性意味着某样事物会做你希望它做的事情。知道该期待什么的关键在于，在交互活动真正发生之前设置预期。
我敢打赌，在去一个餐厅之前你一定会通过‘大众点评’查看评论，来了解商户是否值得信赖。在购买图书（或其它商品）之前，你也一定会在评论区查看该书的评价。
当用户触发一个操作后，适当的提示可以为用户建立预期。
倒计时跳转页面提示，给予用户期待
品牌、客户满意度和预期
从营销意义上说，品牌也与设定预期有关。其中一个关键部分就是对产品或服务进行市场定位。例如，我们认为沃尔沃是安全型汽车，捷豹是舒适的运动型汽车，雪佛兰是实用性汽车。
客户满意度和预期是紧密相关的。例如，国外的调查显示，并不因良好服务而著称且不涉人情的折扣商店沃尔玛，得到的客户满意度要高于以服务自诩的诺德斯特姆。为什么呢？因为没有人真正期望会从沃尔玛得到良好的服务，所以工作人员做任何一件让购物者更方便的小事都会令人印象深刻。但人们对诺德斯特姆的服务预期已相当高，所以他们需要更努力才能为客户留下深刻的印象。这等同于商业中的位高则任重。
所以，我们从中学到的是，如果人们不抱有期望，那就帮助他们建立期望；如果他们怀有期望，你超出期望越多，那么人们就会感受到更好的可用性。也就是，要做到超出用户的预期。
让用户知道有多少步骤
多次点击并不一定会使产品变糟糕，只要用户认为每次点击会使他们更接近目标，就会多次点击。因此，我们最可能预见的往往是那些提前告诉人们要点击多少次的过程。
如果有多步过程，请确保用文字或图片明示出来。
展示出过程的步骤
把东西放在用户期待看到的地方
让东西可见意味着把它们放在它们应该出现的地方。说到可预见性，将东西放在人们期望找到的地方也很重要。例如，在现实世界中，我希望电灯开关紧挨着门，希望在厨房里找到锅碗瓢盆。简而言之，用户希望所有东西就在需要用到的地方附近，并以合理的方式进行分组。
为确保我们的产品具备可预见性，我们可以尝试如下方法：
帮助用户利用过去的经验。
让用户知晓应该提前知道的事情。
提前告诉用户有几个步骤。
提供某种可见状态表明产品的不可用状态。
在产品的使用过程中确保符合用户的预期。
相关阅读
互联网产品设计之易用性