016《点石成金》

 

阅读评分：4.5分（满分5分）

阅读感受：

1. 流传已久，必有其道理。

2. 短小精悍，在用户行为、导航设计、主页设计、可用性测试等方面，作者都提出了观点和可行的建议，适合于互联网产品/Web设计人员和前端开发人员。

3. 两小时，你能了解到的真的是最初级最初级的内容，这本书只管扫盲，不管精进。

4. 结合项目读，边看边试，会有更大的收获。

阅读笔记（1-7章）：

1. Krug可用性第一定律：别让我思考！

一个页面应该是不言而喻、一目了然、自我解释的。因为大多数人会比我们想象中少得多的时间来浏览网页。

2. 如果想设计有效的网页，你必须开始接受关于网络使用情况的三个事实。

• 我们不是阅读，而是扫描。
• 我们不作最佳选择，而是满意即可。事实上，大多数时间里我们不会选择最佳选项，而是选择第一个合理的选项，这就是满意策略。
• 我们不是追根究底，而是勉强应付。很多人完全不是以设计师设想的方式使用网络和软件，但他们用的很好。

3. 如果用户们都是疾驰而过，那么，你需要注意一下5个重要方面，来保证他们尽可能地看到并理解了你的网站：

1） 在每个页面上建立清楚的视觉层次。

一个视觉层次清楚的页面有三个特点：

• 越重要的部分越突出。
• 逻辑上相关的部分在视觉设计上也相关。
• 逻辑上包含的部分在视觉上进行嵌套。

2） 尽量利用习惯用法。

3） 把页面划分成明确定义的区域。可以让用户很快决定关注页面的哪些区域，或者放心地跳过哪些区域。

4）明显标识可以点击的地方。

5）最大限度降低干扰。

有两类视觉噪声：

• 眼花缭乱。所有的内容都希望引起注意，效果可能适得其反。
• 背景噪声。如菜单项之间的间隔线。

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

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

1）欢迎词必须消灭。没有包括有用的信息，只是一个劲地在说自己多好。

2）指示说明必须消灭。至少在多次“勉强应付”失败之前，没有人会细读他们。你的目标应该是通过让每项内容不言而喻来完全消除指示说明，或者尽可能做到这一点。

6. 导航的用途：

• 帮助我们找到想要的任何东西。
• 告诉我们现在身处何处。
• 它给了我们一些固定的感觉。
• 它告诉我们当前的位置。
• 它告诉我们如何使用网站。
• 它给了我们对网站建造者的信心。

导航的习惯用法：

持久导航（Persistent Navigation，或全局导航）：描述出现在网站每个页面上的一组导航元素。会让你立即确认自己仍然待在这个网站上。

应包括5个元素：站点ID，栏目，回主页的方式，搜索的方式，实用工具

1）站点ID通常在左上，因为它在当前站点结构中层次最高。

2）栏目，有时也称主导航条（Primary Navigation），是到达站点主要栏目的链接，即站点层次结构的最顶层。

3）让一个返回主页（Home）的按钮始终可见，另一个习惯做法，就是让站点ID同时也作为一个让你回到主页的按钮。

4）实用工具（Utility），是到达网站中不属于内容层次的重要元素的链接。

5）提供搜索，一个输入框，一个按钮，还有“Search”。

PS，主页内不必使用持久导航；填写表单时，持久导航可能会成为不必要的干扰。

对于这些页面，只需要站点ID，一个回到主页的链接和任何有助于填写表单的实用工具作为最小规模的持久导航就可以了。

7. 页面名称。注意以下四点：

• 每个页面都需要一个名称。
• 页面名称应该出现在涵盖该页内容的位置。
• 名称要引人注目。
• 名称要和点击的链接一致。

8.

• “You are here”：突出当前位置，告诉你所在的站点层次结构的前后关系。
• 面包屑（层级菜单）：告诉你从主页到当前位置的路径。

9. 标签是极少几个将物理隐喻有效应用到用户界面中的例子之一。

• 它们不言而喻。
• 它们很难错过。
• 它们很灵活。标签能增加修饰作用而且更实用。
• 它们暗示了一个物理空间。当前的标签在物理上出现在最前面。

Amazon的标签：

10. 设计主页

1）主页要完成的任务

