最大的网站策划、网站运营、网络营销人才免费学习、培训、认证、展示、交流、工作平台,服务国家经济建设与民族伟大复兴!

查看完整版本: 精品奉献:访客至上的网页设计秘笈《别让我思考》连载

keke 2008-5-17 23:28

精品奉献:访客至上的网页设计秘笈《别让我思考》连载

[url=http://club.book.csdn.net/book/110495.html][img=90,120]http://www.dearbook.com.cn//book/BookImage/lastTS00110495__.jpg[/img][/url]                            [list][*]书名:点石成金:访客至上的网页设计秘笈(原书第2版)[*]作者:Steve Krug[*]来源:机械工业出版社[*]ISBN:7-111-18482-3[*]定价:39元[/list]

keke 2008-5-17 23:30

[size=5][b]“别让我思考!”
[/b][/size]
[size=2]      多年来,我一直在跟人们说,这是我的可用性第一定律。看过的网页越多,我就越坚信这一点。
这是最最重要的原则—它是在Web 设计中判断什么有用什么没用的终极法则。如果你只能记住一条可用性原则,那么就记住这一条。
它意味着,设计者应该尽量做到,当我看一个页面时,它应该是不言而喻、一目了然、自我解释的。
我应该能明白它—它是什么,怎样使用它—而不需要花费精力进行思考不过,我们说的到底有多不言而喻?呃,充分的不言而喻。就好像你隔壁的邻居,她对你的网站主题毫无兴趣,也几乎不知道如何使用后退按钮,但她仍然可以看一眼你的主页,然后说:“噢,这是。”(如果运气好的话,她会说:“噢,这是。真是太好了!”当然,这是另外一回事了。)
这样来看:
当我看到一个不需要思考的网页时,脑袋里面浮现的会是:“嗯,这是,那是,我想要的东西在这里。
[/size][img]http://book.csdn.net/bookfiles/70/1/image1.jpg[/img]

[size=2]当我看到一个需要思考的网页时,头脑里面浮现的东西都会加上一个问号。[/size]

[img]http://book.csdn.net/bookfiles/70/1/image2.jpg[/img]

[size=2]创建一个网站的时候,你要做的就是去掉这些问号。[/size]

keke 2008-5-17 23:32

[size=5][b]强迫我们思考的地方
[/b][/size]
[size=2]网页上每项内容都有可能迫使我们停下来,进行不必要的思考。例如,名字。常见的罪魁祸首是那些很酷或者自以为很聪明的名字、带有营销倾向的名字、和具体公司有关的名字以及生僻的技术名词。
举例来说,假设一位朋友说XYZ公司正在招聘,我正好符合他们的要求,因此我直奔该公司的网站而去。当我扫描页面,准备点击相关内容时,他们选择的公布职位部分所用名称的不同将产生不同的效果。

[/size][img]http://book.csdn.net/bookfiles/70/1/image3.jpg[/img]

[size=2]注意,类似这样的情况一般介于“对每个人都显而易见”和“完全模糊不清”之间,往往需要权衡。
例如,“Jobs”(职位招聘)可能对XYZ公司来说显得太不正式,或者他们采用“Job-o-Rama” 是因为一些复杂的国际化策略,又或者那是他们公司简报中常用的名词。我的观点是,权衡应该更倾向于“显而易见”而不是需要额外的思考。
另一个不必要的问号来源是那些看起来不太明显的链接和按钮。作为一个用户,永远不该让我花上几微秒去思考某个东西是否能点击。

[img]http://book.csdn.net/bookfiles/70/1/image4.jpg[/img]

你可能会这么想,“其实,找出某个东西是否能点击并不需要费多大工夫。如果你将鼠标移过去,它的光标由箭头变成一只小手,就表示可以点击。这会有很大的问题吗?”
[/size][align=center][size=2][img]http://book.csdn.net/bookfiles/70/1/image8.jpg[/img][/size][/align]
[size=2]问题是,当我们访问Web 的时候,每个问号都会加重我们的认知负担,把我们的注意力从要完成的任务上拉开。这种干扰也许很轻微,但它们会累积起来,有时候这样的干扰不用太多,就足以让我们抓狂。
况且,人们通常不喜欢苦苦思索背后的原理。建造网站的人没有让它们明白易懂(而且容易使用),
会让我们对这个网站以及网站的发布者失去信心。
再来看一个例子:在绝大多数的网上书店,在搜索某本书之前,我首先必须思考自己要怎么搜索。
[img]http://book.csdn.net/bookfiles/70/1/image5.jpg[/img]

当然,这种心理活动通常在一刹那间发生,但是你也看到了,这个过程实在很烦人。哪怕一些很无辜的小地方,例如把一个广为人知的名称变得花哨一点(从“Search”变为“Q[wiki]UI[/wiki]CK SEARCH”)也会让用户多产生一个问号。

另一方面,Amazon.com根本就没有提到“作者-书名-关键字”的区分。他们只是看你输入的内容,做最有意义的事。

[img]http://book.csdn.net/bookfiles/70/1/image6.jpg[/img]

毕竟,为什么要让我思考我该怎样搜索?而且,更糟糕的是,为什么要让我去思考网站的搜索引擎希望我怎样表达这个问题?它们就像一些脾气不好的守桥人(“你忘了说‘请’”)。
我可以列出一大堆访问者在访问网站时不应该花时间思考的事,例如:
? 我在什么位置?
? 我该从哪里开始?
? 他们把××放在什么地方了?
? 这个页面上最重要的是什么?
? 为什么他们给它取这个名字?
结果,你需要一份检查清单,附加到你的Web 设计检查清单里。但是,最重要的是要理解去掉问号的基本原则。如果你理解了这个原则,就会开始注意到网页上所有让你思考的东西。最后,你将学会如何识别并在你的页面上避免它们。[/size]

keke 2008-5-17 23:33

[size=5][b]如果你做不到让一切都不言而喻
[/b][/size]
[size=2]你的目标应该是让每一个页面都不言而喻,如果能达到这个目标,普通用户只要看它一眼就能知道是什么内容,知道如何使用它。
不过,有时候,特别是你在进行一些崭新的、开拓性的或者非常复杂的页面设计时,也许只能做到“自我解释”(self-explanatory)。在一个自我解释的页面中,用户需要花一点点时间去理解—但只需要一点点时间。页面元素的外观、精心选择的名称、页面布局以及少量仔细斟酌过的文字,它们综合在一起将创造出一种接近瞬间的识别效果。如果你不能做到让一个页面不言而喻,那么至少应该让它自我解释。
[/size]
[size=5][b]为什么它这么重要
[/b][/size]
[size=2]说来也奇怪,并不是因为你通常听到的理由:

[align=center][img]http://book.csdn.net/bookfiles/70/1/image7.jpg[/img][/align]
有时候,这么说是对的,但你可能会很惊讶地看到,有些人会在一个折磨他们的网站坚持很久。有很多人在浏览网站遇到问题时,会认为是他们自己的错,而不会责怪网站。
事实上,首先,你的网站并不是那么容易被找到,而访问者们也不知道另一个类似的网站。其次,从头开始的感觉往往不是那么令人向往。
而且,还有这样的现象:“我等车已经等了10分钟,所以应该再等一会”。还有,谁能说竞争对手又会好多少呢?[/size]

[size=5][b]那么,到底是为什么呢[/b][/size]

[size=2]让页面不言而喻就像把商店布置得光线良好,这样会让所有的商品看起来更好。访问一个不需我们思考的网站会让人觉得毫不费劲,相反,为我们不关心的事而多花心思会浪费我们的精力、热情,还有时间。
不过,正如你在下一章将要看到的那样,当我们审视我们实际上如何使用网络时,为什么不要让用户思考的重要理由是,大多数人会花比我们想象中少得多的时间来浏览网页。
结果,如果要让网页有效,它们必须在用户第一眼看到时将自己展示出来,而要做到这一点,最好的方法是创建不言而喻的网页,或者至少也要做到自我解释。[/size]

keke 2008-5-17 23:36

[align=right][font=黑体][size=3]点击多少次都没关系,只要
每次点击都是无须思考、明确无误的选择。
—Krug可用性第二定律[/size][/font][/align]Web设计师们和可用性专家们多年以来一直在争论,用户在到达目标之前点击多少次而不会觉得有挫折感①。一些站点甚至规定,到达网站的任何页面需要点击的次数永远不能超过指定的次数(通常是3次、4次或者5次)。
表面上看来,“到达任何地方的点击次数”像一条有用的准则。但是随着时间的流逝,我开始觉得真 正的问题不是到达目标之前要点击的次数(当然这里也有限度),而是每次点击有多“艰难”—需 要多少思考,还有多大的不确定性来判断自己是否在进行正确的选择。
总的来说,我想这样说是没有问题的,那就是用户不介意有多少次点击,只要每次点击都是 毫不费力的,并且能让用户坚信自己的选择正确 — 符合Jared  Spool 所谓的“信息的味道 ”。 我想,应该记住下面的经验准则 :“三次无须思考、明确无误的点击相当于一次需要思考的点击。②”
文字游戏20Q(Twenty  Questions)的第一个问题通常是“动物,植物,无机物?”,这是一个选择时无须思考的好例子。只要你能接受以下假设:任何事物,只要不是动物也不是植物,都属于无机物,包括钢琴、诗歌、百科全书等各种事物。要正确回答这个问题,几乎完全不用思考③。
遗憾的是,Web上的很多选择都没有这么清楚;
[img]http://book.csdn.net/BookFiles/70/4/image001.jpg[/img]例如,如果我进入Symantec的病毒更新页面(因为我想更新我的Norton  AntiVirus,即诺顿防病毒软件),则需要经过两次选择才能继续下面的操作。
其中一个选择是语言(Language),相对来说还好理解。我花了一点时间来猜测“English,US”
(美国英语),这是相对“English,UK”来说的。
然而,如果不小心点击了下拉框,我就会发现刚才其实是在勉强应付,因为列表中根本就没有
“English,UK”。

我也可能会对“Espa?ol  (English,  Int’l)”感到困惑,但我不会在这个问题上做任何停留。[img]http://book.csdn.net/BookFiles/70/4/image002.jpg[/img]
不过,另一个选项“Product”(产品)就更有点赌运气的味道。 问题在于,它写的是“NAV  for Windows95/98”,现在,我很确定对于Symantec公司的人来说,NAV就是指Norton AntiVirus,但对于我而言,至少需要克服一点疑虑。
而且,就算我很清楚自己在使用Windows98,在我的脑海中至少还有 一个小小的问号,在这种情况下是否就能选择“Windows95/98”呢? 也许就有一个我不知道的系统叫作“Windows95/98”呢!
再看一个例子。当打算购买某个产品或服务以便在我的家庭办公室中使用时,我经常会遇到网
站让我做出以下选择:
[font=宋体][size=2][i]Home  
Office[/i][/size][/font]
哪一个才是我需要的?就好像我拿着一张商业回邮卡(business  reply  card)站在两个邮箱前,一个邮箱贴着Stamped  Mail(须贴邮票),另一个邮箱贴着Metered  Mail(免贴邮票)。它们会怎么想—要贴邮票还是不用贴?如果我投错了邮箱会怎么样?
关键是,如果我们需要一直在网络上进行选择,那么让这些选择变得无须思考是让一个网站容 易使用的主要因素。
--------------------------------------------------- -
[font=宋体][size=10pt]①实际上,这只是另一场更大规模的、关于站点层次深度和广度相对价值讨论的一部分,一个广度站点在每个层次可以分成许多类别,因层次较少,所以不需要太多次数的点击就能到达底层;一个深度站点有更多的层次,需要更多次数的点击,但它在每个层次上需要考虑的类别选择较少。[/size][/font]
[font=宋体][size=10pt]②当然也有例外,如果我不得不经常深入到站点的某一部分,或者在一个Web应用上重复一系列的点击,又或 者页面载入速度较慢,那么点击次数更少会更有价值。[/size][/font]
[font=宋体][size=10pt]③如果你忘了这个游戏,有一个非常不错的网上版本([url=http://www.20q.net/]http://www.20q.net[/url]),该版本由Robin  Burgener创建,它 使用了神经网络算法,效果相当不错。他们甚至把这个选择变得更加不需要思考,因为增加了“其他”和 “不知道”作为第一题的答案。[/size][/font]

keke 2008-5-17 23:38

[align=right][font=楷体_GB2312][size=3]去掉每个页面上一半的文字,
然后把剩下的文字再去掉一半。
—Krug可用性第三定律[/size][/font][/align]在大学学到的几样东西当中,我坚持时间最长的一样— 也是受益最深的— 是E.  B.  White在《The Elements of Style》(风格的要素)一书中提到的第17条规则①:
[indent][font=楷体_GB2312][size=2]17. 省略多余的文字[/size][/font]
[font=楷体_GB2312][size=2]有力的文字都很简练。句子里不应该有多余的文字,段落中不应该有多余的句子。同 样,画上不应该有多余的线条,机器上不应该有多余的零件。[/size][/font]
[/indent]当我浏览网页的时候,发现大多数页面上的大部分文字都不过是在占地方,因为没有人打算阅 读它们。但是因为它们确实在那儿,所以这些多余的文字都在暗示你可能真的需要阅读它们来 理解到底是怎么回事,这样常常使得页面看起来难度更高了。
第三定律听起来有点过分,老实说,我是故意的。去掉一半的文字是一个很现实的目标,因为 我发现要在大部分网页上去掉一半文字而不失去原来的意义很容易。不过,“把剩下的文字再去 掉一半”只是为了鼓励人们在这么做的时候更坚定一点。
去掉没有人会看的文字有几个好处:
[list][*]可以降低页面的噪声。[*]让有用的内容更加突出。[*]让页面更简短,让用户在每个页面上一眼就能看见更多的内容,而不必滚动屏幕。[/list]这并不是说Salon.com上的文章应该比现在更短,实际上我说的文字是两种特别的文字:欢迎词
(happy talk)和指示说明(instruction)。

keke 2008-5-17 23:39

只要看到,我们就会知道那就是欢迎词,这是一段引导性的文字,可能是欢迎我们来到这个网站,告诉我们该网站有多棒,或者告诉我们在刚进入的这个版面将会看到什么内容。

如果你无法确定某项内容是否为欢迎词,这里有一个屡试不爽的测试方法:在你阅读的时候仔细聆听,就能听到一个小小的声音在你耳边说着“咔咔咔咔咔……”。

很多欢迎词就像你在那些小册子里看到的蹩脚的促销文字一样。和那些好的促销文字不同,它根本没有包括有用的信息,只是在一个劲地说自己有多好,而不是描述什么东西能让我们感觉更好。

尽管欢迎词有时会在首页出现—通常是那种以“欢迎……”开头的段落—但它最经常出现的地方是网站各个版面的开头几个页面(版头,sectionfronts)。既然这些页面通常是关于内容的表格而不包含什么实质性的内容,那么用欢迎词填充它们的主意看起来不错。遗憾的是,其效果就像出版社不得不在书的目录上增加一个段落,说:“这本书包含很多关于___、___、___的有趣章节,希望您能喜欢”一样。

欢迎词就像闲聊—内容无所谓,主要是一种社交手段而已。但大部分Web用户都没有时间闲聊,他们喜欢直截了当。你可以—而且应该—尽量减少欢迎词,能减多少就减多少。

keke 2008-5-17 23:41

多余文字的另一个主要来源就是指示说明。关于指示说明,你只要知道没有人会细读它们—至少在多次“勉强应付”失败之前不会,这就够了。而且,即使在这个时候,如果指示说明非常冗长,用户发现他们所需信息的机会也很小。

你的目标应该是通过让每项内容不言而喻来完全消除指示说明,或者尽可能做到这一点。当指示文字变得完全没有必要时,则应把它们全部去掉。

例如,当我点击Verizon网站的网站调查(Site Survey)时,会出现一整版的指示说明让我阅读:
[align=center]<[img]http://book.csdn.net/BookFiles/70/5/image001.gif[/img][/align]我想,做一些大胆的修剪会让它们有用得多:

[align=left][size=13pt][font=Times New Roman] [/font][/size][/align]

[table=395][tr][td=2,1,217]
[align=left][font=MingLiU][size=10pt]之前:[/size][/font][font=Arial][size=10pt]10[/size][/font][font=Arial][size=10pt]3[/size][/font][font=MingLiU][size=10pt]个单词[/size][/font][size=12pt][/size][/align]
[/td][td]
[align=left][size=12pt][font=Times New Roman] [/font][/size][/align]
[/td][/tr][tr][td]
[align=left][size=12pt][font=Times New Roman] [/font][/size][/align]
[/td][td=1,1,205][font=MingLiU][size=8pt]“下面的问卷用来为我们提供有助于[/size][/font][size=8pt][font=Times New Roman] [/font][/size][font=MingLiU][size=8pt]我们改进网站的信息,并让它更贴近您[/size][/font][size=8pt][font=Times New Roman] [/font][/size][font=MingLiU][size=8pt]的需要[/size][/font][font=MingLiU][size=8pt]。[/size][/font][font=MingLiU][size=8pt]”[/size][/font][size=12pt][/size]
[/td][td]
[align=left][font=MingLiU][size=8pt]第一句就是介绍性的欢迎词。我知道调查的目的,我需要的只有[/size][/font][font=MingLiU][size=8pt][/size][/font][/align]

[align=left][font=MingLiU][size=8pt]“有助于我们”这个词,让我知道他们也明白我填写这份调查表格是[/size][/font][size=8pt][font=Times New Roman] [/font][/size][font=MingLiU][size=8pt]在为网站帮忙。[/size][/font][size=12pt][/size][/align]
[/td][td]
[align=left][size=10pt][font=Times New Roman] [/font][/size][/align]

[align=left][size=10pt][font=Times New Roman] [/font][/size][/align]

[align=left][size=10pt][font=Times New Roman] [/font][/size][/align]

[align=left][size=10pt][font=Times New Roman] [/font][/size][/align]

[align=left][size=10pt][font=Times New Roman] [/font][/size][/align]

[align=left][size=10pt][font=Times New Roman] [/font][/size][/align]

[align=left][size=10pt][font=Times New Roman] [/font][/size][/align]

[align=left][size=10pt][font=Times New Roman] [/font][/size][/align]

[align=left][size=10pt][font=Times New Roman] [/font][/size][/align]

[align=left][size=10pt][font=Times New Roman] [/font][/size][/align]

[align=left][size=10pt][font=Times New Roman] [/font][/size][/align]

[align=left][size=10pt][font=Times New Roman] [/font][/size][/align]

[align=left][size=10pt][font=Times New Roman] [/font][/size][/align]

[align=left][size=10pt][font=Times New Roman] [/font][/size][/align]

[align=left][size=13pt][font=Times New Roman] [/font][/size][/align]

[align=left][font=MingLiU][size=8pt]。[/size][/font][size=12pt][/size][/align]
[/td][/tr][tr][td=1,1,205]
[align=left][font=MingLiU][size=8pt]“请从下面的下拉框和单选按钮中选[/size][/font][size=8pt][font=Times New Roman] [/font][/size][font=MingLiU][size=8pt]择您的答案[/size][/font][font=MingLiU][size=8pt]。[/size][/font][font=MingLiU][size=8pt]”[/size][/font][size=12pt][/size][/align]
[/td][td]
[align=left][font=MingLiU][size=8pt]对于大多数用户来说,不需要教他们如何填[/size][/font][font=MingLiU][size=8pt]写[/size][/font][font=Times New Roman][size=8pt]W[/size][size=8pt]eb[/size][/font][font=MingLiU][size=8pt]表单,对于那[/size][/font][font=MingLiU][size=8pt][/size][/font][/align]

[align=left][font=MingLiU][size=8pt]些不知道什么是下拉框和单选按钮的用户也同样如此。[/size][/font][size=12pt][/size][/align]
[/td][/tr][tr][td]
[align=left][font=MingLiU][size=8pt]“填写这份问卷只需花费您两到三分[/size][/font][size=8pt][font=Times New Roman] [/font][/size][font=MingLiU][size=8pt]钟的时间[/size][/font][font=MingLiU][size=8pt]。[/size][/font][font=MingLiU][size=8pt]”[/size][/font][size=12pt][/size][/align]
[/td][td]
[align=left][font=MingLiU][size=8pt]此时,我还在考虑是否要填写这份问卷,因此知道填写问卷无须[/size][/font][size=8pt][font=Times New Roman] [/font][/size][font=MingLiU][size=8pt]花费太多时间是有用的信息。[/size][/font][size=12pt][/size][/align]
[/td][/tr][tr][td=1,1,205][font=MingLiU][size=8pt]“在表格的底部,您可以选择是否留[/size][/font][size=8pt][font=Times New Roman] [/font][/size][font=MingLiU][size=8pt]下您的姓名、地址和电话号码。如果您[/size][/font][size=8pt][font=Times New Roman] [/font][/size][font=MingLiU][size=8pt]留下了姓名和电话,将来我们可能会联[/size][/font][size=8pt][font=Times New Roman] [/font][/size][font=MingLiU][size=8pt]系您参加一个改进站点的调查[/size][/font][font=MingLiU][size=8pt]。[/size][/font][font=MingLiU][size=8pt]”[/size][/font][size=12pt][/size]
[/td][td]
[align=left][font=MingLiU][size=8pt]这个指示说明此时对我毫无用处。它属于填完问卷之后的事。在[/size][/font][font=MingLiU][size=8pt][/size][/font][/align]

[align=left][font=MingLiU][size=8pt]这里,它只能让这份指示说明显得更加冗长。[/size][/font][size=12pt][/size][/align]
[/td][/tr][tr][td]
[align=left][font=MingLiU][size=8pt]“如果您有问题或意见需要回复,请[/size][/font][font=MingLiU][size=8pt][/size][/font][/align]

[align=left][font=MingLiU][size=8pt]联系客服[/size][/font][font=MingLiU][size=8pt]。[/size][/font][font=MingLiU][size=8pt]”[/size][/font][size=12pt][/size][/align]
[/td][td]
[align=left][font=MingLiU][size=8pt]如果需要回复就不会使用这份表格,这个事实非常重要而且有用[/size][/font][font=MingLiU][size=8pt][/size][/font][/align]

[align=left][font=MingLiU][size=8pt]不过,美中不足的是,他们没有告诉我如何联系客服[/size][/font][font=MingLiU][size=8pt]—[/size][/font][font=MingLiU][size=8pt]或者更好一[/size][/font][size=8pt][font=Times New Roman] [/font][/size][font=MingLiU][size=8pt]点,给我一个链接让我现在就能跳转过去。[/size][/font][size=12pt][/size][/align]
[/td][/tr][/table]
[align=left][size=13pt][font=Times New Roman] [/font][/size][/align]
[table][tr][td=1,1,217]
[align=left][font=MingLiU][size=10pt]之[/size][/font][font=宋体][size=10pt]后[/size][/font][font=MingLiU][size=10pt]:[/size][/font][font=Arial][size=10pt]41[/size][/font][font=MingLiU][size=10pt]个单词[/size][/font][size=12pt][/size][/align]
[/td][td]
[align=left][size=12pt][font=Times New Roman] [/font][/size][/align]
[/td][/tr][tr][td][font=MingLiU][size=9pt]请您回答以下问题来帮助我们改进网站,只要花费您两三分钟的时间。[/size][/font]
[font=MingLiU][size=9pt]注意:如果您有问题或意见需要回复,请不要使用本表格,麻烦您联系客服。[/size][/font][font=MingLiU][size=8pt][/size][/font]
[/td][/tr][/table]

keke 2008-5-17 23:44

在本书的前几章,我介绍了几条我认为你在建立网站时记住它们会很有用的指导原则。现在我们将前往下面两章,来看这些原则如何应用到两个最大的也是最重要的Web设计挑战上:设
计导航和主页。
你可能需要叫一份外卖当午餐,因为这两章的篇幅相当长。

keke 2008-5-17 23:47

别让我思考 第一章

第一章

  确保网页容易被用户使用的最重要原则是“不要让我思考”。设计师应尽量做到让网页不言而喻、一目了然、自我解释。好的设计应该能让用户立即上手使用,而无需花费精力思考。

  网页上每项内容都有可能迫使用户停下来思考,例如,名字。那些看似很酷、很自以为聪明、带有营销性质及生僻技术的名字常常给用户带来困扰。又例如那些看起来不太明显的链接和按钮,用户没有义务思考某个地方是否能点击。
当我们访问网络时,每个微小的疑问都有可能打断我们的访问热情,它们会累积起来,直到让人抓狂、失去耐心。

一些不该让访问者思考的事:

   1. 我在什么位置?
   2. 我该从哪里开始?
   3. 他们把xx放在什么地方?
   4. 这个页面上最重要的是什么?
   5. 为什么他们给它取了这个名字?

  如果要做一些崭新的开拓性的或者非常复杂的页面设计,如果无论如何也无法把页面做到不言而喻时,至少要让它能自我解释,并使用户只需花很少的时间和精力就能理解理解其用意。

  另一些奇怪且有趣的用户心理:有些人会在一个折磨他们的网站坚持很久,而不愿寻找更好的;有些人会在遇到访问挫折时首先责怪自己,而不是责怪网站;人类的惰性以及重新开始新事物的不确定感往往会让用户在不佳的访问体验面前妥协(谁又能保证下一个会比这个更好呢?)。

keke 2008-5-17 23:48

第二章

  面对精心设计排版的页面,用户做的通常只是在页面上大致瞥一眼,然后凭感觉寻找点击他们感兴趣的链接或者符合他们要求的链接。事实上用户对于页面上不关心的部分基本上不会真正看一眼。那些精心修饰的文字对用户来说更像是“以时速100公里的速度驶过的广告牌”。

关于网络使用的三个事实:

一.不是阅读,而是浏览。

  人们总是花极少的时间来阅读大部分的页面,通常只是匆匆浏览一下网页,然后从中选择感兴趣的栏目或文字。

理由:

   1. 用户总是忙碌的,他们没有时间阅读那些不必要的内容。
   2. 用户知道自己不需要读取所有的内容,通常他们只是要寻找自己感兴趣的内容。
   3. 报纸、书籍、期刊的阅读经验教会用户如何快速定位感兴趣的内容。

二.不是最佳选择,而是满意即可。

  大多数情况下用户不是选择最佳的选项,而是选择第一个看上去合理的选项。这种满意策略告诉我们,一旦用户觉得某个链接似乎能跳转到他们想要去的地方,那么这个链接被点击的可能性就会大大增加,尽管它可能不是最佳的选择的。

理由:

   1. 用户总是忙碌的,寻找最佳策略很难,需要的时间也很长。
   2. 如果猜错了也不会有什么严重后果。
   3. 对选择进行权衡并不会改善我们的机会。在设计不佳的网页上花精力去选择,还不如用猜的高效。
   4. 用户喜欢享受驾驭感,跟着感觉走对用户来说更能感受到自己的价值。

用户衡量一个选择所愿花费的精力,取决于他们对于内容的预期、对于需求的迫切性以及对于网站的信心。

三.不是追根究底,而是勉强应付。

  很少有人会花时间来研究如果使用一个网站,通常他们是通过不断尝试来获得访问经验、从中找出一定的理由来解释自己的行为,以及为什么会这么做。

理由:

   1. 是否明白事务背后的工作机制对用户来说并不重要,他们只要求能正常使用即可。
   2. 一般的使用习惯决定了,用户如果发现某个事务能满足他们的要求,就会一直使用下去,直到出现新的更好的替代方法为止,但是通常很少有人会主动寻找更好的方法。

教会用户使用网站而不是勉强应付的好处:

   1. 用户能更容易地找到自己想要的东西。
   2. 用户能更全面地了解到网站所提供的服务,而不仅仅是他们偶然看到的那些。
   3. 网站能更好地引导用户访问其所希望展示的内容。
   4. 能让用户享受到把握全局的满足感,这能极大地增强用户对自己及对网站的信心,进而留住用户的心。

keke 2008-5-17 23:51

第三章

  设计师针对用户快速浏览页面这一特性所需注意的5个方面:

一. 建立清楚地视觉层次。

  让页面瞬间明白易懂的一个好办法是确保页面上所有内容的外观清楚,而且能清楚表述页面内容之间的关系。

层次清楚的三个特点:

   1. 越重要的部分越突出(醒目)。
   2. 逻辑上相关的部分在视觉上也相关。
   3. 逻辑上包含的部分在视觉上有嵌套。

  生活习惯教会了我们对视觉层次进行快速分解,通常这种分解在一瞬间就已完成。除非当那些可视信息迫使我们需要停下来思考时,我们才能隐约地感觉到它的存在。好的视觉层次能够帮助用户对页面内容进行快速分辨,提高访问效率。

二.尽量使用习惯用法。

  每一种出版媒体都有在发展自己的习惯用法,并不断改进这些用法,以形成新的习惯用法。在WEB上,当一种使用方法有足够多的人在足够多的地方看到使用它,那么它就会使成为一种习惯用法。

关于习惯用法的两个特点:

   1. 该用法非常有用。
      习惯用法因为有用才会成为习惯用法,它保证了用户有一种熟悉感,适当应用习惯用法会使用户对网站的访问更容易,不需要花费额外的精力就能获得预期的访问成果。
   2. 设计师通常不愿使用习惯用法。
      创新对设计师而言有很大的诱惑,如果打算使用一种新的方法替代已有的习惯用法,那么至少必须确认1.对用户来说新的方法是同样清楚简洁、不言而喻,无须花费很多额外精力来重新学习的。2.新的方法有很大的回报价值,因此值得用户花一点努力来学习。

  在确信找到一个能让大多数人都接受的新想法前,尽量使用已有的习惯用法。

三.把页面划分成明确定义的区域。

  理想状况下,设计良好的网页应该能让用户立刻明白各区域的作用。
  把页面划分成明确定义的区域可以让用户快速找到自己关心的内容或者放心地跳过自己不需要的部分。

四.明显标示可点击的区域。

  用户确定点击哪里并不会花很长时间,但如果你迫使用户去思考某些通过下意识就可以知道的东西,那么你完全是在浪费每个用户对新站点有限耐心和好感。

五.最大限度降低视觉干扰。

让页面不易理解的最大原因就是视觉干扰,有两类干扰:

   1. 眼花缭乱的设计,不分轻重的布局。
   2. 糟糕的细节设计,不停打断用户的思路。

  用户对复杂和干扰的容忍程度是不同的,但的确有很多人在乎这些细微处。
  对付视觉干扰的一个好办法:设计页面时,可以先假定所有的设计内容都是视觉干扰,除非能够证明它们不是。

keke 2008-5-17 23:53

[b]第四章[/b]
  通常用户不会特别介意到达目标前所需的点击次数,只要每次点击都是毫不费力且能让用户坚信自己的选择是正确的。
  一条经验准则:三次无须思考,明确无误的点击相当于一次需要思考的点击。
  如果需要一直在网络上进行选择,那么让这些选择变得无须思考是让一个网站变得容易使用的主要因素。


[b]第五章[/b]
  有力的文字都很简练。句子里不应该有多余的文字,段落中不该有多与的句子。同样,画上不该有多余的线条,机器上不应该有多余的零件。
  去掉每个页面上一般的文字,然后把剩下的文字再去掉一半。
[b]去掉没人看的文字会有几个好处[/b]:
[list=1][*]可以降低页面干扰。[*]让有用的内容更突出。[*]让页面更简短,让用户在页面上一眼就能看到更多的内容,减少不必要的屏幕滚动。[/list][b]两种必须消灭的文字[/b]:
[list=1][*]消灭欢迎词。
    欢迎词只是一种社交套路,并无多少实际意义,大多数WEB用户喜欢直截了当,所以要尽量减少欢迎词,能减多少就减多少。[*]消灭冗长的解释文字。
    应该通过让每项内容不言而喻来尽量消除解释文字,当文字变得完全没有必要时则应把它们全部去掉。[/list]

keke 2008-5-17 23:54

[b]第六章[/b]
一个事实:如果在网站上找不到方向,人们就不会访问你的网站。
[b]用户浏览过程[/b]:
[list=1][*]通常是为了寻找某个目标。[*]决定先搜索还是先浏览。取决于用户的打算、迫切程度、以及网站是否有良好的导航机制。[*]如选择先浏览,将通过标志的引导在层次结构中穿行。[*]满意地离开或失望地离开。[/list][b]Web空间的奇怪之处[/b]:
[list=1][*]感觉不到大小。
    你很难知道是否已经看到这个网站上所有感兴趣的内容,因此也很难知道什么时候应该停止寻找。[*]感觉不到方向。
    没有层次结构方面的上一级和下一级,即更一般的层次或更具体的层次。[*]感觉不到位置。
    Web导航通过具体化网站的层次结构补偿了这种缺失的空间感,营造出某种位置的感觉。[/list][b]被忽视了的导航用途[/b]:
[list=1][*]给用户一些固定的感觉。
    迷失的感觉并不好,做得好的导航会让用户觉得脚踏实地。[*]告知当前位置。
    通过让层次结构可视化,导航可以告诉用户网站上有什么。导航表现了内容且表现站点比引导位置更重要。[*]告诉用户如何使用网站。
    含蓄地告诉用户该从哪里开始,能进行哪些选择。[*]给了用户对网站的信心。
    清楚、规划得当的导航是网站给人留下好印象的大好机会。[/list]Web导航的基本元素:logo、栏目、子栏目、当前位置、辅助工具。
导航部分在每一页以一致的外观出现在同样的位置,会让用户提升用户的访问信心,给用户确定感可以提升用户对网站的认同。让全局导航始终保持一致意味着用户对它只需了解一次。全局导航应该包括5个元素:logo、返回首页、搜索链接、辅助工具、主栏目。
网站logo一般在网页左上角,因为logo代表了整个网站,也就是说它在整个站点结构中层次最高。要让网站logo出现在页面可视层次的首要位置,可采取两种方式:让它成为页面最显眼的内容或者让它涵盖页面所有其他的元素。
栏目导航条是访问站点主要栏目的途径,即站点层次结构的最顶层。
大部分情况下,全局导航也留有二级导航的显示位置。
辅助工具是到达网站中不属于内容层次的重要元素的链接。
辅助工具能帮助用户使用站点(如帮助、网站地图或购物车等),要么提供网站发布者的信息(如关于我们、联系我们等)。
全局导航中最多只能放使用率最高的4-5个辅助工具。
全局导航中最重要的元素之一是让用户返回首页的链接。
一般网站也会让logo链接到首页。
喜欢搜索的用户并不少于习惯浏览的用户。
一个简单公式:搜索栏=一个输入框、一个按钮、还有“搜索”两字。
搜索栏必须避免:
[list=1][*]花哨的用词。[*]指示说明。[*]选项。
    如果必须提供选项,那就要保证哪些选项确实有用。[/list][b]页面名称就是web上的路牌[/b]。
需注意的要点:
[list=1][*]页面名称在视觉层次上要出现在合适的位置。[*]名称样式要引人注目,在大多数情况下,它是该页里最大的文字。[*]名称和链接的内容要一致。
    有时受页面空间的限制,如果点击的文字与链接的页面名称并不完全相同,则需保证尽量匹配和让不匹配的原因显而易见。[/list]要抵消网络空间固有的迷失感,其中一种方式就是时刻告诉用户当前所处的位置。
常用的标记位置的方法:
[list=1][*]在旁边放一个小图标。[*]改变文字颜色。[*]使用粗体。[*]按钮反白。[*]改变按钮的颜色。[/list]位置指示器必须要醒目突出,否则就失去了意义。
层级菜单的几项实践:
[list=1][*]把它们放在最顶端。[*]用“>”符号对层级进行分隔。[*]使用小字体。[*]使用文字提示“你在这里”[*]将最后一个元素加粗。[*]别让它们显得像页面的名称。[/list][wiki]标签[/wiki]是大型网站的上佳选择,理由:
[list=1][*]它们不言而喻。[*]很难被忽视。[*]很灵活。[*]暗示了一个物理空间。[/list]标签会给人一个视觉提示:让人觉得网站被分成了不同的栏目,条理清晰,而自己正置身于其中的一个栏目,增加确定感。
amazon经典的标签设计三要点:
[list=1][*]正确绘制。
    标签的图形必须营造出“激活的标签页位于其他标签页之前”的效果。
    营造出这种效果,比货也必须有一种不同的颜色或外形作为对比,并且必须与它下面的空间在物理上链接起来。[*]颜色编码。
    Amazon使用相当鲜艳和饱满的的颜色来吸引用户的注意力。未激活的标签和当前的标签之间对比强烈,即使色盲的用户也能正确理解。[*]进入网站时,有个选中的初始标签。[/list][b]后备箱测试[/b]
完成设计后对网页的导航进行测试的方法。
初始问答:
[list=1][*]这是什么网站?(logo)[*]我在哪个网页上?(网页名称)[*]这个网站主要有哪些栏目?(栏目清单)[*]在这个层次上我有哪些选择?(本页导航)[*]我在导航系统得什么位置?(位置指示器)[*]怎么搜索?[/list]测试标准只能依据页面的整体外观来判断,而不是细节。

keke 2008-5-17 23:55

第七章

主页要完成的使命:

标识站点、表明站点层次、搜索、导读、最近更新、友情链接、快捷方式、注册。

另外一些抽象使命:

    * 让用户看到自己正在寻找的东西—主页应该能让用户想到的任何东西显而易见,如果它存在的话。
    * 为用户提供他们还没发现的潜在兴趣点。
    * 告诉用户从哪里开始,给用户方向感。
    * 建立可信度和信任感。

首页常见的约束有:

    * 每个人或内容都想占一席之地。
    * 想参与的人或内容太多。
    * 一个尺寸要适合所有人。

网页设计中不能忘掉却常常被忘掉的事—传达网站整体形象。

用户第一次访问一个网站应能回答的4个问题:

    * 这是什么网站?
    * 网站上有什么?
    * 我能在这里做什么?
    * 为什么我应该在这里而不是别的地方。

主页上的每样东西都有助于帮助用户理解网站,有两样东西尤其关键:
口号、欢迎广告。
作用:
不在于是否每个用户都会注意到他们,而在于网站用户多半是从主页的大体内容来猜测网站类型的,如果他们猜不到就要有个地方能让他们找到。

几条传达信息的指导原则:

   1. 需要多大空间就用多大空间。
   2. 但也不要使用过多的空间。
   3. 不要把使命陈述当作欢迎广告。
   4. 是否恰当的标准是进行测试。

口号是依据精炼的短句,它刻画了整个网站、总结它是什么、自身的优势是什么。
口号一般出现在站点Logo周围的某个地方。
口号是非常有效的信息传达方式,因为它是用户希望能找到的关于网站目标具体描述的地方。

选择口号时要注意的地方:

    * 好的口号要清楚、言之有物。
    * 不好的口号含混不清。
    * 好的口号长度适中—6~8个单词足矣(针对英文而言)。
    * 好的口号能表述出网站的特点和显而易见的好处。
    * 不好的口号听起来太笼统。
    * 好的口号应该有个性、生动、有时候还很俏皮。

知道网站类型后,主页要回答的另一个重要问题是:从哪里开始?

当进入一个新的网站,快速浏览主页后,用户应该能明白无误地知道:

    * 要搜索该从哪里开始。
    * 如果想浏览该从哪里开始。
    * 如果只想访问网站最精华的部分该从哪里开始。

避免认知混乱的方法:让每个起点看上去像起点并给它们加上清楚地文字描述。

由于主页导航的独特职责,通常不必与全局导航完全一致。
常见差别有:栏目描述、不同的方向、用于识别的空间更多。
主页导航与全局导航需要保持一定程度的一致性,才能保证用户能马上明白这只是同一导航的两个版本。
最重要的是,让栏目的名称保持不变:同样的顺序,同样的文字和同样的分组。尽可能多地保持相同的视觉提示也很有用,如同样的字体、颜色和大小写。

下拉框存在的问题:

    * 必须点击才能看到下拉列表。
    * 它们难以快速浏览。
    * 他们不好控制,显示和收缩很快,会影响查看效果。
    * 下拉框对于按字母排列的项目比较适用,如国家、省份、或产品名称,因为在这样的浏览不用思考。

主页上增加更多项目所得到的和付出的并不一致。得到推介的栏目获得了巨大的访问量,而由于主页变得混乱而造成的有效性总体损失则要由所有栏目一同承担,这就是共有区域的悲剧,前提很简单:任何共享资源(共有区域)都会因过度使用而遭破坏。

keke 2008-5-17 23:56

第八章

  人的天性有一种把自己的喜好投射到全部[wiki]web[/wiki]用户身上的倾向,认为绝大多数用户喜欢自己所喜欢的,我们通常认为大部分web用户和我们一样。

  由于职位的不同,web[wiki]团队[/wiki]的成员对于好的网站设计如何组成有着非常不同的看法。

  “大部分web用户和我们一样”这样信仰背后还有另一个隐藏得更深的信仰:相信大部分web用户是弹性的,可以随意变化。

  不要问这样的问题“大部分人喜欢下拉框吗?”正确的问题应该是“在这个页面,这样的上下文中,这个下拉框及这些下拉项目和措词会让可能适用这个网站的大部份人产生一种良好的体验吗?”回答这个问题的方法只有一个“测试”。
  争辩人们喜欢什么既浪费时间又消耗团队精力,而通过测试将讨论对错转移到什么有效、什么无效上更容易缓和争论,打破僵局。而且,测试会让我们看到用户的动机、理解、反应的不同,从而让我们不会再坚持“用户的想法和我们的想法一样”。

keke 2008-5-17 23:59

[b]第九章[/b]
[b]焦点小组与可用性测试的区别[/b]:
焦点小组是一小组人(通常5~8人)围坐在桌子旁边,对展示给他们的想法和设计做出反应。这是一个小组过程,主要价值来自参与人员彼此的反应。焦点小组是快速得到用户意见和感觉的一种不错的方法。
可用性测试是一次一个用户展示一些内容(不管是网站、网站原型、或是一些单个页面的草图),并且要求用户说出:1.这是什么?2.试着用它来完成一些典型的任务。
焦点小组在抽象地确定你的目标受众想要什么,需要什么,喜欢什么的时候会很有用。它们也可以测试出网站的理念是否有意义,价值主张是否吸引人。同时,它们在测试你的网站功能命名,发现用户对你的竞争对手看法等方面也是很好的办法,但这种方法并不适合用来了解你的网站运行情况,以及怎样改进网站。
你能从焦点小组了解到的是你在设计网站之前就应该了解得。焦点小组是用在这个过程早期阶段的方法。
可用性测试的几个事实:
[list][*]如果想建立一个优秀的网站,一定要测试。[*]测试一个用户比不做测试好一倍。[*]在项目中,早点测试仪为用户好过最后测试50位用户。[*]人们对招募用户代表的重要性估计过高。[*]测试的关键不是要证明什么或者反驳什么,而是了解你的判断力。[*]测试是一个迭代的过程。[*]没有什么比现场用户的反应更重要。[/list]5个不进行可用性测试的错误辩解:
[list=1][*]我们没有时间[*]我们没有钱[*]我们没有专业知识[*]我们没有可用性实验室[*]我们不知道怎样解释这些结果。[/list]可用性测试对参与的对象不敏感。
招募测试对象可以利用你能够寻找到的普通任何人,然后曲线上升。
测试用户和目标群体之间可以存在差别,理由如下:
[list][*]实际上,我们都是初学者。[*]设计出的网站只有你的目标群里会使用,这通常不是个好主意。[*]专家通常不会介意对初学者来说很直观的界面。[/list]一些例外:
[list][*]如果你的网站几乎只由某一类用户使用,而且招募这一类测试用户并不困难。[*]如果你的目标用户群体可以分成几个明显的阵营,而且这些阵营有着完全不同的兴趣和需要。[*]如果使用你的网站需要专门领域的知识。[/list]招募测试对象应注意的几个问题:
[list][*]提供合理的激励。[*]邀请要简单。[*]避免对网站(或网站背后的组织结构)进行预先讨论。[*]别不好意思请朋友和邻居帮忙。[/list]可用性测试分两种:“理解”测试和关键任务的测试。
[list][*]“理解”测试就是让用户看到网站,然后看他们能否理解这个网站,理解网站的目标,价值主张,组织方法,运行方式等。[*]关键任务测试就是让用户完成一些任务,然后观察他们是怎么做的。[/list]建立网站时,越早把设计思想展示给用户约好,设计师通常不愿意展示尚未完成的作品,但用户更愿意评论一些看起来还没有完成的东西,因为他们知道你还没有投入太多,还有机会进行修改,而且,由于这还不是一个精雕细琢的设计,用户不会被实现细节所吸引,从而可以把注意力集中在要点和措辞上。
总结测试结果要做的两件事:给问题分类,解决问题。
从其他人的角度看你的作品,这样的体验常常能为问题提供全新的解决方案,或者让你用一种崭新的眼光看待原有问题。
测试过程中最有可能碰到的问题:
[list][*]用户不清楚概念[*]他们找不到自己要找的字眼[*]内容太多[/list][b]问题内类指南[/b]:
忽略皮划艇问题:
可能会遇到这种情况:用户暂时出现错误,然后再不需要任何帮助的情况下回到原来的轨道,只要,1.出现问题的人马上发现自己偏离了原来的主体。2.他们尽量回到原来的方向而不需要帮助。3.这种情况看起来并没有扰乱他们的活动,你就可以忽略这些。总的来说,如果用户关于在哪里找到他们需要的内容的第二次猜测总是对的,那就不是什么问题。
抵制添加的冲动:
当在测试时清楚地看到人们没有理解某些内容时,大部分人的第一反应是增加一些内容,如注释或一些指导说明。然而正确的解决方案往往是去掉某个或某些让人混淆的内容,而不是增加另一些干扰。
不要太看重人们对新功能的要求。
抓住够得着的果子:
每轮测试中,你的主要目标是寻找重要而不费力的收获,一般有两个类别:恍然大悟型和便宜型。
注意整体性:当你把某些部分调整得更为突出时,想想看是不是把其他内容的重要性降低了。

keke 2008-5-18 00:01

第十章

Web 可用性除了不要让用户思考,还有另外一个重要的组成部分:做正确的事,为用户考虑周到。除了“我的网站清除吗?”之外,还要问“我的网站值得尊敬吗?”

降低好感的几种方式:

    * 隐藏我想要的信息
    * 因为没有按照你们的方式行事而惩罚我
    * 向我询问不必要的信息
    * 敷衍我、欺骗我
    * 给我设置障碍
    * 你的网站看上去不专业

提高好感的几种方式:

    * 知道人们在你网站上想做什么,并让它们明白简易
    * 告诉我我想知道的
    * 尽量减少步骤
    * 花点心思
    * 知道我可能会有哪些疑问,并且给予解答
    * 为我提供协助,例如打印友好页面
    * 容易从错误中恢复
    * 如果不确定,记得道歉
页: [1]
查看完整版本: 精品奉献:访客至上的网页设计秘笈《别让我思考》连载