1、1WEB 设计禁忌提纲第一部分 内容与功能禁忌第 1 章内容禁忌禁忌 1:主页身份危机说明:网站的主页不能使访问者通过快速浏览,确定站点的用途。解决:网站需要具备的特点: 机构名称位置显著 机构名称非常明显 机构职能的简要说明 图示说明了机构的产品或服务项目 页面中的链接标记是关于整个站点内容的概述禁忌 2:混乱的分类说明:内容组织的混乱严重影响导航解决:使用不容易产生误解的分类原则: 按层次组织的 独立的 互斥的 彻底的 不随心所欲的禁忌 3:毫无意义的说明说明:许多网站中,项目的名称和说明名没有帮助访问者做出选择,通常,这些名称和说明似乎是不同时期写的、出自不同的人、缺乏一致性、没有考虑各
2、项之间的差异、没有考虑在上下文中项目说明作何解释。解决:当一个网站或者是基于网络的应用程序列出一套项目时,关于项目的说明信息必须能帮助使用者回答两个问题:1. 这些项目中有我所需要的吗?22. 符合条件的项目中哪一个最能满足我的要求?项目名称和说明中不应该包含市场化的干扰性词语,应该包含该项目具备什么功能和不具备什么功能的真实说明,或许还应该包含关于其他项目的功能参考。而且,不能孤立的编写每个项目的说明,每个项目说明应该由该产品的管理人员编写。不希望一些项目不经意的诋毁其他项目。项目说明必须一起写,同时考虑在上下文中如何解释该项目以及项目间的对应关系。禁忌 4:内容不一致说明:如果有关某个项目
3、,如产品、服务、突发事件、新闻故事、人物和政策的信息不止一次出现在网站中,那么最好保证内容的一致性,否则,你的站点会给访问者留下一种机构组织不当的强烈印象。解决:如果信息不是复制的,那么副本必须相同。 有关特定项目的所有图片应该链接到唯一的图像文件 在线目录中列出的相同项目应该链接到唯一的项目页 有关项目的全部描述和属性来原因应该唯一如果必须辅之信息,那么无论如何都要保持信息的一致性。禁忌 5:过期的内容说明:网站中几乎与矛盾信息一样糟糕的是明显过期的信息。解决:网站必须不断保持更新,这需要时间、努力、人力和资金;兑现你的最后期限,否则不要声明;必须维护站点。禁忌 6:缺少内容或内容无意义说明
4、:内容是站点中最重要的,那么缺少主要内容的页面或站点只是在占用空间和域名。解决:为了避免创建缺少主要内容或提供无用内容的网站,网站设计者因该遵循下列原则: 了解访问者需要什么,然后将其包含进来。 不要转移使用者的目标。 对网站进行测试,以便发现还缺少什么。禁忌 7:未完成的内容3说明:网站中缺少内容的一个主要原因是网站中包含没有完成的页面。解决:将明显未完成的网站发布到网上不是个好想法,这样使得你的公司看上去既不专业又无组织。取而代之,应遵循下列原则: 在没有准备好之前不发布 不要错过你的最终期限 保留旧站点 避免出现未完成的页面 测试第 2 章任务支持禁忌禁忌 8:多余的需求说明:多次向同一
5、机构提供相同的信息。 没有利用已提供过的信息 各系统间不协调 忘记用户的选择 返回上页时丢失数据 要求用户多次登录 需要在多个站点中完成任务,数据传输变成难题解决:设计原则: 返回页面时不要丢失数据 不要强迫用户经过多个站点 设计唯一通用登录网站 努力从浏览器和 WEB 中得到更好的支持 避免重复询问 隐藏表单 “装满的”URL 基于浏览器的解决方案:自动填充表单4禁忌 9:请求不必要的数据说明:请求不是非常必要的数据与不止一次请求相同的数据几乎同样令人烦恼。解决:不要过于热衷于搜集数据 尽可能少的要求数据 不要要求任何数据“必须填写” ,除非没有这些数据你确实无法进行处理 不要要求一些用户没
6、有的数据 当用户提交了信息后,尽可能的从中推断出更多的信息。禁忌 10:无意义的选择说明:与多余的需求和向用户请求不必要的数据相关的禁忌是提供不必要的或无意义的选择: 无明显的区别:选项之间没有明显的差别 用户不知道:选项对于用户没有任何意义 明显的答案:明显的选项,但网站忽略了 网站可以推断出来:没有必要询问,网站能够自动推断出来的答案解决:根据选择为什么是不必要的,确定避免出现不必要选择的方法: 如果选项之间没有区别,就不要出现 如果用户不理解问题或者不知道答案,就不要询问 如果有明显的选项,选中它 如果站点可以推断出答案,就不要打扰用户禁忌 11:忽略重要的选项说明:许多网站和基于 WE
7、B 的应用程序不支持用户任务的另一种情形是,当要求用户进行选择时忽略了至关重要的选项。解决:WEB 设计者和开发者的解决之道是做好他们的工作:全面分析目标用户的需求,然后设计站点和 WEB 应用程序时提供与这些需求相匹配的选项。禁忌 12:无能的后台程序说明:许多站点表现出他们极其缺少关于自己所涉及领域的“常识” 。对于用户提出的请求,无人答复,或者答非所问。5解决:增加对涉及领域中“常识”的学习,检查网站是否真正支持了用户的任务,而没有表现出任何令人头晕目眩的常识禁忌。禁忌 13:走到了路的尽头:你才告诉我!说明:在处理过程中中断任务流程和打扰网站用户的最佳手段是让用户沿着朝向目标的道路前进
8、既不,然后,用户投入了时间和努力之后,告诉他们,先前网站要求你做的几步是没有用的。解决:应该提醒用户,一旦用户指明了他们要做的事情,就应该进行检查。禁忌 14:令人苦恼的任务流程说明:因为更专业的错误竟吵造成拙劣的任务流程。解决:避免更专业的错误 避免前面的所有禁忌 毫无意义的说明 缺少内容或内容无意义 非直接链接 要求用户输入 兼容性差的文本输入框 没有默认值或默认值有毛病 没有默认的文本输入点 没有说服力的标签位置 命中结果似乎相同 丢失相关项目 奇客语言 内行话 用不同的词语描述相同的事物在设计网页之前进行任务分析和概念设计第二部分 用户界面禁忌6第 3 章 导航禁忌禁忌 15:站点反映
9、组织结构图说明:反映一个公司或机构组织图表的网站是一个“常见错误” 我仍旧在同一家公司吗? 我不关心机构组织情况,我只想要我要的! 对于多个机构提供的同类服务感到犹豫解决:网站和 WEB 应用程序应该根据他们的目标用户的需要来组织。 在编写代码之前,预先投入资金,会见目标用户。 观察用户使用设计网站的早期版本的情况或者观察竞争者的网站 获取用户对于文件或网站在线模型的反应 设计的网站应该反映用户的任务而不是组织的结构 将 WEB 小组安排在公司和机构的层面 链接到其他站点 用这些标准测试站点:1. 站点的组织对于那些不了解公司组织结构图的用户来说是否有意义?(是)2. 通过检查站点,用户能否推
10、断出组织结构中有意义的方面?(否)3. 不同的部门生产相同的产品这一事实是否已经根除?(是)4. 是否只因为内部组织的相互通信而存在子站点?(否)5. 更新旧站点,新站点中页面继承的是否天衣无缝?(是)6. 整个站点的内容是否一致?(是)7. 是否存在由于交叉机构的错误通信或者下属机构的目标不一致而造成的不一致信息?(是)8. 用户是否能够清楚的回答链接页面是站点内部还是外部的?(是)9. 将标准应用于实例禁忌 16:数不清的导航方案7说明:高级导航禁忌是同一网站中有许多相互竞争的导航系统,多重导航系统会阻碍、分散和转移访问者的注意力。 带有副本的竞争导航系统 无副本的竞争导航系统解决:将显示
11、的导航系统数量缩减到最少。可以拥有多重导航系统,如位于页面左侧和顶部的导航条,但每个导航系统的目的应该明确和唯一。禁忌 17:欺骗性的链接复制品说明:不必要的副本链接增加了站点认识上的复杂性,导致访问者误入歧途。 隐蔽的链接复制品:看上去不同,但跳转到相同的地方 假链接复制品:表面上一样,却链接到不同的地方 企业内部网 WEB 应用程序中无意义的链接复制品 链接复制品终止了用户的思考解决:作为设计者,应该尽可能的把事情简单化。如果有什么怀疑的,那么还原可选择的链接方案,邀请目标用户进行测试。 在分类页面中,不用复制导航条链接 纯文本链接可以复制 主页中可以包含一些真的链接复制品禁忌 18:非直
12、接链接说明:这样虽然可以做到广告宣传的效果,但考虑过访问者的心情吗? 将用户转移到另一个网站的主页 将用户转到站点中的一个通用页面 但是我已经告诉你了!解决:避免这一禁忌的原则: 链接应该履行它的承诺。 停留在通向目标的路径上。禁忌 19:迷路:当前页面没有标志8说明:当 WEB 用户访问某个没有明确标明用户所在页面时的感受就像走在一条没有路标的陌生道路上,他们随时有迷路的感觉。 导航条中既没有标记,也没有页面标题 导航条中没有标记,页面标题不够显著 “解决方案”不起作用:1. 浏览器标题栏中的页面标题2. 页面背景中的水印标题解决:标示当前页可以通过两种方式: 导航条 页面标题禁忌 20:循
13、环游戏:指向当前页面的活动链接说明:一个极为普遍的导航禁忌是页面中包含一个链接到自己的活动链接。 导航条中的自我链接 涉及到分割为几个子站点的大网站,每个子站点都有自己的主页,如果在自己的主页中指向主页的链接是活动的那么这是一种禁忌。 不再导航条中的自我链接解决:设计原则: 在主页中不要包含指向当前页面的活动链接 在当前页面中不要包含指向当前页面的活动链接禁忌 21:缺少导航链接:后退否则没其他办法说明:网页中没有导航,迫使用户使用后退按钮进行导航。 没有出口的错误消息,如错误提示页面中仅有错误信息,并没有转向的链接。 没有出口的“任务完成”页面 404页面无法找到解决:为了避免这一禁忌,应尽
14、量包含站点“标准”页面中出现的标准导航条,或者起码要有一个可以提供转向的链接存在。9第 4 章 表单禁忌禁忌 22:要求用户输入说明:文本框是表单中使用最频繁的控件,实际上是严重过度使用。解决:主要原则:更加努力的开发以减少用户的工作。 帮助用户输入数据1. 设计特殊数据类型控件,如日期控件;2. 提供选择;3. 带数据选择的文本框。 什么时候允许数据输入1. 非结构化的内容,如街道名2. 安全的内容,如用户名、密码3. 国际性变量, 如电话号码4. 用户非常了解而且经常输入的内容,如自己的国家、生日(有时输入会比选择更加节省时间)禁忌 23:兼容性差的文本输入框说明:必须要容忍用户输入内容的
15、合理变化 这是我们的方式或者绝对不是!用户的理解和我们有差别,而我们才是真理。 AT&T 是一个无效的公司名称 令人惊讶的不兼容性,如型号中的“-”或空格被认为是无效输入。 表单拒绝接受自己提供的示例。 对用户输入过分的挑剔解决:为用户提供友好而宽容的的输入框的准则不是太复杂: 文本框的长度与数据相匹配 接受一般格式 接受你自己的格式 小心拒绝合理的数据10 字母大小写无关 提供一个样例 结构化文本框禁忌 24:没有默认值说明:网站、WEB 应用程序和软件的一个重要设计原则是让用户需要说明的越少越好。这个原则的一个特殊含义是表单中的选项和控制面板应该有默认值。 没有提供默认值的原因1. 没有有
16、用的默认值2. 社交、政治、法律的需要 无默认值的单选按钮,其目的可以是1. 避免假设用户会做出什么选择2. 强迫用户做出明确的选择3. 允许用户不选 无默认值的菜单1. 只有当菜单没有有用的默认值时才能使用这样的设计2. 菜单标签包括作为提示的初值,必须小心措辞以解释选择的含义解决:设计原则 尽可能的提供默认值 当“以上都不是”是一个重要选项时,将其明确表示出来并且设为默认值 当没有假设的默认值时,菜单优于单选按钮 小心使用新型的 WEB 菜单 用复选框表示“0 或 1”的选择更好,但不要用错,如男、女禁忌 25:有毛病的默认值说明:一个与用户期望不相符的默认值比没有默认值的危害更大。 有害的默认值。如:故意设置的默认值使没有注意到它的用户得到一些出乎意料的东西,就像默认接受付款选项之类的东西,会得到用户的憎恨。