Archives

Archive for 2006-2

网页使用性问题(二)

让用户来控制字体大小
有时候技术的进步可能带来负面的结果,所谓的“更先进”的技术可能对用户来说更糟糕。网站就是很好的例子,网站经历了本应该避免的革新,比如框架结构、改变浏览器滚动条颜色,滚动的文字。
样式表的使用使得设计者定义字体大小精确到像素,使得浏览器改变字体大小的功能形同虚设。
网页可以以设计师定好的字体大小显示,但是用户应该很容易地控制字体大小,不管样式表怎样定义。毕竟我用的是自己的计算机,自己的软件,它们应该按照我的意图去做。
一些浏览器有一些讨厌的功能,可以让用户定义他们自己的样式表。对于高级用户不错,不过99%的用户只是需要调大字体以方便阅读。苹果系统的浏览器iCab browser提供控制字体大小的简单功能。
为什么有这么多的网站的字体难以辨认呢?两个原因:

多数的页面设计者都很年轻,视力都很不错(没有老花眼)。小字体不会也有影响,但是对于40以上的中老年就不同了。并且,设计师都是专业的显示器。
在设计网站时,设计师通常不会真正阅读页面上的内容,只是简单的看一眼文字的总体效果。

有许多网站都存在字体过小的问题,用户通常需要调整。较早的IE版本在工具栏上提供两个按钮:增大字体、减小字体。
简化浏览器字体控制
不幸的是目前的IE版本丢弃了老版本友好的设计,取而代之的是两个严重的使用性问题:

默认状态下,字体大小按钮不再可见,只有极少的用户会定制工具栏,使字体大小按钮出现在工具栏上。用户看到的是充满没有多大用处的工具按钮的工具栏。由于调整字体功能按钮默认不可见,所以很少用户知道他们的浏览器有改变字体大小的功能。
增大字体、减小字体两个按钮变成了一个。如果用户可以让字体按钮出现在工具栏上,将是一个按钮而不是两个。

对于那些经验不是很丰富的用户即使把按钮弄到了工具栏上,实际上在IE6里改变字体大小还需要几个步骤:

鼠标指向按钮,按钮随之变大。
按下鼠标按钮。
出现下拉菜单,里面有五种字体大小。查找菜单,记住当前选中的字体大小。
考虑你需要那种字体大小。通常是增加或减小一号。
移动鼠标指针到要选择的字号,按下鼠标键。
释放鼠标。

相对用两个按钮实现,只需要一步。

点击需要的按钮(增大字体、减小字体两个按钮)。

当然,可能我有些偏见:你依然需要考虑要增大字体,还是减小字体,判断点击哪个按钮。当你完成了改变字体大小以方便阅读的工作流程,你早已经知道你要增大还是减小字体。通常的用户思维模型不会是一个单独的改变字体大小的操作带有两个参数(增大,减小)也就是一个按钮弹出参数菜单,而是用户模型包括两个操作(增大,减小),所以你设计的代码要符合这个用户模型(两个独立按钮)。
两个按钮的方式不会要用户考虑那种字体大小合适,只是需要知道比现在的大些。用户不会愿意去定义一个具体的字体大小(中、大、最大、小、最小),如果点击了一次增大,发现字体还是有些小,继续点击就可以了。
按照线性顺序操作的按钮可以增强可用性,每一次的点击都很清晰。这就是后退按钮为什么对用户如此重要,为什么后退按钮比历史列表使用频繁的原因。
网页可读性准则

不要使用绝对单位定义字体大小。通常使用120%定义大字体,90%定义小字体。
默认字体要适当的大一些(至少10 point),这样多数用户不需要调整。
如果你的站点主要面对老年人,要使用更大的字体(至少12 point)
尽可能不要把文字做成图片,或放在图片里,因为这些字不会受样式控制。如果必须使用图片,要确保字体大小在12 point以上,并用较高的对比度。
考虑增加切换大字体样式表的按钮,如果访问你的站点的是老人或视力有障碍的人。少数人知道使用浏览器的字体调整功能,增加这个按钮可以帮助用户方便地改变字体大小。不过在主流站点中不建议加入这个按钮。
增大字体同背景色的对比度(不要使用纷乱的背景图或者水印图案背景),抛开低对比的文字降低可读性不说,现在许多站点都被灰暗的字体充斥。

网页使用性问题(一)

网页使用性问题(一)

-2005年的10大网页设计错误

本文原作者 Jakob Nielsen

翻译整理 Dorian

10. 不适当的图片缩放

基于统计数据排名第十的本应该是“弹出窗口“,自从弹出广告登上排名第一,我就已经写了很多关于弹出广告的错误了,

在此,我想要着重的是不适当的图片缩放问题,虽然他的票选值稍低一点,但是反映了更深层次的问题.

有一条长期存在的电子商务使用性法则,就是要提供给用户可以放大的产品图片,以保证用户可以看清细节,包括产品的材质等等,这样使

用户觉得可信.

值得高兴的是大多数站点都依照这条原则提供了放大功能,经常是以放大镜图标表示.但是也有很多站点提供了错误的放大功能.

最糟糕的状况是当用户点击了“放大“按钮之后,只是单独显示了同一张图片,这就是经常说的“无操作“错误.这些“无操作“(既无意义)链接或者按钮

给用户带来的是复杂操作,浪费时间,迷惑:”怎么回事,我做错什么了吗?”.(最常见的“无操作“链接就是在首页上的“返回首页“或者类似功能的链接)

另一个错误也出现在一小部分为用户提供放大图片功能的网站上。当用户请求一个放大的图片,最好是能够根据用户的分辨率提供正好充满屏幕的大图,当然这还是不够的,最好是提供一个区域即能让用户看清细节又不需要用户去滚动图片。

