DON’T MAKE ME THINKDON’T MAKE ME THINK

A Common Sense Approach to A Common Sense Approach to Web UsabilityWeb Usability

KrugKrug可用性第一定律：可用性第一定律：

别让我思考别让我思考

►在因特网上，竞争有时候就在于一个点击的在因特网上，竞争有时候就在于一个点击的

差别差别

►是什么像什么，是什么说什么是什么像什么，是什么说什么

►如果你做不到让一切都不言而喻，那就先做如果你做不到让一切都不言而喻，那就先做

到“自我解释”到“自我解释”

我们实际上是如何使用我们实际上是如何使用 WebWeb的的扫描，满意即可，勉强应付扫描，满意即可，勉强应付

►第一个事实：我们不是阅读，而是扫描第一个事实：我们不是阅读，而是扫描

►第二个事实：我们不作最佳选择，而是满意第二个事实：我们不作最佳选择，而是满意

即可即可

►第三个事实：我们不是追根究底，而是勉强第三个事实：我们不是追根究底，而是勉强

应付应付

广告牌设计广告牌设计 101101法则法则

►建立清楚的视觉层次建立清楚的视觉层次 越重要的部分越突出越重要的部分越突出

逻辑上相关的部分在视觉上也相关逻辑上相关的部分在视觉上也相关

逻辑上包含的部分在视觉上进行嵌套逻辑上包含的部分在视觉上进行嵌套

►习惯用法是你的好帮手习惯用法是你的好帮手

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

►明显标识可以点击的地方明显标识可以点击的地方

►降低视觉噪声降低视觉噪声

KrugKrug可用性第二定律：可用性第二定律：

点击多少次都没关系，只要每次点击点击多少次都没关系，只要每次点击

都是无须思考、明确无误的选择。都是无须思考、明确无误的选择。

►准则：三次无须思考、明确无误的点击相当准则：三次无须思考、明确无误的点击相当

于一次需要思考的点击于一次需要思考的点击

KrugKrug可用性第三定律：可用性第三定律：

去掉每个页面上一半的文字，去掉每个页面上一半的文字，

然后把剩下的文字再去掉一半。然后把剩下的文字再去掉一半。

►几个好处：几个好处： 可以降低页面的噪声；可以降低页面的噪声；

让有用的内容更加突出；让有用的内容更加突出；

让页面更简短；让页面更简短；

►两个必须：两个必须： 必须消灭欢迎词必须消灭欢迎词

必须消灭指示文字必须消灭指示文字

必须正确处理的几个方面：必须正确处理的几个方面：

街头指示牌和面包屑街头指示牌和面包屑

►无法承受的浏览之轻：感觉不到大小、方向、位置无法承受的浏览之轻：感觉不到大小、方向、位置

►导航的用途：导航的用途： 帮助我们找到想要的任何东西帮助我们找到想要的任何东西

告诉我们现在身处何处告诉我们现在身处何处

它给了我们一些固定的感觉它给了我们一些固定的感觉

还有：还有：►它告诉我们当前的位置它告诉我们当前的位置

►它告诉我们如何使用网站它告诉我们如何使用网站

►它给了我们对网站建造者的信心它给了我们对网站建造者的信心

街头指示牌和面包屑街头指示牌和面包屑

►持久导航应该包括持久导航应该包括 55个元素：个元素： 站点站点 IDID 栏目栏目 实用工具实用工具

回主页的方式回主页的方式

搜索的方式搜索的方式

►持久导航的例外：持久导航的例外： 主页：表现可不同主页：表现可不同

表单：只需站点表单：只需站点 IDID、回主页的方式等、回主页的方式等

街头指示牌和面包屑街头指示牌和面包屑

►重视低层次的导航重视低层次的导航

►重视页面名称重视页面名称 每个页面都需要一个名称每个页面都需要一个名称

页面名称要出现在合适的位置页面名称要出现在合适的位置

名称要引人注目名称要引人注目

名称要和点击的链接一致名称要和点击的链接一致

►你在这里：突出当前位置你在这里：突出当前位置

►面包屑（层级菜单）面包屑（层级菜单）

街头指示牌和面包屑街头指示牌和面包屑

►喜欢标签的四个理由：喜欢标签的四个理由： 它们不言而喻它们不言而喻

它们很难错过它们很难错过

它们很灵活它们很灵活

它们暗示了一个物理的空间它们暗示了一个物理的空间

►AmazonAmazon标签设计：标签设计： 正确绘制正确绘制

颜色编码颜色编码

当你进入网站时，有一个标签已经选中当你进入网站时，有一个标签已经选中

街头指示牌和面包屑街头指示牌和面包屑

►后备箱测试（远观圈出）后备箱测试（远观圈出） 站点站点 IDID 页面名称页面名称

栏目和下一级栏目栏目和下一级栏目

