Web可用性设计的247条指导方针

原文链接：http://www.userfocus.co.uk/resources/guidelines.html 
译序：Userfocus是
英国一家专门从事网站可用性设计的咨询培训公司。它为我们分享了247条Web可用性设计的指导方针，并把它们清晰的分为九个大类：首页可用性设计、任务
导向、导航和信息架构、表单和数据输入、可信度、写作和内容质量、页面布局和视觉设计、搜索可用性、帮助反馈和容错。如Userfocus所说，“虽然易
用性系统的设计远不止应用一些简单的指导方针，但是它们却可以为获取稳定性和好的实践提供有意义的帮助。”

导航：

1. 首页可用性设计（20条评估首页可用性的方针）
2. 任务导向（44条评估网站对用户任务支持程度的方针）
3. 导航和信息架构（29条评估导航和信息架构的方针）
4. 表单和数据输入（23条评估表单和数据输入的方针）
5. 可信度（13条评估可信度的方针）
6. 写作和内容质量（23条评估写作和内容质量的方针）
7. 页面布局和可视设计（38条评估页面布局和可视设计的方针）
8. 搜索可用性（20条评估搜索可用性设计的方针）
9. 帮助、反馈和容错（37条评估帮助、反馈和容错的方针）

首页可用性设计

1. 首页元素要清晰的关注用户的关键任务（避免“增加功能倾向（featuritis）”）
2. 如果网站比较大，那么首页应包含搜索输入框
3. 首页要十分清楚的提供产品（内容）分类
4. 在首页或首页内一次点击展示有用的内容
5. 信息展示时应当是简单的、自然的、符合逻辑顺序的
6. 在首页展示真实网站内容的优秀示例
7. 首页上的链接以最重要的关键词作为起始（例如：“Sun holidays”而不是“Holidays in the sun”）
8. 在首页提供一个最近的特色项列表，并提供存档内容的链接
9. 首页导航不要过度格式化（修饰），确保用户不会把它误认为广告
10. 在首页清晰的声明价值取向（例如一个标志性的口号或欢迎语）
11. 在首页包含有意义的图案设计，而非无关的剪贴画或绘画作品
12. 导航选项按逻辑性或用户导向方式排序（把次要的公司信息放在底部）
13. 首页标题（title）可以为诸如google等搜索引擎提供良好可见度
14. 所有公司相关信息安排在一个显著区域（例如：“关于我们（About Us）”）
15. 用户可以了解到价值取向
16. 一看到首页，第一次访问的人就知道从何处开始
17. 在首页展示出所有主要的操作选项
18. 首页拥有一个易记的URL
19. 首页需经过专业设计，以给用户良好的第一印象
20. 首页的设计要能激发用户探索站点的兴趣
21. 首页就要像一个首页，不能让用户把它与二级页面混淆

任务导向

