您的位置: 首页 > 技术文档 > 网站建设 > Web设计核心问题3:为用户设计
alexa 网站的 Site Stats 详解 回到列表 Web设计核心问题2:Web设计进程
 Web设计核心问题3:为用户设计

作者:Thomas A. Powell  时间: 2003-11-29 文档类型:转载 来自:蓝色理想

第 1 页 可用性
第 2 页 谁是Web用户
第 3 页 用户的共同特征
第 4 页 激励问题的处理
第 5 页 用户的世界
第 6 页 用户的一般类型
第 7 页 Web规则
第 8 页 易访问性
第 9 页 建设可用的站点

3.3 用户的共同特征

  不存在共性的人,但是人们一般有相似的物理特征。大多数人看到相同的东西,能够记忆,对刺激作出相同的反应。但是记住,人是各不相同的。有些人可能有很好的视力,而有些人则很差。有些人能够记住几百条链接并且能够快速地过滤它们,而有些人在面临多于两个选项时就无法处理。有些人的反应速度很快,而有些人则很慢。但是,就像Web设计的其他方面一样,应该首先着眼于共同点,并确信也考虑了差异。我们首先考虑用户的共同特征如视力、记忆力和对刺激的反应。

视力

  首先考虑用户如何从Web站点接受信息。用户主要以视觉方式从Web站点接受信息。他们从屏幕上的文本、颜色、图像和动画中接受信息。用户能够看的能力显然是非常重要的。设想一个视力不好的用户,除非文本的字体很大,前景和背景的对比很明显,否则他不可能很有效地与Web站点交互。不幸的是,许多网站假定用户具有超人般的视力。一个有这种问题的例子可以在h t t p : / / w w w. Web d e s i g n r e f . c o m / c h a p t e r 3 / v i s i o n i s s u e s . h t m找到。

  为了避免烦人的颜色组合,设计者应该明白人眼是如何接受颜色的。三个影响颜色的因素为:

  • 色调。颜色与基本颜色如红、蓝、绿及它们的一些组合相似的程度。
  • 饱和度。彩色和非彩色(白、灰或黑)的差异程度。
  • 亮度。在相同的观察条件下,一种颜色比另一种颜色亮或暗的程度。

  具有视觉缺陷的用户经常不能区分哪些色调有轻微差别,以及亮度和饱和度相同的颜色。例如,红绿色盲(一种最常见的色彩缺陷)者不能区分具有相同的亮度和饱和度的红色和绿色。由于这种视觉缺陷会带来无法区分红绿灯的问题,因此是非常讨厌的。这些有视觉缺陷的人可能不知道什么时候该走什么时候该停。在Web上,如果链接的色调、亮度、饱和度是相近的,用户又如何确认一个链接已经被访问还是没有访问呢?

  通过遵循一些简单的规则,网页设计者可能避免视觉问题。首先,确认没有使用具有相似色调的文字和图片的组合。不要将深蓝色作为浅蓝色的背景,而应该使用黄色或白色作为背景。

建议:不要将具有相似色调的文本、图像和背景色一起使用。

  具有相似饱和度的文本和背景色也有可能带来问题。例如,不要以玫瑰红作为灰蓝色字符的背景,这两种颜色都近似于灰色。在玫瑰红的背景之上应该使用白色字符,或反之。建议:不要将具有相似饱和度的文本、图像和背景色一起使用。

  最明显的问题是对比度不够大。在黑背景上的黑字符或在亮背景上的亮字符可能在所有的监视器上都是不可读的。不要在淡黄色背景上使用浅蓝色文字,应该在白色背景上使用蓝色。或者,在白色背景上使用黑色总是不会错的。黄色和黑色之间的对比度很大,所以它们被用来做路径标志。但是,在将网站改为这种颜色之前,还要做一些设计,不要仅仅因为可用性的原因而这样做。

