交互设计实用指南 - UCD大社区

交互设计实用指南系列(12)—避免出错

千城 — 2010-04-21 10:21:48

一、如何理解本条内容:

一个“简单”和“复杂”的例子

在我和开发人员沟通一个项目需求的时候，他们频频慨叹Mockup的设计所考虑情况之细致，很多程序要实现的预判和“非基础功能点”让开发人员望而却步不情愿去实现。相比较设计师为了让用户避免出错而绞尽脑汁去设想和考虑，开发人员更倾向于直接给到一个只能容许的操作行为，其他非法请求全部报错：“程序是严谨的，他错，我报错，以不变应万变。简单一点不好吗？”程序员们甚至笑言：“考虑他们的体验那么多，我们开发的体验真不好，please，咱们能不能不要把事情搞那么复杂”。

在这个例子里，程序员看来，对于用户在和系统交互的过程中可能出现的各种情况均予以考虑，找寻用户理解起来最明确、操作最简单的、用户犯错最少的设计是缺少效率且浪费时间的。设计师这样做，是在将简单的事情复杂化。OK，现在就有这样一个问题，什么是“错误”？每当程序要处理错误的请求，是否是用户真的在“犯错”？

1、问题一，是谁的错？

我在某一天使用了一个网站的相册功能时，遇到了这样的情况（如下图）:

“普通上传”是当前的选中状态，而上传“取消”的Button也是同样的样式。因为选中状态具有“肯定、确定”的潜在暗示，这样消极操作和积极操作的状态完全混淆了，用户在上传过程中很容易出现错点“取消”Button当作确定完成上传任务的误操作。

如果真的发生了这样的情况（应该不在少数，像我就发生了在本地好不容易选择好的图片误点了很像“确认”功能的“取消”而做无用功的情况），是的，用户犯错了，但是责任难道在用户吗？ “本来我不会犯错，是你的设计使我犯错，或起码增加了我犯错的几率。”类似这样的错误，系统可能会报错，也可能不会；但真正应该检讨的却是系统本身，即：用户对界面的理解和本身的系统意图出现误差，系统设计的歧义等固有缺陷导致用户出错。让用户频繁碰壁、产生挫折感的设计，其原因不是用户的愚蠢、而是设计的愚蠢。

2、问题二，这是不是一个错？

关于“错误”一词解释的第二点主要针对用户对系统的行为层来说，即：用户在人机界面交互过程中的误操作，系统未能通过更好的设计减少和避免用户的误操作带来的损失。

还是以“上传照片”为例（如下图）:

一个模态的警示框，赫然告诉你，你想在这里上传相片，根本不该使用除了ie之外的浏览器！除了事先不打算通知你之外，同时也没的商量，因为我没有给你提供别的替代性方案和其他选择。

可以想象,用户想要使用这个上传相片的功能，之前已经需要经历过许多步骤，比如要打开自己相册存放的线上地址、要成功登录进入管理后台、要寻找到上传相片的功能模块等等，已经付出了相当一部分的操作成本。但是系统却很残酷的让用户的所有工作都白做了，不仅如此，还很野蛮的方式告诉用户：你从一开始就错了！在这个情况下,用户对系统的理解并不存在误差，但还是在交互过程中产生了严重的挫折感。但是，这真的是用户的错误和需要承担的责任吗？我认为不是：“严格说来，我不是犯错，我只是不清楚我能做什么、以及应该怎么做的规则。”

由以上两方面的案例，我想已经可以初步回答程序员同学的问题了：“是的，简单总是好的，但是在交互过程中，事件永远是复杂的，所可能发生的情况的可能性永远是那么多的，不是你为他考虑的多，让他简单；就是他自己试验和受挫的经历更多，更复杂，体验更差”。

3、问题三、该如何做：

关于容错设计的三个境界：

1、保证不是我们自己的错：屏蔽会引起歧义的设计、本身不合理的设计，不让用户因为系统的设计缺陷而导致犯错。

2、把简单留给用户，把复杂留给自己：通过系统的优良设计约束和指引用户的操作，把出现错误的可能降到最低。

3、减小错误的代价，帮助用户做对：当用户还是犯了错误，通过设计引导用户走向正确的方向。

对交互设计师而言，第一条是本应遵守的设计底线，二三两条是设计时可供遵循的设计指南。其中的第三条，关于出现错误后如何帮助和引导用户做对，尚轩同学接下来会专门撰文探讨这个问题，此处暂不赘述，下面主要就第二条谈一些看法:

二、如何做到避免用户出错：

1、给予用户适当的行为约束——为用户封闭掉不正确的道路

这是Gmail的邮件处理区。

上图表示当没有选择任何一封邮件的时候，操作项被置灰，不可点选。这样在有效避免了误操作的同时，也展示和预告了当符合操作要求时，“更多操作”内提供的全部功能的内容。

下图则是已有选择邮件的时候，操作项全部激活为可用状态时的情况。对比上一张图未激活的状态，可以注意到除了激活与否的状态差别，还有其中的 “加注星标”功能在初始激活状态下是只有加注而隐藏了删除功能的、充分考虑了加注和删除功能的互斥性而予以隐藏。

通过用户的使用状态，通过有选择性的设置功能项激活、待激活的状态，以及功能项展示、隐藏的状态，是有效避免用户误操作的常用手段。这个考虑细心周到的设计在很大程度上预防了用户可能发生的操作失误。

2、给予用户必要的预判性错误提示——告诉用户，这样走可能会错

这是Msn的登录界面。

当光标定位于密码输入区时，如果此时键盘的大写锁被不小心打开了，界面会提示用户此时处于Caps　Lock处于启用的状态，很可能会出现密码输入的错误。

这样处理比用户输入完成点击提交之后再提示用户出了什么问题要来的友好和有效很多；比只是一味的批评用户 “你错了”从头至尾完全不告诉用户出了什么状况的界面要友好太多。

当用户的一个行为很可能会引发预见性的错误，越早提示用户，并给出可行性的建议，错误越容易被接受和改正，用户的损失也就越小。

3、告诉用户操作所处的状态和正确的操作方式——告诉用户，怎么走才对

Flickr的媒体上传页面。

对于用户在这个页面需要做什么、可以做什么有清晰的划分，对现在需要进行的、当前所处的操作阶段予以高亮显示，吸引人进行操作；对于还未进行到的操作阶段也预先做了一个介绍，很清晰的介绍了完整的任务流程。

让用户知道在一个流程之中，自己已经完成了什么，将要做什么，还有什么没有做和应该怎样做，才能使任务成功，是避免用户出错的很积极的一个应对方式。

让我们摒弃作为设计师的中高级用户视角，深入挖掘用户行为习惯和心智模型，真正从用户的角度去分析使用上可能会出现问题，通过系统的设计去尽量避免错误的发生——“把简单留给用户、把复杂留给自己”。About face3.0 第25章“错误、警告和确认”中讲到一条重要的设计原则：让错误成为不可能。很美好。以此与各位设计同仁共勉之。

交互设计实用指南系列(11)—减少记忆负担

谷隐 — 2010-03-20 11:39:30

写在前面的话
关于《交互设计实用指南》，我们最近收到很多朋友的反馈，有支持的也有批评的，在此一并感谢了，有你们的关注，我们才能走得更远。《交互设计实用指南》其实是收集和总结了交互设计上的一些问题，肯定有很多老生常谈的东西，是不是老生常谈其实不是问题，“问题在于，这些老生常谈的东西有没有被积累，有没有被传承，有没有被体系化。”（青云语）
《交互设计实用指南》的读者群涵盖了许多行业，而且就算是交互设计专业的读者也存在经验和水平的差异，所以读者们对《交互设计实用指南》有很多不同的声音。我们期待你们的声音，你们的认可是对我们的支持，你们的批评是对我们的鞭策，有了你们我们才能把事情作得更好，为行业作出更大的贡献。

科普

《辞海》中“记忆”的定义是：“人脑对经验过的事物的识记、保持、再现或再认。”
记忆是人类一个非常重要的心理活动，它是人类很多其他思维活动和行为的基础。在所有的认知心理活动中，记忆和软件交互的关系最为密切。我们脑内的神经元反映的信息在需要用的时候可以被准确的再次呈现，也就是储存在DNA链上的信息基因，在适当条件下，指导合成信息蛋白并呈现的过程。在信息处理的角度，我们都关心怎么找到信息，而找到信息的结果，也正是再认、再现的目的。按先后阶段顺序，记忆分为三种类型：感官记忆、短时记忆、长期记忆。

由于互联网产品的特性，用户在使用过程中，通常只用到感官记忆和短时记忆。感官记忆是指个体凭视、听、味、嗅等感觉器官感应到刺激时所引起的瞬间记忆（一般按几分之一秒计算）。感官记忆只留在感官层面，如不加注意，马上就会消失。感官记忆的时间非常的短，然而在试验中我们会发现，在视觉刺激后留有暂时的余像，比如卡通动画就是连续静止的画面在我们面前快速运动产生。除了余像，声音也会有短时间的余留，然而余音、余像现象只在一秒内，甚至半秒内完成，所以对于提高记忆力或减少记忆负担没有什么意义。

