关闭

点石成金 访客至上的网页设计秘笈 (全一点)

629人阅读 评论(0) 收藏 举报
分类:

Don't Make Me Think

中文:《点石成金 访客至上的网页设计秘笈》

前言

作者的网站:www.sensible.com/secondedition

Web Application的建议:Susan Fowler, Victor Stanwick的《WebApplication Design Handbook: Best Practices for Web-Based Software》(Web应用设计手册:基于Web软件的最佳实践)

可用性原则:某个东西越是需要投入大量时间,它将来用到的可能性越小。(书薄点好)

可行性的本质:如果某个东西很难用,我就不会经常用它。

你不需要面面俱到。掌握到一定程度就足够了,除非成为这方面的专家。(《血字的研究》福尔摩斯不知道地球绕太阳转,认为这个知识无用,对他和他工作没有影响)

书中的网站示例多为电子商务网站,书中的网站都很好,因为你可以从好网站学到更多。

指导原则

第一章 别让我思考

Krug可用性第一定律:别让我思考。

当我们看到一个网站,就能明白它是什么,一切要不言而喻。比如用“jobs”比“employmentopportunities”更明了,虽然不是很正式。还有就是按钮做的不太明显,让人不知道可不可以点击。

有的干扰或许小,但是它们累计起来,这就让我们抓狂。比如“Quick Search”就可以用“Search”,不应要求选择按(作者,标题,内容)来搜索。在因特网上,竞争有时就在于一个点击的差别。

 

第二章 使用Web:扫一眼,满意即可,勉强应付

第一个事实:我们不是阅读,而是扫描,花极少时间只找注意力的文字和词语。(www.useit.com <Howusers read on the web>)

第二个事实:我们不作最佳选择,而是满意即可。我们不会做最佳选择,而是选择第一个合理的选项。(GaryKlein的《Sourceof Power: How People Make Decisions》力量之泉:人们如何决策)

第三个事实:我们不会追根究底,而是勉强应付。很少人读说明书才用电器或网站。

我们偶然发现一个好方法,会一直用它,很少主动寻找更好的方法。

像设计广告牌那样设计网站吧。

 

第三章 广告牌设计101法则:为扫描设计,不为阅读设计

为了用户理解你的网站,在以下5个重要方面注意:

建立清楚的视觉层次(比如报纸排版)

准确的表述页面内容之间的关系(哪些内容相关,和从属关系)

-越重要的部分越突出。如字体更大,加粗,颜色,空白,接近顶部,结合这些。

-逻辑上相关的部分在视觉上也相关。相近的内容分成一组,同样式样等。

-逻辑上包含的部分在视觉上也嵌套。

 

习惯用法是你的好帮手

习惯非常有用。比如使用购物车图标,不必加上“购物车”的文字说明;

设计师常常不愿意利用它们。他们总想与众不同的设计。除非很有价值或者没有学习曲线。

 

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

让用户很快关注页面哪些区域,忽略哪些区域。

 

明显标识可以点击的地方

如果链接都是彩色的文字,让人无法一眼看出哪些是链接。(小问题)

搜索按钮,用“search”或“go”字样。

 

降低视觉噪声

原则:先假定所有内容都是视觉噪声,除非得到证明它们不是。

避免眼花缭乱和背景噪音(比如分割线不应黑色而是灰色的)

 

第四章 为什么用户喜欢无须思考的选择

Krug可用性第二定律:点击多少次都没有关系,只要每次点击都是无须思考,明确无误的选择。

经验准则:三次无须思考,明确无误的选择相当于一次需要思考的点击。(如网站性能太差另说)

作者认为,让用户选择home/office, Windows 95/98, English US/English International的选择会让用户模糊和思考。

 

第五章 省略不必要的文字

Krug可用性第三定律:去掉每个页面上一半的文字,然后把剩下的文字再去掉一半。

在大学学到最重要的东西,就是E.B.White《The Elements of Style》。第17条:省略多余的文字,有力的文字都很简练。

欢迎词(happy talk)必须消灭。那种以“欢迎……”开头的段落,在各页面版头(sectionfronts)。

指示说明(instruction)必须消灭。没人细读这些指示。

实例:作者把一个大段的指示说明103字改为41个单词:

请您回答以下问题帮助我们改进网站,只要花费您两三分钟时间。

注意:如果您有问题或意见需要回复,请不要本表格,请您联系客服。

 

必须正确处理的几个方面

第六章 设计导航

如果在网站上找不到方向,人们不会使用你的网站。这就是导航的作用。

用户的习惯:为了某个目标,决定先搜索还是浏览,如浏览就在栏目清单中找,没找到离开。

明确,简单,一致的导航:

左上角有网站ID或log;

导航数量为4-5实用工具;

保持站点结构层次,注意底层导航和一级二级一样重要;

所有的页面(主页,表单页除外)保持一致的导航;

