用户研究角度看设计（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）是否足够好，后一个问题意味着这个位置能不能与他想做的事情联系起来。

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