一般的短时记忆只能保持二十秒左右，最长不超过一分钟。在这么短的时间内我们能储存多少信息呢？答案是7±2即5～9个项目，平均为7 个项目。这是美国心理学家约翰.米勒在其论文《魔力之七》中证实的。这个七是指什么呢？七个数字，还是七个人名，或是七件东西？其实都可以。

定义

根据一般人的短时记忆存储规律，我们把产品给用户带来的记忆挑战或困难叫作记忆负担。
这里分为两种负担：
一是产品给与用户的记忆负担，包括产品的内容信息，操作功能等。
二是用户自己的记忆负担，包括自己的个人信息，安全问题答案，输入内容，上次操作行为，操作流程等。

分析
第1，人在短时间的注意力是集中和少量的，基于识别的用户界面在很大程度上依赖于用户所关心对象的可见性，显示太多的对象和属性会让用户很难找到感兴趣的对象。
第2，用户不喜欢经常重复性输入一些信息，比如个人帐号，安全信息，操作习惯，上次操作行为等，这些工作占用了用户完成其他重要任务的时间。
如何减轻用户的记忆负担呢？

1.使用常用交互方式和文案,力求简洁

美国科学家研究发现，大脑会“优待”较常用的记忆内容和操作形式，有意抑制那些相似但不常用的内容，以便减轻认知负担，防止混淆。从某种程度上来说，习惯就是一种”熟知记忆”。可以不出现的内容尽量不出现，即使需要出现也要用最简洁的方式出现。（交互设计实用指南系列(4)—简洁清晰，自然易懂）

上图是某银行网站上的流程说明，充满了专业词汇和不必要记住的内容。个人以为，既然是需要线下办理的流程，不如用最常用的交互方式和文案来说明。比如学习一下移动公司：请到银行网点办理，具体银行职员会详细说明。然后银行出具一张纸质清单，反正别人也记不住这么多电子信息。
2.保持正确的对应关系
在用户的操作流程中，必须保持正确的对应关系，一个流程只有一个最重要的操作，一次操作只有一个结果，逻辑清晰，有先有后。比如有操作步骤提示的时候，就严格按照12345步来排列，不能一会跳到第3步，一会又跳到第2步。流程的对应关系混乱会加大用户的的记忆负担。

上图是新手进入Flickr流程说明。

3.控制信息量
神奇的数字—7,多数情况，用户记忆信息在7加减2个左右，1个记忆最牢靠，3个很清楚，7个以上就需要给对信息进行分类，来帮助用户理解和记忆。通过合理的设计手段，来使信息有效的推送给用户，或者帮助用户轻松完成任务。

上图的评分系统有十个选项，用户在评价的时候需要鼠标浮在蚂蚁图标上获得提示。但是有十个提示，用户很可能看见几个提示之后已经忘记最开始的提示内容了，这样的收集到的评价肯定不准确。这个交互设计案例中有一个缺点之一就是信息超量，用户很难记住过量的信息。(当然还有其他缺陷，比内容展示不明显，信息传达不准确等。)

4.帮助用户记忆
记住用户的操作与信息，保持操作的一致性来降低用户对于不同操作的记忆。我们可以先记住用户的行为，让用户自己去修改他的行为。比如：用户在输入密码错误之后，刷新后的登录页面仍然保留用户刚输入的用户名；很多网站有收集用户个人资料的需求，也会有状态提示已经完成的百分比，并提示哪些资料还需要完善，帮用户记住未完成的操作等等。这些方式都是在帮助用户记忆，以减少用户记忆负担。

如上图案例，就是帮助用户记忆的体现。

一款很少有记忆负担的软件产品，肯定更容易得到用户的青睐。减少记忆负担，对于产品和用户来说，可以增强用户黏性，提高工作效率，提升任务成功率。交互设计师在设计产品的时候，要注意到这些方面，才能把产品交互作得更加人性和易用。

交互设计实用指南系列(10)—别让我思考

定侯 — 2010-02-26 18:05:31

虎年ued第一篇，年前写完，今天发出来给大家分享！先给互联网上的梦想者们拜个晚年！

以前经常吃公司旁边的食堂，人多，排队。夏天的时候，我们总要找一个靠窗口通风好的地方坐，没有空调只有风扇，风扇很多，开关都集中在一个地方，应该是方便操作人员统一管理，有时自己头上的风扇没开，当我要去开这个风扇时，麻烦来了，很多排的风扇开关，到底哪个是我头上的呢？

生活中有很多总让我们感觉莫名其妙，或者停下来需要思考的情况，有时不得不求助，到了互联网上，可能很多情况发生了也没什么求助的方法，只能自己猜，不猜了就只好关掉。

网页上每项内容都有可能迫使我们停下来，进行不必要的思考。比如内容信息看不懂，操作功能不明确。例如，文案。常见的罪魁祸首是那些很酷或者自以为很聪明的名字、带有营销倾向的名字、和具体公司有关的名字以及生僻的技术名词。（Don’t Make Me Think第一章）

当我们访问Web的时候，每个问号（让用户不明白的地方）都会加重我们的认知负担，把我们的注意力从要完成的任务上拉开。这种干扰也许很轻微，但它们会累积起来，有时候这样的干扰不用太多，就足以让我们抓狂。况且，人们通常不喜欢苦苦思索背后的原理。建造网站的人没有让它们明白易懂（而且容易使用）会让我们对这个网站以及网站的发布者失去信心。

按用户心智模型去设计产品，下面列出一大堆访问者在访问网站时不应该花时间思考的事，例如：

• 我在什么位置？

• 我该从哪里开始？

• 他们把××放在什么地方了？

• 这个页面上最重要的是什么？

• 为什么他们给它取这个名字？
不让用户思考过多，原则上就是设计符合用户心智模型。大致可以从下面几个方面来讲：

1文案：需要让人容易理解，快速记忆。根据不同产品定位，找到恰当的切入点，文案过长或者使用用户不理解的情景，如技术用词，营销用词等，都会使人不知所云。

省略多余的文案，比如过分修饰，欢迎语，多余指示性语句，这些罗嗦的词语会影响用户对关键信息的阅读理解和判断，必须干掉。

2图形：好的图形表达是优于文字的，但是图形没有把内容表示明确，反而适得其反，给用户造成理解上的困扰。

很多情况下，我们好像都很喜欢做一些很炫的icon来表达某些内容，这些是会起到吸引性，但要记住一点，你的图形是不是很好的阐释了内容，如果做不到，那就去掉吧。不如放大标题来的更好。
每个网站需要有它的独特性来吸引用户，但表达这些独特性的元素，例如图形，一定不能对用户理解内容产生干扰。很重要的一点，我们设计是要表达什么，为了什么，怎样更好的帮助用户来理解这些表达，是我们一定要做到的。
网站不是炫技场，设计要为内容服务。

3信息：信息其实是文案、图形等形式的混合体。信息之间，是否建立了相应的关联度，不相关联的信息之间是否产生了干扰。

大量的信息是否进行了合理的分类，以减轻用户的寻找时间。信息分类处理上，有个深广度问题，广度站点因为层级少，可以让用户不需要点击过多就可以到达底层；深度站点需要点击更多次，但它在每一层次上可以做到让人的思考最小化。关于信息的深广度，详细见这里。
所以，有效合理的信息分类可以帮助用户快速准确浏览和完成任务。

4引导：通过菜单，导航，面包屑等手段有效引导用户行为路径，让用户方便去他想去的地方，回他想回的地方。

在路边，我们希望有路牌指示；在杂志上，我们希望前面有目录，在每页我们还希望有页码，在网站设计中，我们引导好用户需要浏览的内容；在用户需要的时候给予网站工具来方便完成任务，在这点上，很多时候我们总是希望上新功能，把功能做的突出，殊不知用户是不是也这样想，他到底在这里需要什么。

5操作方式：充分顺应用户的心理思维，来设计功能的操作，可以使用户快速上手。

汽车方向盘往左打，汽车就往左开；插排电源按下去灯亮；相关内容旁边放置相关操作，操作尖头朝下说明有下拉内容，等等。这些操作方式都是要符合用户心智模型的。

6一致性：设计在同产品（甚至同类产品）中保持一致性，可以大大降低用户理解成本，使用户快速上手，增加用户的使用率。

这里的一致性包括颜色，形状，内容，操作方式。比如红绿灯如果各地都不一样，外地人来了岂不会导致交通混乱。同一个网站也应该有这样的一致性，有些都可以保持行业的一致性，比如页面上使用一样的翻页等，既可以降低制作成本，又对用户的使用有良好的认知帮助。到一定程度，也会提升一个品牌的认知，比如阿迪达斯到处使用的三道杠。

下面看个例子：这个是某期宝贝传奇的宣传页面，进来以后甚是让人看不懂！没有很好的根据用户心里预知和相关内容的合理放置来设计。这只是一个活动，如果是一个长期产品，用户接受程度可想而知。

我们都知道别让我思考最经典的页面是google首页：logo起到网站认知作用，搜索框紧跟logo并最大化使其最容易被使用，其他信息按归类放置，并根据等级高低依次减弱。虽然大多产品都有其他商业性需求考虑，但设计师不能被这些冲昏头脑，机械性的表现内容。多花心思把繁杂信息理清楚，要知道，设计师都不是很清楚信息的关系，用户就更不会明白。

交互设计实用指南系列(9) - 一次点击

定侯 — 2010-02-05 21:13:37

