网站可用性设计 – 6个最普遍的可用性设计错误

二月 8, 2009

我厌恶Web站点的理由

人们使用web来与其他人进行交互,查找信息,在线购物,以及下载软件程序等。要容易的实现这些事情,当他们浏览一个新的网页的时候,他们要么熟悉这些网站,要么是以直觉判断来确定正确的行动。一个良好的网站可用性设计,能够有效的帮助你的新访客找到他们真正需要的信息,作为一名访客而言,每到一个新的网站总得上下翻转整个页面去寻找下载链接,那实在是一件让人烦心的事情(对于国内的部分下载站点,甚至以广告链接来冒充下载资源,那更是让人深恶痛绝!)。

在下面的内容中,我将向大家展示一些我在去年的工作中总结出来的6个最普遍的网站可用性错误,大多数的网站站长和网页设计师都倾向于犯类似的错误。如果你对站点可用性工具感兴趣,可以参考:10个免费的web分析工具 – 网站访客分析及可用性研究

1. 让人困惑的网站结构和内容

对用户而言,没有什么东西比一个让人困惑的站点更让人气愤了,它们没有任何方位说明,混乱的站点导航,甚至没有站点导航,你根本没有办法在该站找到下一个对你有用的信息,除了当前你正在浏览的页面,你最想做的事情就是立刻离开这个网站,并且永远不再回来!研究人员指出,网络用户应该能够在不超过3次点击的情况下,在一个网站上的每一个页面去到任何一个他们想去的精确页面。

当然,我们说的3次点击肯定应该理解为同一个站点的任何两个不同网页之间。如果不能通过3次点击到达他们所需要的目标页面,你很可能会失去他们。检查你的web站点,如果超过3次点击,web设计师会告诉你,如果你想重新设计或者定义网站结构,那将是一个非常耗费时间的活计!

在今天,我们如何评价一个网站的结构是好是坏呢,有什么主要的特征来判断呢?答案很简单:简约。一个好的站点就是一个所有人都易于有效使用的简单站点。

同时,你还需要注意的是,一个站点有大量的信息,但是它们并不是每个普通用户都需要的。考虑到这一点,你可能需要使用Google Analytics网站分析工具来精确检测用户从哪些网页离开你的网站。通过该工具的帮助,你可以从你的网站流量得到一些提示,哪些页面你需要替换或者重新考虑它。

不要忘记为你的网站使用一个站点地图[Sitemap]:有的时候,这个细节被我们跳过了。站点地图本来是为站点可用性而设计,然而在今天,随着站点地图对SEO的作用减弱,很多网站和博客都对sitemap不再那么重视,而它对站点可用性的作用也逐渐被人们以往。实际上,如果以SEO2.0的标准来衡量,网站的可用性设计占据着非常重要的地位,因此为你的站点设计一个HTML格式的sitemap就更显得重要了,不是为了SEO,而是为了Web Usability。站点地图的创建应该是以最终用户的可用性设计为理念,就像它的名字一样,它让你的用户不至于在你的网站上迷失。我在以前有一篇关于免费站点地图生成工具的文章,大家可以参考一下。

Http://www.havenworks.com这个网站就是一个典型的可用性设计反面教材,这是一个不合理的,让人迷惑的网站。尽管这个网站宣称他们的内容最新的,不过在导航和设计上看来,他们似乎还停留在10年以前!

2. 缺少搜索功能

尽管不是所有的网站都需要搜索功能,但是在页面右上方的一个搜索框却是让客户发现最需要的信息最快和最直接的方式。我认为尽管主菜单已经有了一定数量的链接,然而搜索功能的重要性还是不容忽视的,尤其对于资源丰富的网站。

搜索功能是必要的,但是并非放置一个搜索框到你的网站这样简单而已。很多时候,如果你的搜索功能没有正确建立,它所提供的结果并不能让你的防客满意。搜索结果的精确匹配非常重要,如果你的搜索不能为用户返回最相关的搜索结果,那必定会给用户带来不好的印象,他们会认为你的网站没有他们所需要的内容,但事实上却并不是他们想的那样。

下面是关于添加搜索功能应当注意的一些技巧:

  • 搜索框的位置,通常放在页面的右上角是个不错的选择;
  • 搜索选项应该有能力检测错误的拼写,并为用户提供正确的搜索建议;
  • 搜索框应该尽量的简单,在大多数网站都没有必要添加高级搜索选项;
  • 简单的搜索不应该对大小写敏感;
  • 在搜索框旁边放置一个带“搜索”标签的按钮;
  • 精确匹配的结果应该放置在近似匹配结果的前面;
  • 使用醒目的颜色来标志搜索关键词及词组片段;
  • 不要有零条记录被发现的消息,对于类似的情况,提供相关的搜索建议给用户选择。

更多关于站内搜索的技巧,大家可以参考Stoney deGeyter的文章 ‘Searching for Better On-Site Search Usability

3. 隐秘的链接