• 站点的标识和使命。这是什么网站，它做什么的，如果可能，告诉我为什么我应该在这里，而不是到别的网站。
• 搜索。突出显示的搜索框。
• 导读。Content promos（内容推介）部分应突出最新、最好、最流行的内容片断，例如头条新闻或热销产品。Feature promos（功能推    介）部分邀请我去访问网站更多的栏目或者试用一些个性化功能或邮件简报等。
• 内容更新。主页应有一些经常更新的内容，告诉我活跃的迹象。
• 友情链接。需要在主页上预留空间，用来放置广告、交叉推广、合作品牌的推广链接等。
• 快捷方式。最常访问的内容片断（如软件升级）值得在主页上放置链接。
• 注册。新用户注册和老用户登陆链接，并且要有某种方式让我知道自己已经登陆了。（欢迎回到XX，Steve Krug）

除了这些具体的，还需要满足一些抽象的目标：

• 让我看到自己正在寻找的东西。主页应该让我想要的任何东西显而易见。
• ……还有我没有寻找的。一些很精彩的也许会感兴趣的内容——就算我并没有寻找它们。
• 告诉我从哪里开始。
• 建立可信度和信任感。

2）常见的约束

• 主页的位置争夺激烈。
• 想要参与发表看法的人太多。
• 一个尺寸要适合所有人。

3）主页的混乱中有一件事往往会被忘掉——传达整体形象。这就是共有区域的悲剧（The Tragedy of the Commons）。

在主页上增加更多项目所得到的和付出的并不一致，得到推介的栏目获得了巨大的访问量，而由于主页变得更混乱而造成的有效性总体损失则要由所有的栏目一同承担。应该让所有的利益相关者知道过度使用主页的危险，并且提供其他方法来缓解这种需求，例如从其他热门页面进行推荐，或者轮流使用主页上的同一块空间。

4）如何传达

两个重要的位置要清楚陈述。

• 口号（Tagline）：靠近站点ID的地方，当做整个网站的描述。
• 欢迎广告：是网站的简要描述，在主页的首要位置显示，不需要滚动屏幕就能看到。

传达信息的指导原则：

• 需要多大空间就使用多大空间。
• 但也不要使用过多的空间。阐述应保持简短，表明观点即可。只提最重要的功能（4个）。
• 不要把使命陈述当做欢迎广告。如“XX公司在XX发展领域提供一流的解决方案…”
• 最重要的是进行测试。

5）主页导航可以不一样

由于主页独特的职责，通常不必使用持久导航，常见的差别包括：

• 栏目描述。每个栏目名称增加一些描述性的短语，甚至想列出下一级栏目。
• 不同的方向。可能使用垂直导航而不是水平导航。
• 用于识别的空间更多。主页上的站点ID通常会比持久导航上的站点ID更大，品牌口号不一定出现在每个页面上。

6）下拉框的问题

• 列表上的项目不可能在扫描页面时看到。
• 标准的HTML下拉菜单，无法控制字体、间隔和列表的格式，以提高菜单的可读性，也没有什么好办法把列表分成几组。
• 它们不好控制。列表的显示和收缩很快，会影响查看效果。

下拉框对于组织按字母顺序排列的项目来说最有效，例如国家、省份或产品名称。

阅读笔记（8-12章）

1. WEB设计团队讨论可用性是在浪费时间

原因：

1）“每个人都喜欢______”

我们也是Web用户，对网站上自己喜欢什么不喜欢什么有着强烈的感觉。而且，由于主张的力量和人的天性，自然有种把这些喜欢或不喜欢投射到整个Web用户身上的倾向。

2）职位情绪

设计师通常认为，大多数人喜欢视觉上看起来有趣的网站；开发人员认为人们喜欢功能又多又酷的网站；在建立优先级时，他们在看法上的不同常引发冲突。

更大的冲突是市场文化和工程文化（The Cultures of Hype and Craft）。当市场文化（上层管理、市场、业务拓展）关注于在网站上做出有助于吸引风险投资、用户、战略合作伙伴和赢利的承诺时，实现这些承诺的责任就落在设计师和程序员这样的工程文化人员身上。这增加了另一个层次的复杂性——这种复杂性常体现为从市场文化那边下达的武断指示。

3）普通用户的神话

“大部分Web用户和我们一样”&“相信大部分Web用户是弹性的，可以随意变化的。”