有一次去超市换货，本能的找到服务中心，服务中心说这个业务在超市旁边一个房间里，由于忘记带小票，那个小房间的人让我去另外一个小房间调电脑里的记录，调出来我拿着记录单去了卖货的地方才换货。其实超市退换的需求也不少，整个过程服务态度很好，但是很麻烦。

其实我们日常生活中很多事情，办起来过程很罗嗦，办事的工作人员说这是应该的，都这样做，可应该不应该，谁是评判标准呢？

交互设计一个很重要的目地就是让用户方便快捷的执行任务和完成工作。在互联网产品的交互设计中，尽可能的消除每一个附加工作，做到尽可能一次操作而完成任务。一次操作是个概念，并不是完成任务只能点击一次，而是减少用户操作次数。使之提高工作效率。

交互产品经常包括一些不必要的具有繁重工作量的交互，对于用户而言，这些就是附加工作，附加工作不直接实现目标，但对于实现目标是有用因素。附加工作的问题是它们在消耗我们的精力，而不是直接实现我们的目标，如果能够消除附加任务，我们就能让用户更加又效率，更有生产率。并且能够改善软件的可用性。作为一个交互设计者，你应该对附加工作的存在非常敏感，用户界面中附加工作的存在是造成用户不满的首要原因，因此每一个设计者都值得关注各种形式的交互附加工作。（About face 3,第11章：消除附加工作）

那么，如何减少用户的附加工作，保证用户工作效率呢？
1，保证主操作以及用户常用功能的方便展现。
这是用户快速完成任务的核心。比如播放器需要突出播放按钮，而收起了快进功能。ps的滤镜里会第一个展示出你上次应用过的滤镜效果，方便再次应用等。

2，合适的关闭与隐藏新手培训工具
用户不会长期停留在新手状态，所以新手的任务对于中间用户和高级用户来说就是附加工作，需要关闭或者隐藏。

3，平衡好视觉装饰元素对用户操作的干扰
适度的装饰性元素会有助于创造特殊情绪和氛围，以及产品个性便于品牌记忆。但是过度的装饰会干扰用户工作效率，因为用户不得不分析、破解，以区分哪些是关键信息、操作功能等。

这点对从视觉转过来的交互设计师尤为重要，视觉设计在缺乏系统的用户交互行为认知的情况下，很容易使设计浮于表面，从而做到吸引用户眼球后又让用户不明白如何方便的应用，这也是产品设计和广告设计的根本区别。

4，不要轻易打断用户操作流
用户高效的使用工具会进入一种自然流的状态，这个时候需要一些努力才能打断，例如突然电话响了。错误消息对话框就是如此。一些打断是不可避免的，但另外一些则不是必要的。

5，改善导航
更好的利用导航将保证用户的任务操作，明晰导航里将详细讲述。

下面讲一个关于不要轻易打断用户操作例子：

在windows xp系统以前，用户点击关机后，会弹出一个提示窗口，一定要用户再次确认下关机，这对用户快速关机存在着强行的打扰，很多人甚至按机箱按钮强行关机（非常不好的做法）。

在vista之后，关机终于可以一键关机，并把以前弹出框里的功能收起（非常用功能），vista还是保留了两个按钮：关机和锁定，而且是图标显示，在win7中，只保留了关机，其他都收起，并且关机按钮使用文字，更加清晰了用户操作的思路。

提高用户的效率，就在这些常用操作上的改善，能不能快点？步骤再少点？再清晰点？直到用户说：爽了！

交互设计实用指南系列(8)—深广度平衡

温侯 — 2010-02-01 21:13:48

相信大家对街边林林总总的房产中介并不陌生，那么我们先看看下面这张图片。

图1

从右侧这家店的橱窗里，我们能迅速分清哪些是租房信息哪些是售房信息。因为店家很贴心的将房产信息进行归类，并且在视觉上做了一些划分，让我们对信息能一目了然。借这个小案例引出我们今天要分享的话题：深广度平衡。

1. 什么是深广度？

其实“深广度”本身并不是一个单一的概念。在网站的信息架构中，有一种组织结构叫做树形结构：网站首页视为链接层级中第一级，与其有从属关系的页面视为链接层级中的第二级，一般称其为二级页面。通过二级页面又可以继续得到第三级页面，依此类推可以得到一个完整的树形链接结构。这样一个完整的链接结构，我们称它为树形结构。

在整个树形结构中，链接的层数被称为网页链接的【深度】（depth）。而在树形结构里，最底层页面包含的页面总数被称为网页链接的【广度】（breadth）。

我们可以通过下面这张图来理解深度和广度的概念：

图2

2. 为什么深广度需要保持平衡？

我们回到开篇的小案例。左侧那店铺采用的是“只有内容链接的模型”（它们之间没有层级结构；链接没有模式可循；且没有某种导航方案将他们分离开）（注1）在这里每一条房产信息都可以看成一个内容链接，整个橱窗就像一张错综复杂的大网，让人头晕目眩。

而右侧的店铺采用的是“结构化浏览模型”（只有一组链接，作为获取网站信息的途径；导航区域与布局中其他内容有视觉上的分隔；要到达另一区域的某个页面，必须沿着树向上导航，再沿着另一个分支向下）（注2）店家将信息进行了规整，在房产信息上增加了一个分类，并且对不同类型的信息使用了不同的颜色，高效的将租房信息和售房信息区分开来。

一个网站的链接深度和广度最好有一个合适的均衡关系，深度过大的网站不利于用户快速获取信息，广度过大的网站则容易让用户在无数并列的超链接面前不知所措。

图3

图3的上图说明了又窄又深的层级系统，用户必须点击6次才能到达最底层的内容。对又宽又浅的层级系统而言（相对而言），用户必须从6个类别中选择，才能找到6个条目。就像图3的下图所示，用户会面临主菜单上太多选项，而当他们选了一个选项，却没看到什么内容时，就会产生不良的观感。（注3）

我们再来看一张用户对于不同层级结构所需反应时间的图表（注4），图4：

图4

总共512项内容，组成了三种不同的分级方案，X轴是分级，Y轴是反应时间（秒）。可以很清晰看出，在过深和过广的分级方案上，用户所需要的反应时间都比较长。因此我们在组织网站信息的时候，需要仔细平衡深度和广度之间的关系。

3. 如何保持深广度平衡？

我们在处理网站结构时，常常会使用按组分类的方法来组织信息。而信息的分类我们能使用时间序、主题或科目、地理、字母序、受众群体以及任务等方案。现在我们再来看看深广度平衡在web上的应用。

图5

这是某电脑公司的官方网站，他们的导航本身就是一个站点地图。他们将14项内容分级组成了一个两层的结构树，每个分支上都有3-4项内容。对于这样一个信息量不是很庞杂的网站来说，使用主题或科目的方案，将信息组成一个两层的结构树，就是一种深广度平衡的方式。

再来看个案例，图6是某软件官方网站的一个下载区块，这个区块里密密麻麻罗列了N个下载链接。有不同的版本、有不同的下载工具、有不同的外站下载。这些链接在没有进行任何组织的情况下呈现给用户，体验是非常糟糕的。

图6

对于那些信息量很大很杂的网站来说，单纯的使用某一种按类分组的方案已经不太适用了。一般来说，广度比深度的效果更好。在深结构的各级别间选择，比起在广导航的各选项间扫视，要付出更多精力。眼睛比起鼠标点击（和页面载入）要快得多。虽然用户在深结构更容易迷失方向，甚至可能迷路，但也不要在广度上走得太远。任何时候都把所有链接展示出来会吓倒用户，让他难以选择。用户会点击看起来适合他们需要的第一个选项，或者干脆放弃，下图清晰的阐述了用户放弃率和深广度之间的关系：

图7

淘宝首页类目地图大概有300个类目，使用了三层结构将他们清晰得展示出来，每层类目都是4～12个之间，是一个深广度保持平衡的典型案例，图8：

图8

小结

对于不同类型，不同信息量的网站，在深广度平衡上应采用不同的策略和方式。本文仅以个人在工作中的经验来对深广度平衡的方法论进行一些实例化的分享。对这方面有兴趣的同学欢迎留言探讨。

注1：摘录《Web导航设计》第1章第一节导航的需要（P6）

注2：摘录《Web导航设计》第1章第一节导航的需要（P9）

注3：摘录《Web信息架构》第5章第四节组织结构（P70）

注4：摘录微软论文《Web page design: implications of memory, structure and scent for information retrieval》

参考文献：

《Web导航设计》

《Web信息架构》

交互设计实用指南系列(7) - 避免迷路

淡月 — 2010-01-23 19:51:13

任何位置都能明确“我在哪里？这里有什么？从这里能去哪里？”

小时候，童话故事都告诉我们，迷路可不是一件好事。那会伴随着困惑、沮丧、愤怒和恐惧。为了避免迷失方向，我们发明了各种导航工具，大到卫星定位系统，小到指南针，人类在这一事情上，极具创意。

在网站上迷失方向，虽然不是什么生死攸关的事，但会带来许多负面影响，如：用户体验下降、任务不能完成，用户流失等。我们可以通过良好的导航系统来避免这个情况发生。好的导航系统可以帮助人们找到在网站中的位置，并帮助他们制定更好的查询策略，增进对内容的理解。

在制定解决方案前，先了解他们为什么会迷路：

1、当人们不能理解信息时，会产生迷惑

