【网页设计】网页交互设计建议与法则 之 可用性 易用性

人们在制造各种工具或产品时都需要首先遵循“易用性”及“可用性”等基本需求,首先你的产品使用起来要容易上手,操作简便。否则,即使再前卫时髦的概念产品都不可能形成大众化。在“网页设计”上尤其如此,这里从 smashingmagazine.com 上摘录了文章“10 Useful Usability Findings and Guidelines”中描述的十条对于网站可用及易用非常有帮助的建议。

一、表单标签(label)放于输入框(input)之上

在很多的表单中标签被放到输入框的左边形成一个两栏的布局;尽管这样看起来非常整齐漂亮,但它不是最方便容易使用的布局。因为表单通常是垂直导向的,用户从上向下浏览并填写表单。这样在标签下面放置字段比在标签右边放置字段要更容易浏览一些。

另外左右两栏的布局对于标签及输入框的宽带都也有一定局限性的,对于不等宽的标签文字居左还是居右?居左可让表单整齐并可扫描但是会导致标签和输入框之间的空隙,从而使得区分哪个标签归哪个字段就比较困难;居右则相反,它可以实现好的界面但是可扫描性弱些。

在各种情况下,标签在上面是最好的。另有研究同时发现标签最好不要加粗,尽管此条建议并不能令人完全信服……

二、用户面部及视线的跟踪

当别人进入到视野的时候,本能的会马上注意到对方的面部及表情。在网站页面我们趋向于关注人的面部和眼睛,但是我们被人们的面部和眼睛吸引只是个开始,事实证明,我们确实还会跟随图片中的人正在看的方向。

如果看到网站广告里面的眼睛在注视其他地方,我们会本能的去注意那个方向,这在现实中看到别人视线转移而跟随转移是同样的情况。

三、设计的质量及可信度

这些研究的一个有趣的结论是用户真的通过封面来判断一本书,更确切的说一个网站依赖其设计。比如布局、一致性、排版、色彩和样式之类的元素都会影响到用户对你的网站的理解以及你的项目的形象。你的网站不应该仅仅有一个良好的形象,还应该就是你的用户所需要的。

例如浏览国内的淘宝(taobao.com)拍拍(paipai.com)有啊(youa.com)肯定会有不同的感觉。其它影响可信度的因素有:网站的内容的质量、错误数、更新频率、易用以及可信赖的作者。当然代码足够强壮以及解决浏览器兼容性问题等也是很重要的指标。

四、多数人不使用滚动页面

有调查显示只有 23% 的访问者在第一次访问一个网站的时候滚动。这意味着 77% 的首访用户并不滚动;他们只是看无需滚动及未折叠的内容。而且回访时使用滚动的用户百分比也有所降低,只有 16% 的用户在他们第二次访问时滚动。这些数据强调在显著的位置放置关键的内容是多么的重要,特别是在登录页面,这不是说你应该把所有东西塞到页面的上部区域里面,只是说你应该最好的利用那一块地方。把内容填塞进去只会让内容难懂。当用户看到太多的信息,他们会不知道该从哪里开始看。这对网站主页是最重要的,大部分新访问者都会浏览首页。所以请在那里提供这些核心要素:网站名称;网站的价值主张,用户可以得到什么好处;与用户相关的主要导航。

但是,现在用户的习惯已经发生明显的改变了。最近研究证明用户对滚动相当接受,而且在某种情况下他们会期望滚动到页面的底部。很多用户喜欢滚动胜过分页,而且对很多用户来说页面的最重要的信息并不是必须放在“折叠线上面”(这是因为各种大量的可见的显示方案是无用的)所以将你的布局分割成段以方便浏览是个很不错的主意,使用一些空白分开它们吧。

这在最近的一些国外网站上有很多体现,越来越多的站点开始关注“页脚”部分的内容,国内近期上线的新浪微博(t.sina.com.cn)则使用了 AJAX 技术来载入较长的滚动页面。

五、超级链接最好使用蓝色

