用户研究角度看设计
 
2009-05-11 来源：ued.taobao
 

（1）“复制链接”的故事

《用户研究角度看设计》系列是淘宝的用户研究团队在可用性测试之后的点滴思考。在每次与淘宝用户的直接接触、观察用户的操作之后，作为体验分析师的我们总是会感慨：“为什么有些细节设计看似已经很显眼了，用户就是没有注意到？”、“为什么用户偏偏要那样去理解？”、“用户在那个流程中为什么陷入困惑，甚至不能完成任务了？”，然后，我们会思考这界面背后的原因，分析用户当时具体说了什么，是什么原因导致用户那样理解……这个过程需要非常严谨的思考，因为向设计师反馈的任何一个词语都会导致不同的设计。同时，这个过程也令我们非常享受，如果说设计就是解决问题，在可用性测试之后的分析时间就是分析师的“设计”时光。

我们冀望通过用户研究角度的思考，带给设计师一点点启发，并且将我们在研究中发现的问题，固化在设计模式库中，以便今后不再出现同样的问题。当然，作为体验分析师，我们对交互设计和视觉设计了解得不够精深，还不能像设计师一样把握项目中的种种约束，所以，这个系列的内容可能还比较粗浅，更偏重于“商业-技术-用户”三者中“用户”这个角色的直接想法。

另外，我们的思考来源于淘宝或其他网站各位设计师的设计，所以，有时可能会拿来作为反例，还请各位设计师见谅。我们尽可能拿自己网站的例子作为反面教材，如果在反例中涉及了您的网站，还请多多包涵。

让我们开始第一个故事吧——

有一个网页上典型的细节，它如此细微以至有时设计师在项目的最后时刻才记得挤一个位置给它，但它又如此常见，在不少网站的详情页面不经意就出现了；我们在软件中不常见到它，但在超文本世界里，在互联了朋友的世界里，它却时而闪现——它就是“复制链接”，英文别名是Tell a friend、send to a friend、tip a friend、share、email to a friend或者直接就是URL（如图1）。作为设计师，你曾经注意过它吗？

（图1：youtube ）

它什么时候出现更合适？

当你想将一个网页（或网页中的主体内容)分享给别人的时候，这时它的出现可以节约用户的时间。

通常，它出现在一个网站的内容详情页面，比如视频网站的播放视频页面、博客网站的博客文章页面、照片网站的照片详情页面、购物网站的商品页面等等。就拿博客网站为例，它的出现似乎在说，“也许你的朋友会对这篇文章感兴趣哦，点击我，然后分享给朋友看看吧！”

使用它时注意什么

1.不必在一个页面多次出现

设计师既要在设计过程记着它，但也别太惦念它了。只在需要的时候提供它，即使页面很长，也没有必要像“立刻购买”按钮那样在页面的第一屏和最后一屏出现两次，因为“立刻购买”可以让用户进入到下一个步骤完成购买，而“复制链接”只是一个次要的任务，大部分为对它感兴趣的人使用。

2.相类似的功能具有相同的视觉权重

翻翻看你的网站人物角色（或是网站的点击日志），他们常用什么分享给朋友——是通过IM、Email还是其它，那么请突出最主要的那一个，如果将多个相似的功能平铺在一起，恐怕会违背“别让我思考”的原则。看图2中播放器下面第二排前几个链接：“站外引用”、“发送聊友”、“转发”，三个功能都具有分享的含义，并混杂在9个链接中，我不得不停下来想想，“我要点击哪一个呢？”

（图2：某视频网站 ）

3.不要让它本身显得太喧嚣

设计它的过程，要记得让用户注意得到，或者是在用户想寻找的时候知道在哪里寻找，这一点很重要。举个例子，假如是一篇blog页面，不要让“复制链接”的文字大小超过blog正文内容，也不要让复制链接区域太明显，以至于干扰了最核心的文章内容。

图3是淘宝社区的一个反例，输入框和按钮多在表单中出现，这个组件总是比普通文字要明显的，它出现在社区内容的底部，可能会干扰用户对后几段文字的阅读。

（图3：淘宝社区）

另外，在使用输入框复制的设计中，是不是可以考虑当用户点击了输入框，用脚本自动全选了整个输入框的内容（例1），而不是让用户从左至右按住左键拖动鼠标，进行全选。

<input type=”text” id=”foo” />
<script type=”text/javascript”>
document.getElementById(’foo’).onfocus = function() {this.select();}
</script>

（例1）

它出现在页面的哪个位置？