2、人们在查询过程中迷失，不知道下一步该做什么

3、人们可能会在网站中失去方向感，无法回到以前的页面，甚至是首页

图1

比如在图1的这个网站中游走，你容易陷入进退两难的境地。上图中，两个点击打开的页面，都没有导航信息，甚至没有任何离开当前页面的出口。

4、人们在在信息系统中偏离了方向，分散了注意力。人们因众多的、喧宾夺主的信息而偏离了主要任务。关于这一点，可以参考交互指南之《突出重点，一目了然》

图2

图2中的登录页面，可谓琳琅满目，信息的丰富程度毫不逊色于首页，难道设计者的目的，是希望用户放弃登录这个主要任务，去往“更重要”的地方吗？

你也许会想，让用户不要迷路，不是非常简单的事情吗，我只要在所有页面中放入全局导航，使他们能在网站的核心内容之间移动。然后放入面包屑，让他们了解自己所处的位置，一切不就完事大吉了。

但事实上果真如此吗？全局导航也许能帮助用户了解你网站的核心内容，但在具体的任务中，比如图3中的淘宝全局导航，如果放入在挑选商品或支付的页面中，恐怕非但不能指引用户，还会干扰到任务的完成。

图3

小心，别让自己陷入导航系统的过度设计中去。我们所要做的，是使用人物角色和场景作为参考，确定人物角色会选择的到达内容的最佳路线，而不是提供所有线路，更不需要将网站的全部结构复制到每个页面当中，造成页面信息负担。好的导航系统让人们感知不到它的存在。就好象在观看体育比赛时，裁判会做出许多正确的判定，而我们往往忽略他的存在，但一旦裁判员做出了一个错误的判决，就会引来场上观众的一片唏嘘。

那么，我们应该怎样做，才能保证用户不在网站中迷失呢？

首先，我们要帮助用户定向，也就是确定“当前位置”。

即便GPS卫星定位系统如此强大，它都必须随时在地图上标明我们的“当前位置”，才能真正为我们导航。而与现实世界不同的是，在网络世界中没有南北之分，也没有地理位置，我们必须利用导航系统的各种因素，来为用户创造可以判断当前位置的情景：

1、重视网站的品牌信息

用户应该一直知道自己在浏览什么网站，将组织的名称、标识、和身份识别图放进网站的所有页面中，是达到此目的最显著的方法。

2、细节创建情景

我们可以通过页面内标题、页面文字，向用户传递当前位置的信息。浏览器标题和URL也是用户进行判断的依据。当前导航选项的高亮状态，也是常用的方式。

3、面包屑

“面包屑”也是标明当前网站位置的好工具。此外，面包屑还能传递网站结构信息，以及记录用户的访问足迹。

4、逃生舱模式

逃生舱模式也是帮助用户确定当前位置的一张底牌。也就是在网站的所有页面上设置统一的出口，无论什么时候，点击这里，都可以回到首页。大部分网站都把逃生舱设置在网站LOGO上，已经成为惯例了。

其次，根据用户需求，确定导航模式。

用户的需求决定了我们应当放置何种导航链接。在不同类型的页面，用户所产生的问题不尽相同。我们需要预测这些问题，然后在设计导航的时候，也问自己同样的问题。

一般情况下，用户会问：“我在哪里？”“我在这里能做什么？”“我还可以去哪里”；在电子商务网站，他们也许会问，我该如何找到想要的产品信息；具体在某一产品，他们也许会问：“我该如何联系客服人员？”“我到哪里可以找到相关产品”。

我们所要做的，并不是想出所有可能发生的问题，相应的，我们也不可能把所有问题的答案都放入页面当中。这个时候，人物角色和场景，将发挥很重要的作用。对于不同的页面，弄清楚每个用户角色要去哪里，放置他们最需要的导航。比如：你的人物角色需要随时从一个栏目跳转到另一个栏目吗？如果是的话，请保证顶级栏目的链接一直可用。

一旦确定了用户想要到达的内容，就要思考达到这一目标所需要的最简单、最容易的方案。比如在图4中，也许你的人物角色需要的，只是一个“下一组”链接。

图4

最后，通过压力测试检验页面的导航能力。

怎么样测试这个页面的导航能力呢?

（1）随机从你的网站上选择一个页面；
（2）把这个页面打印成黑白的，并把页面头部的浏览器地址栏和下面的版权及公司信息部份去掉；
（3）假装你是第一次进入这个网站，并试图回答下面的问题(详见下列问题列表)；
（4）在一张纸上写下你所想的和答案；

问题列表:

1、这个页面是写什么内容的？在页面的标题处画一个方形或在纸上写清楚；

2、这是个什么样的网站? 把网站的名字用圈圈起来，或者自己写在纸上；

3、这个网站主要的版块是什么? 用x标识；

4、这个页面中主要的版块是什么？用三角形围着x来标识；

5、我怎么样到达这个网站的首页？用H标识；

6、我怎么样才能到达网站的顶部呢? T来标识；

7、每一组链接分别代表什么? 把页面上的主要链接圈出来，并写下标识；

D:用来标识更多，详细介绍及这个版块的子页面等；

N:在同一版块的其它相邻页面；

S:在同一网站上但不相邻的页面；

O:离开这个网站的页面；

8、你是通过怎么样的路径到达这个页面的呢？请写出你到达这个页面的路径，选择1>选择2>选择3…

让你们团队的其它成员或熟悉你网站的朋友也与你做同一试验，大家象跳伞一样的进入网站中的任意一个页面，然后把回答记在纸上，你就可以看出导航存在的问题。

关于导航压力测试更详细的内容，请参考四娘的文章，我们就不详细说明了。

交互设计实用指南系列(6) –标签明晰、有效

淡月 — 2010-01-18 20:59:13

导航标签彼此互斥、完全穷尽。

导航标签其实就是一种文字表达形式，我们用标签来代表网站上的各种分类信息。比如“联系我们”这个标签，代表的内容通常会包括公司名称、电话、地址、邮箱等信息。它可以是文字，也可以是图片。在英文里被称作“Label”，并不同于我们常说的“tag”标签云图。

说简单一点，我们就是要为网站的信息做分类，并为它们起一个通俗易懂的名字。这其实是任何人都可以做的一件事情，所以在导航设计流程中，它的重要性也常常被忽略。在设计产品时，常会听到这样的话：“这个栏目该叫什么名字？恩。。。先别管吧，把更重要的工作做了再说。”

然而，站在用户的角度，导航标签代表的是整个网站的内容、产品的结构，他们必须依靠标签的内容和组织方式来寻找网站中的信息。

标签是访客行为的触发词，好的标签能吸引访客注意力，引导他们准确地找到信息。导航标签是访客预测目标页内容的重要依据，紧跟着它的就是导航中的关键点，网页的过渡，所以尤为重要，有歧义的标签逼人猜测它的意图，甚至让用户走错路或迷失方向。

比如这个网站的标签：

这个网站的导航标签比较极端，首先标签之间的互斥性差，“淘宝潮流榜”、“爱物秀场”、“败家俱乐部”等，含义和实际内容都非常接近；其次是一致性差，标签的粒度不同、长度不同、语气不同，甚至还有英文出现，可谓五花八门；最糟糕的是，在标签的选择上，用了很多自作聪明的词语，如“爱骚谈资”，用户很难预测到链接背后是什么内容。

设计标签的过程，实际上就是对信息分类的过程，我们应当坚持MECE原则，也就是彼此独立、完全穷尽（Mutally Exclusive,Collectively Exhaustive）。这是一种客观的角度。你也可以站在主观的角度进行分类，但必须做到标准清晰、在目标群体中能获得充分共识。

怎样的标签才能称作好的标签？它应该满足这几个方面：

1、好的标签，应该使用客户的语言，避免使用术语、行话、缩写词等用户难以理解的词语；

2、采用描述性的标签，避免使用“信息”、“细节”等过于宽泛的词语，尽量以某种方式加以限定,如：“给买家的信息”、“交易细节”。

3、标签之间的互斥性要强，尽可能地寻找差异化；

4、使用聚焦地标签，如，能把猫、狗、仓鼠等归纳为“宠物”，就不要用“动物”。

5、在粒度、语法、展现、用法等方面保持标签的一致性；

6、较长的标签往往比短标签更好，但并非越长越好，请尽量控制在12个字以内（这不是一个硬性规定）。

那我们设计标签时的词汇从何而来呢？是凭空想象出来的吗？当然不是啦，你可以从以下几个方面获得词汇：

1、你自己的网站或产品

你的网站和产品，在前期建设中，已经积累了很多标签。我们要做的，就是遍走整个网站，尽可能收集所有标签，然后用表格进行整理。

比如,我们在淘江湖改版时，对现有标签系统进行了一次整理，在表格的帮助下，比较容易看出现有标签系统存在的问题。

2、类似网站或竞争对手网站

如果你还没有网站和产品，那就要去同类型网站或竞争对手网站去收集标签了。相信这一做法，在互联网上，几乎是无师自通的。你可以通过对同类型网站标签系统的观察和比较，得到一些行业类比较通用的词汇，降低用户的理解成本。

你可以用同样的方式，收集同类型或竞争对手网站的标签，以供参考：

3、受控词表或叙词表

