OM19's Time

原文链接：http://www.uie.com/articles/user_expectations/

原文作者：Jared M. Spool

翻译：om19 (www.om19.cn)

欢迎转载，转载请注明出处。

最近，有一个设计师问我们说用户期望在页面的哪儿找到登录区域呢。有的站点把它放在左边，有的却放在右边。我们是不是有什么研究能够表明放在这儿比放在哪儿更好呢？

这样的问题拉出了一个更大的问题：为用户的期望而设计。一方面来说，用户，无论是新生儿还是新手，都会对某件事物理应出现的地方产生期望。为这种期望而设计将会减少用户的认知负担，并且能够让他们能够将注意力集中在他们的任务上。从另一方面来说，并不是所有的业界标准都是设计的最佳之道。设计师能够正确地摆脱前人的束缚，才会出现更好的替代方案。甚至有时，那将是现有标准的一种“进步”。因此，有个两头论：我们应该为用户的期望而设计还是给他们一个新的体验？——这种新的体验也许会更好但会违背用户的期望。登录区域的问题对我们来说是个不错的案例来探索如何解决这个两头论。我们可以利用视觉设计和交互设计作为导向来帮助我们解决这个问题。

到底、究竟该放在哪里

在 最近的包括了经常浏览的用户的研究中，我们有机会看到第一手关于当登录功能被放置在页面的不同地方时，登录功能将如何见效的资料。登录放在哪儿并没有一贯 的原则。例如，hertz.com把他们的登录放在左边栏的中间；Marriott.com放在页面的中央；USAriways.com把用户名和密码输 入框横跨在页面的最顶端。

虽 然没有太多的一贯的原则，但是他们都确实使用了登录表单——一个用户名或者email输入框，加上一个密码输入框——或者只是用了一个叫做“登录”的链 接，这个链接带领用户到第二个登录界面。Orbitz.com的页面上方就有一个这样的链接，Avis.com把他们的链接放在了页面的中 间，Westin.com将链接放在了左上方。

观察用户我们得出，无论是位置还是样式(表单或者链接)都没有明显的区别。这些位置和样式都很好地完成了功能——想登录的用户可以没有挫败，不会出错地开始登录。这最设计师来说是个好消息。这个结论给予了他们在设计上的很大的灵活性。

到底、究竟该如何表现

虽然放在哪儿并不重要，但是我们确实发现了视觉表现的重要性。貌似很明显地，如果登录区域或者链接在页面上难以看见，那么用户会遇到麻烦的。

在 最近的对电影租赁网站的UI部门经理Bill Scott的采访中，他承认了我们的这个发现。他讲述了一个故事：由于“登录”链接太小，被混乱在设计之中，因而Netflix的用户到了网站的新页面上 却找不到“登录”链接。当他们对颜色、大小和表现做了一些微小的改动后，他们发现，问题基本消失了。

使用视觉设计上的一些最优方法可以帮助团队保证在他们的用户需要登录功能的时候找到它。对登录使用一些视觉上的变化可以让那些寻找登录的人很容易在页面中发现它。

双输入框模式

根据我们对用户的观察，貌似他们首先会去寻找两个等大的文字输入框。他们的眼睛会先会先扫描页面(常常伴随着鼠标移动)寻找两个输入框。

网站上的一般包含在一个不同的背景和边框里的两个输入框，可以很快的抓住用户的注意。他们应该会在第一个框内输入用户名，在第二个框内输入密码。

这样的模式十分根深蒂固以至于影响了本不该是登录框的模式。在Etrade.com上，一个在线贸易行业银行业务的网站，他们设计了两对双输入框。第一对是标准的登录区域，但是更突出的另一对是股票报价和站内搜索功能。

由于用户对这种的模式的强烈的反应，常常见到用户将自己的用户名和密码输到股票和搜索的地方，完全忽视了正确的登录表单。由此可见，设计师在放置一堆文字输入框的时候应当注意用户是否会把它们误认为登录框。

登录链接模式