页内导航页内导航

““你在这里”指示器你在这里”指示器

搜索搜索

必须正确处理的几个方面：必须正确处理的几个方面：

首先要承认，主页不由你控制首先要承认，主页不由你控制

►主页要完成的任务主页要完成的任务

►一些常见的约束一些常见的约束 每个人都想占一席之地每个人都想占一席之地

想要参与的人太多想要参与的人太多

一个尺寸要适合所有人一个尺寸要适合所有人

首先要承认，主页不由你控制首先要承认，主页不由你控制

►这个网站是做什么的？——传达整体形象这个网站是做什么的？——传达整体形象 口号：清楚、言之有物；长度适中；表述网站的口号：清楚、言之有物；长度适中；表述网站的

特点和显而易见的好处；有个性、生动、有时候特点和显而易见的好处；有个性、生动、有时候

还很俏皮还很俏皮

欢迎广告：欢迎广告：►需要多大空间就使用多大空间需要多大空间就使用多大空间

►但也不要使用过多的空间但也不要使用过多的空间

►不要把使命陈述当作欢迎广告不要把使命陈述当作欢迎广告

►最重要的是进行测试最重要的是进行测试

首先要承认，主页不由你控制首先要承认，主页不由你控制

►我该从哪里开始？我该从哪里开始？ 想搜索、想扫描、想扫描最精彩的内容想搜索、想扫描、想扫描最精彩的内容

每个起点看起来像个起点每个起点看起来像个起点

主页导航可以不一样主页导航可以不一样

下拉框的问题下拉框的问题

短视行为：正在杀死金鹅短视行为：正在杀死金鹅

首先要承认，主页不由你控制首先要承认，主页不由你控制

►后备箱测试后备箱测试 这个网站是做什么的？这个网站是做什么的？

我该从哪里开始？我该从哪里开始？

确定你没有做错的几件事：确定你没有做错的几件事：

农场主和牧牛人应该是朋友农场主和牧牛人应该是朋友

►WebWeb设计团队讨论可用性是在浪费时间设计团队讨论可用性是在浪费时间 每个人、每个角色喜好不同每个人、每个角色喜好不同

普通用户的神话普通用户的神话

►解药：解药： 错误：大部分人喜欢错误：大部分人喜欢 ××××吗？吗？ 正确：在这个页面，这样的上下文中，正确：在这个页面，这样的上下文中， ××××对使对使用这个网站的大部分人会产生一种良好的体验吗用这个网站的大部分人会产生一种良好的体验吗

？？

必须正确处理的几个方面：必须正确处理的几个方面：

一天一天 1010美分的可用性测试美分的可用性测试► Focus GroupFocus Group不是可用性测试不是可用性测试►测试分类：测试分类：

传统的可用性测试传统的可用性测试

跳楼大减价的简易可用性测试跳楼大减价的简易可用性测试

补充：站点跟踪补充：站点跟踪

►问题分类指南：问题分类指南： 忽略皮划艇（用户偏离后返回）问题忽略皮划艇（用户偏离后返回）问题

抵制添加的冲动抵制添加的冲动

不要太看重人们对新功能的要求不要太看重人们对新功能的要求

抓住够得着的果子抓住够得着的果子

成本

可用性的基本礼貌可用性的基本礼貌

►降低好感的几种方式降低好感的几种方式 隐藏我想要的信息隐藏我想要的信息

因为没有按照你们的方式行事而惩罚我因为没有按照你们的方式行事而惩罚我

向我询问不必要的信息向我询问不必要的信息

敷衍我，欺骗我敷衍我，欺骗我

给我设置障碍给我设置障碍

你的网站看上去不专业你的网站看上去不专业

可用性的基本礼貌可用性的基本礼貌

►提高好感的几种方式提高好感的几种方式 知道人们在你网站上想做什么，并让它们明白简易知道人们在你网站上想做什么，并让它们明白简易

告诉我我想知道的告诉我我想知道的

尽量减少步骤尽量减少步骤

花点心思花点心思

知道我可能有哪些疑问，并且给予解答知道我可能有哪些疑问，并且给予解答

为我提供协助，例如打印友好页面为我提供协助，例如打印友好页面

容易从错误中恢复容易从错误中恢复

如有不确定，记得道歉如有不确定，记得道歉

简单总结简单总结

►三大可用性定律三大可用性定律

►我们实际上是如何使用我们实际上是如何使用 WebWeb的三个事实的三个事实

►一个态度：一个态度： 循序渐进，不断积累和改进循序渐进，不断积累和改进

细节决定一切细节决定一切

►一个方法：用户可用性测试一个方法：用户可用性测试

►一点经验：自顶向下（逻辑一点经验：自顶向下（逻辑 >>布局布局 >>细节）细节）

THANK YOUTHANK YOU

自由讨论进行时…自由讨论进行时…