实际上，所有Web用户都是独一无二的，所有的Web使用都是不一样的。

大部分Web设计问题（至少对于重要的问题来说），没有简单的“正确”答案，良好的、一体化的设计能满足需要，也就是说，经过仔细思考、实现和测试的设计就是好的。

2. 焦点小组不是可用性测试

• 焦点小组：一小组人（5-8人）围坐在桌子旁边，对展示给他们的想法和设计做出反应。主要价值来自参与人员彼此的反应，焦点小组是快速得到用户的意见和感觉的一种不错的方法。
• 可用性测试：一次一个用户展示一些内容（不管网站，网站原型，或是一些单个页面的草图），并且要求用户说出：1）这是什么；2）试着用它来完成一项典型的任务。

焦点小组在抽象地确定你的目标受众想要什么，需要什么，喜欢什么的时候会很有用。它们也可以测出网站的理念是否有意义，价值主张是否吸引人。同时，在测试你的网站的功能命名，发现用户对你的竞争对手看法等方面，也是很好的办法。但不适合用来了解网站的运行情况，以及怎样改进网站。

3. 测试：

1）关于测试的几个事实：

•    如果想建立一个优秀的网站，一定要测试。你会意识到有很多你认为想当然的事情，对别人来说却并非如此。
•    测试一个用户比不做测试好一倍。
•    在项目中，早点测试一位用户好过最后测试50位用户。
•    人们对招募用户代表的重要性估计过高。重要的是尽早和经常测试。
•    测试的关键不是要证明什么或反驳什么，而是了解你的判断力。
•    测试是一个迭代的过程。
•    没有什么比现场用户的反应更重要。

2）简易可用性测试

3）应该测试多少用户

每轮测试的理想用户数量应该是三个，最多是四个。前三个用户很可能会遇到几乎所有最明显的问题，而且最重要的是多做几轮测试，而不是写下每轮测试里面发现的所有问题。

测试对象是谁并不重要。利用你能够寻找到的任何人（满足最低要求），然后曲线上升。

4）招募时要注意：

• 提供合理的激励。
• 邀请要简单。“我们需要一些人来看看我们的网站，并给我们一些反馈，这很容易，大约花费45分钟到一个小时的时间，而且你将得到______美元的报酬。
• 避免对网站（或网站背后的组织结构）进行预先讨论。
• 别不好意思请朋友和邻居帮忙。

5）测试时可以采用屏幕录制软件（例如Camtasia），可以鼓励任何人来参与。

6）测试什么，什么时候测试

在开始设计网站时，测试一下同类网站，总结哪些地方好，哪些地方效果不好。

可以进行两种测试：“理解”测试和关键任务测试。

• “理解”测试：让测试用户看到网站，然后看他们能否理解这个网站的目标、价值主张、组织方法、运行方式等。
• 关键任务测试：让用户完成一些任务，然后观察他们是怎么做的。

也推荐做“小隔间”的测试：打印出来，拿给旁边隔间的人，看他们是否能弄清楚页面的意思。

7）立刻回顾测试结果

做两件事：

• 给问题分类——回顾大家看到的问题，决定哪些问题需要修正
• 解决问题——找出修正这些问题的方法

8）几种在测试过程中最有可能遇到的问题：

• 用户不清楚概念。不知道说的是什么，或者理解有误。
• 他们找不到自己要找的字眼。这通常意味着：1）你用来组织内容的分类不符合用户的习惯，2）分类符合他们的习惯，但没有使用他们期望的名字
• 内容太多了。用户看不到，需要1）减少页面上的整体干扰；2）把他们需要看到的内容设置得更加醒目，让它们从可视层次结构中更加突出。

9）关于决定修正什么问题的建议：

• 忽略“Kayak”（皮划艇）问题。只要1）出现问题的人马上发现自己偏离了原来的主题，2）他们尽量回到原来的方向而不需要帮助，3）这种情况看起来并没有扰乱他们的活动，就可以忽略。
• 抵制添加的冲动。正确的解决方案往往是去除某个（或一些）让人混淆的内容，而不是增加另一些干扰。
• 不要太看重人们对新功能的要求。他们只是在告诉你喜好而已。
• 在每轮测试中，你的主要目标是寻找重要而不费力的收获。

成功的网页往往要进行巧妙的平衡。一个微小的变化都会带来不小的影响。修正这些问题同时不破坏已经正常运行的部分。

