点击这里给我发消息 点击这里给我发消息

如何快速低成本提高web可用性的几个细节

添加时间:2013-12-6
    相关阅读: 网页 设计 方案 页面 数据库 网络 程序
副标题#e#

可用性(Usebility),ISO 9241-11国际标准对可用性作了如下定义:产品在特定使用环境下为特定用户用于特定用途时所具有的有效性(effectiveness)、效率(efficiency)和用户主观满意度(satisfaction)。

在实际的产品设计中,有很多标准的方法和技巧可以提高web页面的可用性,但往往很多方法成本较高,耗时较长。如何快速度低成本的提高可用性呢?我总结了几个细节给大家分享一下。

1、在传达信息的页面尽量少用红色

我们在很多时候有一个误区,错误的认为红色醒目,可以吸引人,从而可以转化更多的PV,特别是一些运营编辑同学们,爱用标红这样的形式,而且为了达到“目的”,把标题搞的一大片红。(图1)

来自网上车市首页的截图:

(图1)

我们可以看到,这样的体验非常糟糕,因为红色是一种起到警示作用的颜色,往往只有出现系统级错误,不可恢复操作提示或是严重警告性错误时才会使用这种颜色,包括日常生活中,红色代表禁止(图2),这种颜色会给用户很紧张焦虑的感觉,而且滥用会使页面很不和谐。

(图2) (图3)

当然,如果红色处理的得当,还是可以在页面中可以很好的达到突出显示的效果,例如上面的图3。

2、最醒目的颜色是链接默认蓝色

更详细的,按最醒目最容易让人点击的顺序排列如下

1)文字是默认链接蓝色和下划线的。蓝色一般为#0000ff或#0000cc,但在运营页面这种蓝色不适合聚集在一起,可以跟据整体风格做色值上的调整。

2)文字是默认链接蓝色的。(蓝色应用方案同上)见图4

(图4)

插入千鸟的文章《用户喜欢点什么》

3)文字是反白或是高对比度的文字或是按钮,一定要符合W3C关于对比度的规范,如图5就有很好的效果。

来自amazon.com导航中的截图

(图5)

插入Ami Zhang的文章《不要忽略了颜色的可用性》

3、网页中的英文不要全用大写

这点主要是说出现在标题,或是说明性文案中的英文单词,或是主域名超过5个字母的域名,最好不要全用大写。

举例:Advanced Search

如果写成:ADVANCED SEARCH

虽然很简单的一个词组,但如果全大写,会不会读起来更“累”一些呢?我想对于中国用户普遍英文水平不高的情况下,这种“累”会更突出。

再比如:www.soufun.com,这个网址,如果我们在一些宣传性的广告中用小写,可能更容易让人记住。

如果改成:WWW.SOUFUN.COM是不是感觉有一点点不舒服呢?

其实这与人们对缩写名词的潜意识有关,比如我们说CCTV,可能比看到cctv反应起来会快那么一点点。

所以在页面中的信息文案,最好还是遵循一般规律,如果是专有名词或是品牌,可以用首字母大写的方式,比如:BlackBerry

本文作者:www.myzdnet.com.cn #p#副标题#e#

4、网页中的数字尽量使用阿拉伯数字

这一点与上面类似,也是为了给用户带来更直观的效果。特别是用于说明日期,条目数量等用于数字的地方,一定要使用阿拉伯数字。见图6

比如:

(图6)

可以想象,如果我们改为:

名博排行前五十

不超过四十个字符

这样看起来会很累,而且不够直观。当然,对于电话号码就更不用说了。

5、注释性文案要尽量简短

注释性或是情景提示的文案一定要在表达准确意思的前提下简短,不需要修饰性的形容词,建议大家仔细学习好中文,很多朋友知道要简短,但为了简短,把要传达的意思破坏了,甚至有了歧义。

举例,见图1

修改之前,文字冗余。

修改之后,清晰明确。

(图1)

K3定律之一:把页面中的文字去掉一半,把剩下的文字再去掉一半。

6、用好alt和title

简单直白的说:

alt适用于图片,在浏览器中鼠标悬停在图片上时有辅助的文字注释或说明,用在img标签中

例如:把鼠标悬停在图片上

这是江洋

title适用于带有链接的文字,在浏览器中鼠标悬停在链接文字时有文字注释或说明

例如:把鼠标悬停在链接上

www.myzdnet.com.cn

其实这两个html语法中的属性,大多数人都知道,但很多网站没有把这两个属性用好。

例如一些按钮,为了设计美观,在按钮的图片中只会写上一个关键的动词,例如:Search或Go

但在一些场景中,可能这个按钮不足以十分清楚告知用户它的作用,所以使用alt值做为注释就可以提高可访问性。另外,在网络不好或是服务器问题而导致图片无法打开时,alt值也起到的非常关键的作用。如下图2

(图2)

再例如一些文章标题因为页面设计整齐的限制,而仅显示了短标题或是做了截取,但这样的标题往往不能很准确的表达意思甚至让人看不懂,这时候如果用了title属性就可以很好的解决这个问题,见图3

(图3)

关于alt和title的更多技巧,请参阅千鸟的两篇文章:《使用Alt提升可访问性 》《使用Title提升可访问性》

7、超过1秒钟的等待要有进度显示

在现实中,我们都有过体验,如果去银行排队,漫长的时间中,如果玩儿着手机,或是看等候区提供的杂志可能会好过一些。

在web中用的比较早比较普遍的等待进度状态是上传,比如我们用web中的邮箱上传附件或是在视频分享网站上传视频,这些进度条往往都是由程序判断,可以给出预测性的完成时间或是完成的百分比,让用户有一种“期待感”,见图4,这些已经成为“web产品标准”的地方,大多数网站做的已经都不错。

(图4)

但存在一些页面中的交互,需要等待的时间远远没有上传一个文件那么长时间,但这种等待又不能控制在非常短的时间内(通常在1秒以内用户可以忍受)。即便这种“不长不短”的时间,如果完全让页面处于空白的等待状态,哪怕只是2秒钟,对用户来讲,可能会以为网站出了问题页离开。

比如一些标签页的切换会向服务器提交请求,比如一些检索器的查询结果需要查询数据库

而这些看似很短暂的等待,如果没有任何提示,会让很多用户离开。

例如,在新版的首页中有一个切换各地报价的模块,网速好的情况下,切换城市只需要1秒钟左右的时间。如果没有加任何切换时的等待提示,切换城市时,这个模块就会空白一片,带给用户的体验就非常不好。

如果我们加上一个gif动画和一行文案描述,用户从心理上在这1秒钟里就不会有一种“空白”的等待感,而且会很有耐心。如图5

(图5)

而且这种等待进度提示的成本非常低,只需要一个gif动画图片就可以解决。(jiangyang )

本文作者:www.myzdnet.com.cn
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册