产品设计中的交互原则

2017-03-17 13:02:00

交互原则

古有力学三大定律，现有交互十大原则。让我产品一溜一溜的。没错，这里所说的“十大交互原则”，就是尼尔森交互原则。那么，谁是尼尔森？本着刨根问底的专业精神，我从度娘口中得到的答案。以下内容“严肃”，不感兴趣的可以略过。

尼尔森，Jakob Nielsen是毕业于哥本哈根的丹麦技术大学的人机交互博士，他拥有79项美国专利,专利主要涉及让互联网更容易使用的方法。尼尔森在2000年6月,入选了斯堪的纳维亚互动媒体名人堂,2006年4月,并被纳入美国计算机学会人机交互学院，被赋予人机交互实践的终身成就奖。他还被纽约时报称为“Web 易用性大师”，被 Internet Magazine 称为 “易用之王”。

可用性十大交互原则是尼尔森在1995年发表的，历经多年依然活跃在人机交互领域中，这已证明这些原则是被实践检验过的真理。

我与它也是有一段“不解之缘”。半年前我刚从项目经理（安卓汪）变成了产品汪，在做项目经理的时候与公司的产品部门打过交道，对产品的流程谈不上熟悉，但是都了解，然而第一场产品经理的面试就问了我“十大交互原则”，于是，就没有然后了=。=

当然，回来后就搜索了十大交互原则并了解了一下，并做笔记保存到了evernote上。

后来，面上了一家创业公司，也就是现在的公司做产品经理，一上来就直接接手公司一个新的项目，后台管理系统，属于公众号第三方管理后台。由于自己经验不足，在第一个版本，算1.0版本吧，出现了很多交互上的问题，并且体验非常不好（哭晕在厕所...）。后来想起之前的面试情况，就回去认真的看了看之前做的笔记。后来发现，尼尔森交互原则，真的要炸了。

根据尼尔森交互原则，我对系统版本2.0的原型界面进行了大改（开发当时忍住了没拿刀...），并且用sketch出高保真UI图（因为公司当时还没请设计师，只能我硬着头皮顶上=。=）

好吧，不扯了，根据自己的经验来膜拜一下尼尔森交互原则吧。

原则一：状态可见原则（Visibility of system status）

用户在网页上的任何操作，不论是单击、滚动还是按下键盘，页面应即时给出反馈。“即时”是指，页面响应时间小于用户能忍受的等待时间。

从人的心理层面上讲，如果一个人的行动得到反馈，会增加人持续性行动的欲望，能促使人保持心情愉悦的状态。（平时说话的时候又何尝不是呢=。= 老板也整天说feedback、feedback！！）
下图是一个网页按钮对用户可见的三种状态。第一种是普通状态，用户未对该按钮进行操作时的常规状态；第二种是光标滑过时的状态，即当用户的光标移动到按钮上时，按钮的颜色就会相应的改变，告知用户正对按钮正处于可操作的状态。第三种是当用户按下时按钮颜色又会相应的加深，以告知用户进行了点击操作。

当然，不只是按钮的反馈，你点击按钮后进行了什么操作，也是需要反馈出来的。比如说我想把老板几百万的订单给删了。。。额，原来别的同事在删着。

原则二：符合真实的世界（Match between system and the real world）

网页的一切表现和表述，应该尽可能贴近用户所在的环境（年龄、学历、文化、时代背景），而不要使用第二世界的语言。

基于符合真实世界原则，我对管理系统1.0版本的一个模块中的筛选项做了以下改进。根据下图，对于公众号已经群发的文章推送进行日期筛选，在1.0版本时是直接label加日期选择框（包含提示信息）。但是咋一眼看来感觉像是输入的样子，并没有暗示用户这是一个日期选择框。所以在2.0的设计上，我在选择框中的右方添加的一个日历的icon，并显示提示文字“选择群发日期”。因为日历的icon直接给了用户提示，来告知用户该框的具体作用是什么，让用户一目了然。

原则三：用户的控制性和自由度（User control and freedom）

为了避免用户的误用和误击，网页应提供撤销和重做功能。

大家都说，世界上是没有后悔药的。。。
然并卵，在程序的世界里死了都能复活，就甭管后悔药了。
当用户进行了一些重要的操作时，为了防止用户误操作带来严重的后果，程序就会设置一种“撤销”的回退方式以让用户对误操作进行补救。比如下图，用户在多公众号系统中删除了公众号，删除成功时会出现删除成功的提示，同时会出现几秒的“撤销”按钮。生与死，就看这几秒了。