尽管给你的网站一个独特的设计是很棒的,但是当遇到可用性抉择的时候,跟随其他人正在做的是最好的选择。遵从多数网站的惯例,当首访用户访问一个新的网站的时候,他们寻找东西的第一个位置就是他们在其他大多数网站找到它们的地方。他们利用他们的经验来理解新内容的意思,这被称为使用习惯。人们期望某些东西保持一致,比如链接颜色、网站的 logo 的位置 tab 导航的行为等等。

你的链接应该是什么颜色?第一要义就是差异对比,链接要足够暗或者亮以和背景色相对照。其次,它要能从其他文本中凸显出来,所以不要在黑色字体上使用黑色链接。最后研究表明如果可用性是你的重点,保持蓝色(如 00F 00E 等)链接是最好的。浏览器的默认链接颜色是蓝色,所以用户比较期望它。选择一个其它颜色绝对不是问题,但是它将会影响到用户找到它的速度。

六、理想的搜索框是 27 个字符宽

搜索框的理想宽度是多少?有这回事儿吗?有调查结果显示现在的大部分搜索框太短了。搜索框太短的问题是即便你可以输入较长的问题,你也只能一次看到文本的一部分,从而使得难于检查或编辑你输入的内容。

该研究发现搜索框的平均宽度是 18 个字符,数据显示 27% 的查询太长以至于不能输入。扩展搜索框到 27 个字符能够满足 90% 的查询。请注意,你可以使用 em 设置宽度而不是像素或者 1em 正好是一个“m”字符的宽度和高度。例如在 YUI 中文本框被默认设置为 12.25em 宽度,那么就用这个单位来控制搜索的文本框为 27 个字符宽吧。

但由于中文的博大精深我们通常不需要 20 个字符。总体来说搜索框太宽比太短要好,这样用户就可以快速检查、核实并提交查询。这条准则相当简单但是不幸的是常常被无视。在输入区域里使用一些填充(padding)同样可以提高设计和用户体验。

七、空白可以增进理解

很多优秀的设计师懂得使用空白来装饰页面及结构,他们了解 空白 的价值如同阿拉伯数字 0 的意义一样。例如页面中段落、图片、按钮和其它元素之间的空白。空白通过给各元素足够的空间来“呼吸”以避免页面过于拥挤凌乱。我们也可以通过减少条目之间的空间和增加它们与页面中的其它条目之间的空间来进行分组。在页面中显示条目之间的关系和构筑元素的等级很重要。

空白同样更让内容更加清晰易读,有调查发现段落之间和左右间距可以增进理解 20% 左右。用户会发现更容易聚焦和处理使用大空白的内容。事实上,一个页面的布局(如空白、标题、缩进、插图等)可能不会明显的影响表现但是肯定会影响用户的舒适度和体验。

八、有效的测试用户并不一定要广泛

关于在可用性测试中的测试对象的研究表明仅仅测试 5 个用户就可以发现你的网站的所有问题的 85% 而 15 名用户就能发现差不多所有的问题。往往 80% 的问题就发生在 20% 的错误上,最大的问题通常是第一个或者第二个用户发现的,后续的用户会确认这些问题并发现其它的一些小问题。只有两个测试用户的话可能能发现你的网站的一半的问题。这意味着测试并不是必须要很广泛或者很昂贵以获取较好的结果。最大的收益来自于从 0 个测试用户到 1 个,所以不必担心测试用户太少:任何测试都聊胜于无。

九、信息产品页面可以助你引人注目

如果你的网站有产品页面,人们在线购物的时候将一定会看到它们。但是很多产品页面缺乏足够的信息,甚至不足以让浏览器快速浏览,这是个严肃的问题,因为产品信息有助于让人们下定购买的决心。研究显示缺乏产品信息会导致大概 8% 的可用性问题和甚至高达 10% 的用户失败,也就是说用户放弃并离开这个网站)。

为你的产品提供详细的信息,但是不要掉进用太多文字炮轰用户的陷阱。让这些信息易于理解。通过将文字分成小段并使用大量的子标题让页面可浏览,为你的产品添加大量的图片,并使用合适的语言:不要使用术语,你的用户可能不懂。

细心关注淘宝(taobao.com)有啊(youa.com)等购物网站的朋友会发现往往物品描述信息越全面、原创的商品会带来更多的关注与购买转化率。