4. 好感存储器

1）网站降低好感的几种方式：

• 隐藏我想要的信息。最常见的情况是隐藏客户服务的电话号码，运费和价格。
• 因为没有按照你们的方式行事而惩罚我。
• 向我询问不必要的信息。网站要求的信息超出当前任务时会让用户觉得厌烦。
• 敷衍我，欺骗我。虚伪的真诚和假意的关心。
• 给我设置障碍。长长的Flash介绍，多个市场页面。
• 你的网站看上去不专业。组织得不好，布局没有下功夫。

2）提高好感的几种方式

• 知道人们在你网站上想做什么，并让它们明白简易。
• 告诉我我想知道的。把运费、旅店日停车费用、暂停服务以及其他你不愿意放在前面的项目放在前面。
• 尽量减少步骤。
• 花点心思。
• 知道我可能有哪些疑问，并且给予解答。
• 为我提供协助。
• 容易从错误中恢复。推荐读物Defensive Design for the Web。
• 如有不确定，记得道歉。

5. 支持可访问性是正确的做法。现在就能正确实施的五件事：

1）改正让所有人感到混淆的可用性问题。让网站对我们其他的人更好用，会让残障人士用得更好。

2）读一篇文章《Guidelines for Accessible and Usable Web Sites: Observing Users Who Work with Screen Readers》。屏幕阅读器用户用他们的耳朵扫描。

3）看一本书

<Building Accessible Websites>——Joe Clark

<Constructing Accessible Websites>——Jim Thatcher

<Maximum Accessibility: Making Your Web Site More Usable for Everyone>——John Slatin & Sharron Rush

CD: The Web AIM Guide to Web Accessibility Techniques and Concepts

4）开始使用级联样式表。好处：

• 对格式的控制没有限制。
• 灵活性。
• 浏览器之间的一致性。
• 实现CSS将让你很容易做到两点大幅改善网站的可访问性。
• 序列化你的内容。
• 允许你重新定义文字大小。

5）在HTML代码中做一些具体的变更

几件最重要的事：

• 为每张图增加alt文本。
• 让你的表单配合屏幕阅读器。这在很大程度上分解为使用HTML的label元素把表单字段和提示文本联系起来，以便人们知道他们应该输入的内容。
• 在每页的最前面增加一个“跳转到主要内容”的链接。
• 让所有的内容都可以通过键盘访问。因为不是每个人都能使用鼠标。
• 如果没有充分的理由，不要使用Javascript，有些自适应技术对Javascript的支持不是很好。
• 使用客户端（而不是服务器端）的影像地图（Image Map）。Alt标记不支持服务器端的影像地图。

6. 要求太多个人数据的危险

询问不必要的信息可能产生三个严重后果：

• 您常常无法得到真实的数据。
• 您得到的完整表单更少。
• 使您的网站形象下降。

要记住下面三个原则：

• 只让我提供完成此次事务所需的信息。
• 不要要求填写过多可选信息，只是看到那么多要填写的字段已经让人不快了。要求的可选信息较少会得到更多回复。
• 告诉我提供自己的信息将得到的回报。明确告诉我注册以后将得到什么，给我一份电子简报的样本，等等。

7. 为您的网站增加“注意力吸引点”

网站不需要很炫目，外观必须要有表现力、要专业、吸引人。试图增加注意力吸引点也通常会给他们增加障碍。

您可以按照您的想法去做以便让网站有更好的外观，但是要保证这样做不会妨碍网站的正常运行。而且大部分的花哨招数只会妨碍网站正常运行。

想想您自己的经验：您喜欢使用的网站，是因为它们看起来很炫，还是因为它们拥有您想要或需要的信息您才喜欢它？您能找出一个网站，它的内容很有趣，或者很有用，但您因为它看起来不够有趣而不用它的吗？

 

编后记

采编：ZOUDECAO（微信/QQ:82075451） E_mail: zdco@qq.com

感谢作者辛苦原创！部分文章未能与原作者联系，如侵权请联系我们删除。转载请注明出处！如果觉得本文对你有启发，可以点击一键转发，分享给我们身边喜欢的朋友。因为分享，所以快乐。

本文来自 德艺志 转载请注明；

本文地址：http://www.zoudecao.net/post/1395.html。