如果用户没有看到两个输入框，那么他们会开始扫描寻找一个叫做登录的链接。(我们还未发现有人用按钮来表示它。其实按钮也是一种选择。但是，我们怀疑如果按钮没有恰当地表现，那么这可能会照成认知上的不一致。)

在我们的研究中，有一个模式很可行。这个模式就是：一旦登录，就把登录链接更换成用户名、id、或是email地址，接着后边放上一个退出的链接。用户表现出他们理解了这个语义，这使他们安心地知道了系统已经确认了他们的帐号信息。

和两个输入框模式一样，登录链接需要在视觉上做得明显并且能够与在页面上的许多其他的链接区分开来。聪明的视觉设计师可以轻易地将“登录”做得明显而又不影响页面的美观。

什么时候让用户登录？

我们不但发现用户的期望仿佛不能决定页面上登录信息应该出现的地方，我们同时还注意到当登录应该出现的时候，用户有很强的期望它能够出现。交互流程的设计在我们研究的站点中有很明显的影响。

在Hertz.com上，首页向浏览者同时展示了登录区域和租赁详情区域。我们许多浏览者来网站时对航班信息记忆犹新。他们可能先开始输入航班信息，然后点击按钮开始选车并进入查看支付信息的步骤。

不 幸的是，这种方法并不能让用户很好享受保存着他们的车参数和支付信息的Hertz一等俱乐部的会员资格。一旦进入了第二个步骤，他们必须返回首页，重新登 录，然后再次输入到达航班和离开航班的数据。在我们研究的时候，他们一旦开始了这个流程，就没办法能够做到不用放弃并重新开始就能预订。(注：Hertz 随后变更了他们的设计。这个问题不再重现。)

在Marriott.com上

引子

许多可用性专家一直把链接新窗口打开(target=’_blank’)认为是大忌。在他们看来，新窗口打开的问题在于：

1. 用户将无法控制它在本页打开还是新窗口打开。这是不尊重用户的选择。
2. 新窗口打开使任务栏更加地拥挤。
3. 用户更加期望新页面在当页载入。
4. 新窗口打开是“后退”按钮变得不可用。

实际上，在Neil Turner的文章中提到，以下情况可以打开新窗口：

1. 链接指向一个文档(PDF,Word文档等)
2. 链接指向一个大图片，需要一定时间来下载。
3. 链接指向一个需要打印的页面(这种边缘情况都被扯进来了-_-|)

SmashingMagazine补充其他的情况时

说还有：

1. 当页加载可能打断一个正在进行的进程。
2. 链接是指向一个帮助。

其实，我认为，总结一下他们说的只有两点。也就是以下两点的情况下，可以打开新窗口：

1. 链接指向一个需下载到本地或者打印的文件(通常是非HTML的)。这里就包括了pdf, doc, mp3, 需打印的文稿等等。
2. 当页加载可能打断一个正在进行的进程，或者使之不能完成。例如需要前后对比的帮助；正在填写表单时，用户想看看隐私条款等等。

其他的可用性问题和信息构架

新窗口打开在体验上来说会加长用户认知上的等待时间。同时新窗口打开是一种弹出方式，它：

• 可能是以新Tab的方式打开。那么这个Tab可能没有被主动激活，将会需要用户主动激活该Tab才能发现刚才点击的页面。
  
  (IE7里，如果用户不勾选“当创建新选项卡时，始终切换到新选项卡”这项，那么使用javascript打开的新Tab将不会被激活。)
• 可能是以新的浏览器窗口的方式打开。那么如果这个窗口没有能被自动最大化，那么将会需要用户手动最大化。
• 过多的新窗口将需要用户花费更多的时间维护各窗口。

新 窗口打开确实会影响可用性。但这个问题常常并不在于打开新窗口本身。而在于更下一层的信息构架。国外的网站结构相对简单地多，任务流程清晰。所以很少使用 到新窗口打开。新窗口打开的使用大部分是使用在出站链接上，避免用户流失。国内网站通常结构相当复杂，没有固定、清晰的任务流程。在非线性的任务流程情况下，需要考量是否使用新窗口打开来弥补信息构架的不足。

