2009年3月6日星期五

[转]10个可用性噩梦

有时候你仅仅想找到你想要的信息,保存它然后继续,但是你却不知道该怎么做。可用性噩梦总是不时的出现,这不是例常情况,而是日常工作中常常出现的;通常几乎每次在你往Google里面输入关键词时。在这篇为什么获奖的网站这么可怕文章中,Gerry McGovern提出的“光鲜的表面赢得奖项,真正的内容赢得用户”不无道理。不管你在使用什么设计,不管你提供什么功能,如果你的访客不明白如何从A点到B点,他们将不会再用你的网站

几乎每一个专业的设计(除了特殊的设计展示,比如说,大型宣传册)你需要提供你的访客:

  • 一个清晰、不言自明的导航
  • 精确的文字介绍
  • 搜索功能
  • 用户可见的、深思熟虑的网站架构


这就是说你需要遵循这些可用性的基本原则原则和常识,你需要和你的访问者沟通,留住你的用户,对吧?

在这篇文章中,我们来看看几个在设计功能型和可用型网站时你应该避免的噩梦。文章的结尾你还会发现你或许应该知道的8个可用性检查点。

1. 隐秘的登入链接

Backpack, 37 signal旗下最实用的组织管理和项目管理工具之一,在这里详细准确地解释了这个工具是用来做什么、怎么用以及它能提供的功能特征。但是,当你注册它之后,你可能要花费好几分钟去弄明白怎么登入使用它

这个“Log-in”链接(提示:在黄色色块中)字体应该更大些,或者用图标链接代替小的文字链接。每个已注册用户都有一个他/她的个人定制化页 面,但是新注册的用户却要花费不少时间弄明白该怎么登入。Lee的评论说,“一个花了时间注册一项服务的用户是会花一些时间去弄明白怎么登陆的。”好吧, 但是为什么他们应该花这个时间呢?为什么不把登入链接放到用户更易看见的地方?这是用户合理的要求。

2. 弹出式展示窗口

现在几乎每一个新式网页浏览器都使用弹出框阻止程序来过滤掉弹出框、广告框和被认为是广告的网站深一层的内容。Firefox, Safari, Opera 和IE浏览器都默认了这项功能。因此,使用弹出框来展示网站的主要内容不是网站设计者最合理的做法。

didas网站设计团队似乎坚信弹出窗口是一个极具创意的直击目标客户的方式。然而大部分用户永远也不知道ImpossibleStory.com网站里有什么,我们都懒于去撤销网页浏览器的弹出框阻止程序。

3. 拖曳代替垂直导航条

这个技术并不是真的噩梦,但是经常出人意料的成了噩梦,实际上,它可能会成为未来的技术趋势。拖曳,开始使用在pdf文档中,现在也适用在网站中。Fichey创造了一个基于flash的方案。这是一个有趣的接入方法,但是你无法对网站特定的部分加注标签,这也是基于flash的方案面临的典型问题。

网站开始页面上的这个介绍信息框向用户介绍了这个新的导航。这个工具显示最近热门的社会媒体网站。顺便再提一下,这个工具里面的链接并不起作用,很显然地,它显示的画面是以图片格式保存和嵌入的。

4. 看不见的链接

用户想要知道他们现在在哪,去过哪以及接下来要去哪。如果网站设计者不能通过合适的方式向用户展示这些信息,用户在浏览网站时会有严重的困惑。Real Player 曾有段时间使用了很多看不见的链接。看下面这张图和标签(最初是Trenton Moss创建的),你能认出哪些是可链接的吗?

1, 3, 4, 6, 7 and 11 是可链接的,而2, 5, 8, 9 和 10 是没有链接的。

5. 视觉噪声

一般来说,越少越好。视觉噪声几乎是大网站设计者必须克服的最典型问题之一。并且这个问题还极其容易误解,就像Overstock显示的:

附:在这个网站哪个是链接哪个不是链接也不是很清晰,Overstock同时使用了多种不同的链接显示和鼠标浮动显示效应。是不是链接?没准你会发现弄清楚它很有乐趣!

6.死胡同

你可以通过不同的途径向你的访问者介绍网站服务。Scriblink用一个弹出框和Java小应用程序欢迎他的访问者。访问者必须提供一些输入,才能启动浏览网站。

什么都没有作用:

  • 点击“取消”没有反应
  • “OK”也不行
  • 全屏模式没有反应
  • 点击别的地方也没有帮助
  • 关闭浏览器窗口不能正常工作
  • 点击问号帮助不起作用

不公平啊,真的。我们只是想看看这个工具能做什么…

7. 内容模块相互层叠

大网站在应用一些大的flash影片时,一个典型的问题出现了,网站的导航被隐藏了。无论用户可能想要浏览哪,他们已经没有选择了。

Yahoo.com也有同样的问题

8.动态导航

看似一个可用的网站导航,很快就会显示出它最糟糕的一面。不管你将鼠标指向哪,辅助图片滑上滑下,改变了你点击的链接。在下面这个图片,点击链接“history”,但是它移动了,噢,不,我的点击跑到了滑动出来的图片链接上了,并没有链接到我想要浏览的那个页面。

这种动态效果出现在同时具有左、右导航菜单的网站。访问者可能需要一些时间来了解正在发生的事情。一旦他们了解了这种设计,这种导航也不是很难处理。

Kabe243也是同样的设计想法。附:视觉噪声最大化!

9. 下拉菜单

下拉菜单对web开发者是有用的,可是却总是让用户烦扰。如果你是一个设计师,隐藏导航项目到一个下拉菜单,你可以为自己留下大量的垂直空间。但是用户必须将鼠标准确定位到他想要看的那部分,这样对于用户来说,是不可用的。

然而,情况可以变得更糟。如果不同层级的导航间隔太大(比如说有的导航项目文字太多),用户就必须水平移动鼠标。如果鼠标移动目标改变到垂直方向,用户不得不重新开始。

2AdvancedBrita.net是这种可用性噩梦的很好的例子。

注:我们花了很大的功夫截到这个图