在可用性测试的准备阶段，我们这么带着这样的问题去观察：“用户对某个东西感兴趣的时候，他知道去哪里找它吗？”和“用户点击了它之后，他清楚在做（复制或分享）什么吗？”，前一个问题意味着它的可寻性（findability）是否足够好，后一个问题意味着这个位置能不能与他想做的事情联系起来。

举个例子，如果用户想把文章分享给朋友看，那么将这个功能放置在文章的附近而不是评论的附近更合适。可能这么说，有些人会想“那当然是文章附近更好了，谁会把它设计到评论附近呢”，但有时在文章下面加入了一个横幅广告之后，它就与评论而不是文章更相近了。

用什么中文词语来描述它？

我个人认为在不同的情景中应该用不同的中文词语，但是界面上不要有其它词语干扰了用户的理解，图4是某博客一篇文章的部分截图，你能立刻说出来，上下两个“分享”有什么区别吗？

（图4：某门户博客）

我想你已经猜出来了，上面的“分享”是名词，下面的“分享”是动词，所以在使用一个既可以是动词也可以是名词的词语时候，要谨慎一些。另外，我建议设计师时刻考虑到“此时此刻”那个时点，想象用户是从搜索引擎过来的，他不清楚你的网站的结构、功能，他一下子来到了你设计的某个页面，他来了、他时间有限、他可不愿意思考太多，你的网站能通过那一刻就让他一目了然吗？

不要使用什么词语

1.“共享”：

共享含有共享编辑的含义，常在wiki中使用。所以使用它可能会产生歧义。

（图5：google文档）

2.某些情况下，缺乏明确含义的词语：

我个人认为“复制链接”属于情境式链接，Peter Morville在《web信息架构》中提到“情境式链接必须非常直接而有意义……如果你点选下去，就知道会看到什么东西。这样高度有代表性的标签，会通过它们的情景而更加清晰：具有说明性的文字、明确的标题，以及网站本身就有的直接明了的用法。”

“复制链接”只是这篇文章中我对这类链接的称谓，而不建议直接采用这个名称，仅仅用4个汉字很难表达出来复制之后要做什么，用户会想“我为什么不能直接复制地址栏或是点击鼠标右键复制呢？”，“我点击它可以为我带来什么？”。在某些情境下，“复制图片链接发送给好友”也许是更直接、清晰。更进一步，如果你通过调查，发现很多用户是通过淘宝旺旺传送图片地址的，那么，更好的表达方式可能是“复制图片地址发给旺旺好友”。

我想，没有最佳答案，文字和你的网站气质以及用户使用场景息息相关，文字亦是设计师的利器之一。

点击它之后，会出现什么？

1.要考虑“复制链接”的内容

当你仔细考虑过用户的使用场景，你应该就很清楚怎么设计复制链接了。像图6一样将内容主题包含在分享信息里对那些通过IM来分享的用户确实不错。

（图6：新浪博客 ）

2.让分享中的内容满足用户的需要：

如果用户对复制链接有多种需要，那么不妨设计多种复制途径。学习一下flickr的设计（图7、图8），它如何在多种复制链接中，保持了清晰的逻辑关系。（当然，其中默认第一项通过邮件分享可能对美国人更常用，对中国用户就另当别论了）

（图7：flickr网站 ，用户点击分享之前）

（图8：用户点击分享之后）

3.帮用户想的更多：

分享一个photobucket的例子（图9），当鼠标上移到图片时，就会出现灰色的浮动层（这是改良过的设计，原本是灰色层始终存在），让用户复制。鼠标点击到包含地址的输入框里，系统会自动复制好其中的链接，并在输入框前出现几秒钟的“copied”提示。这种方式既能做到提供反馈，又不会有alertbox的生硬感。

（图9：photobucket.com ）

总结

设计“复制链接”功能时候，首先思考用户的使用场景以及用户可能会用它做什么，其次一定要让用户理解这个功能可以用来做什么的。最后，优秀的设计还应该给用户一个惊喜。在我收集例子的过程中，photobucket的“复制地址”设计确实给了我不小的惊喜。

你还发现了哪些更好的例子呢，欢迎告诉我！

延伸阅读：

http://ui-patterns.com/pattern/TipAFriend

http://www.welie.com/patterns/showPattern.php?patternID=send-to-friend

更多例子：

http://picasaweb.google.com/mimiqiao/TipAFriend

（2）：用户为何视若无睹