这是由图书馆员和特定领域的专家所建立的资源，这些词汇都是专家们付出很多努力的成果，表达方式精确且一致，而且这些资源通常是公开的。其实信息架构的很多理论，都来源于图书馆管理。

在完全没有依据的情况下，我们必须设计新的标签系统时，应该怎么办呢？

你可以对通过对内容进行分析、要求内容的产生者提供、或者象专家或你的直接用户求助。卡片分类法也是比较流行的一种做法。

卡片分类大概有4个步骤：

1、招募志愿者，大部分项目适当的卡片分类志愿者人数是 15 人，大型项目可以达到 30 人。个人觉得如果只是想对自己想法进行验证的话，5-10 人即可。

2、准备卡片，写上你预先设定好的标签（这些标签必须是你们内部讨论或请教过专家的结果）。

3、让用户进行分类，你可以观察用户的分类过程，以及对标签的理解。

4、对卡片分类的结果进行分析，如果数据庞大，你可以借用软件进行分析，推荐工具有 IBM EZSort、CardZort、WebSort 等。

对卡片分类感兴趣的同学可以进一步查阅资料，我们在这里就不详细说明了。

交互设计实用指南系列(5) – 突出重点，一目了然

宗羲 — 2010-01-11 20:50:34

看到这张照片，我们一眼能够看到天宏(图中这位UED俊男)的眼睛。我们能从他的表情里读出一些他的性格。一张好的摄影作品，最重要的一点，就是这个照片是否有焦点，照片的主题是否一目了然。而摄影作品的用光、构图、景深等等手法，其实就是在让一个照片能够有其焦点，并且利用这些艺术手法来烘托气氛，提升主题。一个优秀的页面亦如此：应当突出重点，一目了然。相信大家也知道，一个用户在浏览网页的过程中，只是扫描页面，而不会像是在看书似的阅读每一处地方，每一行文字。一个网页呈现在用户面前的时候，应该在5秒之内，就能理解：这个页面是干什么的？我大致能通过这个页面做些什么？接下来我该去哪里？我们网站上的每个页面都可以是任务流上的一个点。这个点上包含着用户需要的信息，也许是继续找到任务流的下一个点的信息(例如导航)，也许是用户想找到的最终内容。而一个页面上存在着上百甚至上千个链接（淘宝的宝贝详情页面通常有700多个链接），要在这样茫茫大海中找到用户需要的链接，可见，“突出重点，一目了然”是多么重要。

测试您的页面

测试您的页面是否达到“突出重点，一目了然”，能够让用户在短时间内找到他们所需要的信息，其实可以是个低成本的小型测试。fivesecondtest.com 这个有趣网站是一个专门做5秒测试的站点。测试者上传一张站点的截图，然后被试观看截图5秒，然后说出刚才看到了哪些东西。另外一种方式是被试看到截图，在5秒的时间中，点击他所关注到的所有焦点，最后给出每个焦点他认为的描述。

下图是本文开篇的时候，8个用户的测试结果：

这种测试比起眼动议来说，测试的成本要低得多，而且能够明确得测试出你的页面的浏览者是否能在第一时间发现他们所需要的内容，并且可以比较出，这是否符合你的设计的初衷。

达到“突出重点，一目了然”

那么，如何达到这样的“突出重点，一目了然”呢？据鄙人不完全归纳，可以有以下方法：

为扫描而设计，不是阅读

你几乎需要把每个用户都想象成大忙人——他们没有时间停留在你精心设计的页面上，去阅读每一行你辛苦撰写的问题，去欣赏你精心设计的高光与圆角——他们想要的只是尽快地找到有用的信息。如果找不到，互联网上也许有很多替代品，可能是你的竞争对手，用户可以轻而易举地到其他网站上去寻找他们需要的信息。《点石成金》这本书也比较详尽地描述了这个要点。相信大家都应该阅读过了。《点石成金》里谈到关于“为扫描而设计，不是阅读”时，

给出了几种方法：

尽量符合用户习惯的设计，让人接受陌生的东西需要代价，除非我们觉得这个代价是必须的。
在页面把越重要的东西越突出，建立清楚的视觉层次。
可以点击的地方必须突出，让人明显知道可以点击。
把页面划分成明确定义的区域
省略多余的文字

Yahoo Small Bussiness的页面改版很具有代表性。改版前：

两次改版后：

我们可以发现，改版后的页面视觉层次得到了很大的提升。白色内容区域、浅蓝色右边栏和深蓝色的注册区域渐渐递进，深蓝色背景上的强烈反差的黄色按钮“Sign Up”，引导着这个页面的主要目的，亦是重点。另外，大家可以发现，内容文字部分比先前的老版本少了一半一半再一半再一半。。。相应的，使用列点和大图的方式传递了相同的信息。“Sign Up”显而易见，而且视觉上有突起的渐变效果也马上让人知道，那是个按钮。

将功能“藏起来”

部分产品经理有一个这样的通病，他们每每作出一个新功能，就爱向用户炫耀新的工作成果。看起来，这样挺好，一来让用户知道本网站还没死，而且还在为他们不断得制作新的功能，二来辛苦开发了数天甚至数月的功能要是没人用，那该多“杯具”啊！于是乎，你就会发现，长期“坚持”下来，界面上的元素越来越多。假设某一天，这样的产品经理全部被谷歌挖走，那么谷歌的首页将会是一个放满“杯具”的餐桌：

还有一个例子来自于某BSP，它的博客顶端存在着一个工具栏，有30个左右的链接。而这个工具栏在4年前他的用户高速增长期其实并不存在。

如果你了解20-80原则，你应该知道：80%的用户只会使用20%的功能。所以，为什么要让那些少人使用的80%的功能总是放在显眼的位置，扰乱那些只需要20%的功能的大部分用户呢？(此句有些拗口，我承认，麻烦看官们可能要反复阅读几次。。)其实那些80%的功能大部分是专家用户所喜欢的，我们应当将这些功能“藏起来”，目的就是不影响新手和中间用户，并等着他们去发现，然后大叫：“哦，居然这个网站有这个功能，太棒了！”我们来看看Google Reader iPhone/Android 版本最近的小改版：

改版前：

改版后：

大家可以发现，原来占据垂直空间的New items/all items的切换、mark all as read等功能，全部藏匿在右上角的下拉按钮中。Refresh被替换成了一个可以容易理解的Refresh图标，顶端其他产品的链接也祛除了下划线。关于将功能“藏起来”、功能肥胖症是个说不完的话题，《哈佛商业评论》早在06年的时候也详细探讨过这样的问题，这部分内容，我过段时间也整理整理，为大家奉上吧，本文中，就不作深入探讨。

关注于用户的主要任务流

关注于用户想要的，而不要强迫用户查看、理解与操作无关的事情，是关于“突出重点、一目了然”的UCD方法论的延伸。这个想法，解决了什么元素该被“突出重点”从而达到界面“一目了然”的问题。从用户角色到场景，到任务流，可以决定每个界面——也就是任务流上的节点最重要的元素是什么。加之融合商业目标，即成页面的重点。其他非重点的元素应该尽量“藏起”或是“显得暗淡”些。我们来看一个来自于Magic Ink(by Bret Victor)的例子：这是个书籍的搜索结果页面。

我们能够发现，这个页面觉得凌乱不堪。各种大小，各种颜色，各种粗细的字体混杂在一起，眼花缭乱。就像《气球》这首歌唱的：

黑的白的红的黄的
紫的绿的蓝的灰的
你的我的他的她的
大的小的圆的扁的
好的坏的美的丑的
新的旧的各种款式各种花色任你选择

说实话这么多种气球还真不知道该选哪个。如果我们可以通过UCD（或者是其他方式）分析出，这个书籍的结果页，用户需要这些信息：

书籍内容。这本书标题是什么，是关于什么的？
书籍评价。这本书好吗？别人对它的评价如何，这些评论可信么？

根据这个目标，重新设计后的结果如下：

我们可以看到，这本书内容和评价都一目了然，信息结构利于扫描和比较。重要的信息大而具有色彩，次要信息成灰色的小字。关于这些更详细的叙述可以参见原文。

总结

本文描述了什么是“突出重点，一目了然”。如何测试页面是否“突出重点，一目了然”，以及如何达到“突出重点，一目了然”。有句话我挺喜欢，作为结局吧。在《What’s Next in Web Design?》中说道的：

“Simplicity is when someone takes care of the details.”

“简单而不简陋！”(谢谢青云给出的翻译！)

我们所追求的界面或者功能做得简单，不是粗制滥造，而是需要把下在创造更多无用的功能的功夫转变到现有功能的细节上。做出来东西容易，但是把东西做好做精难啊！

交互设计实用指南系列(4)—“有效性”之“简洁清晰，自然易懂”

青云 — 2010-01-02 16:50:00

我们生活在信息繁杂的社会，尤其是在互联网时代，人们开始通过网络开始接触越来越多的信息，那么，如何获取/传递有效而准确的信息将非常重要。在网页交互设计中，我们提出：信息获取和传达的过程必须是简洁清晰，自然易懂。这样用户才能够有效的获取这些信息，并迅速作出决定。

1.什么是“简洁自然，清晰易懂”？

简洁清晰：使信息最简化
“少即是多”。提倡使用最少的元素来表达最多的信息。如果信息繁杂，将使用户承担大量的信息负担，造成信息过载，影响效率，不能帮助用户解决问题。