10.讨厌的图片

有时候你只想阅读网站上的内容,可是你却无法聚精会神,为了对抗盲目的旗帜广告,这些动画广告通常是.gif图像或者Flash影片形式的。当这些图片在内容周围不停地闪烁,你是很难把重点放在阅读上的

Digital Web Magazine,一个极好的在线定期阅读杂志,在杂志每篇文章的左侧却有令人烦扰的动画广告。

未来噩梦?

移动鼠标替代点击鼠标


Dontclick.it, 一个很有趣的交互设计实验,探讨了一个clickfree的环境,一旦用户离开依赖点击的习惯,用户和交互的界面会如何改变,发生什么改变?

在这个界面,你不会发现任何按钮。你用另一种方式去导航网站内容,通过移动鼠标到你感兴趣的网站区域。这种听起来很有趣的方式可能很快会成为一个可用性噩梦,只要想象下网站用户试图在新的浏览器窗口打开外部链接,当然想象这些很有趣,用户到底如何做到的,比方说,打开一个链接列表在新的浏览器选项卡。(更新澄清为何我们会在此提到Dontclick.it

8个你应该意识到的可用性检查点

  • 不要使用弹出式窗口

弹出式窗口打断访问者的浏览会话,并且要求访问者的即时反馈。请尊重你的访问者。

  • 不要改变用户的窗口大小

和反对弹出窗口持有的论点一样,有的浏览器,比如IE浏览器,保留了浏览器尺寸将其用来进一步的浏览器会话。就像Ben Bodien评论说,“这是单纯的不体谅地认为自己比用户更清楚怎样配置用户的软件环境。”

  • 不要使用太小的字体

试用太小的字体,长文章更难阅读,而阅读简短的句子读者需要更多的时间,因为它还包含链接、按钮、表格、搜索框和其他元素。好消息,在web2.0情况相反。

  • 不要使用不清晰的文字链接

链接必须是准确的,并能链接到它们描述的目的地。避免模糊的链接描述。

  • 不要有死链接

已经有太多的死链接了,为什么还要将你的访问者指向死胡同呢?

  • 每个页面最多只能有一个动画

如果闪烁的图片广泛散步在网站,将使访问者极其难以集中在一个单一的网站元素。让你的访客能有机会认知你的网站内容,使用动画广告时,不要将它们与您的文章放到一起。

  • 让访客很容易能联系上你

也许你不想要与外界保持联系,但如果访客想与你取得联系,但是找不到任何联系信息,你会失去他们的兴趣和信任。对于在线购物网站,这尤其是灾难,对于其他的情况,这至少也让你失去了一次机会。

  • 你的链接打开在一个窗口

访问者想要控制一切发生在他们浏览器的事,如果他们想要打开一个链接在新的窗口中,他们会自己调整。如果他们不想,他们就不会。如果你的链接打开在一个新的窗口,那么你就做了一个不该让你决定做的事情。

出自:http://www.yeeyan.com/articles/view/53948/31944

[转]用户体验的模型

作者:idliulei | 发布: (网友)稻草 | 时间:2008-10-22 18:48:00 文字大小:- +

用户体验相关从业人员比较擅长画Concept Map,所以关于用户体验有很多的Conceptual Model,

介绍其中几个比较著名的模型:

1. 5E模型

Whitney Quesenbery’s 5E Model by Whitney Quesenbery

有效性:表明软件是可用的,而且帮助用户准确地实现他们的目标。

效率:效率是所做工作的速度(与精确性要求相关)。

吸引的:关于这个的简单定义就是一个要用界面所带来的愉快、满意或兴趣程度。

容错:容错包含产品防止错误的程度和帮助用户从错误出现中恢复。

易学:易学和产品如何支持首次引导和更深度的学习相关。

中文解释来源>

2. 信息架构3大饼


The Three Circles of Information Architecture by Peter Morville

情景:商业目标、资金,政治,文化,技术,资源和限制

内容:文档/数据类型,内容对象,数量,现存架构

用户:受众,任务,需求,信息搜寻行为,体验

详见 《Web信息架构》

3. 用户体验的要素框架


The Elements of User Experience by Jesse James Garrett

定义了Web开发中关于用户体验的关键要素。

在从抽象到具体的过程中,还将分为应用和信息两个部分。

详见《用户体验的要素》

4. 用户体验蜂窝

The User Experience Honeycomb by Peter Morville

有用。作为参与者,我们需要查看产品和系统是否有用,有没有更有创造性的想法使方案更加有用。

可用。网站的可用性是必要的,但还不足够。

期待。情感设计的各个方面,图形、品牌和形象等都是有独特价值的。

可寻。导航与定位非常重要,用户可以找到他们需要的东西。

可及。即使网站是高效的,我们也要为障碍人士友好。

信任。有很多因素影响用户相信和信赖一个网站。

价值。对非盈利性网站来说,网站要为投资人贡献价值并提升客户的满意度。

[转]用户体验设计? - 是什么不是什么

一直努力的做用户体验的东西,但有时候也很郁闷,犯迷糊。看完这个文章很多东西都清楚了,值得阅读。
--------------------------------------------------------------------------------------------------
作者:Heidi | 发布: (编辑)稻草
转自:http://heidixie.blog.sohu.com/111465490.html

从我开始步入这一行以后,我就需要不断向关心我的人解释我正在做什么。

"你是做什么的?"

我长吸一口气,说:“我做用户体验设计”。
我能预感到他们接下来的表现:疑惑的表情,思考的表情,然后,“啥?那是做什么的?”
传统行业当然对于工业设计、产品设计可能会有认知,而不清楚这个“用户体验设计”到底是什么新东西。
即使是IT界,若非直接从事UED或者与UED打交道的人,也多半会迷惑。
阿里巴巴的客服美女就有一次瞪着美丽的大眼睛,让我解释清楚。

长吸第二口气:“我们致力于让网站变得更加容易使用,通过访谈或观察发现并解决用户使用中可能出现的一些问题……”
通常我会被两种截然不同的理解打断:
“哦,我明白了,你们是设计网站的。”
“哦,我明白了,你们是做咨询的……”
或者其他的词语,比如“UI”,"界面",甚至与我们的搭档:产品经理混淆起来。

虽然经过第三口长气,第四口长气,加上实例与对比,我通常也能够将问题解释得很清楚,但是我越来越害怕下一个同样的问题,为了不重复解释,我越来越想把这个问题用“写”的方式解释清楚。
而在我试图去写的时候,也发现了更多我原本没考虑到的问题。因此,文章就长了一些。。。

一. 从“网页设计”到“UI”,到“UED”和“UX”.
2005年, 在我刚从出版业到IT界的时候,那时,我是网页设计爱好者。要学习这个领域,去google搜索“网页设计”就可以搜出很多教程。还有“精美网页模版”, 当时的教程一般会围绕网页设计三大剑客(Dreamweaver+flash+Fireworks),动态网页设计指南,HTML和css之类。于是慢慢 的,我变成了网页设计师——其实,被很多人叫做“美工”。

2006年,一个新的名词进入我的领域。它叫做UI. 也许它存在很久了,但是恕我孤陋寡闻,我才认识到,一个更好的代名词可以取代我讨论的网页设计。因此我去了解这个UI是什么。UI=User interface. 用户界面设计,好,professional,而且含义要比网页设计大多了,软件界面也是我感兴趣的一个方向嘛。因此,为了虚荣感,我在必要的场合会向别人自我介绍:我界面设计师,我是做UI的。那 时在我看来,UI和网页设计的区别,除了“专业好听”,大抵是也因为当时“网页设计”已经被一些培训班搞臭了,摸几天的dreamweaver,套几个模 板就声称自己是网页设计师了,没有任何的理念在其中。因此,有一些不甘“堕落”的“原网页设计师”纷纷抛弃原称号,走上UI之旅。那时,优艾网多热啊。它 被黑客黑的一段时间中,我还挺郁闷的呢。

同样,我也是靠对“UI”的理解,进了一个新的公司。面试的时候,当老板问到对UI的理解时,我的台词似乎是:“UI在很多人理解中是界面,是静态 的界面展现,比如颜色、布局,质感,button的位置等,而我理解的UI是一种动态的交互行为的依托,除了界面,用户如何去操作,界面如何去响应,也是 UI设计必须要考虑的内容。并且,在我看来,视觉之外的东西有时会更加重要。”——在老板的颔首中,我忽悠进去了。——但是不是做UI,是做动画……然后是策划……和界面越来越远。

2007年——慢慢的,新的名词涌现了,老的名词逐渐死在沙滩上,这个时候谁再叫我“网页设计师”,我就和谁急!

首先,是UCD. 逐渐听到很多UCD,UCD是什么?我也很好奇,继续google。原来是user centerd design。以用户为中心的设计,是一种理念?还是是一种方法?看来是一种新的理念,配合着web 2.0风潮出现了。web 1.0,单向传输,sina,sohu,163,官方网站典型。自己生产并编辑内容,用户去读去获取,不需要分享与参与。那么我们只需要规划好自己的内 容,列好目标,并尽可能多产出以满足不同需求的客户需要。一个网站每天产生300条新闻,你看几条?没关系,我都放着,不看拉倒。这三个网站有钱可以烧, 没事。可是后来,其他的网站不一定有钱有规模去自己制造内容,用户也逐渐开始想要参与、创造内容,越来越fun。用户对网站的操作性需求越来越大于阅读、 浏览的需求。

而,老话——用户是互联网行业生存的命脉。用户要玩,他又不会玩,也玩不爽,气愤走开了,我们喝西北风吧。所以,“要以用户为中心”,考虑我们想做 什么?哪些人是我们的顾客?他们需求是什么?我们如何满足其需求?满足了需求会不会就得到我们想得到的东西?——不满足用户需求我们是得不到的。

“用户”的地位日益凸显,我们开心了。
为什么呢?
最起码,开会的时候,我能够向质疑我的产品策划方案的老大说:“我们应该去找真正 的潜在用户,看他们觉得这个产品好不好……”言下之意就是:您,老板说的话,不算数了。产品好不好得让用户说了算。有一个比较漫长的教育老板和教育同事的 过程,因此第一批秉承着“以用户为中心”设计思想的人,同时也是艰难开拓的教育者。

那,2007到2008,UED,逐渐深入人心——后来,我来到杭州,成为名副其实的UED团队中的一员。我从“网页设计”到“UI设计”,然后是UED中的交互设计师。真的是与时俱进,走在时代前端。


现在在很多公司,还是保留着UI的职位和叫法。

究竟,UE能够比UI高级多少?

UI诞生之前,人们评价一个网站好不好,首先就会看好看不好看,还有那些所谓的技术炫不炫。

UI认识到,网站好看,不一定人们爱用,相反,他们可能在很多挫折中放弃。技术?真正的用户也不是去care。决定一个界面是否好的重要因素已经不 再是(最起码不再主要是)视觉效果,而是一些更微妙的东西。比如,信息布局是否重点突出,且按照用户的需求层级分布,便于用户能够快速找到相应的操作和功 能?文案是否清晰到位,不至于产生误解?用户上来明白不明白how to get started?如果遇到问题,方便不方便找到相应的帮助?界面是否有亲和力?让用户想去用(注意,而不再从美术设计的角度去强调产品的绚烂)。因为我们发现,界面也许会很光彩夺目,但是这不一定能够让用户感觉舒服想去使用。

在UI的基础上,UE走了出来。它说:UI你别想了,我觉得可以归结到一起,就是体验。用户在使用过程中体验好不好。所以,UE将“用户体验”放大,并通过自己的实践,使“体验”变成了可被设计的东西。

二. 用户体验设计(UE)可以被设计吗?

体验是个名词,是个不好说的名词。体验好不好,不好量化。这也是让无数个UED困扰的问题,因为这涉及到如何评价一个产品究竟是否成功。不过本文不 操心这个,有很多聪明的人士会用流量、CTR、粘度等指标去间接评价用户体验设计的好坏,且用户体验设计的量化标准也被很多人在研究。

人们为什么会喜欢用一个网站?

——首先,这个网站对他有价值(内容+功能,为王)。

那么,假设两个网站(A和B)提供了同样的内容,为什么人们会有偏好使用A?

A更有名、口碑更好,上手容易,易用,更好看,不经常出错或无响应。

据此,我们YY一下影响用户体验的主要因素:

1. 品牌与口碑、人气——A更有名,业内很多人推荐。

2. 流程——简单,易上手。

3. 信息布局——想找什么就知道在哪里,不用过多思考。

4. 文案——一看就明白,不云里雾里。

5. 视觉——美观、舒服。谁不喜欢好看和精致的东西?

6. 效率——不需要等待页面下载或响应,总是很快。

我们发现,用户体验是可以被设计并优化的。除了品牌、口碑、人气需要一定时间的积累外,流程,信息布局、文案、视觉、代码效率按说都应该是UED的工作范畴和职责所在。

所以说:用户体验设计的范围大于UI,更远远大于网页设计。

而现在拥有的用户体验设计部也一般划分了四种角色,分别为不同层次的用户体验负责:

用户研究员:——了解用户想用什么?潜在的障碍是什么?

致力于挖掘用户需求,通过访谈与观察,从用户的操作行为中找到网站可能存在的问题和改进方向,为其他角色的设计提供依据。

交互设计师:——让用户会用,让用户易用。

与商业需求方进行沟通(一般是PD),做任务梳理与流程规划,做信息架构,并用简单达意的线框图来说明整个产品,为后来的视觉设计提供方向。是产品战略的具体化表现。一般在这个阶段,产品定位可能还发生变化,因此用线框而不是具体的设计来表达产品是最有效率的方式。

交互设计师的重点是:商业需求理解,任务设计,流程,信息布局,文案传达,交互细节。

视觉设计师:——让用户爱用,想用。

在产品战略、定位、功能模块需求都已经既定的基础上,做视觉的加工美化,更深入传达产品的风格、理念。

视觉设计师的重点是:颜色、质感、品牌感、视觉细节。

前端工程师:——伟大的实现者。

前端工程师直接保障以上三个角色的成果具体呈现在用户面前,而相对于后台开发人员,他们的成果是直接用户能够感受到的。他们是默默无闻的一群人,但是正是由于前端工程师的开拓与创新,为交互设计师的设计提供了更多的选择空间。

举个例子:

我很喜欢office online这个下载剪贴画的设计。每当我选择了一个图片,就会有一个路径动画(注意那个中间的框框),很快地漂浮到我左栏的选择蓝里,同时左栏的数字及时发生变化。

这种及时的反馈非常有亲和力。

三. 用户体验设计是什么?不是什么?

简要总结一下:

用户体验设计不是做网站——叫成“做产品”也许更合适一些,因为除了网站还有别的也需要用户体验设计,比如手机。

用户体验设计不是做界面——还要考虑整体使用流程等。

用户体验设计不是做顾问——更重要的是做实践。

用户体验设计不是单纯做界面美化设计工作,而是为整体用户使用体验负责。

用户体验设计师为产品的整体体验负责,而用户体验好不好,只有一部分是界面的观感影响的。除此之外,还有"流程合理不合理","信息是否容易找 到","是否有恰到好处的帮助与引导",用户体验师的作品无法单纯用几个页面呈现,而是从用户一到达这个网站就开始了。可以说,文案虽然目前是PD的产出 物,但是也是影响到用户体验的至关重要的一部分,UED也需要为文案的表述是否清晰负责并提出建议。

所以,做用户体验设计师,为界面负责,更为用户会不会用,用得爽不爽、舒服不舒服负责。

四.用户体验设计师的紧箍咒

有理想(做人们最喜欢用的界面),有追求(让用户零障碍),有目标(每个细节都不能有误解)的设计师们,出场了。

我们要让“天下没有难用的界面”,让全球商人都爱用。but,心怀如此抱负的设计师,慢慢地,在现实的环境中,受挫了,消沉了,现实了,妥协了。

因为,我们发现,空有一腔设计和改造的激情,是没有用的。

要做最好的用户体验设计师,不是捧着“心理学”宝典、“交互设计”宝典,或者“用户体验××大原则”,或者熟读各种理论就可以做到的。

现实对我们要求更多……

不少设计师对自己出品的东西感觉到汗颜:我做的东西我自己都不喜欢用,但是没办法,那是商业需求以及别的限制和需求决定的。

“这个功能是有点莫名其妙,但是……是产品经理要求加的。”

“我也知道会让用户迷惑,可是……法务部门强烈建议必须要加上这个……”

“我没办法……产品部门觉得加上这个推广条会让客户冲动点击,引导他发布更多的产品……”

“……”

受挫了吧?没成就感了吧?做了一年发现没几个自己真正满意的作品吧?有时会感觉无助和无奈吧?

想做优秀的用户体验设计师,尽可能为“用户体验”摇旗呐喊。

但是,要做能够生存下来的优秀的用户体验设计师,是一门更加高超的技术和艺术。

左是用户,右是商业,用户体验设计师需要像走钢丝一样,保持左右平衡。

用户体验优化是我们追求的自由,而商业需求是我们的紧箍咒。

甚至,当商业需求与用户体验发生冲突的时候,用户体验设计师有时不能不做痛心的取舍——用户体验让位于商业,或者屈尊于技术可行性。

这就是用户体验设计师不得不面对的现实,不为此沮丧与抱怨,而是承认有镣铐并勇于戴着镣铐跳出尽可能美的舞步。

接下来的内容,已经超出本文的标题范围,但是不想另开一篇,写在这里做记号:

做生存下来的优秀的用户体验设计师,需要你:

1.一定要了解产品背后的商业背景、限制,读懂产品经理的BRD,FBRD,知道限制是因为什么。

2.将产品规划中那些你认为是有害于用户体验的点抽取出来。

3. 不纠结于具体的需求而去挖掘需求背后的目的。

——产品经理提出一个需求,比如:我们要在这里加个醒目的翻页条。你觉得不合理,因为你认为用户的主要目的是去看本产品的描述,将翻页条插在此产品的描述中间,可能会造成迷惑也会将用户引导到别的产品上去,让他没有方向感。

与其直接说以上的理由,不如先问他:“为什么要这么做?”

如果他本身的目的就是有问题的,可以去探讨目的。如果目的是好的,那么去研究有没有体验更好的办法去同样达到目的而不损害用户体验。比如,让用户绑定手机,可能是用户不愿意的,但是商业需要,那么我们也尽量让用户愿意绑,不知不觉中绑,绑得爽......

有时,目标是既定的,但是任务是可以简化的。比如,同样是"认证"的商业目标,有的设计用3步,平均花费用户5分钟,有的用2步,平均花费用户时间2分钟,一种让用户反感和抵触,一种方案让用户喜欢去用------这就是用户体验设计部价值体现之一。

我只能说,由于,商业需求与技术的限制,我们用户体验设计的空间被大幅度缩小。但是即使就是这么小的空间,也大有可为。有时,限制也是好事,它让我们更加有方向感。



2009年3月2日星期一

[转]用户体验设计十大常见误区

原文:10 Most Common Misconceptions About User Experience Design

原作者:Whitney Hess;译者:UCD翻译小组Weakow Wang

Article copyright by Whitney Hess.

Whitney Hess版权所有。

当我告诉人们我是一个用户体验设计师时,常常会得到迷惑的眼神。于是我试着赶紧结束这种状况,告诉对方我是在让东西更容易使用,人们也爱用。这是被我重复多遍的一句俏皮话,但这句话太过简单,无法给我带来任何好处。

“用户体验”(user experience,UX)这个术语已被广泛流传,但很多企业都没弄清楚它到底是什么以及它对企业自身的成功有多重要。

我问过一些UX领域最有影响力并被广泛尊重的从业者,对我们所做工作的最大误解有哪些。结果形成了一份“十大”名单来揭穿这一秘密。读一读,学一学,并身体力行。

用户体验设计并非……

1. …用户界面设计

将“用户体验”和“用户界面”(user interface,UI)混淆并不罕见——毕竟与用户交互是体验数字产品和服务的重要部分。但是UI只是问题中的一小部分。

Adaptive Path创立者之一、总裁Peter Merholz说:“界面是用户体验的一个组成部分,用户体验还包含更多内容。”Yahoo!设计模式库(Yahoo! Design Pattern Library)负责人Christian Crumlish解释道,设计“并非关心界面的美化,推敲每一个像素,考虑按钮的位置。它站在整体的高度,考虑每个人所关心的问题,而非‘艺术的’形式构成的世界。”

Kicker Studio的创始人和负责人之一Dan Saffer也同意将设计仅仅看作装饰或样式的工作是一种普遍的误解。“我的一些客户告诉我不用考虑他们的运营战略,”他说,“因为他们会想,设计师哪需要关心这些东西呢?UX所关心的远超过界面。”

2. …流程中的一步

下面讲一讲流程。为了给用户建立丰富的体验,而不仅仅是我们会用到的设计,我们需要不断地听取意见,进行不断地迭代。这个流程不必显得僵硬很严格,但它确实不可或缺。

“用户体验设计不是一个复选框,”独立用户体验顾问、视觉艺术学院新设的交互设计艺术硕士项目课程负责人Liz Danzico说,“你没有进行用户体验设计,又接着做下一项工作了。用户体验设计需要集成到融入你做的每一件事中。”

EightShapes的联合创立人、负责人之一Dan Brown提醒道:“大多数(客户)希望体验设计是一种独立的活动,通过一份功能规范文档或一项研究就能解决他们所有的问题。实际上,体验设计应该是一个不断努力研究用户,响应其行为理解他们的行为,并不断发展产品或服务的过程。”

3. …跟技术有关

“用户体验跟技术甚至没有关系,”Trapeze集团信息架构与内容管理经理Mario Bourque说,“它关心我们如何生活。它萦绕在我们周围,与我们做的每一件事都有关。”

就像画家使用颜料表达概念与情感,用户体验设计师使用各种技术帮助人们达到目标。但是主要目的是帮助人们,而非创造伟大的技术。

“用户体验设计并不局限在计算机领域内,它甚至可以脱离屏幕。”Ziba设计的交互设计主任Bill DeRouchey认为,“用户体验是关于任何产品、任何作品、任何系统的任何交互行为。”

诚然,用户体验设计师可以帮助人们提高几乎关于任何事物——一个门把手,一个水龙头,一个购物车——的体验。我们只是通常不把使用这些东西的人叫做“用户”,但他们的确是用户。

4. …只跟可用性有关

“人们常常认为(用户体验设计)是一种可以被产品采用但不会为产品的设计贡献资源的产品制作方法。”Behavior设计的创始人和负责人Chris Fahey说。制作简单的、直观的东西始终是我们唯一追求的目标。为了使用户改变其行为,我们也需要创造他们想用的东西。

萨瓦纳(Savannah)艺术与设计学院的交互设计教授David Malouf解 释道:“虽然可用性很重要,但是将重点放在效率和有效性上似乎冲淡了其它重要的用户体验要素,比如:对我们使用的产品和服务的学习,以及内心和情绪上的行 为响应。”并不需要让每一样东西都十分简单,只要这一样东西容易学会。重要的是有吸引力,否则人们就永远不会与之产生互动。

“可用性不是用户体验的代名词,”Semantic Foundry的首席用户体验师Will Evans说。他指的是Peter Morville的UX蜂巢,除了可用,这个蜂巢还把有用、可取得、可访问、可靠、可寻以及有价值作为用户体验的几个重要方面。

5. …只跟用户有关

体验设计策划师Russ Unger喜欢说对UX的最大误解在于“U”。“有一系列的商业目标需要去满足,而我们也正是为它们而设计,”他说,“我们只是无法提供对用户来说最好的设计。我们必须努力创造满足业务和用户尽可能多的目标和需求的总体体验。

作为用户体验设计师,我们必须在用户需求和业务目标之间找到平衡点,并进一步确保我们的设计是符合品牌定位的。

6. …很贵

每个项目都一个基于企业现有资源、能力、时间、预算并受限于现实世界的用户体验设计。但这并不意味着用户体验设计很花钱或者需要长期投入。

Meld咨询公司的主管、用户体验战略师Steve Baty正与用户体验设计大大增加了项目时间这一错误见解作斗争。“有时候,第一次尝试便使用完全成熟的、正式的UCD流程并不是最好的事情,”他说,“使用一些用户体验设计技术为项目和产品提供小的改进极其重要,也完全可能——不管你在哪儿工作,也不管你何时展开项目。”

“人们坚持开展角色和用户研究、绘制故事板等工作,”Saffer指出,“现实中最好的设计师都有一个装满选项的工具箱,他们为每个项目选择对该项目有益的方法。”

7. …很简单

仅仅因为我们知道如何开展一些很酷并且有益的活动,而且你知道你的业绩非常不错,并不意味着整个进程是一件轻而易举的事。对一些重要步骤偷工减料可能会导致灾难。

Saffer坚持认为“有一种神秘的方法可以解决所有设计问题”的误解“在设计师中的普遍程度不亚于在客户之中”。

许多公司都会掉入认为他们是自己的最终用户的陷阱。Tangible UX主管Erin Malone发现产品经理和程序员都相信他们可以用自己的方法创造体验。“用户体验设计师夹在中间,既使用业务语言又使用开发语言来阐述我们为什么需要做现在的工作以及为什么它们对我们的成功是重要的。”

如果你只对使用你产品或服务的人群进行假想——他们是谁,他们如何表现行为,是什么让他们做出选择——那么你很可能大错特错。因此,花一点时间去了解他们,聘请合适的人实践产品或服务的流程,你就能确保自己做的是正确的。

8. …一个人或一个部门的职责

用户体验设计师是一种起联络作用的职位,而非领域专家、医生或其它人类职业类型。我们既没有一套可以机械性执行的最佳实践,也没有找到所有问题的答案。我们最大的技能就是知道如何倾听。虽然我们可以在组织内传播最有效的流程,然而最终的成功却必须由企业所有成员来创造。

“用户体验并不仅仅是一个部门或一个人的责任,”Comcast交互媒体的信息架构与用户体验主管Livia Labate说,“这种将用户体验理解成某一隔间的职责的观点,正是用户体验不是组织文化一部分的证据,也是团队没有需要他们集体交付的体验的目标或愿景的暗示。

Malone强调了这样一个事实,有各种不同从业者的种子掉在用户体验的保护伞下面。“我们,作为一项产业,并没有通过足够独特的语言把专业和职能宣传好,以至于客户和商家开始认为他们需要为项目生命周期的不同节点聘任不同类型的人(包括员工和顾问)。”

9. …一门单一学科

事实上,我们这个领域还很新。出版过用户体验设计方面的图书,2002年出版的反响极大的《Web信息架构》一书的合著者,来自Rosenfeld Media的出版商Louis Rosenfeld指 出,用户体验也许甚至都不是一门学科。“在目前,它或许甚至都没有形成一个整体社区,”他断言说。“最好的情况是能形成一种共识,即成为将那些来自不同学 科的那些关心好的设计,能够认识到如今越来越多的复杂设计挑战需要不同种类设计专家进行综合的人群系在一起的一根绳。”

我们已经衍生出像一团云一样的出各种职位头衔:信息架构师、用户体验架构师、交互设计师、可用性工程师、设计分析师,等等等等。而且这些职位对每个公司来说并非同一回事。

不同的人会在流程的不同部分更加擅长。一些UX从业者关注某一具体的技术,如Indi Young的金属模型;一些关注某一单独的任务,如Luke Wroblewski的Web表单;一些关注行为,像Steve Krug的可用性测试。正如你不会去找心脏病专家会诊你受伤的脚,别指望用户体验世界里的任何专业人士可以完成你所需的每一件事。

10. …一种备选

对于你们当中的那些认为自己并不需要用户体验设计师的人,请记住:“没有人愿意相信他们做的东西是劣质的或是有缺陷的,”独立的UX顾问Kaleem Khan说,“因为没有人会把实现糟糕设计作为目标。这当中肯定存在风险。糟糕的设计和糟糕的体验总是有的。”

世界最大的可用性研究公司——用户界面工程(User Interface Engineering,UIE)的主要创始人、首席执行官Jared Spool对那些令人满意的、成功的产品团队的素质进行了广泛的调查。他发现,一条最为常见的错误是公司认为“好的体验设计只是一种附加品,而不是基本需求。”

前UIE成员,现Bokardo设计的主管Josh Porter回应了Spool的这段话:“最大的误解是(公司)投资用户体验是可选的。为了生存,他们不会这样做。”

有一大批神奇的从业人员可以在你所在的地区帮助你。在信息架构协会(Information Architecture Institute,IAI)、交互设计协会(Interaction Design Association,IxDA)、可用性专家协会(Usability Professionals Association,UPA)等组织查找你的地区的信息,或者直接在LinkedIn上寻求他人的帮助。

展望未来

2009年会是一个紧缩的年份,不过我们也正好借此呼唤务实的态度。是采用那些精简的、智能的、渐进增强的和有效的方法的时候了。我们已经到了一个技术相对成熟而功能相对不足的层次。

我们如何待人接物,以及给人带去的尊重和价值,会帮助我们去芜存菁。那么,你会作何选择呢?

[转]50 个美丽且对用户友好的导航菜单设计

Matt Cronin版权所有
作者:Smashing magazine, Matt Cronin
译者:UCD翻译小组 , JJYY
原文:http://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/

对 任何网站来说,可用性都是一个重要的设计目标,而友好的导航是其中的要素之一,它决定着用户在网站中如何被引导,如何与网站进行互动。如果没有友好的导 航,网页的内容就很难发光和被用户发掘。菜单必须要足够简单到用户容易理解,还要包含必要的元素来引导用户浏览整个网站——同时要有很棒和有创意的设计在 上面。

下面我们将展示50多个出色的导航菜单—— 我们挑选了一些用CSS实现的菜单,一些CSS+Javascript的菜单,还有flash的菜单设计。不管他们具体是用什么实现的,共同点是:对用户友好、富有创意,并且完美符合所属网站的风格。
感兴趣的话,您还可以阅读我们之前的几篇文章:

1. 基于CSS的导航菜单

Loodo
一个色彩斑斓、给网站增加了触摸感的菜单。

Screenshot

Acko.net
设计者Steven Wittens采用了一种独特的透视角度来呈现导航菜单。

Screenshot

Web Design Ledger
该网站有一个很棒的菜单,大尺寸的按钮非常舒适且没有和网站内容搅在一块。

Screenshot

UX Booth
在导航栏下面使用了一个漂亮的辅助文本区域来说明当前的菜单项。

Screenshot

Nopokographics
垂直文字的导航菜单非常罕见,因为他们用起来不是那么舒服。但一些设计师总会迎着风头去做些突破。Nopoko Grphics就使用了箭头指示和鼠标悬浮(Hover)效果在他们的垂直导航菜单上。

Screenshot

Icon Designer
这个网站在首页上使用了超大的图片菜单,用户的注意力马上就被这个贼大的菜单拽了过去,看起来对用户非常方便。

Screenshot

Cosmicsoda
这个大大的菜单十分醒目,并且使用了轻微的Hover效果来为菜单增色。

Screenshot

Designsensory
十分符合用户认知的二级菜单导航,使用2种颜色区分,有效的告诉用户当前激活的菜单项目和未激活的项目。

Screenshot

Smallstone
Smallstone, 美国的唱片公司,采用了一种独特的导航菜单,厄。。。这东东叫做“空间回音Rloand SE-201型号”.

Screenshot

TNVacation
这年头很难找到一个看起来很棒的下拉菜单,不过这里就有一个例外。

Screenshot

Clearleft
Clearleft网站使用了几张纸片来作为它们的导航。

Screenshot

45royale
一个简单、干净、美丽的菜单,还有着不错的Hover效果。

Screenshot

Design Intellection
一个非常棒的分块式导航菜单,它告诉了我们在一个简洁的导航菜单中如何精彩高效的使用Hover效果.

Screenshot

Ronnypries.de
导航菜单并不是一定要设计得像一个传统的导航菜单。Ronny Pries使用了一个类似房屋户型图的设计来引导访客在网站中穿梭。

Screenshot

Jiri Tvrdek
Jiri Tvrdek让导航选项看起来像树上挂着的叶子,十分有创意,让人印象深刻。

Screenshot

Water’s Edge Media
导航选项被用夹子晾在晾衣绳上,来自Patricia Abbott.

Screenshot

Matt Dempsey
用笔刷涂抹来高亮导航选项。

Screenshot

Cognigen
当前所在的导航选项在视觉上被按进去了,十分明显且符合认知。

Screenshot

District Solutions
又是一个少见的垂直文字导航,而且看起来很不错!

Screenshot

Jayme Blackmon
这个网站看起来是让你来勾选“已经完成”的标记。

Screenshot

Jeff Sarmiento
为什么不尝试一下溢出的效果呢?

Screenshot

Studioracket
一个很不寻常的导航菜单,它采用了一种思维导图的形式来描绘导航。除此之外,这个导航菜单还真的很难画!

Screenshot

Cultured Code
精巧独特的效果让菜单非常夺目,还有贼棒的配色和Hover效果。

Screenshot

Nando Designer
这位葡萄牙设计师采用了一张纸和手写字体作为网站的主要导航。

Screenshot

Bonfiremedia
有的时候印刷排版已经足够说明一切...

Screenshot

Artgeex
生动鲜艳的印刷排版应用。

Screenshot

Gloobs
一些设计师在“联系我们”的导航选项中加入了邮票印章的设计。

Screenshot

South Creative
这个网站使用了很大的导航按钮,并有着不错的Hover效果。

Screenshot

Mac Rabbit
另一个又大又干净的菜单,它采用了图标来辅助用户识别每一个选项的功能。

Screenshot

RapidWeaver
这个菜单有着干净光滑的布局,同时它的二级菜单采用了很赞的半透明来和主菜单进行区分。

Screenshot

DFW UPA
图标很好的辅助和强调了每一个导航选项。

Screenshot

Revolution Driving Tuition
一个很棒的褴褛式风格网站,它的菜单很好的融合在网站布局中。

Screenshot

Duarte Pires
这个菜单摆放的位置和网页正文很接近,十分容易使用。设计采用了大图标来给导航增加视觉元素。此外在其他页面上这些图标也以一致的竖直布局出现,虽然图标本身不是很完美,但整体来说是个不错的点子.

Screenshot

Valetin Agachi
这个导航有着十分独特的方式来强调被选中的项目,同时这个菜单布局在整个网站都是一致的。

Screenshot

Tutorial9
最近Tutorial9进行了非常正点的重新设计,菜单组织很棒,可用性很高。

Screenshot

2. 基于CSS和JavaScript的菜单

Agami Creative
设计师常常在导航上使用提示信息,但提示信息和侵蚀效果的结合还是挺少见的。

Screenshot

Whitehouse.gov
这个例子完美的告诉我们怎样把大量的内容组织在简洁、容易辨认的区域内,此外再夸一句:非常棒的下拉菜单设计。

Screenshot

AppStorm
又是一个出色的高可用性下拉菜单设计。

Screenshot

Eric Johansson
Eric Johansson, 来自瑞典的设计师, 使用了竖直的长条图片作为导航。

Screenshot

Coda
这个有着美丽Hover效果的菜单非常便捷。二级菜单设计一致且包含了所有的内容在里面。

Screenshot

Dragon Interactive
Dragon Interactive的菜单有着华丽的特效和配色,这个菜单是基于jQuery的。

Screenshot

Bern
我十分钟意这个布局,特别是这个菜单融合入整体褴褛式风格中的方式。这个菜单也采用了jQuery的下拉特效。

Screenshot

Abduzeedo
在最近的重新设计中,Abduzeedo介绍了一种jQuery的幻灯片式导航。
(我忍不住插一句,好像jQuery很火嘛...)

Screenshot

3. 基于Flash的菜单

Iipvapi
多彩的倾斜式导航,来自一位印度的网页设计机构。

Screenshot

Not Forgotten: The Movie
大部分娱乐网站都使用Flash和不同寻常的导航菜单来吸引用户的注意。比如这个,导航项目被放在卡片上排列着。

Screenshot

Nick Tones
Nick Tones, 一个动态、多彩的,而且仍然保持了可用性的导航菜单。

Screenshot

woonky.ideas
这个阿根廷的设计机构把CD和书本放在桌子上,每一个代表着一个导航项目。当然只要我们把鼠标放上去,就会有信息告诉你里面是啥东西。

Screenshot

Gotmilk
这 个Flash网站的设计师呈现了非常具有原创性的东西。导航菜单被放置在一个缎带上,每一个导航选项有着简单精致的Hover效果。当鼠标移到图标上 后,被替换为图标所代表的栏目标题。对这个细节一般常见的设计会使用提示信息,这个网站的设计师没有随大流,而是使用了另一种方式来让它夺人眼球。

Screenshot

Spectra Visual Newsreader
一个色彩斑斓的美丽Flash菜单,加上出色的可用性。

Screenshot

NickAD
这个网站的亮点在于它十分独特和容易使用的导航。

Screenshot

Sensi Soft
令人称奇的作品集设计,出色的导航明显经过了深思熟虑,并且非常便捷。

Screenshot

4.高可用性的导航

tap tap tap
美丽的布局和菜单,还有出色的效果。

Screenshot

Apple
苹果的网站十分特别,尤其是因为它的导航布局。Mac菜单的设计十分令人惊叹,同时配有图片,很难想到有比这个更方便的在菜单中查找商品的方式了。

Screenshot

Alex Buga
访问者在这里可以使用摆放整齐的大幻灯片来查看新闻和项目。

Screenshot

CREASENSO
这个作品集首页上的内容非常简单,组织得十分易用。

Screenshot

polargold
有着令人眩晕的视觉效果的Flash作品集。由于采用了手风琴式的布局来展现内容,所以这个网站没有专门的栏目页面。粗大的字体强调了菜单项的重要性。

Screenshot

Colourpixel
Colourpixel的作品集有一个十分有趣的布局,它把所有的栏目全部组合到了一个页面上,你可以展开或隐藏任意的栏目,全看用户的喜好。

Screenshot

DVEIN
非常出色的Flash作品集设计。这个网站把所有作品全部组织到了一个有趣的环状滚动列表中。

Screenshot

Alexandru Cohaniuc
这个作品集因为它漂亮的布局而出色。手风琴式的效果允许用户在项目和作品中自由导航。

Screenshot

Porsche Canada
加拿大保时捷的网站有着非常体贴用户的导航,对于每一个菜单项都列出了很多子栏目。这个菜单的可用性和便捷性是十分高的。

Screenshot

Jeremy Levine Design
这个建筑设计作品集通过独特的布局让用户可以很容易的在网站中浏览。每一个菜单项有着很多效果和过渡转换,十分便捷。

Screenshot

firstborn
知名设计工作室Firstborn在他们的作品集中使用了横向可拖动的导航。这个导航方式同时也可以在浏览其他内容(例如缩略图)时呈现。

Screenshot

Benjamin David
这个作品集采用了垂直的幻灯片滑动和菜单切换进行组合。许多内容被组合放在了一个鲜明的菜单之中。

Screenshot

Thibaud’s Portfolio
另一个令人眩晕的作品集,十分有创意的导航。同时它还采用了色彩区分,相似的作品被组合在了一起。

Screenshot

Jason Reed Web Design
对于把许多信息塞在一个小空间来说,手风琴式设计十分有用。Jason Reed在他的作品集中使用了一个漂亮的手风琴设计来允许用户进行翻页操作。

Screenshot

Marius Roosendaal
另一个很友好的手风琴式菜单把作品项目分类聚在一起。

Screenshot

5. 垂直导航布局

Danny Blackman
Danny Blackman的网站常被认为是极其出色的作品集设计之一, 一部分原因就是其令人惊叹的垂直布局结构。

Screenshot

Tomas Pojeta
这个网站是另一个使用垂直布局的作品集,把多个页面合并成一个页面,允许用户垂直的从一个栏目移动到另一个栏目。

Screenshot

volll
Voll使用了有着美丽插画作为背景的垂直布局结构。

Screenshot

Mediocore
Mediocore是一个很赞的作品集,虽然比一般的垂直设计呈现了更多的内容元素,但仍然看起来很不错。

Screenshot

6. 对用户友好的侧边栏菜单

FreelanceSwitch
FreelanceSwitch采用了非常棒的菜单来组织他们的文章。

Screenshot

Fubiz
重新设计后的Fubiz有一个出色的侧边栏,使用了幻灯片式切换来在一个小侧边栏中呈现非常多的内容。

Screenshot

Checkout
checkout拥有一个贼棒的网站。在特色栏目中有着一个极其简洁的列表风格菜单,上面还有很Nice的图标。

Screenshot

Ruby Tuesday
不错的网站——Ruby Tuesday。侧边栏菜单上有着特别的图标和光滑的Hover效果。

Screenshot

Concentric Studio
一个短小精悍的菜单还包含着滚动切换的效果。

Screenshot

Barack Obama
奥巴马总统的网站有一个列表式的侧边栏菜单,拥有合理的文字间隔和不错的对比度。

Screenshot

GABBO DESIGN
另一个简洁、间隔合理的列表菜单。

Screenshot