不要让我思考学习笔记

来源：互联网发布：unity3d 5.0 玻璃材质编辑：程序博客网时间：2024/05/16 02:03

指导原则

别让我思考

当看到一个页面时，是一目了然的

不应该思考的地方

1. 名字：使用直白的文字，而不是很酷或自以为很聪明的名字

2. 让链接或按钮看起来就是自己，而不是不够明显

3. 我在什么位置

4. 我该从什么地方开始

5. 他们把 XX 放在什么地方了

6. 这个页面最重要的是什么

7. 为什么他们给它取这个名字

如果做不到让一切不言而喻

当进行一些崭新的、开拓性的页面设计时，做不到不言而喻，只能做到自我解释，用户需要花费一些时间去理解。

方法：页面元素的外观、精心选择的名字、页面布局和少量仔细斟酌过的名字。

我们实际使用web

扫描，够用即可，勉强应付

不是阅读，而是扫描

我们在网页上看什么，取决于我们想看到什么，1）与手头任务有关的；2）我们当前或接下来的个人兴趣；3）像触发器的词，如免费、大减价、美女、我们的名字等

不做最佳选择，而是够用即可

选择一个能达到目标的合理选项，而不是最佳的

不是追根到底，而是勉强应付

在很大程度上使用一种东西，但并不理解他的运作原理。

人们很少会阅读说明书，通常都贸然前进，勉强应付。

广告牌设计101法则

在每个页面建立清晰的视觉层次

确保页面的外观和彼此的关系都很清晰，如那些内容相关，那些是组成关系。

1. 越重要的部分越突出

字体更大、更粗；颜色更特别；接近顶部；颜色更特别

2. 逻辑上相关的视觉上也相关

相近的内容为一组：放在一个区域内，类似的样式

3. 逻辑上包含的部分在视觉上嵌套

如页面内的panel、报纸

尽量利用习惯用法

当不打算使用习惯用法时，要保证 1）同样不言而喻；2）带来很大的价值，值得用户区学习

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

可以让用户很快决定关注那些区域

明显标识可以点击的地方

降低视觉噪声

眼花缭乱

如果页面上所有内容都在嚷嚷着得到注意，那么效果可能会适得其反

背景噪声

如菜单之间的风格线过于醒目

动物、植物、无机物

到某一个功能点击多少次没关系，只要每次点击都无需思考。三次无需思考的点击相当于一次需要思考的点击。

省略不必要的文字

欢迎词必须消灭

指示词必须消灭

在多次尝试失败前，没有人细读它们。

通过对每项不言而喻来消除指示性说明

错误处理

将系统设计成不可能犯错的

使错误难以发生，当发生错误时，系统可以帮助用户找出错误并改正它们

某些用户行为在一开始无法被看成错误，只有完成这个功能才发现是错误的，应该提供恢复（重做）的方式。

对于不可恢复的错误哦，提供大量的警告

必须正确处理的几个方面

街头指示牌和面包屑——设计导航

如何创建明确、简单、一致的导航

主页

每个页面左上角有站点ID，类似于商场外的标志：独特的字体、可识别的图形。

站点ID始终可见，tooltip显示站点全名，点击后回到主页；

在实用工具中包含一个home按钮，点击后回到主页；

实用工具

网站中不属于内容层次的部分，如home，help，about等。

不同类型的页面，可以有不同的使用工具类

提供搜索

不要太复杂，就是输入框搜索按钮

当提供选项缩小搜索范围时，一定要慎重选择选项的文字，最好是在有用的时候提示给我，比如在首页搜索时，不提供搜索选项，当在到达搜索结果时，发现搜索条目太多时，再缩小搜索范围。

页面名称

每个页面对应该有其名称

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

在<title>中；

在页面中药涵盖该页面内容的位置，如filedset的题目处

名称要引入注目：字体大小、留白和颜色

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

就是你点击链接的文字是什么，页面名称的文字就是什么

标签tab

使用标签来导航，如云网管、亚马逊

正确绘制：

产生如下效果：激活的标签位于其他标签页之前，激活的标签有一个不同的颜色或外形作为对比，并且与下面的空间在物理上连接起来。

颜色编码：

每个标签使用一种颜色，而且改颜色和页面其他的元素颜色相同，可选。

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

当进入某个网站没有选中的标签，那么最初的几秒钟可能没有意识到标签的存在。

主页不由你控制——设计主页

作为网站的入口，需要说明网站是做什么的；从哪开始。

功能

1. 站点的标识和标题

这是什么网站，它是做什么的

2. 站点层次

网站的导航结构

3. 搜索

4. 导读

位于左中部

内容推荐：最好、最流行的内容片断

功能推荐：个性化或最多访问的栏目

5. 内容更新

如果网站要拉拢回头客，那么主页要有一些经常更新的内容，右下部

6. 友情链接

放置广告、交叉推广、合作品牌等，左下部

7. 快捷方式

最常访问的内容，左中部

8. 注册