规则:保持较高的对比度。不要将具有相似亮度的文本、图像和背景色一起使用。

  在网页上,颜色的一个重要应用是链接的颜色。一般说来,应避免修改链接的颜色。如果确实修改了链接的颜色,记住不要使用和背景色相似的色调、饱和度和亮度,链接之间的颜色也不应该如此。例如,不要将链接的颜色从红色改为粉红色。出于某种理由,设计者会喜欢某些特定类型的组合。相反,考虑将链接的颜色从深蓝色转变为粉红色,这是与链接的正常状态相似的。注意到根据链接状态的不同,背景颜色也有可能干扰链接的可读性。因此,白色是一种很好的背景色。如果必须要在颜色的对比度上作出牺牲,访问过的链接的颜色的对比度可以稍差一些,因为这些链接用户一般不太感兴趣。

  链接和文本经常会与背景色发生冲突。特别应该避免使用具有多种色调、饱和度和对比度的图案做背景。斑点状和纹理状的图案经常是一种不好的背景;应该使用精细的图案或简单的颜色。

建议:避免使用繁杂的背景图案。

  为了让网页更可读,或为那些有视觉缺陷的人考虑, Web设计者应该使用在两方面(如色调和亮度)具有差别的颜色来区分不同的项。如果遵循了这条规则,那些在某个方面有视力缺陷的用户(如红绿色盲)仍然可以通过其他特性如亮度和饱和度来区分不同的项。规则:确信用来区分选项(如链接)的颜色在两个方面有显著的差别,如色调和亮度。

3.4 记忆力

  记忆力对于一个访问网站的用户来说是至关重要的。假如一个用户在浏览网站时不能记住任何东西,他将不可避免地迷失,因为他不能记住他是否曾到过某页。但是,用户的记忆力远不是完美无缺的,并且他们不会有意识地去记忆。用户总是试图通过做最少的事而获得最大的收益。人类的天性表明用户不可能花大量的时间去猜测某件事,除非这样做有一个好的回报。规则:用户试图以最小的工作量取得最大的收益。

  当然,一个好的收益对于不同的人来说是不同的。有些人喜欢解复杂的难题,仅仅是为了个人的满足感。对于他们来说,回报是通过克服困难所获得的强烈的成就感。但是,让我们假设用户一般不会表现出这种行为;假定他们仅在必要时或确实会带来好的回报时才会努力工作。如果你对这一点有不同看法,不妨假定用户是懒惰的。更多的有关用户反应的规则将在本章的后面部分给出。前一条规则仅仅是用来将有关记忆力的观点连成一体。

  现在假定用户不会喜欢或甚至会避免访问需要他们付出很大努力的站点,强迫他们记忆将不是一个好的主意。作为一个实际例子,考虑一个自动电话银行接口。你打电话给银行,银行要求你输入账号,然后给你一个选项列表及其对应的键,“查询余额请按1,转账请按2,付款请按3。如果碰到这种系统而你不熟悉各种选项,系统就可能很不好用。你必须记住所有的选项,如果选项太多的话,这可能不是一件容易的工作。如果相同的信息出现在一个小的文本菜单上,就可以很容易地找到他们。你只需要浏览这个表,选择适当的项。声音的例子由于需要记忆而变得很难用。一般说来,识别选项总是要比记忆来得容易。因为用户会犯错,并且倾向于使用好用的系统,我们应该尽量依赖识别,而不是记忆。

规则:识别比记忆容易,因此不要强迫用户记住信息。

  有很多例子可以说明识别比记忆来得容易。学生一般认为选择题比填空题容易。虽然你必须学习,但是填空题所要求的记忆量要多得多。选择题由于能够见到答案并认出它来而变得相对容易。

  本书中的许多规则和建议根本上与这一观点相关,即识别比记忆来得容易。例如,考虑将在第6章讨论的修改链接的颜色的想法。如果我们关掉链接的颜色,从而链接看起来总是没有被访问过,用户就会被迫记住他们是否曾访问过一个特定的链接。如果链接改变颜色,用户只需要通过识别不同的颜色就能确认是否曾访问过这个链接。

