阿里的产品经理如何做产品交互

2017-04-12 10:59:00

随着互联网的飞速发展，越来越多产品尤其是2C类产品更加注重用户体验，其中错误对用户体验的影响是灾难性的，在此我总结出一些容错性设计原则供大家参考和探讨。

一、容错性概念及重要性

对于容错性，大家可能不太清楚是什么概念，但当提到可用性时，那么大部分设计师都会比较熟悉这个词的含义。可用性是产品/系统重要的质量指标，是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度。容错性其实就是可用性之中细分的一个模块，是专门针对出错的研究。具体内容大家可以去看：唐纳德诺曼《设计心理学》中关于错误的分类及错误设计原则；李乐山《人机界面设计》中Reason认为存在8种基本出错类型；尼尔森《可用性工程》中错误信息四原则以及《十大可用性原则》中第七条和第九条（分别是防错原则和容错原则）。容错性的定义为：

容错性是产品对错误操作的承载性能，即一个产品操作时出现错误的概率和错误出现后得到解决的概率和效率。容错性最初应用于计算机领域，它的存在能保证系统在故障存在的情况下不失效，仍然正常工作。产品容错性设计能使产品与人的交流或人与人借助产品的交流更加流畅。

由此可见，容错性设计原则是非常重要的，尤其是对于2C类或即时服务类（如铁路购票网站）产品/系统。

二、容错性设计原则

通过文献整理，总结出5一级原则和18大二级原则，并提供对应的案例用以加深理解。

1. 引导和提示

引导和提示主要是针对新手用户，因为普通用户和专家用户可能已经熟练使过产品很多次，对流程有一定的认识。而对于新手用户来说，使用过程就是个学习的过程，这时候正确地引导和提示就比较重要。

（1）提供详尽的说明文字和指导方向

比如新浪微博中当用户搜索没有结果的时候，给予用户适当的指引和建议。

还有淘宝网中当用户搜索无结果时，智能猜测用户的出错原因或者给予其他引导。

（2）引导和提示突出表现，且简单容易理解

首先，引导和提示要突出表现，从而引起用户关注，确保用户在操作前能注意到引导或提示信息。比如在新浪网的注册页面中，右侧的提示：红色错误提示和蓝色引导说明在页面中很醒目，注册用户自然能注意到此处的提示。其次，引导要简单且容易理解，保证用户在注意到引导或提示后能快速获取信息，从而得到帮助，以降低发生错误的概率。新浪网的注册表单中设置密码选取的提示文案非常精简，每句话表达了一个要点，并将最重要的信息即“字符数”放在了最前面，因此用户能在第一眼获得并理解这个重要的信息。

现在移动端app在新手用户第一次打开进入界面时一般都会有清晰、准确的功能指引和提示。比如zaker的新功能引导页面，在操作区用浅灰色蒙板覆盖，减少页面其它内容的干扰，再使用与蒙板对比较大的白色文字结合手势图形提示新功能用法，突出手势及重点。

（3）当重要或操作结果不可逆的时候，询问用户让其知道操作的后果

在用户操作前即给出正确且有效地引导和提示，有助于减少错误发生的可能性。如 QQ邮箱网站为了防止用户错误，在用户点击发送后提示没有输入主题信息，从而避免用户直接发送无主题邮件。

2. 限制操作

如何从设计上避免用户出错，限制是一种非常必要的方式。从古至今，人们为了避免错误的发生都会设置一些障碍或提出一些限制性要求。从上帝给亚当夏娃的警告，到我国历史上用来抵御北方游牧民族入侵的万里长城，再到今日道路交通中限速的减速带的设计，无不说明了有障碍设计的意义。

（1）增加那些不能逆转操作的难度

在产品设计中这种方法主要是通过对一些可能造成错误的操作入口设置障碍或直接禁止操作，以避免错误的发生。比如windows系统提供隐藏文件的功能，用户可以把重要的系统文件隐藏起来以免误删。

（2）适当限制用户的某些交互操作

置灰是界面上限制某些操作的好方式。有的网站直接把不能操作的部分灰置，比如携程网的时间选择控件的设计，将已经过去的日期灰置，以免用户误选。

再看淘宝网的注册页，根据操作的步骤，将未开始的操作如下一步按钮置灰，一方面告诉用户当前可以进行当前操作，让用户只关注于当下的任务步骤，防止用户出错；另一方面预示后面还有哪样的操作。

3. 反馈和帮助

（1）当用户有些错误发生时，及时反馈错误并提供纠错帮助

反馈错误及时就能保证用户每个阶段的操作都能得到回馈，避免因为一个小的错误就要修改相关联的一系列内容的情况，提高成功完成任务的效率；反馈不仅要指出有错，还要指出错在哪里。

优酷网的登录表单，在输入错误的用户名后，系统就会马上给出反馈“用户名不存在”，避免用户在输完密码点击登录后才能发现错误，这样用户就能马上停止后续操作来解决当下的问题。