自然易懂：使用用户语言
用户获取信息的方式多样，并且对信息的理解程度也各有不同，所以使用用户平时使用和理解的表达方式去传递信息，更可以被用户所接受。

2.信息表述的种类与设计原则

在网页交互设计中，用于传达给用户以有效信息的方式有多种，其中包括：页面布局，交互文本，界面色彩，图像与图标，声音等。

1）页面布局

界面中的信息布局，会直接影响用户获取信息的效率。所以，一般界面的布局因功能不同考虑的侧重点不同，并且会让用户有一种“区块感”，方便用户对信息的扫描性浏览。

①界面布局尽量有秩序，排列整齐，防止过紧或过松，有明显的“区块感”。切忌混乱。
②布局要充分表现其功能性，对于每个区域所代表的功能应有所区别。如：标题区，工作区，提示/帮助区等
③页面中最重要的信息所在的模块将是在屏幕中最明显的位置上。并且，应该是最大的。
④布局中的信息需要有明显的标志和简单介绍，比如标题栏和标题等。
⑤信息的位置保证一致性，让用户可以无需重新建立对页面信息分布的理解。

2）交互文本

交互文本指产品界面涉及交互操作中需要用户理解并反馈的所有的文字：包括标题、按钮文字、链接文字，对话框提示、各种提示信息、帮助等。这些文字直接影响用户在交互过程中对预期的理解，好的交互文本设计，可以提高用户完成任务的效率。

①表述的信息尽量口语化，不用或少用专业术语；
②表述语气柔和、礼貌，避免使用被动语态，否定句等；
③简洁、清楚的表达，文字较多要适当断句，尽量避免左右滚屏，折行。
④对于同种操作的交互文本，操作行文字保持统一性。
⑤字体使用默认/标准的字体，大小以用户的视觉清晰分辨为主；

3）界面色彩

人眼一共约能区分一千万种颜色，所以用户与界面中颜色的关注度非常的高，有效的使用色彩区分信息的级别，分类等，有助于用户对信息和操作产生关联，有效减少用户的记忆负担。

①根据不同的产品使用“场景”，选择其合适的颜色。如，管理界面经常使用蓝色。
②考虑颜色对用户的心理和文化的影响。比如，黄色代表警告，绿色代表成功等。
③避免界面中同时出现3种以上的颜色。
④颜色的对比度明显，如在深色的背景中使用浅色的文字。
⑤使用颜色指导用户关注到到最重要的信息。

4）图像图标

相对于单纯的文本，图像以及符号化的图标更加符合用户的认识习惯。往往表述一种信息，一张图片或者一个标识更能让不同用户理解与接受。适当的使用图片与符号化的图标，会让用户很自然的建立起认知习惯。

①表意清晰，明确，有高度的概括性与指向性，让用户能够快速的联想到对应的功能和操作。
②同类或同一纬度的信息，在形式和色彩风格上尽量保持一致性；
③仅在突出重要信息，用户可能产生理解偏差的情况下使用。避免滥用。
④尽量与交互文本结合使用。

5）声音

在网页的交互设计中，用于声音的信息表述方式相对与视觉来说不是很多。一般应用于提示，提醒，帮助等信息的表述。此类信息表述让用户通过听觉获取反馈，更加的直接与有效。

①表述清晰，语气亲切，不生硬，有礼貌。
②使用符合用户认知习惯的声音。如，使用敲门声提示好友来访信息等。
③使用不让用户反感（如：恐怖，恶心，烦躁）的声音。
④在用户可预知的情况下发出声音。

4.小结

对于不同的信息表述方式，我们都要求设计师在表达信息的时候做到简洁清晰，自然易懂，尽量让用户觉得这是自然而然，而且又是清晰明了的信息。就像小溪流水一样自然，就像军人命令一样明确。这样才会让用户快速，准确的完成任务。

交互设计实用指南系列(3) - “有效性”之“适时帮助”

谷隐 — 2009-12-24 22:04:37

任何一个交互过程的操作，对于用户来说都有学习成本，谁也不能保证所有人都可以准确无误地走完一个流程。交互设计师在设计时应该考虑适时地给用户相应的帮助，这一点非常重要。适时帮助，是指在用户使用流程中，在需要的时候能及时地得到帮助；反之，在不需要帮助的时候,不要出现信息干扰。
不及时的帮助会造成用户使用进程中断，或者增加用户达成目标的难度。无效的帮助则可能给用户造成干扰，影响用户完成任务。

“适时帮助”是一个偏正结构，首先是帮助，然后制约条件是适时。我们分开来讲。

在理想的交互设计状态下,我们当然希望用户在使用过程中”无师自通”,但受制硬件、使用环境、用户层次等各种原因，有一个”老师”帮助用户是非常必要的。
韩愈在《师说》里一开始就讲到：古之学者必有师。师者，所以传道受业解惑也。人非生而知之者，孰能无惑？
同理，我们的帮助也是相似的作用，传道授业解惑。

1.传道
传道主要是理论上的帮助，告诉别人这是什么，主要指一些名词解释，规则说明等等。
2.授业
授业主要是操作上的帮助，告诉用户怎么作才能完成整个流程。很多当前操作提示，流程示意图等都属于这个范畴。
3.解惑
解惑主要是在用户迷惑不解的时候提供解决方案，比如对用户操作出错的建议，某分流程结束后的帮助提示等等。

然后主要来说一说“适时”。这就要讨论用户在什么时候需要帮助。一般有以下三种情况：
A.在用户第一次使用某产品功能的时候。
当新用户使用一个产品的时候需要帮助，或者老用户在使用一项新功能的时候，由于认知不足，用户会觉得陌生，不知所措。此时帮助应该及时出现，但不能一直强制出现，应该让用户有选择的余地。
B.在用户已经出错或者将要出错的时候。
当用户在流程中不小心与系统现在规则有了冲突的时候应该及时提醒，不能任其为之，到最后显示一句“对不起，你出错了”，这样可能会造成用户主动中断流程。
C.在用户遇到不明白的问题的时候。
用户遇到不明白的名词或者操作时，应该及时给出解释。用户了解信息主体时候，如果有必要的补充说明也应该及时出现。

当出现以上三种情况的时候，我们应该采取适当的方法来为用户提供帮助。
1.帮助信息明显，提示方式灵活。
看案例:

google文档的新功能帮助信息，第一次访问时，用明显的形式出现，用户点击关闭以后再也不会出现；如果点击以后提醒我，帮助信息会暂时关闭，下次访问还会出现。

2.及时反馈操作，防止用户出错；分析错误原因，给出合理建议。
看案例:

上图针对错误页面的帮助提示，分析用户可能出现的原因，并给出了一些建议。我们再来看看下面这个反面案例。

用户在注册过程中，用户已经存在的情况下，输入是没有提示的；直到所有资料填写好之后提交，才弹出结果页面，说用户名已经被注册，然后让用户重新填写。这个帮助信息来得太晚了，如果在注册用户填写用户名的时候，就检测该用户名是否有效，就不会让用户觉得前功尽弃了。

3.及时补充，信息完整

再看QQ会员页面，在开通会员的大按钮下有一个“QQ会员是什么”的帮助信息，这个帮助就是为了让用户首先在理论上对QQ会员有一个认知。对用户不了解的信息给出了通往答案的道路。

总之，帮助在交互设计的有效性里有相当重要的地位，而适时性是帮助的重要关键点。我们可以用两个词组合起来，形容适时帮助的特点，那就是”聊胜于无，过犹不及”。只有及时而不多余的帮助信息才能更好地帮助用户，从而完成一个具有“有效性”的交互设计。

交互设计实用指南系列(2) –“有效性”之“可及”

化龙 — 2009-12-19 09:21:53

可及，通俗的说是“可以达到”，加上主语和宾语，在“交互设计”这个大的语境下，含义应该是“用户可以达到自己的操作目标”，这不是和“有效性—用户的操作是有效的”重复了吗？其实，在交互设计实用指南中，“可及”是一个狭义的概念，是放在有效性下面的，具体解释为“色盲、肢体残疾等特殊人士可以完成基本操作”。更扩展一下，这个特殊人群应该还包括老人儿童，文盲等对信息使用不擅长的人。

也就是说，交互设计实用指南所定义的“可及”就是“信息可及”。具体解释为在产品设计应用过程中，应当考虑到特殊人群的使用状况，让这部分用户享受无障碍设计带来的便捷，在浏览，使用网页时能很顺畅的使用该网页所提供的相关资源。

交互设计主要考虑的几个特殊人群：

1.色盲

据统计，这个世界上有大约8.65%的男性和0.43%的女性，在识别部分或者全部颜色时有困难。我们通常笼统地称这种缺陷为色盲(Color Blindness)。其中，轻度的色觉异常称为色弱。

2.肢体残疾

而仅仅在我国，残疾人数就约有8300万，占总人口的6.34%，其中肢体残疾者2412万人，占29.07%。肢体残疾人士在精神智力方面和正常人是没有太大分别的，这部分群体由于活动不便，对于以电脑，移动终端为媒介的网络产品有着更为迫切的使用需求。

3.老人，儿童（5～12岁）