新窗口打开弥补了导航的不足

即使如此，打开新窗口的对于导航的好处却没有被人们所广泛发现。我们来看看在IE7中，从首页的促销点击直到进入某一个商品Detail页的过程。

第一步，首页上点击某促销广告(弹出新窗口，出现产品List页面)；第二步，产品List页面上点击某产品(弹出新窗口，出现商品Detail页面)。

所有点击均弹出新窗口。我们回到IE7的Tab上，看看每一步点击後，Tab有什么变化：

其他的琐碎

另外有两点也不容忽视。

第一点是关于我国的国情。中国人的所在社会环境信息更加拥堵。导致中国人的信息承受能力会比西方互联网用户强。这将使中国的互联网用户：

• 能容忍单页面下更多的信息量。
• 同时能容忍更多的页面打开。
• 良好的信息构架对于中国互联网用户的有效性相对于西方效果更不显著。

除 此之外，第二点，对于览器后退按钮的问题，我同时认为：我国互联网用户相对于国外用户来说对于计算机认识水平要求更低。这就造成我国用户更容易理解并想到 关闭按钮的点击而不是后退按钮。在实际中，也发现在国内用户比国外用户更不会去点击后退按钮(此为经验，无数据支持)。

最后

交互设计师很多时候其实是在权衡各种各样的因素。从商业诉求到用户目标，从可用性到审美学。

在设计原则上或曰：”应该让用户对他们正在交互的界面有控制权。” 亦或曰：“应该提供Good default，减少用户控制。”

看起来，这些是矛盾的。

根据第一条，极端地，我们应该设计一个链接新窗口打开设置的功能，以便能让用户选择控制链接是否在新窗口打开。

根据第二条，我们应该为用户设想好了每一个链接是否在新窗口打开。并默认设置好它。

对于用户来说第一条定理不一定永远是对的。你把所有的界面控制都抛给用户，实际上是在做一个高可定制化的界面。有时不如使用Good default，也许更好。事实上，第一条是送给专家用户的，第二条是送给新手的。

如何平衡他俩的关系，就是我们交互设计师的职责。

最后的最后，一定记住，回到用户中间去。在我做的一些可用性测试和访谈中发现，新手和中间用户在点击新窗口打开的链接时，并未表现出明显的不理解、沮丧或是挫败。

本文同期发表于油茶会上

Facebook的新改版简直做了重大调整，整个界面流基本重写。最大的特点莫过于大量应用Ajax，大量减少了页面跳转。另外，Facebook开始在 页面内应用了多层级的导航。Facebook的层级Tab导航：其实我很少见到两级的Tab，更别说这种三级的了……用了三套样式来表达同样一个 “Tab”概念。

新版Facebook第一次登录就可以看到许多首次使用提示。提示这部分我们以前有给大伙儿提到过，但是，这次Facebook将点击展开应用在了提示的气泡上，确实是个创新的设计。

Facebook的编辑个人资料页面的交互也蛮有意思的。改版后的编辑个人资料页面做成了可关闭的面板(Closable Panels)。更进一步的是，点击面板的标题让面板展开的时候，Facebook帮你移动了滚动条。起初觉得有些突然，使用了几次，也就渐渐感觉习惯了。(注意动画最后几秒，点击完后面板会滚动) Facebook改版后的撰写日志(Write a Note)功能应用了相应式展开(Responsive Disclosure). 最开始，提供给用户最简单的输入，仅包含标题(Title)，正文(Body)。

当用户点击More Option(更多选项)后展开日志中提到的人(In this note)。

当用户继续点击Add photos(添加照片)后跳转页面，展开了全部输入项。不过我有个疑惑，Facebook用了Add photos这个文字来描述展开全部输入项这个功能是不是有些不妥(不过这样的文字确实符合更多数用户的工作流)。