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

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.com ； www.usabilityviews.com

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