指导原则
别让我思考
当看到一个页面时,是一目了然的
不应该思考的地方
1. 名字:使用直白的文字,而不是很酷或自以为很聪明的名字
2. 让链接或按钮看起来就是自己,而不是不够明显
3. 我在什么位置
4. 我该从什么地方开始
5. 他们把 XX 放在什么地方了
6. 这个页面最重要的是什么
7. 为什么他们给它取这个名字
如果做不到让一切不言而喻
当进行一些崭新的、开拓性的页面设计时,做不到不言而喻,只能做到自我解释,用户需要花费一些时间去理解。
方法:页面元素的外观、精心选择的名字、页面布局和少量仔细斟酌过的名字。
我们实际使用web
扫描,够用即可,勉强应付
不是阅读,而是扫描
我们在网页上看什么,取决于我们想看到什么,1)与手头任务有关的;2)我们当前或接下来的个人兴趣;3)像触发器的词,如免费、大减价、美女、我们的名字等
不做最佳选择,而是够用即可
选择一个能达到目标的合理选项,而不是最佳的
不是追根到底,而是勉强应付
在很大程度上使用一种东西,但并不理解他的运作原理。
人们很少会阅读说明书,通常都贸然前进,勉强应付。
广告牌设计101法则
在每个页面建立清晰的视觉层次
确保页面的外观和彼此的关系都很清晰,如那些内容相关,那些是组成关系。
1. 越重要的部分越突出
字体更大、更粗;颜色更特别;接近顶部; 颜色更特别
2. 逻辑上相关的视觉上也相关
相近的内容为一组:放在一个区域内,类似的样式
3. 逻辑上包含的部分在视觉上嵌套
如页面内的panel、报纸
尽量利用习惯用法
当不打算使用习惯用法时,要保证 1)同样不言而喻;2)带来很大的价值,值得用户区学习
把页面划分为明确定义的区域
可以让用户很快决定关注那些区域
明显标识可以点击的地方
降低视觉噪声
眼花缭乱
如果页面上所有内容都在嚷嚷着得到注意,那么效果可能会适得其反
背景噪声
如菜单之间的风格线过于醒目
动物、植物、无机物
到某一个功能点击多少次没关系,只要每次点击都无需思考。三次无需思考的点击相当于一次需要思考的点击。
省略不必要的文字
欢迎词必须消灭
指示词必须消灭
在多次尝试失败前,没有人细读它们。
通过对每项不言而喻来消除指示性说明
错误处理
将系统设计成不可能犯错的
使错误难以发生,当发生错误时,系统可以帮助用户找出错误并改正它们
某些用户行为在一开始无法被看成错误,只有完成这个功能才发现是错误的,应该提供恢复(重做)的方式。
对于不可恢复的错误哦,提供大量的警告
必须正确处理的几个方面
街头指示牌和面包屑——设计导航
如何创建明确、简单、一致的导航
导航
访问某个内容,记住它在概念层次的位置
方法:
1. 导航部分在每一页以一致的外观出现在同样的位置,其中主页和表单填写页面除外。表单的主要任务还是填写内容,导航部分会造成干扰。对这些页面只要有站点ID,一个回到主页的链接和有助于填写表单的工具即可。
2. 主导航条:链接、tab,对于选中的和其他不一样
3. 对多级导航的每一级都仔细设置
4. 你在这里:列出当前页面所在的导航路径;对每级导航突出(旁边放置三角指示器、反白、改变文字颜色、粗体)
5. 导航路径应该位于顶端,使用>进行分割,使用小字体,将最后一个元素加粗
主页
每个页面左上角有站点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信息体系结构