Archive for the ‘用户体验’ Category

符合国情的链接新窗口打开

引子

许多可用性专家一直把链接新窗口打开(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有什么变化:


大家可以看到,就像面包屑一样,Tab这时候提高了这样的信息:

  1. 你从哪来?
  2. 你的行径路径如何?
  3. 你现在在哪里?

明显地,用户并不是依托类目的路径点击进入该页的。这时,Tab就像一个动态的面包屑,弥补了网站本身靠类目组织的面包屑的不足。

其他的琐碎

另外有两点也不容忽视。

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

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

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

最后

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

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

看起来,这些是矛盾的。

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

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

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

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

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

Facebook新界面

本文同期发表于油茶会

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这个文字来描述展开全部输入项这个功能是不是有些不妥(不过这样的文字确实符合更多数用户的工作流)。

小谈映射和启示

映射就是控制装置与其对应的动作和效果之间的关系。控制装置与效果之间关系良好的映射会更方便使用。
如果你看过《设计心理学》《About Face》等等,你会发现,几乎所有的交互书籍都会提到映射。最常见的例子莫过于燃气灶。例子还有如:开车方向盘向左,车就向左。
我们来看看其他的例子。
这是杭州的机场大巴上顶部控制器。它控制了四项功能:顶灯、空调方向、请求服务、请求停车。


好,现在问题来了:
问:左上角的红色顶灯按钮是控制那盏灯的?
答:我不试,我绝对不知道。
对比飞机上的顶部控制器。可以发现,使用者很容易将某个顶灯控制按钮与相对应的顶灯联系在一起。


飞机上的顶灯控制钮就是利用了邻近原则实现了映射——通常认为紧挨一起的元素比远隔的元素关系更紧密。
对于机场大巴上的顶灯控制器,我建议可以这么改进,将两个顶灯的按钮分别安排在左下和右上。这样就完成了良好的映射。

启示是认知心理学家James J. Gibson提出的理论。它指 the actionable properties between the world and an actor (a person or animal)。
在设计中,Cooper说“启示”专指“我们认为对象能够做什么,而不是它实际能做什么”。一个按钮就要像一个按钮,用户知道可以点击,点击表示行为;一个链接要像一个链接,用户知道可点击,点击后页面跳转;一个输入框就要像一个输入框,用户知道这里能输入……
好,回到机场大巴上顶部控制器。
问:圆心的那个“按钮”是干什么的?
答:
圆心的那个压根不是按钮!
但是确实中间那“按钮”的样子和其他的按钮高度类似。猜想设计师一定是觉得中间好像空了点什么,于是画蛇添足加上了它。

同样,经过认真设计的飞机顶控还有很多可圈可点的运用启示的地方,例如它能够将灯和空调口在外观上明显区分开来,而大巴上,设计师看似巴不得他俩长得一样。

搜索过滤器

本文同期发表于油茶会

 

最简单的搜索引擎不过是一个输入框,用户输入关键字。有的搜索引擎(例如谷歌)支持使用一些语法来控制搜索参数,例如逻辑控制:和、或、非等。

后来采用了过滤器(Filter)的搜索,给用户带来的更好的体验。用户甚至什么关键字也不输入,也可以找到需要的结果。

例如淘宝的搜索过滤器:

Tao Bao

AJAX技术的引入,给搜索过滤器带来了更好的体验。集合了AJAX技术后,用户无论是更改关键字还是过滤条件,搜索结果都根据用户输入实时变更。 应用过滤器可以不用跳转页面,节省了用户的时间,同时,可以很好地允许用户随时修正过滤条件,甚至预测搜索结果,提高了用户的搜索效率。我们称之为动态过 滤器(Live Filter)。

来看看Unspace所做的一个实验产品:

Upload

来看看我们熟知的谷歌:

Google

还有Apple.com,他们常常站在用户体验的前沿:

Apple

值得注意的是Apple.com的搜索框有个小细节,当系统在进行AJAX动态获取的时候,搜索框最右边的小叉(清除搜索框内容)变成了加载指示(Loading indicator)。书有云:时时刻刻告诉用户计算机在做什么。

iTunes右上角搜索框输入文字后,歌曲列表也是实时变化的:

iTunes

拖拽

本文同期发表于油茶会

大部分软件的拖拽动作都有handle。鼠标在handle上,鼠标指针会有所变化。
更多的关于拖拽的设计模式,请参考雅虎的Design Pattern:
http://developer.yahoo.com/ypatterns/pattern.php?pattern=dragdropmodules

对于具有固定方向的拖拽动作,大家喜欢使用凹凸不平的表面感来表示隐喻。有的使用双向箭头。

windows.png
Windows XP

excel.png
Excel 2007

facebook.png
Facebook.com

onenote1.png
OneNote 2007

其他的拖拽方式就会像这样:

onenote2.png
One note 的控制柄在左上方。

www.backpackit.com 的拖拽的做法我觉得相对完备。

backpackit11.png
鼠标悬浮前

backpackit21.png
鼠标悬浮在可拖拽对象上

backpackit4.png
鼠标悬浮在handle上
backpackit4.png
拖拽时

两个IT民工的对话

A:什么时候搞辆车来玩玩呢

B:先把首页做了吧

eBay的广告“本地化”

打开Techcrunch页面,看到右侧广告赫然出现中文。点击才知道是eBay的兜售广告。牛逼之处在于,它按货币兑换比率,将美刀转换成了人民币。

可惜……

ad

语录 – 微软和卓越

微软

我的live space马甲收到了spamer发的spam,于是我向微软报告这一情况。Windows Live Spaces技术支持中心给我回复的邮件原文如下:

尊敬的xxx客户,您好!

感谢致信Windows Live Spaces技术支持中心。很高兴为您服务!

我们仔细阅读了您提供的详细信息,了解到您目前的问题是收到骚扰信息。我们非常理解该问题给您造成的困扰,非常感谢您提出的反馈。我们已经将您发现的问题转发给产品组,产品组会仔细地审阅该问题并在以后的版本中加以修正。再次感谢您抽空来信告诉我们该情况,这将有助于我们进一步改进我们的产品及服务。目前我们建议您手动删除这些信息,对于由此给您带来的不便,我们深表歉意。

很好,本地化做得不错。再写得生动一点就赶超八股文了。

卓越

今天早晨,卓越给我发广告,标题是

这个女人节,参加Amazon.cn购物派对,享打折狂欢

查了资料

在一些女性对“三八妇女节”这个名称备觉不舒服之际,湖南籍全国政协委员张晓梅在个人博客上透露,她将在此次“两会”上递交提案,建议将“三八妇女节”改成“三八女人节”或“三八女性节”,让这个节日符合现代女性的美好心愿。她还表示,这个提案得到了韩美林、张抗抗等数十位委员的响应和支持。(据《三湘都市报》)

用户在做些什么?(下) What Users Do (Part C)

相关链接:

用户在做些什么?(中) What Users Do (Part B)

用户在做些什么?(上) What Users Do (Part A)

9. prospective memory 未来记忆

"I’m putting this here to remind myself to deal with it later."

“我把它放在这里来提醒我自己等会儿来处理它。”

In many cases, that kind of hands-off flexibility is all you really need. Give people the tools to create their own reminder systems. Just don’t try to design a system that’s too smart for its own good. For instance, don’t assume that just because a window’s been idle for a while, no one’s using it and it should be closed. In general, don’t "helpfully" clean up files or objects that the system may think are useless; someone may be leaving them around for a reason. Also, don’t organize or sort things automatically unless the user asks the system to do so.

在许多情况下,那种放手让用户干的灵活性是所有你确实需要的。给他们能够创建自己的提醒系统的工具。别去尝试设计一个自作聪明的系统。举例来说:别自以为一个闲置很久的窗口是没人要用的应该被关闭。一般来说,别“帮”用户清理那些系统认为可能没用的文件或者对象;某人可能估计留在那儿的。还有,别在用户没要求系统重排事物的时候自动重排。

10. streamlined repetition 流线型地重复

"I have to repeat this how many times?"

“我还要这样重复几遍?”

In many kinds of applications, users sometimes find themselves having to perform the same operation over and over again. The easier it is for them, the better. If you can help reduce that operation down to one keystroke or click per repetition or, better, just a few keystrokes or clicks for all repetitions then you will spare users much tedium.

在许多程序中,用户优势发现他们要一次一次地做同样的操作。这样的操作越简单越好。如果你能帮助将操作减少到一次击键或者一次单击,很好,如果要敲击几个键或者每次点击,那么你会让用户感觉乏味。

11. keyboard only 仅使用键盘

"Please don’t make me use the mouse."

“请别让我用鼠标。”

Several standard techniques exist for keyboard-only usage:

关于仅键盘试用的一些标准的技术:

  • You can define keyboard shortcuts, accelerators, and mnemonics for operations reachable via application menu bars, like Control-S for Save. See your platform style guide for the standard ones.
    设置快捷键、加速键

  • Selection from lists, even multiple selection, usually is possible using arrow keys in combination with modifiers (like the Shift key), though this depends on which platform you use.
    方向键导航

  • The Tab key typically moves the keyboard focus the control that gets keyboard entries at the moment from one control to the next, and Shift-Tab moves backwards. This is sometimes called "tab traversal." Many users expect it to work on form-style interfaces.
    Tab键导航

  • Most standard controls, even radio buttons and combo boxes, let users change their values from the keyboard by using arrow keys, the Return key, or the spacebar.
    大多数标准控件,例如单选框、下拉选择框,让用户能够使用方向键、回车、空格来改变值。

  • Dialog boxes and web pages often have a "default button"a button representing an action that says "I’m done with this task now." On web pages, it’s often Submit or Done; on dialog boxes, OK or Cancel. When users hit the Return key on this page or dialog box, that’s the operation that occurs. Then it moves the user to the next page or returns him to the previous window.
    对话框和网页一般都有一个来表示完成任务的默认按钮。

 

12. other people’s advice 别人的建议

"What did everyone else say about this?"

“别人对这个怎么说?”

People are social. As strong as our opinions may sometimes be, what our peers think tends to influence us.

人是社会人。就像我们的选择有时很顽固,我们的先驱者们他们也想用新潮新趋势来顽固地影响我们。

用户在做些什么?(中) What Users Do (Part B)

相关阅读:用户在做些什么?(上)What Users Do (Part A)

6. incremental construction 逐步创建

"Let me change this. That doesn’t look right; let me change it again. That’s better."

“我来把这改了。看起来不太对;我再改改。这样好些了。”

When people create things, they don’t usually do it all at once. Even an expert doesn’t start at the beginning, work through the creation process methodically, and come out with something perfect and finished at the end.

当用户创建东西的时候,他们呢常常不会一次性做完。

 

7. habituation 习惯

"That gesture works everywhere else; why doesn’t it work here, too?"

“这玩意儿别的地方都是那样的;为什么这里不是?”

When one uses an interface repeatedly, some frequently used physical actions become reflexive: typing Control-S to save a document, clicking the Back button to leave a web page, pressing Return to close a modal dialog box, using gestures to show and hide windows, or even pressing a car’s brake pedal. The user no longer needs to think consciously about these actions. They’ve become habitual.

当用户重复地使用某个界面是,一些经常发生的物理操作就变成了反射:ctrl+s保存,退后,模态对话框中按回车关闭对话框。用户对这些操作不假思索。这些成为了习惯。

 

8. spatial memory 空间性的记忆

"I swear that button was here a minute ago. Where did it go?"

“刚才这按钮确实在这儿啊。跑哪儿去了?”

When people manipulate objects and documents, they often find them again later by remembering where they are, not what they’re named.

当人们使用对象或者文档的时候,他们是通过位置再次找到他们,而不是通过他们的名字。

Along with habituation, which is closely related, spatial memory is another reason why consistency across and within applications is good. People may expect to find similar functionality in similar places.

和与空间性记忆联系紧密的习惯一样,它俩都能解释为什么贯穿整个程序的一致性是好的。人们可能希望在同一个地方发现相似的功能。

Also, this is why changing menus dynamically sometimes backfires. People get used to seeing certain items on the tops and bottoms of menus. Rearranging or compacting menu items "helpfully" can work against habituation and lead to user errors.

这就是为什么动态地改变菜单有时候事与愿违。人们习惯了某个选项在菜单的顶部或底部。为了“帮助”用户而重新安置或者压缩菜单项会对用户的习惯背道而驰,并让用户出错。