还有一个打击可用性的问题就是,对于普通文本和链接使用同样的颜色。 这样做的结果是让一部分访客感觉到混乱,他们尝试去点击一些不是链接的文本,然而真正的链接他们却难以发现。

另外,链接的长度也不宜过长,通常在5到7个单词比较合适。关于链接的设计,你可以参考 ‘How to Design your Links‘.

4. 没有优化的404页面

404页面错误或者 “Page Not Found” 消息是服务器的一个HTTP响应,错误表示web浏览器能够与服务器通讯,但是服务器无法正确的处理或识别相关的请求,或者是服务器没有一个适当的配置来满足用户的请求

下面是几个优化你网站404错误页面的几个方法:

  • 放置一个FAQ/支持页面链接
  • 放置一个sitemap链接
  • 放置一个最重要的分类链接
  • 放置一个搜索框在页面上方显著位置
  • 添加与其他页面相同的404页面样式

与隐秘链接类似,404页面的自定义也是一个容易被忽视的问题。

5. 可用性表单

Avangate.com的可用性资源中心为我们提供了一篇 可用性表格清单 文章给大家可以参考,其中提到了许多最重要和最相关的关于表单可用性的技巧,最关键的一点还是:简洁。

这里我们只列出一些最应该考虑的重要规则:

  1. 不管是新用户还是老用户,都应当让他们了解完成表单的填写对他们有什么好处
  2. 应当尽量避免在表单中提供了过多的填写项目
  3. 不要有任何重复的填写项目
  4. 如果有必要的话,将一个表单撕裂为几个页面
  5. 保证表单外观的整洁
  6. 以不同的方式标记必须要完成的重要表单项目
  7. 相应的错误消息应该被返回

考虑用户的时间,避免使用复杂的表单。对于注册信息表单,创建关键表单项,对于用户问卷调查表单,则尽量使用简洁的回答方式,能设置预设答案的项目尽量设置好,提高用户完成表单的效率。

通常使用免费下载,免费资源来刺激用户完成表单是一个不错的选择。

6. 醒目网页 [Splash pages]

Splash pages 被定义为一个网站的介绍页面或者引导页面。在很多时候,它们都由下面这些元素构成:图形或logo,动画或者flash影象。醒目网页现在还像以前一样非常流行,或许现在稍微冷却了一些吧,但是这也是一个让最终用户讨厌的东西。

但是,让我们用一个开发人员的角度来看看醒目网页有什么优点和缺点:

优点:

  • Splash页面读取时间快并且把所有的信息都放在一个独立的页面
  • Splash pages 允许访问者选择适合于他们的站点技术
  • 站长可以通过广告获得潜在的收入

缺点

  • 对于用户来说没有任何可用性可言
  • 用户可能会尝试离开网站:根据相关研究表明,有25%的用户在看到splash page后选择离开
  • 大多数的搜索引擎不能索引到splash page
  • 在splash page上的重复动画可能导致用户的厌烦

通过上面的优点和缺点的比较,你可以选择使用或者不用splash页面,要注意的是多数时候这个东西会造成用户的反感。

结论

可用性是个主观的东西。在web设计师或者开发人员的眼里看似好用网页设计对于最终客户来说却有可能完全不一样。Web完全是一个相互作用的环境,我们必须注意网站与访问者交互的方式,以及了解访问者是否能理解你的网站为他们提供的方便。

你很难找到一个手册来告诉你正确的步骤。不要忘记,当你创建一个网站的时候,你应该把你自己当作一个普通访问者来看待;在成为一名网站艺术家之前,你需要理解访客的需求。为了获得最好的效果,你必须经常测试:让一些从来没有来过你网站的人到你的网站做一些你想让他们做的事情。参考:如何了解你的网站访客:网站数据收集与分析

网站可用性设计参考资料:

网页设计的5个小经验

基于 the F-Pattern Eye-Tracking 原理来格式化你的landing page: 互联网读者都倾向于一种粗略的F-shared模型来浏览web内容,因此把你的重要图片放到文字左面去。 (什么是F-shaped模型, 实际上就是普通人浏览web内容的眼球轨迹,也叫做尼尔森的F视觉模型,这里有一份调查报告,请参考 Jakob Nielsen’s eyetracking research.)

网站优化-通过提高Wed可用性构建用户满意的网站

关于可用性测试,大家还可以拜访 Steve Krug 的网站,下载这个优秀的脚本 。Steve Krug 是伟大著作 Don’t Make Me Think—A Common Sense Approach to Web Usability [中文译名:点石成金-访客至上的网页设计秘笈]的作者。我们向大家高度推荐这本书。 Steve 的脚本是为“实验室可用性测试”而设计的,因此你可以忽略麦克风和屏幕记录。

网站可用性设计是一门非常有趣的课程,在SEO 2.0的概念下可用性设计是个非常重要的组成部分,因此在后面的文章中我们会大量介绍相关的内容,如果你觉得本文对你有所帮助,欢迎您订阅我们的博客,或者联系我们,发表您的高见!

subscribe

无觅相关文章插件

发表评论

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本站内容必须也遵循“署名-非商业用途-保持一致”的创作共用协议