你的位置:萧过无痕的栖息地 \ 分类:用户体验 \ 文章正文

【转载】低成本提高web可用性的几个细节(三)

萧过无痕 @ 2009年7月16日 0:06:29 周四

之前的两篇:
低成本提高web可用性的几个细节(一)
低成本提高web可用性的几个细节(二)

8、Tab页签用click还是mouseover?
在准备写“低成本三”的时候,看了一下,发现这篇《 》文章传达的核心思想之一就是保持统一性,但我个人并不这样认为。
个人觉得tab的切换是click还是mouseover重要取决于切换内容是已经预先加载好,还是当你切换时再加载。
换句话说,也就是切换后显示内容的速度是快是慢。详细的说,比如是普通的文本链接,很容易在页面整体加载的时候把这部分也加载完,并且不会影响加载速度,即在HTML代码中,可以看到没有切换过去的那些内容,这样切换时显示内容的速度就非常快,一般用mouseover,用户使用中会有一个连贯感。如图1
使用mouseover的tab切换
图1
那反过来,使用click切换tab,一般是指切换时需要查询、提交或是再加载数据,如图2。因为这种情况的切换“反应速度”会相对慢一点,需要有一个等待时间,而click在用户心理的期待中就会有一个等待的时间,比如频道的跳转,比如提交表单,一定是click,而这些行为都会因为重新加载页面,或是向服务器提交数据而有一个短暂的等待时间。所以用户会有这个耐心,而用mouseover一般是需要很流畅的一个动作,直接切换显示出来内容,试想一下如果mouseover过去一个tab标签,而暂时空白需要读取数据,那岂不是很糟糕的体验?
使用click的tab切换
图2

9、导航或菜单中不要滥用icon
有些页面中,为了体现美观或者很酷的样子,用了大量的icon,加在文字的前面;可怕的是,icon与文字的意思相差甚远;更可悲的是,有些只有icon而没有文字。
所谓不滥用,不是说不能用,而是要在恰当的时候,用做好设计的icon
用好icon的益处:使这个链接更直观,弥补文字表达不够全面的弱点,使用页面更活泼,使这个导航或链接更吸引人,如图3和图4
网上车市
图3
对于购车用户来讲,可能不清楚紧凑型车和小型车的区别,但如果用一个icon来示意,大多数用户就会清楚了。
中关村在线
图4
上面的图4,我们可以发现,即使把文字去掉也可以跟据设计良好的icon猜出来大概的意思
滥用icon的坏处:增加页面噪音,影响文字信息的传达,分散用户视觉注意力,不能很准确的理解这个菜单或导航的意思。如图5
Q车网
图5
上图,我故意没有把这些icon下面的文字一起截图,你能猜到这些导航是什么意思吗?
其实是这样的,见图6
Q车网
图6
当时我就震惊了,为什么“对比”要用一个喇叭呢?
想找到一个使用大量icon而干扰正常阅读的反例,但发现找不到了,说明近两年我国互联网的设计师的水平都有长进,记得以前经常可以看到首页每一个模块的标题前都有要一个icon。

10、当鼠标移过可点击元素时的指针一定要变手形样式
这也是一个互联网用户的心理习惯问题,可以简单的理解为:只要变成小手了,说明这是可以点击的。这是互联网用户长时间使用互联网培养成的一种潜意识,所以说,如果你的链接没有把指针样式变成手形,那么很可能用户会忽略这个链接。
在代码中就是这么一句:style=”cursor: pointer;”,这是切页面的前端人员最基本应该掌握的,只是有时候会忘了或是样式冲突造成,所以在检查的时候一定不要忘了,看看你的链接,在鼠标移过时是不是变成了小手。
另外,一般情况下,为了引起用户的注意,会在链接的标签中的文字做出一些变化,例如出现下划线或是变色,同时再变成小手,更可以引起用户的视觉焦点。

11、前端开发时一定要使用IE6
之前见过很多前端工程师,使用Chrome浏览器,当问及为什么时,给的答复是这个解释JS很快,而且用着感觉很cool。
但就我所经历过的一些项目,不管是2亿PV的项目,还是我这个50pv的博客,不管是用自己开发通过log分析的数据,还是用google ****ytics等第三方统计的数据,在客户端浏览器这一项数据中,至少有超过70%的IE6,超过15%的IE7。所以我们要相信MS垄断的威力,我们要相信大多数用户上网时还会在桌面找那个蓝色的大e。
鉴于上述,我们在前端开发时,一定要用ie6来调试,这样才不至于到后期测试的时候有很大麻烦。
关于如何卸载IE7/8,安装IE6的方法请大家问google,或者干脆装个VM。
还有,就是关于兼容性测试我们要考虑哪些浏览器的问题,我觉得这个问题完全是看时间成本,如果时间成本允许,我们可以把现在所有的浏览器都测试过来,样式上是可以做到完全的兼容性,就是花时间调的问题。但一般来讲,国内的互联网公司可以不会花非常大的时间成本去测试所有浏览器,个人认为主要测试以下几个浏览器即可,按重要程度排列:
IE6,IE7,firefox3.x,firefox2.x,IE8,safari,chrome。

12、低成本的可用性测试
邀请真实用户做可用性测试,是要给一些钱或是给小礼品的,至少也要把人家的路费给报了吧,但有一些公司就不愿意在这方面花钱,觉得这种测试不重要。
做为产品设计的我们怎么办?
在公司内部找到非核心职能的同事,在一个互联网公司中,除了产品和设计外,核心职能就是运营编辑,技术开发,市场推广,销售。那么非核心职能,我们可以找到行政前台,HR等。这些人平时的工作跟这个网站的关系不是很大,有可能他们上天涯的时间远远超过上自己公司网站的时间,他们对网站的熟悉程度可能跟一般用户差不多,而且不是那么清楚网站的架构,内容,发展方向,所以这些人的“心灵”很干净,可以把这些同事做为很典型的用户,而且不用支付酬金,可以马上约到会议室进行测试。

源地址:

引用地址:

说说看:(点击申请属于你的个性头像)

(*)

关于站长
网站公告
  • O(∩_∩)O
分类
最近关注
  • 最近关注着的娱乐节目有:
    1.CSI现场犯罪调查(三部);
    2.危机边缘
    3.暗侠
    4.都市侠盗
随便溜达
最新评论
言论
  • ⒈决不能因为一件伤心的失望的事,就从此放弃生活中一切有价值的东西;
    ⒉要像一颗青树,大风将树根吹折,然而巨大的树干,却永远树立;
    ⒊想匆匆忙忙地完成一件事以期达到加快速度的目的,结果总是要失败的;
    ⒋如果你是对的,就要试着温和地,技巧地让对方同意你;如果你错了,就要迅速而热诚地承认。这要比为自己争辩有效和有趣的多;
    ⒌"思考"应当走到众人前面去,"冤枉"不妨留在后面;
    ⒍如果试图改变一些东西,首先应该接受很多东西;
    ⒎以后更新^_^
友情连接
存档