1. 网站应避免出现不相干的、多余的或让用户分心的信息
2. 避免过多的使用脚本、小应用程序（applets）、视频音频文件、图案和图片
3. 网站应避免不必要的登记
4. 关键人物路径必须是清晰的，无干扰的（例如：购买、捐献）
5. 信息以简单的、自然的（natural）、符合逻辑顺序的方式展示
6. 应尽量缩减每个任务需要的屏幕数量
7. 应减量减少页面滚动（scrolling）和点击
8. 网站应正确的预期和提示用户下一步可能的动作
9. 展示图表时，确保用户可以看到真实数据（例如在柱状图上标明数字注解）
10. 当分配给用户任务时，应充分利用计算机的优势（例如搜索输入的自动完成功能）
11. 用户可以快速完成普通任务
12. 当必要时，应为当前任务提供数据对比功能（例如：商品比较）
13. 任务顺序应当与用户日常工作顺序一致
14. 网站可以保证用户的工作比不使用它时更轻松快捷
15. 最重要的或经常使用的主题、特征或功能应放在页面中央附近的位置，而不是特别靠左边或右边
16. 确保用户不会重复输入相同的信息
17. 重要的、频繁使用的主题或任务应接近网站的“表面”
18. 保持最少的录入（例如购买过程中），并为用户提供加速器
19. 任何给定任务路径应当有一个合理的步骤长度（2-5次点击）
20. 当一个任务有多步时，网站要告诉用户完成任务需要的所有步骤，并为用户当前步骤所在的位置提供反馈
21. 在每个产品后面紧跟它的价格
22. 可以非常容易的找到网站的隐私策略，尤其是在那些要求填写个人信息的页面。隐私策略应当是简单的、清晰的
23. 网站用户不需要记住从一个地方到另一个地方的信息
24. 隐喻的使用可以被典型用户轻松理解
25. 数据格式应当遵循文化常规
26. 软件的内部工作细节不要暴露给用户
27. 应当迎合用户那些之前已经养成的那些小的互联网习惯
28. 网站应当易于用户浏览，在执行前可以自己尝试其它的功能操作
29. 第一次到访的典型用户应当可以在不需帮助的情况下完成最常用的功能
30. 当用户回到网站时，用户可以记得如何执行主要任务
31. 那些新颖设备（novel device controls）的功能应当是显而易见的
32. 在购物车页面，在页面的顶部或底部应当清晰的展示”处理结账”按钮
33. 重要的操作入口（例如“添加到购物车”）应当非常清晰可见
34. 操作按钮（例如“提交”）应当由用户触发，而非在完成所有选项时系统自动触发
35. 命令或操作项英以按钮的形式的展示（而非例如链接）
36. 如果用户在事务处理中中途退出，用户在稍后返回站点时可以继续他退出之前的工作
37. 当页面展示大量信息时，用户可以排序和过滤信息
38. 按钮或图标上的图像应当与内容相关
39. 当用户被系统自动注销时应当提示用户，并且自动注销的时间间隔要恰当
40. 不必要的功能（例如flash动画）可以被关闭或跳过(skip)
41. 网站应当是健壮的，并且所有关键功能可正常工作（例如不应有javascript页面异常、CGI报错或死链接）
42. 网站通过不同程度的说明来支持新手用户和专家用户（例如帮助信息、错误信息）
43. 网站允许用户重新填写一些信息项（例如更改发货地址、更改账户信息）
44. 网站允许用户自定义操作时间参数（例如自动退出的时间）

导航和信息架构

1. 关联页面或区域间的跳转移动应当是方便的、显而易见的，并且可以容易的回到首页
2. 在绝大部分页面都可以轻松的导航至用户最可能需要的信息
3. 导航选项按照最常用逻辑或任务导向方式排序
4. 导航系统应当是内容宽泛并层级较浅的，而非有比较深的层级
5. 站点结构是简单的，有一个清晰的概念模型，没有不必要的层次
6. 在所有页面都可以到达网站主要部分（持久导航persistent navigation），导航过程不会中断
7. 导航标签放在页面顶端，而且要设计成看上去可以点击的样子
8. 要有一个站点地图用来提供整个站点内容的概况
9. 在任何页面都可以链接到站点地图
10. 站点地图提供一个简洁的网站概貌，而非主要导航的重复或各主题的简单罗列
11. 提供良好的导航反馈（例如显示当前位置）
12. 分类标签应当能准确描述该分类的信息
13. 链接或导航标签包含用户要达到目标所寻找的“触发字眼（trigger words）”
14. 术语和常规（例如链接颜色）应当（近似地）与互联网习惯用法保持一致
15. 在网站各个组成部分中的链接样子应当一致
16. 产品页面应当包含与当前产品相似或互补产品的链接，以实现交叉营销
17. 导航项和链接中的用词应当是无歧义的，并且使用术语
18. 用户可以排序和过滤目录页面（例如按价格排序或最热门排序）
19. 当鼠标放在某个可点击的元素上时，元素应当有明显变化（包括光标的变化）
20. 重要内容可以通过不止一个链接访问到（不同的用户有可能需要不同的链接标签）
21. 仅用于导航的页面（例如首页）可以再不滚动的情况下浏览
22. 触发事件的超链接应当与链接到其它页面的超链接（例如：下载）在外观上有明显区分
23. 网站允许用户控制交互速度和顺序
24. 在网站每个页面清晰标注退出入口，允许用户从当前任务中推出，而不必通过一个额外的对话框
25. 网站不可禁用浏览器的“后退”按钮，“后退”按钮应当在每个页面的浏览器工具栏上都有显示
26. 用户点击浏览器后退按钮时，总能回到他之前所在页面
27. 购物车（basket）和结账（checkout）链接应当在每个页面中都可以看的十分清楚
28. 如果网站有打开新窗口，那么这个动作不应使用户困惑（例如：新窗口应该是一个设定大小的对话框或并可以轻松关闭）
29. 菜单的使用说明、提示、相关信息应当在每个屏幕的同一位置显示