更值得关注的是人口老龄化的趋势在中国越来越严峻，有一个预测的数据显示，到2050年中国将有4.3亿的老龄人。老年人退休了，时间相对充裕，除了从传统媒体获得信息外，对于网络信息获取的需求也在日益增长。家长们为了开阔子女眼界的需要，也会允许儿童在特定时间上特定的网站来开发智力，学习娱乐。

4.文盲

另外从文化程度的差异来看，在中国文盲的数量仍然占人口总数相当大的比例，现在我们的青壮年文盲占5.8%，这部分人群虽然网络基础知识几乎为零，但是一旦接触到网络，他们会有很高的学习欲望和热情，如何帮助他们尽快的使用网络，也是Web交互设计师应该关注的一个问题。

5.其他

其他对信息使用不擅长的人

交互设计的方法：

对于如此多的特殊用户，无论是出于专业精神还是商业利益，Web产品设计师都应该去关注他们，这也是作为一个设计师社会责任所在。那么，所设计的产品如何能够满足对特殊人群的“可及”呢，这就要求设计师在设计一个产品的时候，时刻要提醒自己不能忘记特殊人群，换位思考，站在特殊人群使用的角度上来设计Web产品的整体布局，各个元素的具体形态及操作行为。关于这一部分，交互设计实用指南也给出了一些基本的思路，以下是一些可借鉴的设计方法。

1.使用形状+色彩的信息提示

这一点对于色盲这类人群尤为重要，和普通用户相比，他们的缺陷是在颜色识别方面，也就是说如果设计师在某个地方仅仅使用了色彩作为信息提示，的话，那就有可能带来问题了，下面的例子：

上图是苹果的官方网站曾提供的一个在线工具，帮助用户来查询哪些专卖店明天有货。苹果的设计师用绿色填充的圆圈表示有货，红色的圆圈表示没货，貌似挺清晰的，对于普通人当然没问题。但是对于绿色色盲用户来说，就不容易了。

其实，我们只需要优化提示ICON就能解决这个问题，修改如下：

这个例子告诉我们，在使用设计元素时，要尽量使用形状+色彩的方式来表现信息，或者使用文字的提示。这样对于正常用户和对颜色识别有障碍的特殊用户，都不影响他们的识别。有一个小技巧可以使用，在完成设计时，可以把自己的设计图做去色处理，然后一项项的去做交互测试，如此可以有效的避免色彩的识别问题。

2.简化操作方式

无论是老人还是文盲对于网络产品的操作都有信心不足的情况，一个简便的操作方式，令他们快速实现目标，对于增长信心非常有帮助。对于肢体残疾人士，他们的困难在于使用交互输入设备，如鼠标和键盘比正常人更不容易，也需要简化操作方式。比如在设计操作时尽可能地采用“选择”的方式而不是“填写”（避免给手指残疾的用户增加负担）。比如下面这个输入日期的设计：

3.容错和及时帮助

这也是交互设计指南中两个非常重要的部分，对于特殊人群来说，这两点显得更加重要。具体的设计方法可以参考接下来的文章http://ued.taobao.com/blog/category/ixd_guide/ 。

4.使用视觉、听觉，触觉等多元化的手法传达必要的资讯

在产品设计中，对于重要的操作及信息提示可以使用语音提示来配合视觉样式来提示用户操作的状态。比如在一些智能手机产品上，点击触摸屏数字键盘时，不但被选中的数字键的底色会发生变化，而且屏幕还有震动的触感提示。

5.使用辅助性的工具

以目前的技术，语音识别可以部分解决单纯的输入问题，比如Windows7的语音指令功能，在操作者说出“打开Word”这句话时，电脑就可以自动启动该软件，也可以为视力不好的老年使用者逐字逐句地朗读电脑上显示的任意文章，但是要靠语音识别完全解决人和电脑间大量的快速的交互行为还要走很长的路。在未来，也许大脑可以直接来操控电脑，这方面已经有了一些研究成果。下图为谷歌手机中文语音搜索的界面：

另外可以内置辅助残疾人的工具，Windows7有一个新的功能，叫做OSK，即屏幕键盘。不习惯使用键盘的人可以用鼠标来点这个屏幕键盘，肢体不是很方便的使用者，可以把屏幕键盘上的按键放大从而提高准确性；视力不好的老年使用者，可以把按键上的字放大，以便阅读。

6.容易浏览及合理的信息架构

对于老年人来说，看互联网会觉得眼花，他们感觉所有的字都太小，不容易浏览。所以在设计时要考虑到，能切换到可以适合老年人查看的字体和网页样式。比如百度推出了老年搜索来满足这个需求，字体较大且突出老年人常用的功能,如下图：

小结：

以上抛砖引玉提了几点为“信息可及”设计时可以考虑的方法，对于特殊人群的无障碍设计需要更深入的挖掘特殊人群的需求，根据他们的生理和心理状况，有针对性的开展设计工作。

随着社会文明的提高，交互设计对特殊人群的关注度也越来越高，可及即无障碍设计的理念也越来越得到绝大多数设计师的提倡。在我国，互联网协会网站于近期正式开通了信息无障碍样板专栏，专栏介绍了国内外无障碍行业标准的内容和链接，其中有一些设计的规范，有兴趣的话，可以下载，对于网站的设计有一定的参考价值。

据联合国经济和社会事务部发表的研究报告，目前全球100家主要网站中只有3家能够满足残障人士的需要，这方面要走的路还有很长。

交互设计实用指南系列(1) – “有效性”之“操作入口明确”

尚轩 — 2009-12-11 21:39:55

“操作入口明确”，就是指产品的任何一个功能都要有明确、合理的入口。“操作入口”，指的是产品内部不同模块之间的转接元素，例如在Web产品中，按钮控件、输入框、文字链等都属于操作入口；“明确”指的是入口的视觉感是清晰的、可识别的；“合理”是指入口的出现是符合用户操作逻辑的，适时的。

之所以要提出“操作入口明确”，是因为用户在使用产品的过程中，往往遵循的是可分析的行为逻辑。对于产品本身而言，必须有相对应的操作提示来引导用户最有效地获取信息，还原为实现层面就是明确、合理的操作入口。如果说首页是整个网站的门户，那么操作入口就是连接各个子页面的枢纽。设计师的终极目的，就是通过对这些枢纽的优化让用户利用最有效的方式在最短时间内完成自己的预期任务。

对于基于WEB的电子商务而言，核心价值是信息资源，而能否将这些海量数据合理地推送给用户，则是产品生存的关键。操作入口的设计，甚至可以看做 “通过对引导方式的优化间接达到对信息资源的归类”——这很像图书馆中的书类标签管理，用户可以根据不同的类目标签找到自己想看的书。失败的操作入口所带来的后果往往是灾难性的，功能失效、位置隐蔽、信息干扰……都会给用户带来严重的挫败感，使其绝望地湮没在茫茫的信息海洋中。所以，明确合理的操作入口设计，是对产品“有效性”的保障，更是对用户体验的尊重。

那么，在具体的设计中如何做到“操作入口明确”呢？

1、强化重点，弱化周边

星爷《唐伯虎点秋香》中的精彩片段，一声“美女”换来诸多牛鬼蛇神的壮观回眸和秋香MM的惊鸿一瞥——“美女这东西是要需要比较地”。WEB产品也一样，尤其是海量信息的电子商务网站，由信息架构衍生出的各类功能入口相当复杂，部署在页面的各个角落，一不留心就被疏漏。通常有两种方法来解决这类问题：一是增加入口数量，即“广撒网”，同样的功能入口有多个，以此增加功能模块的使用率，不过这种方法存在较大隐患，后面会详细分析；二是“强化重点，弱化周边”，即在视觉上将入口模块凸显出来，采用精妙的布局，并适当弱化周边的信息展示，加大二者的权重对比，客观上增加用户识别的准确性。

例如地球人最熟悉的Google首页：

www.google.com

浓郁艺术气息的LOGO作为唯一的色彩元素有效地抓住了浏览者的视觉中心，输入栏和Button作为功能核心占据了页面的心脏位置，这种组合让用户通过第一视觉便能够准确理解页面所表达的信息逻辑——“输入关键词”+“点击按钮”=“Everything you want”。

再看一个反例，如图：

download.pchome.net

面对这样一个下载页面，面对这样一个抢眼的大Button（标记②），相信即使是电信用户，也会很大方地支持下网通……但是，点击之后弹出的却是下载遨游浏览器的窗口，崩溃之余再仔细查看，终于发现在华丽的广告位旁边蜷缩着一个毫无特色的“立刻下载”（标记 ①）——刹那间，无数用户被这种饱含“让贤”哲理的设计深深震撼了！

2、入口信息明确易识别

上面提到，增加入口数量虽然在一定程度上有助于提高功能模块的使用率，但也存在致命的缺陷——入口信息不明确。因为“入口”等同于用户的“选择”，入口越多，选择越多，“过多的选择等于没有选择”，这势必会造成用户使用产品时的疑惑：这几个链接和按钮好像都一样啊，该选哪个呢？所以，要根据页面本身的信息量严格控制同功能入口的数量，保证有效的识别性，让用户迅速找到正确的入口。

这次用我们可爱的兄弟产品“支付宝”为例，看看改版前后的细节变化：

改版前

改版后

通过对比，我们可以发现，管理页面中部分相同功能的入口出现了多个，对于新手用户来说，很可能造成不必要的困惑；而在新版本中，每个功能模块只有一个入口，明晰简洁。