规则:不要使访问过和未访问过的链接具有相同的样式和颜色,这样会强迫用户记住是否曾访问过这个链接。

  记忆力的另一个重要特性是,它不是完美的。要记住事情不是很容易的,用户有可能只能记住事情的一部分,也有可能记错。与现实世界相似,重复可以提高记忆。例如,熟练用户和超级用户会记住对象在屏幕上的位置,但大多数用户对于可能的链接和网页的组织方式只有模糊的印象。但是,在记忆时,直观记忆是一种最强大的记忆方式。记忆图片或那些能够产生图片的句子和思想要比记忆那些抽象的,没有视觉线索的东西来得容易得多。记住一个人的脸或一个你去过的地方要比记住一个名字容易得多。因此,将那些需要记住的网页做得看起来和其他网页不同,将是一个很明智的做法。例如,站点导航图、主页构成了一个用户的安全区域。使用不同的图像或颜色可以使它们很便于记忆,这一点很重要。但是,不要假设用户有完美的记忆力。不要让主页和其他网页只有微妙的差别,或者期望用户记住网页上的文字来区分主页和其他网页。

建议:既然形象记忆较容易,将那些需要记住的网页做得看起来和其他网页不同。

    对于网页的可用性来说,另一个重要的记忆力特征是用户的短期记忆力。让我们回到电话银行系统的例子。当被告诉可选项后,用户必须记住它们。如果可选项太多,用户就会忘记一些选项。这就是一个短期记忆的例子,从某种意义上说,我们的大脑中有一块区域专门用来做短期记忆,这一部分不能记住很多东西,并且也是很不可靠的。认知科学家一直都对短期记忆很感兴趣,并且做了大量的试验。一些随机对象或单词被显示给试验参与者,要求他们快速地看一眼或从中做出选择,以便测试他们的短期记忆力。试验结果表明参与者大约能记住七个物品,有的多两个,有的少两个。这就是说,用户可以很好地记住5 ~ 9个物品,并从中很好地做出选择。

  用户能够很快地记住7(±2)个项目,这一点在Web设计中有着深刻的意义。如果你给用户提供一组链接,是否应该将它们限制在5 ~ 9个呢?最好是这样做,如果你希望用户能很好地进行选择的话。例如,如果随机地给用户提供十多个选项的话,你会发现用户很难从中进行选择。用户会倾向于选择一些极端选项。有些站点的作者已经看到了这种情况的发生。一个很大的音乐站点(我是它的一个顾问)的乐队列表就遇到这样一个问题,其中的以字母A或Z开头的名字有着比其他名字高得多的下载率。实际情况是用户们对这些乐队缺乏知识,因此他们浏览这个列表,并且除非有些特别的东西引起了他们的注意的话,他们会倾向于选择最初的和最后的选项,看看会发生什么事情。在这个过程中,他们确实没法记住这些有趣的乐队名字,因为确实是太多了。如果你希望用户从一个表中选择同样重要的事,就把选项限制在5 ~ 9个。

建议:把相似的选项限制在5 ~ 9个。

  但是,不要过分追求5 ~ 9个选项。有些设计者可能被这一规则误导,而认为一个网页只能有 5 ~ 9个链接。在内容丰富的时候,这是一个很大的限制。用户可以逐步地关注选项。例如,在网页上提供5 ~ 9个不同的网页簇。每一簇都有标记和颜色,用户在看过之后就可以进行选择。在每一个簇中,可以有5 ~ 9个链接。从这种意义上说,在一屏上,我们可以有多至8 1个链接而用户仍然可以很容易地使用它们。对于一个设计很好的具有很多链接(少于1 0 0)的网页,你可以注意到它的用来避免记忆的分类方法,如字母顺序。

  有关记忆的经验规则也可以应用于点击。用户可以记住三个连续的网页。更多了记忆中就会出现遗漏。例如,在用户访问了十几个网页后,他们就会记住一些,但一般不会是按顺序的。容易记的网页可能在视觉上非常独特,从而可以激发记忆。在第5章,我们会讨论在网站中作为路标的网页。但是,如果你希望用户记住路径,他们一般只能记住三个(或者更少,如果各个网页看起来很像的话)。因为这一点,你不应该希望用户能够记住有着多于三个项的路径。建议:只寄希望于用户能记住三个连续的项。

   这并不是一个关于记忆力的完整讨论,但它确实可以用来提醒Web设计者,为了网站便于使用,我们需要限制记忆项的数目。用户花在记忆上的努力越少越好。