原则四：一致性和标准化（Consistency and standards）

产品在遵循平台惯例的基础上也要保证产品功能操作、控件样式、界面布局、提示信息的一致性，不要让用户在使用产品的时候发现不符合产品规范的地方。

也就是说对用语、功能、操作需要保持一致。比如说在用语方面，产品中使用了“新建”和“创建”两个词语来描述时，就会造成歧义，同时显得不够专业。
还有就是icon和其描述的文字也需要保持一致。在管理系统2.0版本中的账号模块，如下图，每个icon和文案描述是一致的，如果我把“个人资料”的icon和“修改密码”的icon对调，那就变得奇怪，也会引起用户的困惑。

原则五：防止用户出错原则（Error prevention）

通过页面的设计、重组或特别安排，防止用户出错。

对于这个原则，也是深有感触，因为管理系统的其中一条业务线，就是接收广告订单，每个订单中包含多个公众号，并且每个公众号因为粉丝不同而使得每个公众号所占订单的金额不尽相同，以下是新增广告订单时添加对应的公众号。

在1.0版本时，我没有对所占金额进行输入进行限制和相应的金额提醒，当用户添加完所有公众号之后，然后点击添加广告订单时，发现输入的公众号总金额超过了订单金额而导致添加失败，此时用户只能跑回去检查哪个公众号输错了。。。（还要用户去找，哎。。。）
后来，在2.0版本的时候，我添加了输入的限制条件，在输入所占金额一项中，限制最大可输入的金额为订单所剩的金额，让用户在输入时就能发现问题，并进行提示，这样用户能实时知道自己是否有错误，减少整个过程的试错成本。

原则六：识别比记忆好（Recognition rather than recall）

尽可能减少用户回忆负担，把需要记忆的内容摆上台面。动作和选项应该是可见的。

在系统1.0版本的时候，我对于删除这种含有危险性的操作都会进行弹窗以提示用户是否确定进行删除操作，但是提示中的语言基本上是一致的。也就是“确定是否删除XXX？”之类的描述。并且都是使用同一样式的确定/取消按钮。但是如果用户在不注意的情况下忘记了他是想删除哪一项，需要点击取消，然后倒回去查看，然后再找到对应项再进行删除操作。这个流程完全是没有考虑到减少用户的记忆负荷所造成的结果。为了提高体验，我们应该把动作和选项都设置为可见，即把需要记忆的内容展示出来。

所以在第二版本时，我把动作和内容都加上了，威武。。。

原则七：使用的方别快捷（灵活高效原则）（Flexibility and efficiency of use）

中级用户的数量远高于初级和高级用户数。为大多数用户设计，不要低估，也不可轻视，保持灵活高效。

为大多数用户设计，兼容少部分特殊用户。
用户在使用产品时能够方便快捷的完成相关任务或动作，即让用户以最快最便捷的方式完成任务。如下图，图下方有一个“下一条”的按钮，这个按钮就是给用于提供一个快捷输入的入口，当用户添加完一个公众号后，可以点击下一条直接添加第二个公众号，不用再回到主页面点击添加再进行广告公众号的添加。

原则八：审美和简约的设计（Aesthetic and minimalist design）

在产品的设计或相关界面中，让你的相关信息尽量一目了然不要过于复杂繁琐，即让自己的架构简单界面简洁突出重要内容去掉或弱化干扰和不相关的信息/内容。

当然，在当前扁平化和简约设计大行其道的情况下，简约的设计基本成为主流了，当然在公众号管理平台1.0版本中就已经使用了简约设计的。如我们系统的登录界面，因为我们的是ToB的后台管理系统，所以会更加显得简单（好像又太简单了。。。）

原则九：容错原则（Help users recognize, diagnose, and recover from errors）

帮助用户从错误中恢复，将损失降到最低。如果无法自动挽回，则提供详尽的说明文字和指导方向，而非代码，比如404。

回想起自己对公众号管理系统1.0版本进行设计时，由于微信那边对第三方平台的限制，自定义菜单时需要用户跑到微信后台去填写配置信息，并且需要提交并启用配置。步骤相对较多，并且操作繁琐（当时有想过砍掉这个功能，但由于是客户提出的必要需求，只能从产品上改进）。后来为了防止用户忘了在后台配置相关信息而导致在我们系统中的操作无效，所以我们在对应的操作中添加了提示，便于用户可以找到正确的操作指引。