另外，对于入口元素本身而言，需要通过适合的展现形式来提示用户此入口的功能属性。例如，一个标准的按钮控件，用户会知道“可以点击”，但点击后会发生什么交互行为，需要通过其他视觉元素进行信息提示（如按钮上的文字或者具有标识性的ICON），告诉用户当前的情况和可行的操作方案，这点有些类似生活中的“指示设计”。

下图是eBay首页的注册区，通过按钮文字和辅助文本信息，新手用户也能够很清楚地了解眼前这两个Button代表的意义。

www.ebay.com

3、根据用户定制合适的入口

交互设计离开用户研究便是闭门造车，在设计产品操作入口的同时，要充分考虑到不同用户的需求。用户划分维度很多，《About Face3.0》中根据与产品的相关度将其分为“新手”、“中间用户”和“专家”。这三类用户对产品的了解程度并不一致，操作行为习惯也大相径庭，若再通过其他维度将其细分（如“有无目的”、“性别年龄”等），会相当复杂，在对产品进行进一步优化时，应当考虑到操作入口对不同用户的适用性。

“在交互和界面设计中，如何用同一个界面满足新手用户和专家用户的需求是长久以来存在的难题之一。虽然大多数中间用户倾向于保留在这一类型中，但新手不会永远是新手。要维持高水平的技术程度很困难，因此专家门也在快速变化。新手的变化更快，新手和专家随着时间推移都会倾向于成为中间用户。”（《About Face 3.0》第三章），所以针对用户的定性研究和定量分析会显得尤为重要。不过，无论如何划分用户人群，有一点共性是至始至终的——产品操作入口设计的终极目的是让用户迅速有效地完成核心需求。

小结

综上所述，对于信息庞杂的电子商务网站而言，出色的操作入口设计好似科幻片中的“星际之门”，能让用户随心所欲地抵达任意空间，享受完美的交互体验；同样，失败的设计也能让用户犹如坠入希腊神话中恐怖的克里特岛迷宫，郁闷不可自拔。“操作入口明确”，是所有优秀交互产品的共性之一，也是每一个设计师“想用户之所想”的职责所在。

交互设计实用指南系列 – 我们眼中的交互设计

宗羲 — 2009-12-02 20:52:16

交互设计(Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the “interaction”,即人工制品在特定场景下的反应方式)相关的界面(Wikipedia)。通过对界面和行为进行交互设计，从而可以让使用者使用人造物来完成目标，这就是交互设计的目的。

从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。

在《交互设计实用指南》里，我们认为，交互设计，应当是创造承接人类与计算机之间的界面即人机界面(Human-Computer Interface)(见下图)。交互设计的出发点在于研究用户和计算机交流(dialog)的时候，人的心智模型和行为模型，并在此研究基础上，设计界面信息及其交互方式，用人机界面将用户的行为翻译给计算机，将计算机的行为翻译给用户，来满足人对软件使用的需求。所以，交互设计一方面，是面向用户的，这时交互设计所追求的既是可用性(Usability)，这也是交互设计的目的所在；交互设计的另一个方面是面向计算机实现的，这时我们关注于“软件工程化”。

交互设计模型

面向用户

根据上文中，我们提到的满足人对软件的需求，其目标既是我们所说的“可用性”。可用性指的是一个产品可以被特定的用户在特定的使用情况中，有效、高效并且满意得达成特定目标的程度(ISO9241)。我们认为，其中所诉的有效、高效和满意即为可用性的三个递进的层次：

有效性：有效性是指用户完成特定任务和达到特定目标时所具有的正确和完整度。如果用户不能完成他们的目的，那么无论体验是长时段，容易还是复杂，这个产品可能都没有意义。
90年代的时候，某品牌机厂商推出的台式机都预安装了一个“我的家”的软件。该软件是个系统功能的导航软件，它将你电脑的例如Office、音乐、电影、浏览器、计算器等这样的工具安排在一个充满隐喻的图形化的屋子。例如你要听音乐，那么你必须走到卧室，然后点击那把吉他，如果要使用Word，你可能需要点击你书桌上的文档。这样当时在厂商看来十分吸引消费者的东西——它认为这样能够解决新手使用电脑的问题——却被市场所否定。许多消费者根本找不到相应的功能放在哪儿。于是，当连功能都完不成的时候，软件就缺失了有效性，即使这个充满隐喻的图形化的屋子做得再逼真，软件价格再低也不会有消费者觉得可用，软件也失去了价值。
高效性：高效性是指用户在完成特定任务和达到特定目标的容易程度和时间长短。这可能会牵涉到许多因素。例如，我们的软件启动速度太慢，处理速度太慢，这会影响到软件的高效。再比如，在一个呼叫中心使用一个更高效的呼叫中心系统，可能造成操作员每天能够处理更多的电话数。
对于网站来说，一个良好的信息架构对于高效性的提升是十分有效的。良好的信息架构能够让用户在更短的时间，也更容易地找到他们想要的信息。
Flickr和Picasa都是著名的照片管理网站。Flickr注重的更多是社区化的应用，用户群体相对摄影技术较好。而Picasa注重的更多是个人的相册，用户群体相对摄影技术也较差。他们的首页也迥然不同。Flickr的登录后的首页大部分是社区性的信息，例如最近的活动，你的联系人最近发表了什么照片，还有你参加的小组等等。另外复杂而有条不紊的导航也允许中高级用户造访更多的Flickr的功能。相比之下，Picasa首页基本只是所有的相册的列表。这样的迥异之下，Flickr对于他的用户群是高效的，Picasa对于他的用户群也同样高效。不同的用户在他们的页面之下都容易找到他们自己需要的内容。

Flickr 和 Picasa的个人首页

另外，减少用户的认知负担也是提高软件高效性的有力措施。能不能然用户少些机械的操作？能不能让用户尽少思考？能不能让用户别记着那么多的东西？
满意度：满意度是指用户在使用软件产品过程中所感受到的主观满意度和接受程度。在用户能够有效、高效地使用软件的基础上，给予用户一些更多地“体验”，考虑那些更多内涵。这也是我们交互设计真正的水平所在。例如：我们需要避免用户出错，也同时能够提高方法让他们从错误中恢复；我们需要让软件易学，以便让新手快速成长为中间用户，让需要的中间用户成为专家；我们需要做精美的页面让用户喜欢；我们需要塑造我们的品牌风格，让用户“膜拜”……

交互设计就是设计软件上可提供的交互方式，来满足人对使用软件的三个递进层次的需求。也就是说，首先，应当保证软件的有效性，如非有效，一切皆空。接着，保证软件的高效性，软件虽然已经完成了他的目标，那么是不是可以在这个基础之上，缩短完成目标的时间长度或者是降低认知成本等，最终达到提高生产力的目的。在完成了这两点之后，我们可以继续考虑提高软件的满意度，这里可以通过一些视觉的提升、品牌效应和创造新的体验(苹果一直是这方面的好例子)等方法来提高软件的满意度。

面向实现

交互设计立足于软件工程中的一个环节，所以谈到交互设计，特别是在软件工程中的交互设计，就必须涉及面向实现的部分——也就是我们谈论的“工程化”。“工程化”问题，涉及到三个方面：

标准化：这是指在进行与交互设计的相关工作，我们需要满足相关的标准和规范。标准化有助于提高产品的兼容性、互操作性、可重复性、安全和质量。举个例子，例如我们在制作原型的时候，有可能需要参考UED团队的栅格标准或是垂直栅格。这样，对于视觉设计师，他们可以减轻像素对齐的负担，对于前端工程师，套用相应的代码即可完成标准栅格的摆放。当然，还有很多标准和规范，例如：有些公司拥有交互方面的Guide-line，可以保持整个产品形象的一致性，降低用户认知负担。
可行性：这是指在设计交互的过程中，应考虑到技术上是否可行。可行包括两个层面：第一个是技术可以完成，更高的一个层次则是需要考虑在现有的资源(时间、人力、技术能力等)的情况下时候可以完成。我们可以设计一个拖载的动作，但是，如果这玩意儿告诉你要在山寨非触屏手机的浏览器内实现，那么这显然是不可行的交互；如果告诉你这玩意儿在浏览器中将多加载100kb数据量，平均延长加载时间7s，那么这也很可能不是可行的。交互式设计师需要参与方案的实现，以确保方案实现是严格忠于原来的设计的；同时，也要准备进行必要的方案修改，以确保技术的可行，当然，修改不该伤害原有设计的完整概念。
创新性：其实，具体得说，交互设计就是关于创建新的用户体验的问题，其目的是增强和扩充人们工作、通信及交互方式(《交互设计——超越人机交互》)。虽然说到创新，各位可能很容易想到炫目的交互，大量的动画等等，但是，别忘了“技术驱动创新”：创新应当尽量在上面所述的标准化和可行性的框架内进行。

面向实现的这三点互相制约，相辅相成，也同时约束了我们的交互设计工作需要在一定范围内实现。为用户而设计，考虑实现，一起做一个精明的交互设计师吧！

达到可用性

我们刚才谈到了交互设计面向用户既是为了追求可用性。并且，可用性具有三个递进的层次，他们是：有效性、高效性和满意度。那么如何达到可用性目标，也就是说如何达到这三个递进层次呢？《交互设计实用指南》系列文章，正是我们对这个问题的解答。所以，期待我们的连载吧！