登录和注册功能，位于左上部、右上角，类似于csdn

如何传达

口号：

位于站点ID附件，是和站点ID相关联的短语

刻画了整个企业，总结了它是什么，什么让它如此卓越

长度适中，6-8个单词；言之有物；网站特色

欢迎广告：

在首要位置，不需要滚屏就可以看到，是对网站的简要描述。

用户会从网页的大体内容猜测网站是做什么的，如果猜不到，从上面两部分可以找到。

注意事项：

1. 拿给公司外的人测试

2. 不要把使命当做欢迎广告

从哪开始

针对包含一系列步骤的过程所建立的网站上，起点需要很显眼。

而在需要用户登录的网站，要突出注册和登录的位置

主页导航

主页导航可以与其他页面有所不同，但不要相去太远。

以下可以有些不同：

1. 栏目描述：

可以在每个栏目下列出下一级的栏目

2. 不同的方向：

在主页可使用垂直导航

3. 识别的空间更多

主页的ID更大，有品牌口号。

不要变动的：

1. 栏目的名称、顺序、文字和分组

2. 尽可能保持相同的视觉提示、字体、颜色和大小写

下拉框

主页上不建议使用下拉框组织信息，在两个地方用处比较大

1. 按字母顺序排列的项目，如国家、省份。但当我不知道找什么时，效率就很低了，尤其是不按字母排列或者出现滚动条时

确定你没有做错的几件事

Web设计团队讨论可用性是浪费时间

不同的开发角色对于同一组件有不同的看法，关键是不要问“大部分人喜欢下拉框吗？，而是“在这个页面，这样的上下文中，这个下拉框是否会产生良好的体验？”，而且回答方式只有一种：测试。通过团队的集体技巧、经验、创造力和判断力来创建一些版本，然后仔细观察人们对它的看法和使用方法

一天10美分的可用性测试

焦点小组不是可用性测试

焦点小组通常是一组人对展示给他们的想法和设计做出反应，用来抽象地确定你的目标想要什么，需要什么，喜欢什么；网站的理念是否吸引人；网站的功能命名。但不适合了解网站运行情况，以及如何改进网站。多在设计初期。

可用性测试：一次一个用户展示一些内容（网站、网站原型、草图），要求用户说出这是什么，尝试完成一项典型的任务。

关于测试的几个事实

如果想建立一个优秀的网站，一定要测试

测试一个用户比不做测试好一倍

早点测试一个用户，好过最后测试50个用后

人们对招募用户代表的重要性估算过高，更重要是尽早和经常测试

测试的关键不是要证明什么，关键是了解你的判断力

测试时一个迭代的过程

没有什么比现场用户的反应更重要

简易可用性测试

应该测试多少用户：

每轮3——4个

招募方式

任何人

如果需要专业知识：目标群体

提供合理的激励

别不好意思让邻居帮忙

测试地点

一间办公室或会议室：一台摄像机、屏幕录制软件

谁主导测试

有耐心、冷静、善于倾听的人

谁进行观察

团队成员、市场成员、领导们

测试什么

1. 理解测试（认为是什么，从哪开始）

2. 任务测试

测试阶段

早期测试：同类网站，自己试用一下，再观察一两个人的使用

开始建立网站：草图介绍

建立网站或功能原型时：进行关键任务测试

小隔间测试：把新页面打印出来，拿给隔间的人看

一个测试的实例

参考108页

大的方面和外界影响

可用性是基本礼貌

降低好感的几种方式

1. 隐藏我想要的信息

如客户服务的电话号码、运费和价格，具体要什么，可通过可用测试知道

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

因为输入的数据格式不对，不能进行操作：电话号码是否加入括号。可以在后边的提示信息中给出实例。

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

能完成当前任务即可

4. 欺骗我，敷衍我

“您的电话对我们来说很重要”，呵呵

5. 给我设置障碍

不得不等待一个长常的flash介绍，多个广告图片

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

很凌乱，组织的不好

在用户测试时可以忽略关于颜色的评论，除非有3到4位用了“令人作呕”的形容词

提高好感的几种方式

1. 知道人们在你的网站上想做什么，并让它们明白简易

关键是保持明白简易

2. 告诉我我想知道的

把运费、旅店日停车费用、暂停服务等不愿意放在前面的项目放在前面。

3. 尽量减少步骤

4. 知道我可能有哪些疑问，并给于解答

好的FAQ：真正的问题；保持更新；保持坦率（一些不希望问到的问题答案）

5. 为我提供协作，如打印友好页面

一次打印就可打印数页内容

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

没有能力做到用户想要的，至少让他们明白你知道你在给他们造成不便

可访问性、级联样式表和你

通过考虑残疾人士的可用性，增加可访问性，自己可以做的

1. 为每张图片加入alt文本

2. 如果没有充足的理由，不要使用js

参考资料

Web Application Design Handbook：Best Practices for Web-Based Software

www信息体系结构

不要让我思考 学习笔记