最好有home连接或者点击ID回到主页面;

加倍突出当前位置:用指示器标志,改变字体颜色,粗体,反白,底色突出当前栏目;

或告诉你当前位置路径(一般在顶部,用>分隔,最后一项加粗,全用小字体,页面名字除了在路径上单独也存在):You are Here: Home>Arts>Visual Arts>Item 001

 

标签是大型网站导航的上佳选择,(标签:Amazon中选中一项目会自动显示出所有子项目),突出激活的标签(不同颜色)。

每个页面提供搜索最好了,参考Louis Rosenfeld和PeterMorville的InformationArchitecture for the World Wide Web中搜索内容的部分。名字就是“搜索”(search,go)作为关键字。可以不需要选项,如果搜索结果太多,可以提供选项(如作者,书名)。

每个页面都需要一个名称,而且出现在合适的位置(结构上包含本页的内容),要引人注目,和到这页面来的链接的名称一样或进可能匹配。

 

不管在哪个页面,都要能回答这些问题:

这是什么网站(ID);

在哪个页面上(网页名称);

网站主要栏目有哪些(栏目清单);

有哪些层次上选择(本页导航,如本页那些推荐标题);

在导航系统什么位置(我在这里的指示器);

怎么搜索(搜索);



 

 

第七章 设计主页

主页,每个人都有看法,所有项目都想占一席之地等,就会变得复杂混乱。主页要传达整体形象。让用户能毫不费力的知道:这是什么网站;能做什么;网站有什么;为什么在这里。

主页作用-站点(内容)层次:

站点的标识和使命;

搜索(突出显示),

注册,

导读或内容推介,

内容更新,

友情链接,

还有用户想找到的东西。

 

 

传达网站的意图:

--口号:放在靠近站点ID的地方;没有什么比得上一个好口号-清楚,长度适中,不太笼统。口号不是神圣的宗旨,口号可以有个性,生动,或俏皮。出名品牌可以不需要口号。

--欢迎广告:简要描述,主页首要位置,不要滚动屏幕;是ID的阐述而不是无用广告。不要阐述公司使命,让公司外的人测试。

避免混乱的最好方法:让搜索框像搜索框,让栏目列表看起来像栏目列表,文字描述简单明了,如“搜索”,“登录”,“分类浏览”等。内容要归归好。

主页的导航可以不一样,但不要相去甚远,保持一致性(字体,颜色,大小写,顺序等)。比如,栏目的描述可以多点描述性短语,不同方向(水平,垂直),用于识别的空间更多(如ID更大)。

下拉框不是很好。除非按字母排序的项目让人提高效率。

确定你没有做错的几件事

第八章 为什么WEB团队讨论可用性是浪费时间,如何避免

在争论web设计中,常常除了浪费时间都一无所获。因为大家以为所有web用户和自己一样的喜好。

调研结论:所有web用户都是独一无二的,所有的web使用都是不一样的。不存在什么普通用户。

没有简单的答案。良好的,一体化的设计能满足需要,经过仔细考虑,实现和测试的设计都是好的。

不要争论,测试!你必须使用团队集体技巧,经验,创造力和判断力来创建一些版本,仔细观察人们的看法和使用方法。没有其他方式。

 

第九章 让测试更简单-这样你能充分测试

可用性测试:软件是否容易使用,观察问题所在(很容易观察,因为严重的问题难以遁形,哪些地方好),修改再测试。即:站在别人角度看网站。

如果没有人能理解网站的价值主张,那么使用水平导航条还是竖直的菜单没有多大区别。可用性测试太少了,太迟了,成了错误的理由。

测试原则:早&&随便用户:

3-4个一般会上网的人,在任何时间,持续小规模测试,即:少数人多轮测试比很多人一轮测试好。每次用会议/当面沟通而不是文字报告,修复最重要问题,再测试。

建立一个优秀的网站,一定要测试,糟糕的用户也比没测试好。

记录和观察用户的测试。最好录制下来(可用屏幕录制软件),最好观察用户的表情。来改进。

早测试的一位用户好过最后测试50位用户。测试用户少,也能得到一样的结果。而且测试对象不重要,即任何人。

测试关键不是证明或者反驳什么,而是做出判断力。不是判断A和B谁好,而是测试给你提供有价值的参考,加上你的经验和判断,做出选择。

测试是一个迭代的过程。开发测试的迭代过程。

没有什么比现场用户的反应更重要。Mark兄弟的电影,他们跟着杂技团巡游记下哪些台词掌声多不断改进。

人们对招募用户代表期望估计过高用户没有比更早更经常测试重要。我的信条“宽松招募,曲线上升”。

设计出网站只有目标群体才能用,不是个好主意。一般人能用,目标用户也就会用,除非特别专门领域。别不好意思请朋友和邻居帮忙。而且给合理的激励(钱)。

测试环境:

一个不被打扰的房间,一个电脑两个椅子足矣。