表单和数据输入

1. 数据输入框在适当的时候应当包含默认值，显示要填的数据格式和输入框允许输入的长度
2. 如果任务设计源文件（例如纸张形式），那么界面应当与源文件的规格一致
3. 网站能自动完成格式化数据的输入（例如货币符号等），用户不需要输入类似£ 或 %的符号
4. 表单域的标签应当清楚的说明该输入框希望输入什么
5. 表单中的文本框应该为预期答案设定合理长度
6. 表单中的必填项和选填项应当有明显的区分
7. 登陆和注册应当用相同的表单（就像Amazon一样）
8. 如果完成表单需要外部信息的话应当提前告知用户，例如护照编号
9. 表单中的问题项（输入框）应当按逻辑分组，并且每组都有一个标题
10. 表单域应包含提示、示例或样例答案，告知用户输入框期望输入什么
11. 如果输入框的标签以表单问题的方式提出，那么这些问题应当是陈述清晰、简单的
12. 在表单中，相对于文本输入框，应当优先使用下拉菜单、单选按钮、复选框（文本输入框不应当使用过度）
13. 在数据输入页面，光标应当被放置在需要输入的地方
14. 数据输入（例如日期）和输出（例如数值单位）的格式应当被清晰标明
15. 用户可以在进输入一些基本必要信息就可以完成简单的任务（系统可以默认补充一些不重要的信息）
16. 表单允许用户尽可能久的保持一种简单的交互方式（例如，用户不必在键盘鼠标间不停的切换）
17. 用户可以更改表单域的默认值
18. 文本输入框需指出要输入数据的数量和格式
19. 表单在提交前执行数据验证
20. 在数据输入界面，在适当的时间执行表单域级别验证和表单级别验证
21. 网站应可以轻松地更正输入错误（例如，当验证表单未完成，应当将光标放置在需要输入的位置）
22. 数据输入和数据显示应当保持一致性
23. 表单域标签应当靠近输入域（例如：标签右对齐）

可信度

1. 内容应当是最新的、权威的、可信赖的
2. 网站有第三方（例如引用、第三方使用见证）来说明信息的准确性
3. 应当清晰标明网站的幕后有真实的组织（例如：提供一个真实地址或办公室照片）
4. 公司有一些认证专家（可以使用一些凭证）
5. 网站应避免广告，尤其是弹出式广告
6. 在结账的最一开始就突出提示运送费用
7. 网站应当避免空洞的营销辞令（marketing waffle）
8. 每个页面都应当清晰显示站点标识，保证用户确认他仍然在同一个网站上
9. 通过网站可以轻松联系到某人以获取帮助，并可尽快得到回复
10. 内容是新鲜的，网站应经常更新，总包含最近的内容
11. 网站应当避免版式错误和拼写错误
12. 用可视化设计来补充商品和线下营销信息
13. 网站组织应当有一些真实的人，他们是诚实的、可信赖的

写作和内容质量

1. 网站有能引起别人兴趣的、独一无二的内容
2. 正文是简明的，没有不必要的说明和欢迎辞令
3. 每个内容页应以内容结论或内容意义启示作为开端，正文以倒金字塔方式书写
4. 相对于叙述式的文本，网页应当优先使用无序列表和有序列表
5. 列表应当以简短的说明作为开始，帮助用户意识到该列表是如何与其它关联起来的
6. 那些最重要的列表项应当放在列表的前面
7. 信息应当分层次组织，从一般的到具体的，组织结构应当是清晰的、符合逻辑的
8. 内容应当专门为互联网（Web）创建（web pages do not comprise repurposed material from print publications such as brochures）
9. 产品展示页面应当包含购买须了解的信息，用户可缩放产品图片
10. 使用超文本适当地组织内容
11. 以主动语态书写语句
12. 网页应当易于快速浏览，充分使用标题、副标题和较短的段落
13. 相对于文本式的语言，优先使用地图、图表、图形、流程图和其它视觉元素
14. 每个网页都应有描述信息，以及有用的标题，用以支持书签
15. 链接及链接描述（title）应当具有描述性或推测性，不应当出现“点击我（Click here）”这样的链接
16. 标题不应当故作风雅、故作聪明或含义隐晦
17. 链接文本应当与目标页面的标题(title)相符，这样用户就可以在到达目标页面时心里有数
18. 按钮文本及链接文本以动词开头
19. 标题和副标题应当是简短的、直截了当的、具有描述性的
20. 遣词造句及用到的概念应当为典型用户所熟悉
21. 有序列表从1开始，而不是0
22. 第一次使用的缩写词汇应当加以说明
23. 文本链接应当足够长以便于理解、又应当足够短以保证最少换行（尤其被用作导航列表时）