当然首页应该使用小图片以保证页面看起来不是很无聊,没有内容。并且你也应该注意页面的下载时间。即使在现在的宽带时代,缓慢的响应时间也排在网页设计错误的第15位。但是如果用户确实要看一张更大的图片,他会愿意等待较长的下载时间的,但是他们不会愿意去等待一个中等大小的不能足以显示商品细节的图片。

9. 固定宽度的页面

这个错误包括两个方面:

在大显示器上,网页如果不能随窗口缩放,站点是很难使用的。相反的,如果用户用的是一个相对小的显示器,页面又不能压缩,这将触发无法容忍的横向滚动条。
在打印不可伸展的页面时,最右边部分会被剪掉,这在欧洲更加明显,因为他们的A4纸要更窄些。

字符大小也是一个问题。假设一个站点没有范1号错误,没有固定字体大小,使用高分辨率的用户经常会增大字体以方便阅读。然而如果用户想增大窗口让增大了的字体更可读(固定宽度的排版会出现回行),由于宽度已经固定,这样必然会出现类似回行的问题。

最严重的错误便是站点在以弹出窗口的方式显示信息的时候同时固定了显示区域的宽度和高度。如果你必须使用弹出窗口,不要强迫用户在一个“小孔”里阅读你的信息。作为最低要求,要让用户可以改变新窗口的大小。

8. 没有任何联系信息或者公司信息

即使电话号码和电子邮件地址是最常用的联系方式,然而在站点上放置邮政地址也是很重要的,这是站点可信性的重要标志。

7. 令人生厌的表单

用户对于和表单相关的问题有很多的抱怨。基本的案例是什么?在网页上出现太多的太大的表单,包含了太多的不需要的问题和选项。从长远角度讲,我们需要更多的专门为互联网交互设计的应用程序。现在,用户正在面对众多的表单,我们要使每个都尽可能流畅。下面有5个基本原则:

去掉不需要的问题。例如您需要称呼信息吗?(先生,女士,夫人……)

不要使用必添项,除非真的有必要。

尽量多地支持自动填充软件,避免使用生僻的名称,例如“姓名”不要使用其他的称呼例如“你的名字”,类似的还有“地址”,“电话”等等。

当表单显示时,使键盘输入焦点在表单的第一个填写项中。

允许多种的信息格式,如:电话号码,信用卡号码。用计算机去掉类似括号,空格等字符是很方便的,这对于上了年纪的用户尤其重要,他们经常遇到网站要求输入特定的数据格式,比如日期格式就有很多种。许多用户更容易记忆用点分开的4位一组的信用卡号码,而不是一长串没有区别的数字。表单的数据格式和输入习惯是随不同的国家不同的语言文化而不同的。

6. 浏览器不兼容

我承认在2004年春的演讲上,我不是很重视跨平台兼容性问题。那时几乎所有都是IE用户。

今天,不少用户使用Firefox (还有其他浏览器,比如Opera 和 Safari),事情变了,不要因为用户使用其他浏览器就拒绝他们。

5. 错误的搜索

这个排行中的其他错误都容易避免,但是不幸的是解决合适的搜索问题需要相对较大的工作量,还要有专业的软件投入。这是值得的,因为搜索是网络用户体验最基本的部分,而且越来越重要。

4. 不适合网页的内容

适合网页的内容:

简练
可查找

扼要

网页内容还要:

回答用户的问题
使用通常的语言,不要去“造词”(这样也可以有利于搜索引擎索引,用户是用他们的语言搜索而不是,用你的语言。)

3. FLASH

FLASH荣获第三大问题。三年前我曾经努力解决flash导致的问题,发表了如何适当应用FLASH的方针。当我在FLASH开发者会议上讲的时候,几乎所有人都同意丢弃FLASH的过渡使用,FLASH的未来是位用户提供有用的用户界面。

不论意图多么好,多数用户在页面上看到的FLASH都是没有意义的,让人反感的。很明显的一点就是展示介绍的FLASH几乎很少了,再笨的设计者也不愿意去用他们了,即使一些很老土的客户一再要求要展示FLASH。

Flash 是一个可编程环境,并且应该用来为用户提供一些强大的功能,这些功能是普通静态页无法提供的。Flash 不应该只用来使页面看起来更炫。如果你的页面真的很无味,试着重新组织一下你的文本,或者找一个专业摄影师为你拍一些更好的图片。不要让你的页面动来动去,那不会引起用户的注意,只能使用户走掉。多数用户将动画内容等同于没有用的内容。

使用可以让用户预知的静态导航菜单好于用Flash做导航。

2.非标准链接

下面有五条基本原则

明显地标记出什么是可以点击的链接:对于文字链,使用有颜色的字体,加下划线(不要给没有链接的文字加下划线)区分未访问和已访问的链接。
对用户解释链接指向的是什么内容,在链接文字上包含一些关键字等信息,这样可以增强可搜索性,并且对搜索引擎索引有好处。不要使用“点击这里”等根本没有意义的词语解释链接。

避免使用JAVASCIPT或者其他一些奇特的技术破坏链接的基本操作。

通常不要新开窗口,除了类似PDF的文件类型。
链接是排在第一位的页面交互元素。破坏链接通常的使用习惯会使用户迷惑,阻碍他们访问你的网站。

1.易读性

糟糕的字体排名第一位,票数基本使第二名的两倍。大概三分之二的被调查用户抱怨过小的字体或者固定大小的字体;三分之一的用户反映文字和背景对比度不够高,文字不够清晰。

flash的三维立体画

( Flash )

一个在线创作三维立体画的flash应用,结合后台PHP程序。类似画板,不过是三维立体画。

http://www.flash-gear.com/stereo/