测试流程:

不要预先对网站进行讨论,看看用户第一次接触能不能看到网站的主旨。

也可以让公司高层参加测试。

让用户有自主选择空间的任务,会进行感情投入。最好从草图开始测试最好。

最好让团队成员观看至少一部分过程。

 

测试流程总结:

一个上午做3-4轮测试,再做个简单的总结:1给问题分类,决定修复哪些问题;2解决问题;这里没有报告和大量的会议。

 

“小隔间”的测试:如果建立一种新页面,打印出来给别人看看是否能弄清页面的意思。

大的方面和外界影响:

第十章 可用性是基本礼貌:你的网站要受人尊敬

航空网站不去更新可能罢工的信息,失色不少。网站除了正确和可理解,还要受尊敬。

减低网站好感的几种方式:

1隐藏我想要的信息,如客服电话等;2没有按照你们的方式行事而惩罚我,如对数据设置格式中间加破折号;3询问不必要的信息,如个人信息;4敷衍我,欺骗我;5设置障碍,如对待一个很长flash介绍;6你的网站不专业,如组织不好,布局上不好等;但如果不是无心之举:(有时候故意不友好,如弹出窗口获得10%收益的商业化)。

 

提高网站好感的几种方式:

1知道人们在你网站做什么,并且明白简易,自问“用户想做的三件事”,一切让事情简单;

2告诉我知道的,坦诚点,比如运费等;

3尽量减少步骤,在邮件里提供链接物流信息;

4花点心思,比如HP打印机技术支持网站,每次都可以找到问题答案来解决;

5知道哪些疑问并且解答,是真正的问题列表,保持最新FAQ,保持坦率;

6提供协助,例如打印友好界面,帮把广告去掉;

7容易从错误中恢复,如错误不可避免应该提供恢复,推荐看书“Defensive Design for the Web”;

8如有不确定,记得道歉。做不到,也要让客户知道。

 

第十一章 可访问性,级联样式表和你

可访问性(Accessibility),确认残障人士能访问,确保网站支持可访问性。比如,网站的三秒钟可访问性测试—增大字体。

增强可访问性的5方面:

1改正让所有人感到混淆的可用性问题:最好经常测试,消除每个人都混淆不清的地方,让每个人觉得好用;

2读一篇文章:如何让某样东西更好用,方法是观察人们实际如何使用它。用户没有耐心,一定在最开始提供关键字。有文章“Guidelines for Accessible and Usable Web Sites: Observing Users Who work with Screen Readers”(观察盲人阅读习惯), 地址:http://www.redish.net/images/stories/PDF/InteractionsPaperAuthorsVer.pdf

3看一本书,比如joe Clark的Building Accessible Websites; Jim Thatcher等著的Constructing Accessible Websites, John Slatin等著的Maximum Accessibility: Making Your Web Site More Usable for Everyone, 和一张CD:“The Web AIM Guide to web Accessibility techniques and concepts”

4学习CSS,尤其是Eric Meyer写的书。历史上第一次CSS来自CSS Zen Garden(www.csszengarden.com, 书The Zen of CSS Design)

5去摘够得着的果实:每张图片增加alt文本;让你的表单配合你的屏幕阅读器(lable元素),每页最前面增加“跳转到主要内容”的链接;让所有的内容可以通过键盘访问(不要鼠标),没有充分理由,不用JS;使用客户端(不是服务器端)的影像地图 image map。

 

第十二章 救命!老板想要我:当好人遇到不好的设计决策。

网站要求用户填写个人信息时的三个原则:

只让我提供完成此次事物所需的信息;

不要要求填写过多可选信息;

告诉我提供自己的信息将得到的好处,如简报等

 

为网站添加“注意力吸引力”的原则:

CEO一般会追求网站的外观性更花哨。网站不需要,但必须有表现力,专业,吸引人。不要有这些问题:启动页面,大图片,载入时间太长,音乐和动画。除非是提供最重要的信息,或提供视听享受的网站,纯品牌网站(如一早餐产品网),WEB开发素材网站等。让人们完成他们想做的工作,不要粘着烦人。

 

 

推荐读物(Recommended reading

Information architecture for the world wide wed

why we buy: the science of shopping

source of power: how people make decisions

The practice of creativity: a manual for dynamic group problem solving

Jakob Nielsen网站:www.useit.com

Nielsen Norman group:  www.nngroup.com/reports/ (价格有点贵)

A practical guide to usability testing

The design of forms网站:http://www.formsthatwork.com/

Homepage usability: 50 websites deconstructed

2个网站:www.webword.comwww.usabilityviews.com

research based guiddline网站: http://guidelines.usability.gov/

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:166165次
    • 积分:2241
    • 等级:
    • 排名:第17483名
    • 原创:27篇
    • 转载:218篇
    • 译文:0篇
    • 评论:23条
    文章分类
    最新评论