页面布局和可视设计

1. 网线数应当适于目标用户和他们的任务
2. 布局可以帮助用户把注意力集中在下一步要做的东西上
3. 在所有页面，最重要的信息（例如经常用的主题、特色和功能）放在屏幕的第一个满屏
4. 网站在不水平滚动的情况下就可以使用
5. 可点击的元素（例如按钮），应当设计成明显可点击的样子
6. 不能点击的元素
7. 按钮或控件的功能从他们的标签或设计上就可以明显看出来
8. 可点击图片包含多余文本标签（Clickable images include redundant text labels (i.e. there is no ‘mystery meat’ navigation)）
9. 超文本链接可以轻松被辨认（例如下划线），而不需要大面积扫视。
10. 网站字体使用应当具有一致性
11. 控件和它所具备的操作之间的关系是显而易见的
12. 图标和图形是标准的和（或）直观的（具体的和为人熟悉的）
13. 在每一个页面上都应有一个清晰的视觉“起点”
14. 网站的每个页面共享一致的布局
15. 网页为打印格式化，或者有一个为打印准备的版本
16. 按钮或链接能显示出他们被点击过了
17. 图形用户界面（GUI）组件（例如单选按钮和复选框）应当被适当地使用
18. 所用字体应当是可阅读的
19. 网站应当避免使用斜体字，并只为超文本添加下划线
20. 信息密度和留白应当有一个良好的平衡
21. 网站看上去应是让人愉悦的
22. 网页应避免出现“滚动障碍物（scroll stoppers）”（标题或其它页面元素给用户造成在页面顶部或底部的错觉）
23. 网站应当避免大量使用大写文本
24. 网站应当有一致性的、清晰可识别的外观和感觉，以吸引用户
25. 深蓝色避免使用在细节地方（Saturated blue is avoided for fine detail）（例如文本、细线和符号）
26. 借助颜色组织和分组页面元素
27. 网站图形不应当与banner广告混杂不清
28. 对于重要的主题分类加重显示（em）
29. 在标准宽度的浏览器窗口中，内容页面一行不要太短（小于50字）也不要太长（大于100字）
30. 页面依据栅格设计，所有页面元素和部件水平对齐、垂直对齐
31. 有意义的文本标签，令人印象深刻的背景配色，边框和留白的恰当使用，这些一起来帮助用户把网页元素分别出不相关联的功能区域
32. 网页配色合理搭配，避免过于复杂的背景设计/li>
    
33. 较为独立的网页应当避免杂乱不相干的信息
34. 标准页面元素（例如页面标题、站点导航、页面导航、隐私策略等）可轻松找到
35. 组织logo放置在每个页面的相同位置，点击logo后返回最合情理的页面（比如首页）
36. 吸引人注意力的特色元素（例如动画、醒目的色调、明显的字体大小差异）应当保守的使用，并只在恰当的地方使用
37. 图标（icons）要在视觉上和概念上有所区分，但又要与页面和谐。
38. 相关信息和功能集中放置，每一组可以在一个视野浏览到（大约直径为4.4厘米的屏幕区域）

搜索可用性