可视性的问题几乎在每次不同产品的用户测试中都会出现：用户总是对页面的某些元素、功能视若无睹，或根本无视。基于此，对这个问题进行了一番小小的研究。

为何用户视若无睹？

视觉是人的生理与心理现象。本文述及的是视觉作为心理现象，也即由知觉、思维、记忆、情感等视觉认知引起的可视性问题，而非用户眼睛在生理上存在缺陷，也不是错幻视觉（详见链接图例）。用标准些的心理学术语来说，这里所说的“视若无睹”（注）是视觉意识缺乏（failures of visual awareness）。

注：在此用“视若无睹”仅是为了行文的通俗，从更严谨的角度来说，到底是视若无睹还是根本无视，涉及到较复杂的认知心理学对“视”的定义，还有记忆、感知等，就不扯了 。

心理学家对视觉意识缺乏有颇长时间的研究，而针对人机交互领域的研究已发现，人在一个视觉环境中，只会意识到该环境的很小部分。除了认知的有限性，我们还 常常高估了眼睛能看到并理解的内容的多少。这种视觉意识以及后续理解的缺失，造成了用户对界面信息的视若无睹。下面，就来看看人视觉心理的“两盲三高 ”。

两盲

最基本的视觉意识缺乏有两种：变化视盲（change blindness）和不注意视盲（inattentional blindness，又译无意视盲，但该术语过于抽象，故不选择用在本文 ）。

变化视盲是指人在察看某一视域时，没有察觉到该视域范围内的变化。先通过下面这两段片子来感受一下：

很重要的一点是：由于我们对于变化没有预期，所以即使是非常明显的变化，也会视而不见，除非我们恰巧注意到会发生改变的地方。这对于界面设计有什么启示呢？

  • 视觉应对有意义的变化做出引导。有了AJAX, Flex, Flash等技术，数据变化不需要整屏刷新了，这可能造成用户对于刷新的无视，而这种刷新变化对用户并非总是无意义的。像更复杂一点的操作系统，如飞机驾 驶仪表盘，若机师对变化视若无睹，将导致很可怕的后果。因此在这种情况下，应将用户的视线从有效地导向到要发生改变的地方。
  • 利用变化视盲。就像障眼法那样，既让变化发生，却不干扰用户的任务，实现宁静技术（calm technology）的效果。最经典的例子是Mac的级联子菜单了，在泛科技环境（Ubiquitous Computing Environments）也有越来越多的应用。

不注意视盲是指当人的注意力集中在了视域内某处，就会对视域内其他完全可视的元素视若无睹。也来看一段片子吧：

由于我们的注意力集中在数数这件事情上，很有可能你像大多数人那样并没注意到大猩猩的出现。心理学家发现，用户的认知负担（执行任务越复杂，越难发现非注意区的元素），非注意区元素的显著性（位置、大小、颜色及运动等物理特征及语义含义）、与注意力所在元素的相似性（越相似，或越互相呼应越容易被发现），以及个体思维加工能力都会引起不注意视盲。这对于UI设计的启示是显而易见的：

  • 复杂的UI对用户，尤其是对任务感到陌生的新用户来说意味着繁重的认知负担，并被诱惑去使用满意即可（satisficing）的策略——他们渴望迅速完成任务，因此只选择第一个可行的选择。
  • 显著性和相似性，呼应了视觉设计中经典的格式塔定律，而更 通俗一点的CRAP（对比-重复-对齐-临近）原则也同样能帮助解决这个问题。

三高

我们对于人的视觉心理能力往往有三种过高估计，这样的高估影响了我们的设计，也导致了用户的视若无睹。

高估广度：用户可以一下子注意并理解视域范围内所有（或绝大部分）的细节？
如果将用户的注视焦点比喻成聚光灯，那么可以理解成我们高估了聚光灯亮起时被照亮的区域面积（图1）。增加额外的视觉元素只会减少可以被同时注意到的信息，因此用户将更难找到相应的信息。

图1

高估容量：用户会注意到界面中的各个区域？

我们往往高估了用户能够注意到的UI上的区域数，这也使我们误以为独特的视觉元素无论放在什么位置都会吸引用户，或用户会自主地将视线投往某个区域。也以聚光灯的例子来说，用户双眼这盏灯，可能只会投向舞台（UI）上的一两个位置，而不会扫向各个不同的区域。其次， 用户对于察看UI的哪部分有一定倾向性，因此会习惯性地忽略其他可见之处。

高估深度：用户若注意到某元素/区域，就能完整、深入地理解它？