十、大部分用户忽略广告

早期就有交互设计师声称不要把用户想的太蠢,一些大幅的 banner 及广告不能吸引足够的视线。有报告说大部分用户根本就无视广告横幅,如果他们在一个页面中寻找一个信息片段或者专心的看内容,他们是不会被旁边的广告扰乱的。

这意味着用户不仅会避开广告,而且他们还会避开一切看起来像广告的东西,即便它们跟本不是广告。一些重风格的导航条会看起来像横幅广告,所以小心使用那些元素。但是,如果广告看起来像内容,人们会浏览并点击,这或许会带来更多的广告收入但是会以你用户的信任为代价,因为他们点击他们认为真的是内容的东西。在你采取那种方式前,请先衡量一下这笔交易:短期收益与长期信任。

其他、来自于我们的一些个案研究结论

最近几年 Smashing Magazine 的编辑团队带领了一些个案研究以试图找到一些普遍的方案和实践。到目前为止,我们已经分析了网站表单、博客、排版和作品集;更多的个案研究将在下个月发布。我们发现了一些能够为你的下一个设计充当指导方针的有趣的模式。在这里,我们将回顾一下我们在那些个案研究中发现的一些实践和设计模式,简化这些概述,以使你更方便。

排版研究:

  • 行高(像素) ÷ 主体字体大小(像素) = 1.48
  • 其中 1.5 通常被推荐于传统印刷的书籍中,那么我们的研究也支持这个单凭经验的方法。只有很少的网站使用小于这个的,而且目前使用超过 1.48 的网站就像也在减少。

  • 行长度(像素) ÷ 行高(像素) = 27.8
  • 平均的行的长度是538.64 像素(不包括外边距和内边距),这是相当大的,考虑到很多网站仍然在 body 中使用是 12 至 13 像素大小的字体。

  • 段落之间的空间(像素) ÷ 行高(像素) = 0.754
  • 结果是段落空间(就是一个段落的最后一行和下一段落的第一行之间的空间) 难得的等于行间空白了(这将是完美的垂直节奏的主要特点)。更常见的是,段落间距正好是行间空白的75%。原因可能是行间空白通常都包括下行线;而因为大部分字符都没有下行线,那么多余的空白就出现在了线的下面了。

  • 每行字符数最好是 55 到 75
  • 根据传统排版图书,每行文字的最佳字符数是 55-75 但是事实上每行 75-85 个字符更流行。

    博客设计研究:

  • 布局通常采用固定宽度并且通常居中的(92%-94%)固定布局的宽度大部分在 951px – 1000px 之间(56%);
  • 首页显示 10 到 20 篇日志的摘要(62%);
  • 一个网站整体布局的 58% 用来显示主内容;
  • 表单设计研究:

  • 注册链接写为“sign up” (40%)并被放置在页面的右上角;
  • 注册表单有简单的布局,以避免分散用户的注意力(61%);
  • 输入字段的标题加粗(62%),字段垂直放置的要明显多于水平放置的(86%).
  • 设计师趋向于采用一些强制性字段和可选字段;
  • 未提供Email验证(82%),但是需要密码验证(72%);
  • “Submit”按钮即有居左的(56%)也有居右的(26%)。
  • 作品集网站研究:

  • 89%的布局水平居中,而且他们中的大部分使用巨大的水平导航菜单。
  • 47.2%的作品集网站有一个客户页面,67.2%有一些独立的服务页面。
  • 63.6%对每一个项目会有个详细的页面,包括个案研究、感言、截屏幻灯、草稿和草图等。
  • 联系页面包括努力方向、手机号码、Email地址、邮寄地址、名片以及在线表单。
  • 原文转自:smashingmagazine.com

    虽然我个人仍然对上面的第四条“多数人不使用滚动页面”持怀疑态度,至少我个人习惯通常会滚两屏的,所以我觉得作者传达的重要意义在于:尽量在第一屏放置重要的信息与资源。在网页设计与制作中,考虑到多数用户电脑的屏幕尺寸,我建议可以取约 600px 像素高度为一屏……

    【网页设计】网页交互设计建议与法则 之 可用性 易用性》有1个想法

    评论已关闭。