1. 默认搜索应当是可以直观地配置（没有布尔操作符no Boolean operators）
2. 在搜索结果页面向用户展示搜索到的内容，并且在该页可以编辑检索词并重新提交搜索
3. 检索结果应是清晰地、有用的、并依据相关度分级
4. 检索结果页面应清晰告诉用户检索到多少条记录，每一页显示的记录数可以由用户配置
5. 如果没有返回结果，系统依据用户输入的检索词存在的可辨认问题提供建议和可选输入项
6. 搜索引擎可以优雅地处理空检索串的情况
7. 最常用的检索串可以获得有用的结果
8. 搜索引擎应当提供模板、示例或提示来帮助用户高效使用它
9. 网站应当包含一个功能更强大的搜索页面，帮助用户更加完善他们的检索（可以把它叫做“修改检索 revise search”或“精确检索 refine search”，而非“高级检索 advanced search”）
10. 检索结果页面不显示重复结果（无论是能感知到的重复还是实际的重复）
11. 检索输入框应当足够长，可以应对常用检索词的长度
12. 检索应当覆盖整个站点，而不是站点的一部分
13. 如果网站允许用户创建复合检索，那么这些检索应当是可保存，定期被执行的（这样用户就可以跟踪动态信息的最新动态）
14. 检索界面应当放置在用户期望的地方（一般是页面的右上区域）
15. 检索框及他的控件应清晰列出（多检索框可能会难以理解）
16. 站点既可以满足那些想随便浏览的用户，也可满足想搜索的用户
17. 在检索结果页面应当明确当前检索的范围，并且用户可以约束这个范围（如果该任务需要的话）
18. 结果页面显示有用的元信息（meta-information），例如文档的大小、创建的日期、文件类型（word、pdf等）
19. 搜索引擎提供自动的拼写检查，并提供复数词和同义词查找
20. 索索引擎提供相似检索选项（例如 “更多相似” 链接）

帮助、反馈和容错

1. 常见问题解答或在线帮助提供循序渐进地指导，帮助用户完成最重要的任务
2. 在恰当的地方和恰当的时间可以轻松获取帮助
3. 提示应当是简洁的、表达清楚的
4. 用户不需要求助于用户手册或其它外部信息来使用站点
5. 网站有一个定制的404页面，该页面包含如何找到要找页面的提示，并包含主页和和检索页面的链接
6. 网站在必要时（例如校验时）提供良好的反馈信息（例如进度提示或一些信息）
7. 用户在选择商品时可获取到帮助
8. 用户在执行由潜在“危险”操作（例如删除什么）之前提供用户确认
9. 用户确认页面是清晰地
10. 错误信息包含先一步该做什么的清晰指示
11. 在提交购买的前一个时刻，网站向用户清晰地展示概览页面，这个页面应当与购买确认页面区分开来
12. 当用户需要在不同的选项（例如在一个对话框）前抉择时，这些选项应当是明确的
13. 在网站响应时间时产生的不可避免的延迟应当告知用户（例如授权信用卡交易时）
14. 错误信息以非嘲弄的语气书写，并且不要责怪用户的错误
15. 页面可以快速加载（5秒或更短）
16. 网站提供对用户输入或其他操作的及时反馈
17. 在加载比较慢的大页面应当提示用户（例如：“正在加载……”），最重要的信息应当首先显示
18. 当使用工具提示条（tool tips）时，应当提示对用户有用的额外帮助，而不是简单的重复图标、链接或字段域标签中的文本
19. 当给用户一些帮助提示时，告诉他们要做什么，而不是避免做什么
20. 网站在适当的地方向用户展示如何做常见任务（例如：提供网站的功能示例）
21. 网站通过提供反馈信息（例如“您知道吗？”），帮助用户了解怎样使用网站
22. 网站提供上下文敏感帮助
23. 帮助应当是直截了当的，用直白简单的方式表达，避免使用行话和流行语
24. 当一个任务成功完成后，网站提供清晰地反馈信息
25. 必要时重要提示信息应当在屏幕上保留，使用户有足够时间记录下这些信息
26. 遵循“菲茨法则”（控件之间的距离和控件的大小应当是适宜的，大小与距离成比例）
27. 目标对象间有足够空间，防止用户点击了多个目标或错误的目标
28. 可点击元素之间至少有两个像素的距离
29. 当网站发生错误时，应当是显而易见的（例如，当表单未完成，高亮未完成的表单域）
30. 网站提供适当的选择方式（例如下拉列表）来代替用户输入
31. 网站应努力把防止用户出错的工作做好
32. 网站在纠正用户错误输入前提示用户（例如，google的“您是不是要查找…”）
33. 网站应当确保任务不是令人困惑的
34. 错误信息应当用直白的语言描述，并给与问题足够的解释
35. 用户在一个任务中可以推迟解决错误至一个较晚的时间
36. 如果有必要的话，网站提供错误信息更多的细节
37. 可以非常容易撤销（或取消）、重做（Redo）操作