10个提高网站可用性的实用技巧[译]

来源:菠菜博 时间:2009-06-12 12:37:00 

不论是企业网站、个人博客,或者购物网站、游戏网站,我们都希望能吸引访问者并且给他们留下愉快的访问体验。

可用性是用户体验的一种度量,它可以用访问者完成网站功能的方便程度来描述——无论是通过自身知识还是通过学习新方式来完成这种功能。我认为Jakob Nielson的解释非常到位,他说:

可用性是评估网站易用程度的一种属性。同时“可用性”这个词也指在设计过程中提高易用性的方法。

在本文中我希望能够提供一个可用性清单,内容覆盖了从视觉设计,到可以用在任何项目中的简单导航提示等多个方面。

1. 当前位置导航

要让用户在任何时候都知道自己身处哪个模块,或者在浏览那个分类。对任何网站来说,这都可以极大提升可用性。在这一点上,创建当前位置导航可以算是最有效的提升可用性方式。

当前位置导航的理想方式是在服务端创建,这样可以大量节省HTML和CSS代码。如果不方便在服务端创建导航,那么使用CSS操纵你的body元素 从而直接定义每个导航标签也是一个不错的方法。

另外,你可以方便的 使用JavaScript创建当前位置导航菜单

要注意,你的当前位置导航最好和鼠标滑过样式保持不同,这是很多网站缩不注意的。


2. 可用的表单标签和按钮

使用HTML的label属性,可以让用户通过点击注释标签来激活表单元素,这是HTML的一个伟大的内置功能,但不幸的是,很少有用户知道这回事。

怎样让用户了解这个功能呢?你可以通过改变鼠标指针形状的方式来提醒用户,这只需要一两行代码就可以实现。


做成这样之后,用户就很容易的知道这标签是可以点的,我经常觉得HTML标准里没有把这些可以点的元素统一设置为小手指针是非常不应该的,所以我通常我会这样统一定义:

label, button, input[type="submit"]{cursor:pointer;}

3. 将你的LOGO链接到首页

我认为logo不链接到你的网站首页是一件令人沮丧的事情,恰恰有很多网站没有这样做。用户研究表明,这样做是很有必要的,用户需要它!

如今越来越多的网站意识到,给LOGO加链接的重要性。用户已不满足于一个标记为“主页”的文字链接,用户希望点一下logo就可以回到首页。

拿Facebook为例,它为每一个导航元素增加了“ref”属性来跟踪用户点击。如下图:

标签:技巧,导航,用户,菜单
0
投稿

猜你喜欢

  • python opencv 图像拼接的实现方法

    2021-06-21 19:11:51
  • Oracle 数据库操作类

    2023-07-24 06:58:42
  • SQLserver 数据库危险存储过程删除与恢复方法

    2011-09-30 11:33:54
  • IE下的firebug方法

    2009-07-29 18:50:00
  • SQL Server无日志恢复数据库(2种方法)

    2024-01-17 03:40:56
  • python实现固定尺寸图像拼接

    2021-12-16 20:27:01
  • 在ASP中改善动态分页的性能

    2008-05-08 14:27:00
  • Python中的TCP socket写法示例

    2023-06-25 00:21:05
  • 从Vista地址栏到网站导航菜单

    2009-09-08 12:35:00
  • Django如何实现内容缓存示例详解

    2022-02-23 15:33:01
  • MySql循环插入数据

    2010-10-14 13:50:00
  • MySQL 实现lastInfdexOf的功能案例

    2024-01-20 15:16:51
  • Python用类实现扑克牌发牌的示例代码

    2021-01-07 10:07:07
  • Active Server Pages 错误 “ASP 0141”

    2009-08-19 17:10:00
  • Python使用Keras OCR实现从图像中删除文本

    2022-07-22 20:50:24
  • 如何在数据库中限制检索行数?

    2010-06-22 21:04:00
  • Python3.7 读取 mp3 音频文件生成波形图效果

    2022-09-08 18:02:25
  • SQL Select语句完整的执行顺序

    2008-09-28 21:22:00
  • vue3中关于路由hash与History的设置

    2024-05-13 09:14:24
  • python利用urllib实现爬取京东网站商品图片的爬虫实例

    2022-05-01 12:32:56
  • asp之家 网络编程 m.aspxhome.com