这种高估会误使我们认为，用户只要注意到某对象/区域，就能轻松地理解它的含义。图像相比起文字，似乎更容易吸引用户注意。但研究发现，对于某些用若干词汇就能表达的概念，图片未必总能更有效地向用户传达界面的功能。这跟功能可见性（affordance）就密切相关了。

除了这“两盲三高”，还有一些相关的研究结果及数据值得关注：

（1）用户通常扫视而非阅读页面文字

（2）平均来说，用户若决定阅读某页面，他们只会花28%的时间在阅读文字上。但更普遍的是，只有20%的文字会被阅读

（3）用户在页面的平均停留时间很短。以最新数据来看，用户在搜索及分类目录网站总共停留225秒，综合门户454秒，娱乐541秒，个人及社区429秒。

作为产品设计者的我们，由于对产品的设计、使用流程非常熟悉了解，总觉得用户不可能看不见、发现不了某些元素或功能。就像有时候在做可用性测试反馈时会遇到质疑：怎么可能看不到呢？怎么可能弄不懂呢？但是综上所述，用户可能很没耐心，ta会给予产品的关注时间非常少，不可像设计者那样仔细端详，研究每个细 节！！其次，用户的视觉认知本身就有局限！！而用户与UI交互的互联网环境本身就存在激烈的注意力争夺。

2. 如何让用户看见？

对于视觉设计，我是个外行。飞飞之前的文章已专业地论述了视觉设计对提升可用性的作用。另外，在常见视觉误区一文中，Luke Wroblewski也提出了不少有用的观点。还可参考Dmitry Fadeyev这篇十大提升UI的技巧。 我就谈谈用户研究对视觉设计的帮助吧。

前期调研

（1）了解功能需求的优先性：这包括与需求方、用户进行访谈，以帮助确定视觉层次的重点、视觉流的组织

（2） 体验关键字法：将访谈中的关键字记录下来，形成一个体验关键字集（图2），这些体验关键字应能表达一个用户看到页面头五秒时的情感反应，而这五秒往往决定 了用户对于网页的总体观感。经过与需求方确认后，可从关键字集中抽取、聚合一些概念（图3），作为视觉设计策略的制定依据。

图2、3：体验关键字法（photo courtesy of Nick Myers, Cooper Journal，图片采自Nick Myers）

可用性测试

（1）传统的实验室测试：邀请用户来试用产品。但是某些元素、功能的可视性问题是否能在测试中被发掘出来，与实验设计很有关系。因此用户研究员与设计师、需求方要在前期沟通好，有所针对地设置测试任务。

（2）五秒测试法 ：上文提到，用户通常在头五秒就会形成对一个网页的基本印象，并作出判定：

  • 我来对地方了吗？
  • 这个网站可信吗？
  • 我要找的东西这里有吗？

这个线上的、方便易用的五秒测试法，可以在一定程度上帮助你了解设计是否存在问题，或你的视觉设计是否成功地传达了主要概念、功能。这个测试有三类型：

  • 经典测试：让用户观看某页面五秒后列出他们记忆最深刻的五元素。这类测试有助于了解你的设计中哪些元素最吸引注意力。
  • 对比测试：顾名思义，让用户从两个版本设计（每个看2.5秒）中做出选择，这对于决定两版本的取舍尤为有用。
  • 情感测试：让用户观看某页面五秒后，列出最喜欢和最不喜欢的元素。这有助于你了解界面中最强与最弱点所在。

但是要注意哦，不是说做了5秒测试就可以完事啦！详情请看延伸阅读部分。

视觉设计是一把双刃剑，它会引导用户在页面上的注意力，影响用户对信息结构、任务的理解，他们使用界面的效率，以及最终的——用户体验。

延伸阅读：

  • 关于视觉意识缺失：http://viscog.beckman.uiuc.edu/djs_lab/demos.html
  • 关于五秒测试：http://www.uie.com/articles/five_second_test/
  • 关于视觉设计：
    http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html
    http://www.cooper.com/journal/visual_design/
    http://www.ida.liu.se/~TDDB91/mtrl/visual-UI-design2.pdf
    http://www.csc.ncsu.edu/faculty/healey/PP/index.html

参考文献：

火龙果软件/UML软件工程组织致力于提高您的软件工程实践能力，我们不断地吸取业界的宝贵经验，向您提供经过数百家企业验证的有效的工程技术实践经验，同时关注最新的理论进展，帮助您“领跑您所在行业的软件世界”。
资源网站: UML软件工程组织