如果错误不可避免的发生了，合理恰当的提示可以减少用户的挫败感。谷歌浏览器打不开页面时提供的提示说明信息，简洁直观说明问题的情况及原因，并且还在更多信息里提供了一些相应的解决方法，这样也就提高了提示信息的有效性。同时，不知道大家是否知道这个页面其实还是一个小游戏，只要敲击空格键就可控制上面的恐龙来避免前方出现的障碍物，可以算是谷歌设计师对浏览器发生错误时做的弥补，对用户小小的歉意。

（2）出错信息应当用清晰的语言来表达，而不要使用难懂的术语

错误反馈文案要清晰、准确，这样便于用户了解错误的原因，方便下一步的修改。新浪网注册页设置密码中，当用户输入的密码不符合要求时，会用红色文字反馈错误及其原因是字符数不符合要求，用户就知道怎么修改了。

（3）出错信息使用的语言应当精炼准确，而不是空泛而模糊的

最好能够告诉用户，具体错误的原因在哪里，是哪句话和哪个字出现的问题。举一个反例：QQ空间的说说编辑输入框，当输入的语言包含敏感词汇时，反馈提示中没有具体指出是那个词有问题。

还有remember the milk的注册表单，同样是用户名称，当输入名称后，反馈提示是“无效”，这个提示并没准确指出用户怎么做是正确的，是“字符数不够还是超过”还是“所选用户名被占用”还是其它原因？用户只能一个一个地试，这时排查错误的效率自然下降，产品的容错性能也就存在问题了。

（4）出错信息应当对用户解决问题提供建设性帮助

在用户操作的过程中，出现错误要及时反馈，使用户能尽早发现错误。同时要及时提供纠错帮助，系统先自动纠错，不能自动纠错时，就提供纠错帮助。这样即使用户操作错误了，但成功完成操作的效率也能大大提高。

当用户知道错误后要及时提供纠错帮助，如关联推荐等，以帮助用户快速找到纠错的办法。Google搜索中，当有单词或词语输入错误时，Google搜索就会根据匹配度给用户可能正确的单词或词语供用户选择，避免二次输入，很人性化的做好了纠错。

（5）出错信息应当友好，不要威胁或者责备用户

按照可用性的理论，用户没有出错，出错的是你的产品，因为它不能正确的解读用户的操作行为。不要在错误信息中责备用户，我们应该因为问题向用户道歉，为用户提供“情感支持”，主动识别并处理用户的情感状况，能缓解挫败带来的强烈的负面情绪和刺激。

4. 错误恢复

（1）允许用户犯错，并使操作者能够撤销以前的指令

最常见的如Microsoft office软件，用户编辑文档后如果发现错误，需要修改时可以按ctrl+z来撤销上一次的编辑，恢复错误。

（2）能帮助用户在发生错误后迅速回到正确状态

iPhone手机的还原功能，可以在用户出错时将多种功能设置快速还原到原始状态。

（3）尽可能注意保留操作信息，提供安全恢复到离错误点最近一步的方式

用户每次执行操作后，尤其是完成操作步骤比较多的任务，要尽可能注意保留操作信息，以便能够及时恢复；如果是一个任务结束后的操作错误，最好是能提供安全恢复到离错误点最近的一步的方式，使用户可以快速地从纠正错误的步骤中转移到正确的流程上，从而挽回损失或错误。

Photoshop中的历史动作就是一个很好的例子，可以默认保存最新的20个操作，也可以自己设置保存数量；用户在设置数量范围内的每一步操作都可以恢复。

Gmail邮箱几乎给所有的操作都提供了撤销功能，用户如果误删了邮件都可以撤销操作，甚至点击发送邮件按钮后都可以在一定的时间内撤销操作。

5.减少负担

（1）尽可能减少用户的记忆负担

记忆是人类一个非常重要的心理活动，它是人类很多其他思维活动和行为的基础。在所有的认知心理活动中，记忆是和用户界面设计关系最为密切的一个，很多软件可用性方面的问题都归结为记忆问题。12306铁路购票网站，购票信息页面的温馨提示内容非常冗长，用户很难关注到重点信息。

（2）减少用户认知混淆

根据已订阅和未订阅的不同，订阅button和退订进行视觉上明显的区分，避免错误操作。

（3）让用户单次只需执行唯一操作

普通用户在一些流程复杂的交互操作前总会或多或少的迷茫。解决方法就是让用户单次只需执行唯一操作，不要把复杂的选择题抛给用户，让用户出错。例如在电脑杀毒这个相对复杂的任务中，一次只提供给用户唯一明显按钮，避免用户在选择时左右为难，只给用户唯一的推荐，别让用户思考。

（4）减少不必要的操作步骤

携程网的注册页面，输入邮箱时下方会相应出现各种邮箱后缀供用户快速选择，减少用户的输入操作次数。

三、总结

修修补补外加引用写了这么多文字和图片，希望对大家有用，如有哪些分类不合理或解释案例不够有代表性的地方请大家能够指出，若能提供相应的建议就更加好啦。最后，将所有提到的一二级原则统一整理成架构图方便大家查看。

第一步：与PD沟通需求

