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

搜索过滤器

本文同期发表于油茶会

 

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

后来采用了过滤器(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购物派对,享打折狂欢

查了资料

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

为新手隐藏的操作们

本文同期发表于油茶会

buzzword.com 的文档列表

buzzworddoclist1.png

初始状态

buzzworddoclist2.png

鼠标悬浮再文档名上

buzzworddoclist3.png

鼠标悬浮再文档名后,出现“操作”按钮

buzzworddoclist4.png

点击“操作”按钮,出现操作菜单

buzzword.com 在某行上添加评论

buzzwordaddcom1.png

按钮在鼠标悬浮前

buzzwordaddcom2.png

按钮在鼠标悬浮后出现对该按钮的提示。同时扩大了点击区域(红色区域均为可点击区域)。

backpackit.com 对某个项目的操作

backpackit1.png

鼠标悬浮之前

backpackit2.png

鼠标悬浮后,在项目的左边出现操作区。

powerset.com 上传用户头像

powerset1.png
正常
powerset2.png
鼠标悬浮在头像上,出现“Upload a new profile photo”(上传新的头像)

powerset3.png

鼠标点击“Upload a new profile photo”即可上传头像。

tvdeep.mnet.com

采用silverlight技术一个韩国视频网站。他的视频播放器的时间轴滚动条是一个进步。进步是:只有鼠标悬浮在视频的时间轴上时,才会出现控制柄。

mnet1.png

mnet2.png

土豆也有相同的设计

tudou1.png

tudou21.png

关于帮助提示的创新设计

同期发表于油茶会

首先,包总向大家拜年啦!新年新气象,希望大家一起努力,要紧密团就在杨掌柜周围,以油茶为中心,高举“有闲必来,有贴必看,有看必顶”理论的伟大旗帜。好,我们直接切入主题:

上下文关联帮助(Context-sensitive Help)近几年在互联网上的应用开始广泛。举个例子:
tip_facebook.png
这是facebook.com创建Friend List(朋友列表)的第二个步奏的截图。在创建朋友列表的时候每个步奏都有明晰的关联帮助,让新手学习起来十分方便。

可是新手一旦晋级为中间用户甚至专家,这些提示信息对他们来说就是妨碍。在www.sixtyone.com 上,初次使用的用户界面上也会有关联帮助(图右侧的两个黑色长条就是啦)。黑色长条的右边有一个关闭按钮,一旦用户认为他已经学会,即可永久关闭这个烦人的帮助。
tip_61.png

是的,你一定要问,如果用户关闭之后他又如何再次打开呢?www.powerset.com(一个以自然语言技术处理网上信息的搜索引擎) 是这么做的,他的右上角有一个Need Help?(需要帮助吗?)按钮,点击后,界面就进入了关联帮助模式。
tip_powerset.png
同时,在Need Help按钮左边,powerset还另外提供了一个Query Examples(查询范例)按钮,它用真实的例子来示范该如何使用。真是一个不错的主意!

新的历程开始 – 油茶会

大家都看到我博客右栏头像下的介绍系“伟大的交互设计菜鸟,XHTMLer和摄影匠”。其实俺一直或者立志成为一个好的交互设计师。时不时也有发表一两篇关于用户体验的博文的冲动,但一直没有兑现。

上周Ryana姐姐喊我加入油茶会(www.uxstudy.com)。大喜。终于开始了我撰写关于用户体验的文章。

今后,我尽量在每周二以笔名“包总”将关于创新的交互细节的收集奉献给同行们。这也将是一个考验。

我的第一篇博文在这里:周二茶闻…Jessie:李少来了,包总跟上!

希望大家多多批评~