完美的内容是用来使用的,不管您的内容多么精彩,如果它们很难访问,用户照样会离开,易用性不仅仅牵扯到技术,更多的是良好的 Web 创作习惯,易用性包含34条规则,它们是:
只使用成熟,简单,兼容的技术
Web 技术一直在发展,因为 Http 协议最初只是为了表现简单的超文本,当人们赋予 Web 越来越多的使命的时候,Web 的局限性就表现出来了,为了解决这些问题,人们在 Web 上面附加了很多新技术以增强 Web 的表现能力,Cookie, Javscript, DHTML, ActiveX, Applet, CSS 一直到现在炙手可热的 AJAX 技术,然而这些新技术很快带来了兼容性问题,因为 Web 内容要靠浏览器解释,不同的浏览器加不同的安全配置,导致这些新技术并不能被如期地渲染出来,比如,很多在 IE 中成熟运行的 ActiveX 在非 IE 内核的浏览器中根本无法使用,随着众多浏览器以及 Web 用户对这些新技术的拣选,我们慢慢得到了一个大家都认可的清单,现在,各大浏览器都支持,而且用户也乐于接受的 Web 附加技术是:
Cookie, Javascript, CSS
如果您希望您的企业网站能在绝大多数环境下被无障碍的访问,请谨慎使用除此之外的技术,这里我们需要特别说一下 AJAX 和 Flash,它们也被很多人认可,而且 AJAX 事实上是基于 Javascript 的,然而,AJAX 同时要使用在某些浏览器安全配置下容易被禁用的 XMLHTTPRequest 对象,事实上,我的 IE 浏览器的安全配置就禁用 XMLHTTPRequest ,所以,除非加入到可信任站点,否则我连 Google Map 都无法顺畅访问。Flash 是一种伟大技术,在线广告几乎是它最完美的使命,作为易用性规则,我们不排斥以 Flash 技术提供广告,但 Flash 绝对不可以用在站点导航等站点基础结构中。
不使用任何网页特效
虽然网页特效并不一定涉及不兼容技术,但网页特效对绝大多数人来说是非常厌烦的,企业网站绝对不应该使用那些仅仅为了好玩的网页特效,除非您还生活在90年代(现在已经是2007年),或者您只有14岁。最令人厌烦的网页特效包括,要求设为主页,接连弹出的窗口,全屏窗口,改变鼠标光标,在状态条上滚动的废话,页面内容禁选,禁止查看源代码,闪烁的文字,离开时的弹窗,颜色古怪的窗口滚动条,声音背景。看看 Builder.com 怎样看待这些愚蠢的网页特效。
需要记住一条,访问者永远都不会因为您使用了一种自认为很 Cool 的特效而觉得您了不起。
清晰,统一的导航
用户在您的企业网站找到有用内容的唯一途径是通过站点的导航系统,您需要花大力气来组织您的内容,保证让用户以最快的速度找到它们。导航系统必须清晰,他们应该和站点的其它内容用不同的颜色搭配以便在网页上突出出来,同时,每个页的导航系统应该完全一致,从一个页面进入另一个页面看到完全陌生的导航系统是非常令人沮丧的。
导航深度不超过三级
虽然很多人觉得这太绝对,事实上,用户需要点三次才能找到自己想要的内容仍然太多,那种一级一级下潜的导航菜单是令人生畏的,很多人会产生进去以后便找不到路回来的恐惧,如果您能够很好地组织自己的内容,结合分页机制,Tag机制,对绝大多数网站,三级导航深度已经足够使用了。
导航链接中必须包含文字
为了美观,许多人喜欢图片按纽式的导航链接,如果您坚持这样做,也无可厚非,但一定在图片上同时加上文字,让文字体现该链接的含义,因为除了设计者,外人往往很难猜测您的图片按纽的含义,文字是最直接,最精确的。
必须有纯文本版本的站点地图
当用户在您的令人眼花缭乱的站点导航中彻底迷失的时候,纯文字版的,简单直接的站点地图还可以救急,站点地图可以帮助用户快速找到他们想要的内容,这是对导航系统的补充,甚至对有些站点来说,比导航系统更有效。另外,纯文本版的站点地图非常容易被搜索引擎抓取并以此遍历您的整个站点。
必须有面包屑导航条
面包屑导航(Breadcrumb Navigation)这个概念来自童话故事"汉泽尔和格雷特尔",当汉泽尔和格雷特尔穿过森林时,他们在沿途走过的地方都撒下了面包屑,让这些面包屑来帮助他们找到回家的路,所以,面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。
每页都有自己的标题
许多企业网站的所有页的标题都是企业的名字或者一句口号,这会让用户不知道他们访问的当前页是说什么的,每页都应有一个和本页内容匹配的标题,这样,即使用户打开了很多窗口,仍然可以通过标题知道哪一页是说什么的。从 SEO 的角度看,在标题中使用本页内容中某些关键词是非常好的习惯,而且,当您的页面出现在搜索引擎的搜索结果中时,您的页面标题应当明确地告诉搜索者他们搜到的页面是关于什么的。
任何页都有一个链接指向首页
人们进入一个陌生的地方,当感到迷失或不安的时候,会立刻想到返回入口位置,访问者进入您的网站也是这样,每页都有一个指向首页的链接可以帮助用户在感到迷失的时候,迅速返回入口重新开始。
网站的 Logo 指向首页
这一条似乎没有什么道理,但几乎所有望站都遵守这样的约定,当很多人都这样约定的时候,您没有理由例外。
对于连贯性内容(sequential content),应提供向导式导航
比如说,您在网站上发表很长的系列文章,您应该将文章分成多个章节,用户看完这一章以后,下面应该有两个链接,分别指向上一章和下一章,这样,用户不必滚动回页面上方访问导航系统,他/她可以直接点这两个链接在文章中前进或后退,这样不仅节省用户的时候,还可以带来连贯阅读的快感。
全文搜索
如果用户不愿一页一页地翻看您的网站,您应当提供全文搜索功能,虽然您的搜索功能比起专业的搜索引擎还差很多,但可以帮助您的用户快速找到他们感兴趣的内容,不要使用 Google 等商业引擎的搜索代码进行搜索,与其那样还不如让用户直接到 Google 中去搜索,您应当提供一个本地搜索功能,不需要象 Google 那样强大,因为您不需要支撑那么大的用户量,也不需要搜索那么庞大的海量信息,您网站的本地搜索功能对用户来说,可能比 Google 更有帮助。
不使用欢迎页
当 Flash 如火如荼的时候,设置一个欢迎页,向用户播放一段精美的动画是很多企业网站的追求的模式,然而这种想法实在糟糕,很多人没有耐心等待那段漫长的动画下载完毕便离开了,您能想象去超市买东西前,需要先在门口看一段欢迎影片才能进去吗?您应当让用户直接进来,一进来就看到实质的内容,不要用您的浪漫想法浪费用户的时间,而且,由于搜索引擎也要首先经过这个欢迎页面才能深入到网站内部,一个让搜索引擎无法解读的 Flash 动画会让搜索引擎认为您的网站上什么东西都没有。
任何图片必须设置 ALT 和 TITLE 属性
在您的图片完全下载之前,浏览器无法把它们显示出来,或者,某些浏览器可能关闭了图片显示,或者您的图片资源可能丢失了,这个时候,ALT 或 TITLE 属性会让浏览器将图片的描述性文字显示在图片的位置,让用户至少知道那个位置准备将要显示的是什么。这个属性也帮助搜索引擎更好地理解您的图片。
如果图片要以缩略图形式显示,使用真正的降低了尺寸的缩略图,不要只是改变图片的宽度和高度属性
这可以显著降低页面尺寸。
链接必须拥有可标识的视觉特征
蓝色字体加下划线是所有人都认可的链接的视觉特征,人们会用鼠标去点这样的地方,然而每个网站都有自己的配色风格,您的页面背景可能导致蓝色字体无法清楚地显示,这没有关系,您应当为全站的链接设置一致的视觉特征,已经访问过的链界要与不同的视觉特征。
任何页都有一个打印友好版本
网页是用来在屏幕上显示的,不是设计为用来打印的,所以,使用 IE 浏览器的打印功能打印出来的网页总是不理想,如果您希望用户能顺利地打印您的内容,您应该对每个页面都提供一个打印友好版本,打印友好版本中可以将导航系统等过分浪费空间的东西隐藏起来,让真正的内容成为页面主体,同时,要使用白底黑字,不要使用背景图案。
请注意,如果用户想到要打印您的内容,说明他/她对您已经非常感兴趣了,他们是非常有价值的用户,一定要帮助他们实现这个愿望。
页面都使用一致的配色和一致的结构
和全站使用一致的导航系统一样,所有页面使用一致的配色和结构可以帮助用户将注意力只集中在内容上面,您不应该强迫用户在新页面中重新适应新的布局。
您的站点应当避免让绝大多数用户左右滚动窗口
现在(今天是2007年9月1日)的主流显示器尺寸是 1024 x 768,您可以比较安全地假设,绝大多数用户的屏幕尺寸至少是这个值,但我确实看到不少仍然使用 800 x 600 分辨率屏幕的用户,无论如何,您的页面布局应尽量避免让小屏幕用户左右滚动,上下滚动已经够麻烦,再加上左右滚动简直是个噩梦。您可以让您的网业自动适应屏幕尺寸,从技术上说,这并不困难;也可以假设一个宽度,这个假设的宽度照顾到您认为已经适度的用户群,这是一个权衡问题,事实上,对小尺寸屏幕过分绝对地照顾也未必是好事,一个低于 800 像素宽度的页面在 1024 宽度的屏幕上显示尚可,在 1280 宽度的屏幕上会显得很不协调。
但无论如何,90年代盛行的那种使用 Javascript 判断屏幕尺寸,然后根据不同尺寸输出不同布局的做法已经行不通了,现在的屏幕尺寸已经无法严格 QVGA, VGA 那样划分,很多非标准尺寸的屏幕大量出现,您几乎无法预料您的网站将来会遇见什么尺寸的屏幕。
站点必须在第一级导航深度处,让用户看到您的完整联系方式
对于陌生的企业网站,如果不能在第一页就看到企业的联系方式,甚至,联系电话如果不是固定电话号码,我都会感到不放心,您应当在第一级导航深度的页面中,便提供企业的详细联系方式,要让用户看到您的地址,联系电话,同域名下的邮件地址,在到处都有欺骗存在的网络世界,您应当非常确切地将您现实中真实的联系方式体现出来,这会让用户放心。
每个页面的尺寸应当小于50K
必须承受,如果算上图片,外部 Javascript, 外部 CSS,我们自己的网站有很多页面的尺寸也无法低于50K,但这是一个目标,您应当尽可能降低页面尺寸,不管如今的宽度速度已经多么快,要知道,多数人的 ADSL 接入速度不低于 120KBS 并不意味着人们能以这样的速度访问您的网站,不同网络运营商之间还存在着网络瓶颈,您的网站的外地访问速度可能远远低于本地访问速度。
在所有主流浏览器中拥有一致的表现
IE内核的浏览器在今天(今天是2007年9月1日)的市场份额已经降低到 60% 左右,另外的 40% 被 Mozilla,Firefox, Safari, Opera 等占据,您的网站应该服务 W3C 标准,这样,可以被所有主流浏览器无障碍地访问,如果您的网站只支持 IE,就可能将 40% 的用户挡在门外。
在用户操作现场提供帮助,而不是进入专门的帮助系统
网站的帮助系统应当分散到各种操作现场,不需要象常规软件那样使用专门的帮助系统,随时随地为用户提供有用的帮助信息,让帮助简单化,改善用户的访问体验。
用户可以对某些内容进行评论或反馈
在 Web2.0 时代(今天是2007年9月1日),应当注重用户的参与,网站上的绝大多数内容应该允许并鼓励用户参与评论和反馈,让用户不必注册就可以参与评论,如果用户必须注册才可以参与某些内容,注册过程也应该尽可能简单。
页面不可过分拥挤
不要象现在的某些门户网站那样,将令人眼花缭乱的信息塞满首页,即使您必须放那么多内容,也要留出足够多的空白和边界,否则用户会觉得很累,Web 页面的媒介是屏幕,不是纸张,您实在没有必要去节省屏幕的空间,让内容之间宽松地分布在页面上,给用户以闲适感。
用不同色彩标识未访问和已访问过的链接
Web 公认的配色为,未访问过的链接使用蓝色(Blue),访问过的链接使用紫色(Purple),但您可以根据您全站的色彩搭配设定自己的配色,只要保持全局一致即可。
使用所有人都可以正确显示的字体
一定不要使用生僻或美术字体,您的访问者使用和您不同的系统,可能是不同版本的 Windows,可能是 Mac 机,或 Linux 甚至掌上电脑,您无法保证在您这里正常显示的某种字体,在用户那里也正常显示,尽可能使用标准字体,并在不同环境下进行测试,保证您的字体不会给任何人带来麻烦。
除非真正必要,否则不用新窗口打开链接
自动用新链接打开窗口常常让很多人生气,因为他们的桌面上会有几十个开启的窗口,如果用户想使用新窗口打开链接,他们可以自己按 SHIFT 键。只有新窗口是用来显示一些提示性的消息,或者辅助性的内容的时候,它们才是必要的。
不使用满屏模式显示网页,让用户自己决定窗口的大小
不要自动为用户打开全屏窗口,很多用户并不知道应该怎样从全屏幕状态转回来,全屏窗口可能让用户感到恐慌,因为出了什么问题,不管怎样,全屏窗口是非常糟糕的事情,一定不要使用。
不要弹出窗口
许多浏览器,或者它们的插件会阻止弹出窗口,如果您必须使用弹出窗口以便向用户显示某个意外消息,如严重错误消息,或者通知等等,您可以考虑使用 Lightbox,Lightbox 是一种具有很好的视觉效果,又兼容各种主流浏览器的技术,适合在网站上显示通知,错误消息等等弹出内容,然而它并不使用弹窗技术,它弹出的内容仍然位于母窗体,任何浏览器弹窗阻止系统都不会组织这种弹出内容。关于 Lightbox 的原理和应用,您可以参考 huddletogether.com 的 Lightbox JS v2.0 项目。
用户注册的时候,只填写必要的内容
事实上,应该只填写用户名和密码就够了,完全没有必要要求用户提供更多详细信息,因为多数人会提供假的。除非您的系统是一些类似 B2B, B2C 的系统,需要用户提供真实身份开展业务。
网页上的广告需要有明确的广告标志
要告诉用户那是广告,广告要和您的内容有一定的分隔边界,免得二者混在一起让用户迷惑,请记住,用户在不知情,或被欺骗时点击的广告是没有任何效用的,带不来任何销售,即使您的广告是来自 Google Adsense 那样的点击付费广告,也不要欺骗用户点击,这是一个从业者最基本的操守。
广告不可使用欺骗伎俩,欺骗不熟练的用户点击
您一定遇到过这样的广告,页面上突然弹出一个小窗口,说您的系统感染了某某流行病毒,请点击该按纽清除;或者说某某人给您发来一个消息云云,这种明显的欺诈性广告是非常低劣的,是对用户明显的愚弄,不要挑战您的用户的智商,尤其当很多人都上过当并怒不可遏的时候。
剥离了 Javascript, CSS 等支持文件,您的网页仍然能准确的显示
在某些情况下,用户可能禁用 Javascript,CSS 文件可能丢失,这时您的网站页面仍能正常显示。网页设计的一个基本原则是,首先不使用任何 CSS 装饰将内容正确显示,然后套用 CSS 将内容修饰。另外,Javascript 不应该用在导航等关键场合,一旦 Javascript 被禁用,用户可能导航都使用不了。
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