3.5 响应和反应时间

  如果你观察过用户浏览网站,会发现有些人明显比其他人快。有些人能够更快地读完网页的内容,更快地作出选择,对于最轻微的下载延迟都会感到不满。有些人则需要经过努力才能跟上,而对于网页加载很有耐心。但是,随着时间的推移,你会发现人们对于网页加载的耐心会逐渐消失,特别是用户的使用频率在增加时。例如,考虑一下用户在自动柜员机前等待多长时间会变得恼火。在自动柜员机最初出现的时候,相比于在银行排一个长队,三十秒到一分钟的等待时间都是可以接受的。

技巧对于他们不熟悉或新奇的事物,用户更有耐心。

  这一想法在Web上总是能见到。那些一次性访问网站如电影促进网站或设计者文件夹需要大量的下载时间。这些网站被叫做一次性访问网站是因为用户不可能再回来。“飞出网页”,大量的动画和长的下载时间对于没有见过这些的用户显得不是很烦人,而对于那些再次访问的用户,耐心则会慢慢消退。那些成功的、使用频繁的网站如电子商务网站都是很快的。第一次访问网站的用户(这些人可以被认为是网站的新手)的需要和愿望是与那些经常访问站点的人不同的。但是,用户不会有无限度的耐心。当他们开始熟悉网站后,他们会变得越来越不耐烦。一般来说以下规则是成立的。

规则:用户所愿意等待的时间正比于他所能得到的回报。

  回报越多,用户越愿意等待。那些能够得到免费物品或准备下载一些需要的代码或音乐的人似乎愿意无限等下去。考虑那些用调制解调器从I n t e r n e t上非法下载音乐的用户。他们花费数个小时来下载音乐,但他们可以出去找一份即使报酬最低的工作,工作相同的时间,就可以挣足够的钱来买下整张C D。当然这种不平衡会随着带宽的提高而改变的,对于音乐产业界来说这是不利的。前一个规则和这个例子说明如果你希望用户等待的话,最好有一些对他们有用的东西。

  用户所愿意等待的确切时间因人,因个性以及可能的收益而异。但是,对于响应和反应时间也存在着一些一般性的规则。一些可用性专家( Jakob Nielsen,www. u s e i t . c o m)有关响应时间的研究都报告了相似的结果。共同的用户响应和反应时间概括在表3 - 1中。

  对于Web来说,很少有快速的响应。很多时候,即使是一个快速的下载链接也需要花费几秒钟。但是,小心像Java applet和F l a s h文件的下载。如果用户的处理器比你的快,这些程序在他们的系统上的运行速度可能要比期望的快得多,用户有可能跟不上。有时候你可能会注意到有些网页中用J a v a写的滚动选取框在以一种只有超人才能跟上的速度滚动。提示小心下载后对象的过快响应时间。

  在大多数情况下,一个Web网站的速度不可能使用户跟不上;实际上,它有可能是太慢了。因为用户有可能变得不耐烦,你应该给他们一些提示,告诉他们任务的执行情况。在任务执行过程中,浏览器本身就给出了大量的反馈信息。在加载网页时,浏览器一般会将光标转变为一个等待的标志如沙漏、转轮或者是规则跳动的标识(一般在屏幕的右上角)。提供一个朝向屏幕底部的进程条,在屏幕底部的状态栏里显示有关正在加载的对象的消息。网站设计者可以把他们的网页设计成能够提供更多的反馈。例如,设计者可以让他们的网页先加载文本或每次加载网页中的一块。通常,用户会将图片分成多个块,在加载时他就能每次看到一点。同样,设计者也经常使用逐步加载的图像,从不清楚到清楚。这样用户在最初就能得到一个模糊的整体印象,并且在必要时观察加载过程。图3 - 2显示了所有的这些进程提示。

  对于那些只需要1 0 ~ 2 0 s就能完成加载的网页,通过逐步加载和浏览器提供的反馈就足以让用户明白正在进行的事情。但是,如果加载需要更长的时间,就应该给用户更多的信息。例如,许多网站使用二进制技术如F l a s h,提供一个特别的具有状态条的网页显示进程。这些进程条也可以通过J a v a S c r i p t等技术来实现。但是,仅当加载时间达到3 0 s或更多时,才需要进程条或其他形式的反馈信息。

  如果你在建设的是一个静态的网站,有些简单的技巧告诉用户一个对象的长的加载时间。考虑下载一个很大的图片。除了将图片隔行扫描和逐步显示外,如在第11章讨论的,也可以使用L O W S R C属性。例如,可以首先加载一个图片的低分辨率版本,甚至是一个说明正在加载的消息图片,例如:

  或者,你可能在显示消息。一些设计者甚至用图像的A LT属性来显示文件的大小或加载的消息,例如:

  当然,可能最好为其主要的用途保留A LT文本—为用户提供一个没有图像的可供选择的方法。另外一个能用来告之用户长时间下载的H T M L或C C S技巧是,在背景图像上显示正在下载的消息,如图3 - 3所示,这些消息最终会被下载的内容覆盖。

