蜗牛派为了对交互设计有更深入的理解，我决定在Coursera上开始更加系统的学习。Coursera是大型在线课程教育社区，有点类似于中国大学MOOC幕课，有非常多的名校名师在上面开授在线课程，涵盖多个领域的专业内容。
我会通过整理课程内容笔记的方式巩固和梳理每节课所学内容，对人机交互感兴趣的同学可以选择加入课程，我们一起同步学习，共同进步。
这节课的内容是有效的设计评估，这种方法可以称之为启发式评估或者基于启发式的反馈。评估设计的方法有很多种，可以凭借以往的经验、使用一些标准模型或者是自动化的程序。我们在这里主要讨论的是利用专业知识和启发式评估法，我之所以喜欢这个方法，是因为它可以应用到整个设计过程中。所以，不需要等到软件开发出来之后再进行评估。从最初的纸质模型开始，你可以将启发式评估的标准告诉用户、你的领导或者团队中的成员，这样他们就可以用这些词汇来描述哪些设计是有效的。
而且它还可以应用在软件重设计中，在软件发布之后，如果你想制作一个新的版本，那么启发式评估可以帮助你分析接下来要做的事。启发式评估最初是由Jacob Nielsen于1990年提出来的，他们最初是让用户在界面中寻找违反这些法则的案例，然后把它们整理到一起，然后再决定从哪里入手去进行修改。
我们看到的这十条标准，涵盖了用户界面的不同特性，我相信它会为你提供一些新的思路。但是其实它们并没有什么神奇之处，我根据自己的经验对Jacob Nielsen最初提出的版本进行了改进，如果你做的是不同类型的产品，那么你可以在我和Jacob的基础上，随意进行改动来满足你的需求。但是它是一个评估用户界面的基础标准，包含十个好设计原则。
我们将会把它们分为三个部分：理解（Understanding）、行动（Action）、反馈（Feedback）来帮助用户理解您的设计，从而产生用户行为，然后给出反馈。
启发式评估：理解
那么我们接下来就看看如何将你的用户界面变得更直观易懂吧。
一致性
我们基于过往经验来构建心理模型和预期结果，所以在你的产品中保证设计的一致性是非常重要的，同时也要与用户已经熟悉的类似产品保持一致。
这是一个违反设计一致性的案例，在这个版本的Microsoft Visual Basic中，有四种对话框的排列方式，有些时候你是可以适当的打破一致性原则，但是在这里，你完全没有理由这么做。
在Verizon的用户服务页中，联系人和客户服务中使用的名词都是商业词汇，所以用户很难理解它们的意思。
这个例子是Adobe许可证修复程序，你可以看到下方我遮住了一部分信息，你认为这里会出现什么呢？通常可能会是”继续”，但是事实上它说的是”你想退出吗？”第一次我打开这个界面的时候，想都没想就直接点了”Yes”，然后我就退出了程序，不得不再重来一次。
使用相同的比喻或者语言
这里有一个应用一致性的好案例，它在对话框中向你提出了一个问题，下面的按钮没有用让人迷惑的”Yes”和”No”而是采用了上方题目中的选项，这就引出了我们第二个启发式评估原则：使用相同的比喻或者语言。
这里有一个来自Adobe Acrobat的非常好的例子，在打印的时候弹出的打印对话框中，右下角可以显示真实的打印效果，图形化界面加入现实元素后会变得更有力，在这个对话框中我们可以看到一个微缩的打印版本，这个页面的尺寸应该是标准尺寸，但是我们选择了信件尺寸的纸张，所以底部的灰色是给我们的一个提示。
其他你比较熟悉的比喻有桌子、文件夹和购物车。这些都是我们在现实生活中比较熟悉的物品，同时它们也在设计中也拥有相同的含义。
如果你在为某一个特定的用户群体做设计，那么最好使用他们的语言。这是一个非常好的儿童网站的案例，其中的文案都是模仿的儿童语气，对孩子们来说更加友好。
这是我在办理去印度的签证时找到的一个案例，，这个签证网站列出了50多个美国的州，它把加利福尼亚州分为了南加利福尼亚和北加利福尼亚。我在这两个地方都生活过，我想说的是确实有很多加利福尼亚州的人希望这两个州可以分开相互独立，目前来说它还是一体的，我们中的很多人非常清楚自己住在哪个部分，但是还有一部分两个地方都生活过，这个时候你就不知道改选择哪个选项了。所以为了避免这种困惑，很多这种下拉列表都会使用邮编来进行选择。这就引出了我们下一个评估原则：清晰的、具有功能性的设计。
清晰的、具有功能性的设计
Le Corbusier 有一句名言是：”形式追随功能。”所以你展示出来的信息应该是用户真正想要的。
这里有一个2012年天气网站的案例，你想查询旧金山的天气是因为你想去旧金山，但是所有你想知道的内容都被折叠起来了。
这是一个非常令人震惊的案例，它实在是烂的太彻底了。但是说实话我觉得它”还不错”，但不是真正意义上的不错。这是一个租车网站，它集合了很多疯狂的设计。当然，这个案例比较极端，但是如果你稍不留神，可能就会操作失误，用户没有办法集中精力去解决他们的需求。
另一个有这种视觉干扰的案例是2010年的一个Google表单，这些单元格周围的网页框都是视觉垃圾，你真正关心的其实是表单里面的内容。把这些多余的线框都去掉，让真正有价值的部分体现出来，有时它会影响到用户的核心需求。
例如在这个学生贷款的网站上，你希望做的是找到贷款余额、支付贷款、确保你的联系地址是最新的。有人认为添加Widget是一个好的想法，但是没有人会在学生贷款的网站上花时间和精力去想添加什么样的Widget。
以上就是我们启发式评估的第一个部分，理解。下面一个章节我们会介绍到第二部分：行动。
启发式评估：行动
欢迎来到启发式评估第二阶段，我们本节的研究内容是用户行为。
自由度
首先就是用户控制和自由度，当我进入到一个网站，首先需要明确的事情是，我对于自己的目标是否清晰？网站中的信息入口是否足够醒目？我知道该如何操作吗？这其中涵盖了很多方面，包括如果我错误操作了是否可以退出？是否可以重新进入？不要妄想强制用户按照固定的步骤操作，例如当我打开一个电商网站时，我希望的是在强制登录并且添加收货地址之前先逛一逛。
用户界面的类型取决于你想要完成的任务，所以一些我几年才会用到一次的功能，例如设置路由、打印机或者其他配置类的不常用操作可以隐藏的比较深一些。相反，一些常用操作就需要做的足够显眼，同时可以提供多个入口，而且越是针对专业型的用户，这种开放式的设计就越有必要。越是针对新手用户，就越要设施多一些限制。
举一个好的结账系统的例子，在人们刚开始逛电商网站的时候，这些想买那也想买，往购物车中添加了一大堆的东西，当你进入最后的结账系统时，选择就结束了，商家鼓励你开始付款。
我认为亚马逊在这方面的设计还不错，因为在结账之前你可以对购物车中的物品进行增删操作，这就是在开放和限制之间一个比较平衡的自由度，如果你强迫用户买下购物车中的所有东西，那么用户可能会选择放弃付款，直接退出。当然如果你将这个过程设计的太过于开放，那么用户可能又会被其他的内容吸引，从而忘记付款，所以最重要的就是把握好平衡。
还有一个关于给用户提供自由度的好案例就是订票网站，我喜欢这个界面的地方在于，有很多浏览选项的方式，尤其是你还可以看到你选择的日期之外的价格，它会给你提供相邻日期的机票信息。例如我选择了一个出发日期，它会提示你如果提前一天出发价格就会便宜一半，或者给你提供一些其他的灵活方案，给用户提供多种选择，才能得到最满意的方案。
灵活性
接下啦我们要讲到的就是灵活性，好的用户界面会为高级用户提供更灵活、编辑的操作路径。
典型的例子就是快捷方式，例如复制粘贴命令，通常它会被放置在菜单列表中，但是我们更愿意通过快捷键来实现这个功能。
在不让新手用户感到不知所措的情况下提供灵活性的好方法就是先提供一些默认选项，这里举一个Expedia旅馆搜索引擎的案例，你可以在其中输入任何一个城市，它非常的灵活。但是它将旧金山、波士顿、华盛顿等热门目的地单独列了出来。
同时这种灵活性也可以体现在提供相关信息，如果用户对接下来即将发生的事情有一个大概的了解，那么就可以更好的做出决策。例如这个日历行程应用，它会在头部菜单栏中显示每天的天气，那么它就可以帮助你判断今天要骑车出门还是开车，是否要带一件雨衣，以上这些都可以帮助你更好的解决问题。
我们使用的产品也可以帮助我们防止信息过载，一个比较好的案例就是Googl 的Gmail，如果你点击取消订阅，它会给你提供三个选项，第一个是”取消订阅并举报垃圾邮件”，第二个是”举报垃圾邮件”，第三个是”取消”。如果你选择了第二个”举报垃圾邮件”按钮，Google就会知道你只是不喜欢这种类型的邮件，之后就不会再给你继续推送了。Google知道你是想取消订阅，但是同时它也意识到你可能还有别的想法，比如只是不想看这一类的信息，但是如果质量比较好或者没有打扰到你的情况下还是可以继续订阅。
以上几个案例，我们分别提到了航空公司为用户提供多种选择，帮助用户选择更合适的价格和出行方式；日历应用显示相关的天气信息；Google提供不同的操作方式给用户更大的灵活性。所以它背后的原理就是，如果你喜欢这种苏打饮料，那么也可能喜欢与它相似的东西。
对于这种”猜你喜欢”的功能有一个建议就是一定要提升算法的精准度，不然就会像一些尴尬的电商网站，推荐的都是不相关的东西，看起来就像是随机生成的，有的时候还会令用户很苦恼，SAP在这方面做的还不错。然而推荐的很多内容其实都差不多，如果你已经有一个特定的目标了，那么这些推荐就会变成一种干扰，所以在解决用户特定需求和推荐相关内容之间一定要有一个平衡，在设计中很难做到这一点。
这边再举一个时尚订阅的例子，如果你觉得这个时尚网站发的邮件太频繁了，你想取消订阅，点击进去后有一个选项是仍然订阅，但是发送的频率不要那么频繁，这就为用户提供了多一种选择。
所见即所得
第三点就是所见即所得，它是用户界面设计的基础。它的意思是你能做的操作已经清清楚楚的展示在界面上了，你不需要再去做额外的猜测，例如这个红色的按钮是什么意思，或者这个部分是什么意思。
我们拿来了一个三明治，用锡纸把它卷好，用数字标记出每一层分别都是什么东西，虽然看上去是一个比较傻的实验，但是确是非常有意义的一次教学。你得把三明治拆成清晰的每一部分，这样你才能了解它的组成。用户界面也是这样的，光从表面上看很难理解它们都代表什么功能，这些按钮、链接可以实现什么。例如导航系统中的链接应该做的更醒目一些，而不是试图削弱它，那么它就会提供更好的用户体验，这就是所见即所得的好处。所以当你在制作导航的时候，它需要提供清晰的信息，告诉你它会跳转到哪里。这并不意味着你需要赘述很多或者提供一些额外的操作步骤。所以有些失败的导航案例就是因为它的步骤太多了，而且没有意义。
拿这个电影购票系统来说，为什么要把买今天的票和买以后的票分开？直接放上一个日历就好了，你可以设定一个默认日期，比如说就是今天，然后让用户自己修改。
另一个让用户知道他们正在查看文件内容的方式是提供预览，这样就可以在打开之前让用户知道这是否是他们想找的文件。
以上就是我们关于行动(Action)一节的内容，下面我们将讲到反馈(Feedback)部分。
启发式评估：反馈
显示状态
当我们使用产品的时候，如何从系统的反馈中获得信息呢？在现实世界中，反馈是自然发生的，例如你拍一个球，你会看到它弹起来了。
但是在计算机世界，我们需要设计用户看到和听到的东西，这就需要我们花费时间和精力在好的反馈设计上。想要做好这项工作有几个比较关键的要素，首先要显示系统的状态，如果它是立即发生的，那么就显示它操作之后的状态，如果我现在正在进行一项操作，它的状态显示取决于它的响应时间，如果是不到一秒钟，那么就直接展示结果。
如果是一秒钟左右，那么最好是增加一些提示，让用户知道程序没有卡住。例如在浏览器中，可以用一个旋转图标来表示网页正在加载，也可以是沙漏、旋转球、进度球或者其他的动态元素，让用户知道程序正在运转。
如果超过一秒钟，那么就需要有一些进度条指示器，使用百分比来表示进度，也可以是倒计时。如果需要更长的时间，那么提供真实的倒计时是比较好的方式，因为用户知道进度条与时间并不是线性相关的，所以用户需要对时间有一个预估，我是继续等待十秒还是先去吃个午饭。
在80年代末期的时候我开始使用第一版Photoshop，在早期的彩色MAC上，一个图像操作可能需要花费20分钟的时间。所以我得知道哪些操作是比较快的，哪些操作是比较花费时间的。其实真的是这样，在等待的过程中我就先去吃午饭，然后回来的时候就差不多完成了，然后再继续工作。
类似于时间，同样存储空间也需要显示。如果你的邮箱系统显示你已经使用了多少存储空间，在快到达边界的时候你就会考虑是否该进行一些操作了，但是如果突然提示你空间不足，那就比较郁闷了。
显示状态的一种方式是根据我所做的这个操作，给出后续的选项。例如，我点击关闭一个文档，那么可以显示：”文档已经被修改。”在这个对话框中会给出三个选项，界面中还有一个好的设计点是”保存”按钮是蓝色的，这意味着它是一个默认按钮，当你直接在键盘上敲击回车的时候选择的就是它。同时”保存”的后面还有一个三个点的省略号，它意味着你点击这个按钮之后还有后续操作会发生。而其他两个选项：”不保存”和”取消”就没有。
交通信号灯也是一个显示状态的例子，它不仅仅是通过颜色来显示状态，而且还有它的位置，防止有些时候颜色不是很显眼或者有色盲用户无法区分颜色。而且就算其中某一项故障，还可以通过另一个状态来判断此时亮的是哪盏灯。
反馈与行动比较好的连接方式是让用户知道当前状态以及下一步该进行什么操作。如果你注册了一个邮箱，通常它提示”注册成功”之后都会再接一句：”接下来你可以进行某某某操作。”这会帮助用户继续前进，因为用户通常不会知道之后发生的事。
这里有一个视频工具名字叫”HandBrake”，它会在完成一个比较长时间的交互流程之后给用户弹出一个对话框提示。
减少错误
好的反馈信息可以帮助用户避免错误。
我们再来看一个保存对话框的案例，如果你要保存的文件已经存在，弹出的对话框提供了如下几个选项：”覆盖源文件”、”跳过”、”取消”、”重命名”，这是一个非常好的设计，因为它不仅仅给你提供了多种选择，而且它的选项解释的也非常清晰，同时你也可以在对话框中给出两个图片的预览，方便用户判断和选择。
但是当在MAC上建立一个有相同名称的文件夹时，它并没有像Adobe一样为我提供多个选项，只是弹出一个警告对话框，告诉你你不能进行这个操作。
另一个提供好的反馈的方法是不要使用一些太模糊的词汇，上一章节中我们说到了语音导航系统，使用语意更明确的词汇搭配上icon图标可以帮助用户加深理解。
这个对话框有三个选项，它询问你是否要保存更改，提供的选项有：”不要保存”、”取消”和”保存”。”保存”是比较好理解的，同时它也是默认选项。但是”不保存”和”取消”之间有什么区别呢？一开始我对此感到非常困惑，我相信还有很多人有同样的感受，”取消”到底是意味着”不要保存并且直接关闭”还是”不要保存，关闭对话框”，如果是前者那么它的功能和”不要保存”是一样的，如果是后者那么我们可以直接退出对话框再回到当前页面。
反馈的另一个重要之处在于，系统期望或者允许我去填写哪些内容。查找功能就是一个典型的例子，如果我想查找一个词，并且将它进行替换，那么我们只需要在相应的输入框内填写内容就好，这就是图形化用户界面的优势。如果是在终端中，它虽然也可以实现查找替换这个功能，但是你需要去使用相应的语法，这对于非专业用户来说就显得十分困难了，图形化界面将这个过程变得更加简单易懂。同时也可以避免语法错误，因为在图形化界面中，即使你输入了一些错误的字符它也不会报错，但是在终端中，一旦你的语法出现错误，系统就会停止运行并报错。所以从反馈的角度来说，虽然还是会有出错的情况产生，但是图形化用户界面还是有效的减少了语法错误的几率。
但是这并不意味着需要提供尽可能多的限制条件，下面是一个反面案例，过多的约束反而阻碍了任务的进行。我希望搜索我朋友Dan Olson的一本书，所以我在搜索框中输入了Olson，然后按下了搜索键，我希望它能给我提供一系列Olson的书，但是接下来出现的是出版商列表，虽然作者通常会比较在意出版商，但是对于读者来说这并不是什么关键因素，在我得到书的搜索结果之前我必须得先选择一个出版商，其实这个功能是不必要的。所以应该合理使用限制条件，让它们尽可能的为用户提供帮助，而不是阻碍用户。你所设置的限制条件应该符合语法规则，并且在特定情境中是成立的。
这是一个预定会议的日历界面，如果你忘记填写开始和结束时间，系统会提示你：”你没有指定日期。”在这种情况下更好的做法是直接弹出日历组件，让用户去选择，或者直接在一开始的时候设定一个默认时间，如果用户需要的话再进行修改。在航班订票网站，如果某一天没有航班，那么用户就无法选择。类似于这种情况，如果某一天没有空的会议室，那么这个选项应该无法选择，可以直接删掉这个选项，或者置灰处理。
支持错误恢复
好的用户界面和反馈应该可以帮助用户避免90%的错误，但是你没有办法保证100%的不出错，它总是会发生。所以当出错的时候，一定要注意清晰的去表述，这样你可以帮助用户去修正它。
这个报错在我看来并没有多大的帮助，它上面说：”创建虚拟目录出错。”后面跟了一个十六进制的代码。它稍微好一点的地方在于可以去搜索一下这个代码代表的含义，然后看看有什么解决方案。在这个场景中，你至少需要提供一些关于代码的解释，方便用户理解错误是怎么发生的。
在填写表单的时候，这种错误信息更为明显。我相信大家可能见过这种界面，它提示我们说：”你需要填写所有信息。”通常当用户看到这种警告的时候，他们并没有意识到自己漏填了哪一项，所以当我点击提交按钮的时候，实际上我觉得我已经填完了所有的内容，或者我已经填完了我需要填写的内容和我知道答案的内容。如果我真的有漏填的信息，只是简单的提示：”你没有填写所有信息”是毫无帮助的，所以为了改善它，我们可以将用户漏填的一项加粗或者高亮显示，意思就是让它更显眼一些。或者在它旁边添加一个错误标志，提示用户需要填写这部分的内容。有很多种方法帮助用户去完成填写任务，而不只是在出错的时候单纯的告诉用户，你做的不对。
Facebook的注册页面就是一个很好的例子，如果我在什么都不填的情况下直接点击注册按钮，那么它就会把我没填的输入框用红色高亮显示出来，同时还会显示一个红色的感叹号，所以如果我们用这两种方式来显示的话用户就不会注意不到它们了，同时它还用一个大大的红色箭头告诉我应该从哪里开始。
这个对话框显示的是文件无法创建，这可能是大家都不想看到的状况，但是它做的比较好的地方是给了我一个操作指导：关闭应用程序，重新启动，然后再次压缩安装。所以给出操作提示是非常重要的。
对于搜索界面来说，当你查不到想要的东西时最好是去检查下自己的拼写，尝试使用更加通俗的词汇，或者使用一些近义词。这就是一个比较好的提示页面，当你查找Scot(只有一个t)的时候，你可能得不到什么搜索结果，所以它会给你提供其他选项，你是否想搜索Scott(两个t)。或者如果你搜索的是比较特定的内容，它会给你提供一些更宽泛的信息。例如你在做地理信息查询时，它会自动帮你扩大一些搜索范围或者自动帮我们搜索同义词。
所以当系统可以帮助我们提供更多信息的时候，这其实是一个非常好的错误恢复机制，因为有很多错误是我们没有察觉到的。
提供帮助
对于这一点火狐和一些浏览器做的非常好，如果我们不小心进入了一个钓鱼网站，例如Facebok(只有一个”o”)，浏览器就会显示提示信息，这个网站可能存在潜在危险，当然它也会在角落里显示一个选项：”我知道我正在浏览什么网站。”但是更为明显的还是：”退出浏览”和”为什么我会进入钓鱼网站”。
现在就让我们进入到启发式评估：反馈的最后一节：提供帮助。在开发团队中，很容易将提供帮助视为某个人的责任和义务，而不是应用程序中的一部分，我认为我们是幸运的，因为近年来这个情况有所好转。网站、文档和应用程序结合的越来越紧密了，所以它不像是桌面端软件时代那么糟糕了，但是某些帮助信息还是不够及时，像是一种马后炮。
我认为科学技术中帮助信息这块做的比较好的是编程开发领域，例如PHP编程语言这些年来所做的事，他们并不是只给出代码语法，而是会通过一些案例来展示它的功能特性，例如它应该如何组合在一起，如何设置参数，所有的这些都是很棒的帮助信息。
这边有一个好的案例是Adobe 的Lightroom，用户在帮助信息中搜索如何提升照片的曝光度，然后系统直接展示了最相关的菜单路径。
相比之下，有一种情况看起来是在提供帮助信息，但是实际上却是在破坏我们的最终用户许可协议。我认为软件对待用户许可协议的方式不符合道德标准，这无疑是可用性的灾难，甚至可能是有意而为之。问题就是当用户许可协议完全展示出来的时候，没有人会逐字逐句去认真研究阅读，里面有很多看不懂的专业术语，人们只是为了完成某项任务，所以他们也不是很关心这个协议里面的内容。这时候系统就鸡贼的向你展示这一长篇的内容，然后强迫你勾选同意，之后他们就可以说你已经同意了我们的许可协议，所以我们就可以做任何我们想做的事。我觉得这太疯狂了！
这边列举一个来自Creative Commons的关于用户许可协议的正面案例，它是一个非盈利性的组织，创建用户许可协议真的是一个很庞大的工程，这就是为什么它有那么多的内容，但是这并不意味着用户一次性需要看到所有的信息。所以Creative Commons做的是从中提取了九条用户最关心的内容，并且它们也有一个更长的法律版本，在用户操作的过程中可以自主选择查看哪个版本，我认为这是一种更好的设计方案。
最后我们再提供一个正面的设计案例，这是一家酒店网站，在枕头选项中，如果你有过敏症不想使用酒店的枕头，那么你可以选择”一个同情的肩膀”。
这些有趣的小彩蛋会让你的产品或服务变得更加人性化，人们发现越来越多的网站开始做这样的事情，我认为我们的设计会发展的越来越好，越来越智能。
现在你已经掌握了十种启发式评估的方法，你可以用它们来思考你会尝试什么样的设计并且如何评估它的优缺点。这些方法在团队讨论中非常有帮助，同时在你向客户提出不同的方案时，它也是一种有力的工具。我发现在我的职业生涯中它们非常有帮助，我希望你也能从中获得启发，享受设计的过程。