作为资源方的UED团队，流程的第一步就是与PD沟通。这部分的沟通非常重要，因为这涉及到要了解产品需求的背景（因为经常拥抱变化，所以负责的产品也会经常变动。因此，换了产品之后需要及时了解产品的比较全面的背景）。在这个阶段，最重要的是要了解产品经理为什么要做这个产品需求，即背后的用户需求以及业务需求是什么？

要了解用户需求是要知道，产品经理所提的产品需求究竟是要解决用户什么问题。比如，用户想在墙上有个挂钩，一些人想的是给他锤子和钉子自己做一个，但还有些人想了可以粘在墙上的挂钩，用户一粘就有挂钩了。两者看来，后者更简单，所以应该这样满足用户需求比较好。但是，还忽略了一点，就是用户用这个挂钩做什么事情？如果这个挂钩是用来挂重物的，那这就超出了粘在墙上挂钩的承重能力了，所以这时反而应该用锤子和钉子来做一个牢固的挂钩更合适。这才是真正解决了用户的问题。

而要了解业务需求，则是要明白当下公司需要的是什么。因为，需求的背后带着公司的考量，常常带着很重要的商业目的。比如，最近业务上有个需求要凸显新功能。因此，这就要在比较明显的位置将这个功能呈现给用户，使其在一进入到产品内就可以清楚的知晓新版本有了这样一个新的功能。但是，问题在于依据用户正常的使用逻辑，该新功能应该是属于原有功能之下的一个子功能。这样单独展示甚至与原有功能并列展示，并不符合架构逻辑。这个矛盾的出现就引出了一个很好的问题，交互设计师该如何平衡用户和业务，甚至是技术。简单讲，就是优先从用户角度思考（to c和to b的用户考虑的点是不同的），然后在不伤害用户体验的情况下将业务需求尽可能地体现，最后才是技术问题的妥协（毕竟很多技术问题是时间问题）。这里就不展开讲了。

第二步：梳理需求

从用户体验五要素的角度来讲，第一步是了解战略层和范围层，知道面对的用户是谁，公司要做的是什么事，要帮助用户解决什么问题。而第二步就是确定结构层，这里就包含了两类：一是内容型，要明确放哪些内容类型；二是功能型，要明确功能操作的逻辑顺序。这些都要以用户为中心去思考。举例来说，微博是一个典型的内容型例子。其“我的首页”包含两大类主要类型内容：一是关注的信息；二是推荐的信息。关注的信息呈现在页面中间的主信息流当中，占据了主信息流当中99%的内容；推荐的信息则又大致分为两类：

一是推广
二是推荐

推广就是广告，也是呈现在页面中间的主信息流当中，夹杂在用户关注的信息流当中。这里商业价值较大。而推荐则呈现在页面右侧，主要从全网热门以及朋友关注的角度来进行内容推荐，这里的内容又有所细分，如电影、话题等。这样的内容选取一方面保证是用户感兴趣的，另一方面可以拓宽用户更多感兴趣的内容，让其更加动态地去获得信息内容。而淘宝下单支付就是一个功能型的例子，用户挑选好商品之后立即购买，进入到订单信息填写页面，提交后进入到支付宝支付，支付完成就等待卖家发货，之后收货、退款、维权等都是一系列功能。这些都有非常明确的操作路径，而且是有非常明确的任务目的。

那么，如何对这些进行梳理呢？

基于前面与PD的讨论，以及自己对相关竞品的参考，心里会大致有些想法。所以，要做的是将这些想法具体描述出来。对于内容型的梳理，我会用脑图将内容分层级进行罗列，这样会有一个明确的类别结构图。而对于功能型的梳理，则画出简单的页面逻辑图，整个流程就会非常明确。

第三步：产出交互稿

这一步是把前面两步的想法具体表现出来，以能够让人理解的方式进行表述。可以是手绘稿、可以是低保真、也可以是高保真，只要能够让PD、视觉以及开发等明白你的意思就好。

在这一步，会进行反复的修改。不同的人会有想到一些问题，包括极限情况（貌似开发以及测试最喜欢这么做了）。得到最终版本之后，就进入了视觉和开发阶段。

第四步：跟进

其实这一步跟进包含两块内容：对开发情况的跟进，因为在产品真正在开发时，会出现一些问题，如一些极限条件下的错误情况的处理、时间因素导致技术不能按时完成原有方案等等。所以会对方案进行修改，这时就要及时跟进，提出新的更为合理的解决方案。上述的变动就产生了第二块内容的跟进，即对交互稿的跟进，因为方案的变动要及时对交互稿进行修改、补充以及一些说明。这样才能完整地记录整个产品迭代或项目开发的过程。

跟进到产品迭代版本或项目上线，这整个阶段就暂时告一段落了。

后面，就是自己对之前所做的事情的一个回顾。从中获得了什么，有所反思才能有所成长。

上述工作流程只是我较为普遍的工作状态。当然也有一些特殊情况，比如自发项目，可能就需要自己即作为PD的角色又要充当交互设计师的角色。另外，有时候自己也并没有完全做到上述的一些事情，有时也会没有及时跟进交互稿的更新。在这也算是对我自己的一次提醒，以后尽量要做的这一点。