规则:时间对用户来说比下载的字节数更重要。

  因为时间对用户来说很重要,应该充分地利用每一秒。考虑一下用户浏览Web的一般过程,他们快速浏览网页,找到合适的链接,点击,接着再等待网页的出现。一旦网页加载,他们浏览网页寻找下一个链接,并花时间浏览内容。值得注意的是,时间分为用户思考时间和下载时间。对大多数用户来说,浏览网页的思考时间相对于等待时间来说很短。然而,对内容网页来说,用户可能花很多时间阅读网页。一种提高响应的方法是在用户的思考时间里下载将要使用到的信息。这可称为预加载或预缓存。假设可以在用户思考时间内下载大部分或者全部将要阅读的内容,下一次的网页下载时间就会显著减少。就像魔术师预先准备好的技巧一样,在空闲时间下载会产生神奇的时间效果。

建议:在用户的思考时间里预加载,可以提高Web网页的响应时间。

  已经开发了很多通过预加载现行网页的链接内容来加速浏览器的工具。这种方法的唯一问题是很多网页有非常多的链接,所以浏览器难以预测用户下一次将加载哪个网页。提高缓存的命中概率的最好方法是通过观察日志文件来确定用户访问站点的一般路径,并在路径中放置一些代码以预取网页。然而,这仅仅会提高命中的概率。预加载可以保证提高响应的唯一情况是,当用户访问线性结构的网页时。

建议:在访问线性结构的网页时,使用预加载。

  要想观看线性结构的网页的预加载,可浏览h t t p : / / w w w. Web d e s i g n r e f . c o m / c h a p t e r 3 / p r e l o a d d e m o . h t m。 Web站点的响应时间是用户对站点可用性评价的关键。除了网页的加载外,即使网页已经加载,时间对用户也是重要的。例如,一个网页很快地加载,但用户无法在一分钟内理解网页的内容,他们也会像长时间等待下载网页一样沮丧。考虑一下所谓的“一分钟Web网页”的概念。所谓“一分钟Web网页”是指用户能在一分钟内获得网页的要点,并确定他们是否需要更认真地阅读内容。技巧让用户在一分钟内确定网页内容的要点和下载后的意图。

出处:蓝色理想
责任编辑:

上一页 谁是Web用户 下一页 激励问题的处理

相关文章
FLASH,你要我怎么跟你说!
Web设计里的软件工程思想
Web设计核心问题2:Web设计进程
Web设计核心问题1:什么是Web设计
作者文章
Web设计核心问题3:为用户设计
Web设计核心问题2:Web设计进程
Web设计核心问题1:什么是Web设计
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
>> 分页 首页 前页 后页 尾页 页次:3/91个记录/页 转到 页 共9个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2