提高可用性的一些方法 - UCD大社区

10条有用的可用性结论和指南

神采飞扬 — 2009-10-05 04:49:48

原文：10条有用的可用性结论和指南
译自：10 Useful Usability Findings and Guidelines
版权所有，转载请注明出处，多谢！

每个人都会赞同可用性是网站的一个很重要的方面的说法。无论你是在做一个作品集网站、网上商店还是网络应用，让你的页面对用户来说可以容易和快乐的使用是一个关键。这些年，很多人在网站和界面设计的很多方面完成了很多的研究，这些结论在帮助我们提高我们的工作方面很有价值。这里是能够帮助你提高你的网站的用户体验的10条有用的可用性结论和指南。

Form标签最好放到字段的上面

UX Matters的一份研究发现表单中的标签(label)的理想位置是在字段(field)的上面。在很多的表单中，标签被放到字段的左边，以形成一个两栏的布局；尽管这样看起来不错，但它不是最容易使用的布局。为什么这样说呢？因为表单通常是垂直导向的；也就是用户从上向下填写表单，用户是向下浏览表单的。这样在标签下面放置字段比在标签右边放置字段要更容易(浏览)一些。

Tumblr 遵循UX Matter的建议，提供了一个简单而简洁的注册表单。

在左侧放置标签还会引发另一个问题：你让标签居左还是居右？居左可让表单可扫描但是会将标签和字段分离，从而使得区分哪个标签归哪个字段就比较困难。居右则相反：它可以实现好的界面但是可扫描性弱些。在各种情况下，标签在上面是最好的。该研究同时发现标签最好不要加粗，尽管此条建议并不能令人完全信服……

用户关注面部

当别人进入到视野的时候，人们本能的会立马注意到他们。在网站页面，我们趋向于关注人的面部和眼睛，这为市场人员提供了一个引起关注的很好的技术。但是我们被人们的面部和眼睛吸引只是个开始；事实证明，我们确实会将目光转向图片中的人正在看的方向。

一个正在看我们的小孩儿的图片的眼动跟踪热图，来自于UsableWorld的研究。

那么现在这个小孩正在看内容。注意人们在看向标题和文字的方向增长。

这里是一份描述这个的眼动跟踪研究。我们本能的被吸引到脸部，但是如果那张脸在看其他地方而不是我们，我们同样会看那个方向。利用这种现象来吸引你的用户的注意力到你的页面或广告中最重要的部分吧。

设计的质量是可信度的一个指标

各种研究已转向到是什么影响人们对网站的可信度的看法方向：

Stanford-Makovsy网站可信度研究2002: 调查当前什么让一个网站可信(pdf)
什么让一个网站可信？大量定量研究的报告(pdf)
计算机可信度元素(pdf)
影响网站可信度的元素：一份源自自我评定研究的早期结果(Proceedings of ACM CHI 2000 Conference on Human Factors in Computing Systems, v.2, New York: ACM Press)

我们不知道Fever app 是不是真的比较好，但是时尚的用户界面和网站给我们很好的第一印象。

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

其它影响可信度的因素有：网站的内容的质量、错误数、更新频率、易用以及可信赖的作者。

大多数用户不滚动

Jakob Nielsen关于多少用户滚动的研究(在 Prioritizing Web Usability)显示只有23%的访问者在第一次访问一个网站的时候滚动。这意味着77% 的用户并不滚动；他们只是看折叠线以上(也就是不用向下滚动而在屏幕上可见的页面区域)的内容。而且，回访时滚动的用户的百分比也有所降低，只有16%的用户在他们第二次访问时滚动。这些数据强调在显著的位置放置关键的内容是多么的重要。特别是在登录页面。

这不是说你应该把所有东西塞到页面的上部区域里面，只是说，你应该最好的利用那一块地方。把内容填塞进去只会让内容难懂；当用户看到太多的信息，他们会不知道该从哪里开始看。

Basecamp很好的利用了空间。折叠线以上(768 像素高)，它显示一个巨大的截图、标语、有价值的主张、行为召唤、客户列表、视频和使用图片展示的简短特性列表。

这对主页是最重要的，大部分新访问者都会浏览首页。所以请在那里提供这些核心要素：

网站名称；
网站的有价值的主张(比如说，用户将从使用中得到什么好处)；
与用户相关的主要部分导航。

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

想了解更多信息可以查看这些文章：将折叠展开 (Clicktale), 分页与滚动 ( 威之卡大学 – SURL), 打破折叠的神话 (盒子与箭头)。(多谢Fred Leuck).

蓝色是链接的最佳颜色

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

Google在其网站上保持所有的链接都是蓝色只有一个原因：大多数用户对这个颜色熟悉，这使得很容易定位。

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

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

搜索框的理想宽度是多少？有这回事儿吗？Jakob Nielsen做了一次关于在网站的搜索框中搜索问题的长度的调查(Prioritizing Web Usability)。结果是现在的大部分搜索框太短了。搜索框太短的问题是即便你可以输入较长的问题，你也只能一次看到文本的一部分，从而使得难于检查或编辑你输入的内容。

该研究发现搜索框的平均宽度是18个字符。数据显示27%的查询太长以至于不能输入。扩展搜索框到27个字符能够满足90%的查询。请注意，你可以使用em设置宽度，而不是像素或者pt。1em正好是一个“m”字符的宽度和高度(而无论你的网站使用多大的字号)。那么，就用这个单位来控制搜索的文本框为27个字符宽吧。

Google的搜索框足够宽来容纳长句子。

Apple的搜索框有些短，会切断查询内容：“Microsoft Office 2008.”

总体来说，搜索框太宽比太短要好，这样用户就可以快速检查、核实并提交查询。这条准则相当简单，但是不幸的是常常被无视。在输入区域里使用一些内边距(padding)同样可以提高设计和用户体验。

空白可以增进理解

很多设计师都知道空白的价值，也就是页面中段落、图片、按钮和其它元素之间的空白。空白通过给各元素足够的空间来“呼吸”以避免页面过于拥挤凌乱。我们也可以通过减少条目之间的空间和增加它们与页面中的其它条目之间的空间来进行分组。在页面中显示条目之间的关系(比如，在这个条目集那里显示这个按钮)和构筑元素的等级很重要。

注意Netsetter网站上的大大的内容margin、padding和段落空间。所有的这些空间让内容更容易和舒适的阅读。

空白同样让内容更加清晰易读。一份研究(Lin, 2004)发现段落之间和左右间距可以增进理解20%左右。用户会发现更容易聚焦和处理使用大空白的内容。

事实上，根据Chaperro、Shaikh和Baker的研究，一个页面的布局(包括空白、标题、缩进和插图)可能不会明显的影响表现但是肯定会影响用户的舒适度和体验。

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

Jakob Nielsen关于在可用性测试中的测试对象的理想数字的研究表明仅仅测试5个用户就可以发现你的网站的所有问题的85%，而15名用户就能发现差不多所有的问题。

来源: Jakob Nielsen’s AlertBox

最大的问题通常是第一个或者第二个用户发现的，后续的用户会确认这些问题并发现其它的一些小问题。只有两个测试用户的话可能能发现你的网站的一半的问题。这意味着测试并不是必须要很广泛或者很昂贵以获取较好的结果。最大的收益来自于从0个测试用户到1个，所以不必担心测试用户太少：任何测试都聊胜于无。

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

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

Apple为其产品提供独立的“技术特性”页面，这可以将复杂的详情页面独立于简单的产品销售页面，然后在他们(用户)需要的时候提供一个方便的入口。

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

大部分用户无视广告

Jakob Nielsen在其AlertBox entry中报告说大部分用户根本就无视广告横幅。如果他们在一个页面中寻找一个信息片段或者专心的看内容，他们是不会被旁边的广告扰乱的。

这意味着用户不仅会避开广告，而且他们还会避开一切看起来像广告的东西，即便它们跟本不是广告。一些重风格的导航条会看起来像横幅广告，所以小心使用那些元素。

FlashDen左侧的方形横幅确实不是广告：它们只是内容链接，但是它们的确看起来和广告条很像，以至于会被一些用户无视。

也就是说，如果广告看起来像内容，人们会浏览并点击。这会带来更多的广告收入但是会以你的用户的信任为代价，因为他们点击他们认为真的是内容的东西。在你采取那种方式前，请先衡量一下这笔交易：短期收益与长期信任。

号外：来自于我们的个案研究的结论

最近几年，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地址、邮寄地址、名片以及在线表单。

其它资源(英文)

对我们所讲的有什么想法吗？或者了解其它的有用的可用性结论？请在下面留言给我们，多谢！

关于作者

Dmitry Fadeyev Usability Post 博客的创建者，在那里你可以读到他关于良好设计和可用性的观点。Follow Dmitry on Twitter @usabilitypost

10个提高可用性的救命方法

mocha — 2008-12-16 21:54:41

Article copyright by Ashley Towers
Ashley Towers版权所有
原作者： Ashley Towers；译者：UCD翻译小组，mocha
原文地址：http://usabilityfriction.com/2008/11/05/10-ways-to-improve-usability-when-you-thought-it-was-too-late/

你工作数月并向客户交付了产品。最初的反馈还不错，但是当他们研究了几日后，却又提出要求：“你能再让这个设计对用户更友好一些吗？”天哪！这时候再重组结构有些为时已晚。但当然，你肯定可以做点什么！这篇文章就给你提供10个提高可用性的方法，在你觉得为时已晚的时候可以派上用场。

80/20法则 (The 80/20 Rule)

80/20法则众所周知并被广泛应用——在这个例子中则是这样的：

80%的时间花在了20%的功能特性上
80%的错误是由20%的交互活动引起的

所以，你要做的第一件事就是找出用户最关心或者最可能引发问题的那20%的特性。有很多种方法：直接问用户（我知道这很疯狂！）、观察他们使用产品的过程、或者你可以把日志功能加到应用程序中（这也许是最可信的方法——用户认为他们想要的往往和他们真正想要的相去甚远）。

当你找到这些特性，就可以专注于改善它们了：

如果这些特性使用频率很高，试试看如何让它们更容易被用到。比如使它们的图标更醒目、添加快捷键等。
如果一个用户在某处被卡住了，试着确定一下原因；这里是不是有晦涩的术语？下一步的提醒是不是太过模糊？

把注意力集中在20%的特性和问题上，整体上可被感知的可用性会极大的提高，因为你把注意力放在了最重要的地方。

Open Office工具条显示了最常用的命令，可以方便快捷地使用对应的功能

增加可用性效果的美感 (Aesthetic Usability Effect)

让你的应用程序漂亮一些。当你的用户要求提高可用性时，也许他们背地里叫喊的是让它不要那么丑！

有一个很著名的现象，吸引人的应用或产品被认为比丑陋的那些更好用也更友好。所以可以向设计师寻求帮助，整理下CSS，你会惊讶的发现你的应用程序变得更加友好了——让它更漂亮些吧！

加入限制 (Constraints)

加入一些限制，阻止他们以你不推荐的方式使用应用程序，确保他们只输入有效的数据。这可以减少错误而且使交互更直观。有很多种方法：

如果数据库的某一列仅允许输入有限的字母——阻止用户超过限制。阻止他们犯错比直接扔出一句“错误”好得多，更糟糕的做法是截短用户的数据。
如果某字段仅接受数字，最开始就不要让它接受字母！不要等到验证输入时再告诉用户他们做错了！
如果让用户输入一个被分隔的字段（比如MAC地址、序列号或者信用卡号），不要让用户去猜在哪里输空格、冒号或者连字符等等——每一部分分配一个字段，并在之间加入不可编辑的分隔符。

Windows XP产品序列号的对话框解除了是否需要输入破折号的疑问

你不应让用户输入“1”、“0”或者“真”、“假”来表示布尔值；你应该使用复选框！所以，使用其它控件如滑动条或者拨号盘来输入数据，使用户无法输入无效的值。
如果某一空间当前不可使用，把它变灰或者直接移除。不要让用户点他们不能点的按钮。

遵守CRAP准则 (Make it CRAP)

这其实包括4件事情，但将它们的首字母缩写词作为10个方法里面的一条。CRAP是图形设计领域的四个准则的首字母缩写词：对比、重复、对齐和近似。我写了一篇深入研究CARP以提高用户体验的文章：《如何让你的用户界面符合CRAP》。这些原则应用起来很简单，并且不费什么力气就可以带来巨大的改变。

减轻用户负担 (Lighten the load)

处理大量信息增加了用户的认知负担，并且也使你的应用程序难以使用。认知负担是完成某一任务时大脑活动的总和，包括记忆、感知、思考/理解等等。你可以减轻用户负担而使应用程序更加友好，步骤如下：

尽可能少问问题。过长的表格，问过多的问题都会吓到用户。用户对于填表的态度是能不填就不填。在用户可以将来再填详细信息的地方，让用户填尽可能少的内容以帮助他们继续下去。

在Base Camp上创建一个新项目。仅需填名称和参与人员两条。其他都可以以后再填。

当你需要很多信息并且不可以放到将来再填时，把表格切分成几页，然后让用户一页一页来。确保向用户标示出了进度，让他们知道已经完成了多少。
删除不必要的信息。显示的每一处信息都是有助于理解，而不是让整个界面凌乱不堪。如果没有相关或者附加价值那就删除它。
如果可以的话，在某一字段的附近增加必要的解释，这样用户不用思考它的含义了。当处理技术术语和首字母缩略词时这一点尤为重要——如果用户以前没听说过这些词，必要的解释可以降低用户的挫折感！上面Base Camp的截图就是个好例子，它给“Name the Project”的意思加了解释。

使用更少的文字 (Use less words)

用户很少看文字，少到让你惊讶的程度。你的应用程序并不算新鲜事——如果它有很多描述性文档，用户是不会阅读的，而且大量的文档会吓到用户并让他们觉得你的应用程序非常复杂，难以使用。大部人只会点击“确定”或“下一步”，并期待得到最好的结果。如果这样做错了他们会感到很愤怒。

如果你需要鼓励用户；那就使用积极的词语。不需要太礼貌，那样不够精炼。比如不要给某字段加这样的标签“请输入您的全名：”，直接写“全名：”。用户不需要这么礼貌的语气来告诉他们输入，没有这个必要——用户不会理那些花哨的描述，即便他们可以——你的标签是不是已经阻止他们填这一项了？如果有太多内容根本读不过来，那就存在重要信息被忽略的风险。

折线之上 (Above the fold)

“折线”(fold)是报纸版面设计的术语。按字面理解是指报纸被对半折起来的折痕。折叠之上的信息更加醒目，因为人们不用展开报纸就能浏览。这个术语在界面设计领域也有相同的意思，是指不需要移动浏览器的滚动条就可以显示出来的区域底部。

考虑重新布置页面，让用户不需滚动鼠标就能看到最重要的信息。如果干脆去除滚动条是不是更好？
一些应用程序把出现的错误统一显示在页面最底端。从用户的角度考虑，他们点了“提交”，但是同样的页面又显示出来。当他们想到把页面滚动到最底端之前，他们已经觉得你的产品有问题而不是他们的操作有问题。所以，把错误信息放在页面靠上方的位置（更理想的是，放在错误出现的附近，但确保页面滚动到那一位置，这样才能被看到）。

排序与分组 (Sorting and Grouping)

组织信息的方式极大程度地影响着可用性。分组的应用范围很广——从你的菜单项目顺序到你提供的工具列表。

5 Hat Racks原理描述了5种组织信息的方法：

按字母顺序排列：简单的按字母顺序排列。当信息不能以更有意义的方式组织或者用户需要迅速找到某一信息时，这种方法很有效。可定制排序的菜单经常包括这一排序方式。
按位置排列：根据信息的物理位置排序。如果你的信息和真实世界关联，那可以采用这种方法，用图来显示它的物理背景信息。
按时间排列：以时间顺序排列。当你的信息与日期或时间关联时，就要采用这种排序方式，确保用户可以以时间顺序浏览信息。
按类别排列：根据信息之间的共同属性把它们分类。分类标准可能是包括“它们是什么”（比如是书籍、DVD等等）、“用途”（比如感冒药、洗发护发产品等）、“颜色”、“气味”等等。分类法非常适用于从用户角度分组的菜单，比如把财务信息分成预算、订单、发票几类。
按连续性排列：把信息排列成连续的一系列。顺序可能是从好到坏、从高到低、从流行到不流行等等。如果有衡量的标准，就提供这种分类方式。

看看你是如何展现列表和菜单的，想想信息的作用和用户会通过什么方式找到它。用户获取信息的方式会随着他们当时想做什么而改变。如果你的应用可以根据用户当前的目标而改变信息组织方式，那将会获得用户的高度评价。

包容 (Forgiveness)

提高应用程序用户友好程度的一个好方法就是使它更加包容。包容是指提供多种途径，以减少用户犯错的机率，或者在用户犯错时降低其不良影响。

撤销：当用户不喜欢某一操作所带来的影响时，允许用户改变主意。在开发的后期，这也许很难进行改造，但它确实是使你的应用程序更加包容的最佳方法中的一种。

当你在Gmail里删除一封邮件时它并不会让你确认，但它会让你可以轻松改变主意。

确认：把操作变为两步，提示用户对他们请求的操作进行确认。确认这一操作如果被用得太多，会让界面失调，让用户厌烦。如果操作很容易被撤消，那么你并不需要确认这一步（例如Windows XP中的“你确定要删除该文件吗？”对话框并无必要，因为文件可以轻松地从回收站里找回）。你不需要那些只包含“确定/取消”按钮的对话框来增加确认这一步操作，这只会成为类似于“预备/射击”这种感觉的额外操作。我写过一篇文章，论述Gmail对确认操作的创造性用法，原谅用户，哪怕他喝醉了！
警告：显示警告以提示用户操作的影响。这是最没有侵入性的提高包容程度的措施，你可以在页面环境中增加信息以解释当前被选中的选项。

Feedburner在确认按钮附近显示警告以警示你操作的影响而不打断你的操作过程

帮助：最后，你可以把帮助和说明放入你的应用程序以增加其包容程度！在你发现设计中一个不可逆转的错误，需要解释程序如何运转，以及这跟它应有的样子有何区别时，这个方法尤其重要！至少在你解决问题之前！

空状态 (The Empty State)

这是被许多软件忽略的一点，却是改善你的应用程序的一种真正简单的方法。当你测试或展示你的应用程序时，它充满了测试数据。然而，当一个新客户第一次使用的时候，它是空的！你知道那块缺失的区域会填入一些信息，底部的大列表会包含不确定信息(doobery) ，以解释这是什么，但你的用户不知道！如果用户不知道一个东西是什么或者应该是什么，他们就会疑惑。你可以通过以下方法帮助他们：

不要在没有数据的情况下什么都不显示，使用一些用来占位的东西，如“没有可显示的不确定信息(doobery)”。
如果这是用户第一次来，告诉他们这个区域将要显示的内容的特征。

Basecamp显示的最后的空状态。它是空的，但包含了很多信息，所以你确切地知道下面会有什么！

使用示例数据给用户提供一个预先填好的选项。如果数据准确且对用户有意义，那么这还真是一个好方法。它可以让用户看到一些实际使用中的具体数据。不过，当用户对程序有一些感觉之后，要确保用户可以轻松地除去这些测试数据，当他们一条一条地手工删除可不会让他们对你产生任何好感！

结论 (Conclusion)

如果可用性在整个开发过程中都被充分考虑，那么产品只会越来越好。然而，总会有其它一些压力，而且当你发现自己遇到上述种种情形，知道这些压力并不能为你帮上什么忙。我们希望，这些技巧可以让你在觉得提高可用性为时已晚的时候，为你提供一些进行简单调整和重组以改善程序可用性！

你曾经遇到过这些情形吗？你如何改善你的应用程序的可用性呢？

可用性的价值

douis — 2009-02-02 14:14:43

通常可用性的需求是很真切的。顾客和公司都知道如果产品更容易使用就会销售的更多而维护的更少。一年前还有人不肯承认可用性的重要性，但是随着越来越多的用户抱怨产品友好性不佳以及实施人员相对比例和绝对数量的居高不下，都已经不再让可用性重要与否还能成为一个讨论话题。可用性专家保证软件是实用、可用的。但是可用性工作首先关注用户体验和表现。这些元素可以依据用户指标进行测量和量化：

速度
精确度
培训需求（或自学）
满意度
安全性

通过应用可用性工程方法，你可以打造实用、有用、可用和令人满意的应用程序。

在Dilbert漫画中，Scott Adam让Dilbert给他的老板出了个难题：要么花费上百万美元来修复界面，要么闭上眼睛祷告用户不会介意。最终老板闭上了眼睛，诚恳祷告，省下了那笔钱。

可用性确实需要投资。它需要用钱提供雇员、培训、规范、工具和用户为中心的过程。它需要时间来建立部门。也许还需要雇佣顾问和新的成员。

花费这些钱和事件值得吗？通常有用的网站销售额大大多于不可用的网站。网站访问量、生产率和功能的使用高了两倍以上。不幸的是，通常也会看到开发人员开发了程序，用户拒绝使用，因为欠缺可用性。毫无疑问，可用性工作是对于这些耗资百万的灾难的最好保险。

如果你使用一个用户为中心的设计进程，你可以期待花费项目预算的大约10％在可用性工作上。这已经包括了所有内容－从过往的评估和竞争性设计到收集用户数据到设计结构、规范和详细的界面。还包括可用性测试。

有很多工作要做，10％是预算的一大块。但是好消息是所有的用来开发令人接受的网站或程序的投资和时间通常不会再增加。实事上，有很多原因导致这个花费还会下降，后面将讨论到。

缩减设计周期

今天，还有很多项目需要返工，因为程序满足不了用户需求或用户无法理解。实施良好的可用性将大幅降低重复设计的几率。推翻用户界面的成本是很恐怖的。如果设计细节必须改进，其花费也是不菲的。但是与创建新的界面结构相比较，词语、布局、控件的选择、颜色和图形相对比较节约。

当人们使用网站、WEB应用程序、软件、相机或远程控制时，产品的与人产生交互的部分就是界面。界面也就是最受到可用性关注的部分。界面结构决定了界面设计－它定义了用户用来寻找信息或执行任务的路径和导航手段。如果可用性工程没有在界面设计开始阶段应用，界面结构就将是产生可用性问题的地方。既然界面的80％的可用性是来自其结构的功能的，那么重构通常变成整个表现层的重新开发。这就是为什么最好的解决方案是第一时间开始设计界面。

避免开发不必要的功能

通常，用户依据性能列表来评价软件，公司就要被强迫加入功能加强竞争。但是，公司常常发现有些特定的功能是用户不需要的。尽早发现这些－在产品全面设计或编码前－将使用户界面更好，因为需要处理的功能更少，界面也就能更简洁。同时也会在开发和维护方面节约大笔资金。不必要的功能不需要设计、编码、测试和维护。

加速决策过程

有大量研究指出如何设计最佳界面。比如，众所周知，全部大写字母降低阅读速度大约14％－20％，连续一排三个名字将使人迷惑，用户希望在网页的左上角找到主页按钮。这些意味着开发团队不需要花费时间揣测这些设计决策。熟悉这些内容和其他的可用性研究原则将节省开发和测试的时间，并帮助打造更可用的产品。

提升销售

如果你开发用于销售的产品，一个可用的产品将卖的更好。如果你开发网站来卖产品或服务，一个可用的网站将售出更多。可用产品意味着更多的销售。比如，一个保险公司有一个网站，每天向保险员提供10条线索。公司本可能每天提供15条，但是网站有些可用性的问题，使公司每天损失5条。这是因为访问者无法知晓如何联系业务员或顺利的使用”保险向导程序”而放弃了。如果可用性是公司的既定路线，并且哪些可用性问题被修补或避免，公司将提升多少销售额？答案不能简单确定。

公司每天因为可用性问题损失至少5个线索，那么一年1825个。

假设公司每收到5个线索，就获得1个客户。那么公司每年损失365个顾客。

每个顾客为公司每年提供平均600元的收入。那么公司第一年本可提高219,000元的收入。

每个顾客平均保有12年，修正可用性错误带来12年里2,628,000元的销售。

避免从头开始

良好的可用性工程，类似所有其他的工程过程，意味着使用可重用的模板进行设计。没有必要重复设计菜单、表单、向导等等。这将节省设计时间。同时，因为很容易围绕模板创建可重用的代码，也节省了开发和测试时间。

避免灾难

用户是高度适应性的。即使界面设计的很糟糕，有些用户也有足够的热情去尝试使用。有时他们甚至去使用极端复杂和笨拙的程序。但是有些设计是彻底拒绝式的。使用产品的人可能拒绝忍耐，回头延续他们完成任务的老办法，买别的东西或干脆放弃。这些就是可用性产品灾难。最好第一时间了解。

对于所有这些原因，你应花费在可用性工作上的10％的预算是很容易省下来的，除了改进最终设计。即使加上从可重用模板上、可用性工作成本上节约的部分。但是，专业化可用性的决策需要不仅仅是一个简单的成本计算。公司－特别是公司主管－需要更深入的理解部署可用性方法将如何改变商业模式。

Web设计中9个常见的可用性错误(译)

iamsure — 2009-02-20 08:31:33

原文作者： Dmitry Fadeyev

原文链接：http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/

现在，比较牛的设计师和开发者都认识到了可用性在他们工作中的重要性。可用性好的网站会极大地提高用户体验，并且好的用户体验会让用户更加快乐。用聪明的设计决策取悦并满足您的访客，而不是阻挠和激怒他们。下面是9个网站经常面临的可用性问题 ，以及对于这些问题的推荐解决方案。您可能还对下面的文章感兴趣：

1. 太小的链接点击区域

设置超文本链接的目的是被点击，确保它们很容易点击才有意义。下面的示例中的链接实在是太小了;点击它们的难度太高。这些是评论中的链接，Hacker News 是一个社会新闻的网站。（点击区域用红色突出显示）：

下面例子中包含相同的界面元素，链接的评论，但是这个例子中有一个很大的可点击区域：

Newspondcomments link.

为什么我们需要一个更大的点击区域？很简单。因为我们移动鼠标并不是很准确。 一个大号的点击区域使鼠标光标悬停在链接上更容易。如何能有一个大号的点击区域呢？我们可以使整个链接更大，或者使用CSS “padding”属性增加链接周围的空间。代码如下：

<a href="http://www.examplesite.com"style="padding: 5px;">Example Site<a>

为了使例子简单点，这个CSS样式直接写在代码里了，但在现实生活中您可能是在您的CSS文件中添加一个样式，给这个链接一个class或者是一个id，然后指向它。

在37signals上，你可以阅读到更多关于填充链接以更适用于鼠标点击的文章，的文章棉衣链接的目标。文章认为，填充为用户提供了 “舒适的感觉。真的非常容易点击链接。感觉链接就像是在配合你工作不是和你对着干你。 ”

2. 错误使用的分页

分页指把内容分为几页。如果需要显示一个很长的内容列表，这是网站上常用的方式；例如，商店中的产品或是相册中的照片。因为这种目的使用分页是有意义的，因为太多的项目显示在一个页面上将会使网页下载和处理速度变慢。

FeedMyApp以正确的方式使用分页：把其海量的应用服务列表以合适的量显示。

但是现在还有人用另一种方式在Web上使用分页。 .内容网页上，比如博客的一篇文章，有时也会分成若干页。为什么这样做？有什么好处么？不太可能是文章实在太长了，因此需要分页; 在大多数情况下，这样做是用来提高页面浏览量的。因为很多博客和杂志通过广告获得收入，获得更多的页面浏览量（即单独网页的加载数量）来提高他们的浏览统计数据，使他们能够在每个广告上获利更多。

Wired 上的文章《Google的Logo》分为8页，非常难以阅读。

虽然这可能看起来像是一种简单的方法，让您可以从广告中挤压出更多的钱，但它也带来了两个主要的问题。

首先，这样做真的，真的非常讨厌。阅读一篇文章不得不加载好几页一点也不好玩。您给您的访客设置了一个完全没有必要的障碍。

第二个原因是SEO（搜索引擎优化）。搜索引擎使用您网页上的内容理解它是关于什么的，然后相应地进行索引。如果内容分成若干页，内容就被稀释了，每个页面更难理解并且其中和主题相关的关键字也更少了。这可能会对文章在搜索引擎中的排名产生不利影响。

3. 重复的网页标题

每个网页上的标题都是非常重要的。网页标题就是HTML代码区段中我们写在

Google搜索结果中这个页面的样子：

4. 内容难以扫描

为了确保您的网站易用性，您不仅需要有一个好的设计，你还需要良好的Copy（文案）。 Copy（文案）是一个术语，用来描述网站上所有的文本内容。是的，好的设计能引导您的访客浏览您的网站，将其注意力集中在重要的事情上，帮助他们理解信息块，但访客仍然需要阅读文字来处理信息。这意味着Copy是你整体网站设计中的一个重要组成部分。

在你能写出一份好的文案之前，你需要了解人们实际上如何浏览你的网站。不要以为你的访客会从头到尾阅读所有的文字。那样当然很好，但是不幸的是，根本事实不是这样滴。人们被Web上的信息狂轰乱炸，而且我们中的大部分人在尽力去消化那些信息。这就导致非常疯狂的浏览行为：我们从一块内容跳跃到另一块，从一个网站网站跳到下一个。人们往往不能从头到尾阅读一个网站；他们从最先吸引他们注意力的那一块内容开始，然后移动到下一个捕获他们兴趣的地方。这个模式看起来有点像这样：

The Basecamp 的到达页面。

红圈表示访客目光聚焦的区域，数字表示他们看那些元素的顺序。用户的视线在页面上的兴趣点之间跳跃，想要充分利用这种混乱的浏览模式，你需要用一种特定的方法组织你的文案。下面是几个重点：

设置几个“关注点”（Points of focus）。这些部分吸引访客的注意力，你可以用粗体，高对比度的颜色和较大的字体来实现这个目的。你也可以使用图片，例如图标，把图标放在文字旁边，给这区域带来更多的视觉吸引力。
每个“关注点”应该伴随一个描述性的标题。在进一步阅读文案之前，访客可以了解到一点内容概要。不要做“标题党”，标题应该简单明了。人们希望迅速获得信息，藏着掖着只会惹恼他们。
任何文字都应该简短并容易消化。只提供要点，把其余的都删去。在大多数情况下，文案撰写者想补充说明观点的文字只是增加了网站的负载。人们将只阅读小块小块的文字，并且忽视大段的文章。把你的文案删减到不能再减的地步吧。

“为什么你应该使用的 OpenOffice;;; ”网页肯定可以改进。除了顶部的大横幅之外没有设置明确“关注点”；并且，文案聚在一起成了一个大疙瘩，阅读起来相当困难。

Things 软件的功能页，每个功能都是一小段文字，包含一个自己的图标和标题。这使得这个列表非常容易被扫描。为了使文案给人印象更深，列出实际的好处，而不是功能的名字。

5.没有办法取得联系

如果你想建立一个成功的社区，用户参与是非常重要的，并且如果你想建立一个成功的网站或是社会网络软件，社区是非常重要的。此外，如果你想拥有忠实的用户，用户参与同样很重要。迅速回答用户提出的疑问，修复他们遇到的问题并不仅仅意味着你有很好的客户服务——这意味这你在乎他们，并且你的用户和访客会很欣赏这一点。

但是很多网站依旧没有给访客一个方便渠道和公司取得联系。一些网站甚至没有Email地址或是联系方式。

当你点击可口可乐Coca-Cola网站上的“联系我们”链接。显示出来的页面，没有电子邮件，没有电话号码。大部分的链接指向“常见问题”；反馈表需要您的地址和年龄，还有500个字符的限制；“提交一个想法”的表单有两页那么长，还包含一大堆条款。看来可口可乐真的不想你与他们联系。

当然，把你的Email地址放到网站上可能会吸引大量的垃圾邮件，这里有几个解决办法。

Enkoder 是我最喜欢的把Email放到Web上的解决方案。Enkoder是一个软件，有两个版本，一个是基于Mac平台的，一个是免费的网络应用。它可以加密你提交的任何Email地址，生成一串乱七八糟的JavaScript代码，你可以把它放在你的页面上。当网页加载这段代码的时候，你的电子邮件地址就会奇迹般地出现，还是一个可点击的链接。抓取EMail地址的爬虫机器人不能读取你的地址，起码计划是这样的。

你还可以用“联系表单”（contact forms）来避免在网页上显示你的EMail的问题，但是你仍旧会收到一些垃圾邮件，除非你使用一个有效的Captchas，或是其他垃圾邮件保护机制。请记住，像Captchas这样的东西是用户交互的障碍，并且可能会降低用户体验。

论坛救援。在线论坛是一个很好的沟通渠道，是一个不错的和用户联系替代方案。一个公开的论坛比一个简单的“联系表单”或Email更好，因为你的用户在论坛上可以相互帮助。即使你不亲自回应用户，其他的用户可能帮助那个人，解决他的问题。

GetSatisfaction 是一个Web应用程序，它就像一个论坛，用户可以在板块里张贴自己的问题和反馈，用户或是团队成员都可以回复。用户可以添加评论阐述自己的问题。无论你选择GetSatisfaction的托管解决方案或是运行你自己的留言板，这样双向的沟通渠道是一个与用户保持联系的优秀方法。

The GetSatisfaction forum for Apple.

6. 没有办法搜索

大部分人到达一个页面会立即开始寻找搜索框。也许他们知道自己在寻找什么，并且不想花时间学习这个网站的导航结构。Jakob Nielsen 管这些人叫“搜索优势用户”。

我们的可用性研究显示，超过一半的用户是“搜索优势”的，大约五分之一的用户是“链接优势”的，其余则呈现出混合行为。“搜索优势”用户通常进入一个网站时直奔搜索按钮，他们对在网站上逛逛没有兴趣；他们是“任务中心”的，而且想要尽可能快地找到明确的信息。 Jakob Nielsen

无论您运营的是在线商店还是Blog，你都需要搜索框。人们会来寻找一个特定的产品，或是一篇他们记得的文章，他们想要用一个快速搜索找到它。好消息是，如果你还没有在你的网站上设置搜索，这件事其实很简单。

你不必自己写一个搜索功能，Google和Yahoo这些搜索引擎已经索引了你网站的大部分页面（如果不是全部的话），因此，所有你需要做的就是选择一个，然后把搜索框嵌入到你的网站里。

下面是Yahoo的:

为了让它运转起来，你需要做的只是把“hidden”字段的值改成你网站的域名。这将把Google或是Yahoo的搜索查询范围限制在你的网站内部。你可能还想要修改下提交按钮上的文字，说些你想说的……

7. 太多的功能需要注册

你的网站可能有些内容或者功能要求访客注册才能使用。这很好，但是小心有多少内容被藏在了注册流程后面。深度交互的Web应用，例如EMail，文档编辑和项目管理，其100%的功能都只有注册用户才能使用。其他网站，例如社会化新闻网站，不要这么做。我可以浏览Digg和Reddit上所有的故事而不用登录；用户没必要显示出自己的身份才能享受这些功能。

当你实现一个登录限制的时候，小心不要把那些不需要用户身份认证的功能也锁起来。一些Blog需要人们注册之后才能发布评论。当然这将大大减少垃圾邮件，但也同时大大减低了评论数。

你在网站上设置的限制会影响用户的参与行为，消除那些限制，比如注册什么的，几乎肯定会增加用户的参与程度。事实上，一旦用户开始使用你的网站，他们将更可能注册账号，因为他们其实已经参与进来了。

The GetSatisfaction;;; 的交互界面允许你填入你关于一家公司或是一个产品的评论，然后点击“发布”按钮。之后你看到的却不是你发布的评论信息，而是一个“登录或是注册”的提示。这很扯，用户可能已经被打击到了……

Pixlr是一个在线图片编辑应用，这是Pixlr的到达页面，上面有一个链接名为“Jump in n' get Started!”，点击后会打开应用。没有试用，没有注册；你现在就可以开始试用这个应用了。

Posterous，一个博客托管网络，使用甚至不要求注册。只是发送一封包含你的文章的Email，你的Blog就创建好了。

8. 老的永久链接指向“不存在”

永久链接（Permalink）指一个链接固定指向一个页面，不会被改变；例如，指向一篇博客文章的链接，就像你现在正在读的。问题出现了，当网站转移到另外一个域，或者结构重组了。那些指向现有页面的老永久链接可能就断掉了，除非你做了点什么。有种东西叫做301重定向。 301重定向是存在你服务其上的几个指令，它可以把访客重定向到恰当的页面素以，如果谁用老链接访问你的网站，他们将不会看到一个404错误页：301重定向会把他们转向正确的地方，只要你设置正确。数字“301”制定重定向的类型：permanent。

Frye / Wiles 404 error.

有各种不同的办法做301重定向。他们是如何实现部分取决于你使用的Web服务器。这里介绍一下301重定向的基本操作，基于目前最流行的Web服务器，Apache。

下面的代码应该在一个名为“.htaccess”的文件里，这个文件应该在你网站的根目录下。是的，文件以一个英文逗号开始。这意味这是一个系统文件，标准文件浏览器会默认隐藏这种文件。因此，如果你不能用你的文件浏览器或者FTP客户端看到它，去把你的“Display invisble files”选项勾选上。用你的编辑器创建或者（如果文件已经在那里了）编辑这个文件。每当访客到达你的网站上，这个文件中的重定向规则将会被应用。

下面是些简单的301重定向代码：

RewriteEngine on
Redirect 301 /oldpage.html /newpage.html

这些代码相当简单明了。如果谁想试着进入 “yoursite.com/oldpage.html,” ，他们会立刻被重定向到“yoursite.com/newpage.html.” 。顶部的“RewriteEngine on”是设置mod_rewrite引擎为开启状态（默认是关闭的）。这就是处理重定向的引擎。

9. 老长老长的注册表单

注册表单是一砣障碍物。因为填写表单很费劲，并且很无聊。人们不得不投入时间和精力去注册，之后还得投入更多的时间和精力去记住他们的用户名和密码！

我们可以降低这种阻碍，通过尽可能缩短注册表单。考虑到所有情况，注册系统的目的仅仅是能够识别每一个用户，所以，伟义的要求就是一个独特的标识（如用户名或是Email地址），还有一个密码。如果你不需要更多信息，就不要问了。让表单尽可能短。

ReadOz的注册表单可长了。仔细研究下，我们发现，一半以上的字段都是可选的。如果这些是可选的，也就是并不真正需要的。这种形式可能会让用户看一眼就跑了。只显示那些人们注册时必需填写的，其余的可以以后再说。

Tumblr(已经被墙了)有一个最短的注册表单。只有三块，电子邮件，密码，你新Blog的地址。

Basecamp 的注册页用了一个聪明的伎俩。页面上除了去首页的链接没有其他任何网页导航。这样可以使用户集中在注册过程中，不会受到任何干扰离开页面。

少过脑子

可用性就是使工具更加容易使用。少让用户过脑子，少让用户受挫折。一个网站应该完成所有的工作，呈现给访客的只是那些他们寻找的东西。可用性还包括人们使用你的网站时的体验，因此，关注细节，在实现页面的呈现和感觉的时候。

好的，如果你有些对这篇文章的想法，或是遇到了任何其他的可用性问题，写在下面的回复部分告诉我吧～

关于作者

Dmitry Fadeyev 是 Usability Post blog的创始人, 您可以在那里阅读他关于好设计和可用性的想法。在Twitter上Follow Dmitry： @usabilitypost.

关于译者

iamsure 是一个搞产品设计的人，他的blog是 iamsure.org, 他会在那里有的没的说点什么。同样可以在Twitter上Follow iamsure： @moresure.

(al)

相关话题：提高可用性的一些方法源地址：http://iamsure.org/archives/86

Apple vs. Microsoft——网站可用性研究

indigo90 — 2009-06-02 06:08:00

原文作者：Dmitry Fadeyev
原文链接：Apple vs. Microsoft - A Website Usability Study
译者：indigo90

【中文原文】http://ineu.org.cn/blog/index.php/archives/430

今天我们要对两家大公司——苹果和微软——的网站做一个比较。

这两大巨头都对生产尖端产品以及引领软硬件的发展感到自豪，但他们的网站又怎么样呢？如何做出比较？更重要的是，哪一个网站更好，更实用呢？

在本文中，我们将从网站可用性的角度，对这两家公司的网站做一个严密的剖析。

在这一比较开始前，我们应当注意到，这两家公司的业务是围绕着不同的市场展开的。

微软的利润基本上来自于企业用户，其中包括向计算机制造商销售操作系统许可和向企业销售办公软件。这并不是说他们不卖东西给个人用户——他们卖，他们一样拥有针对于个人用户的产品线，比如 X-Box，当然个人用户也会购买 Windows 和 Office。微软的客户目标是每一个人，从家用电脑用户到开发者及企业用户，这从侧面又补充了他们的网站的目的：试图服务每个人。

另一方面，苹果的业务基本针对个人用户，它的大部分利润来源于销售硬件，比如 iPod 和 Mac。这使得苹果的目标更加明确：推销，销售并提供售后服务。他们不必为卖给制造商许可而操心，因为他们是唯一的制造商，因此，他们的网站的主要目的就是宣传产品，扩展产品线，并通过在线商店销售产品。

1.首页

首页是网站中的第一页，最重要的页面之一，在多数情况下，主页是唯一打动访问者，并使他们继续浏览下去的理由。你有几秒钟的时间说服访问者你的网站对他们有足够的价值，否则的话，他们就会走开。

苹果公司的一贯做法是，通过主页告诉大家，网站还在正常运行着。他们把主页当做是一个广告板，总是展示一个他们最新产品的大幅广告，下面附带着三个当前同等重要的产品或新闻。如果对这四个条目都不感兴趣，可以点击上方的大型导航条，它被分成几部分来代表苹果公司的核心产品：Mac，iPod 和 iPhone，其下拉菜单中还有更多的链接，比如在线商店和售后支持。除此之外，还有个搜索栏。

有趣的是，这幅主体广告相当巨大，几乎覆盖了整个页面。如果它不能吸引你的注意力，那意味着整个网站的失败。幸运的是，苹果通过良好的产品营销知道如何抓住用户的吸引力，所以，他们没什么好怕的。

另一个需要注意的是，其网站简单的内容。你不会被侧边栏，通知或是额外的导航项目而打扰——在页面上只有很少的东西，吸引你的注意力，使人轻而易举地找到下一步的去向。

微软对自己的首页有着不同的诠释。首先，他们在顶部放置了一个风格相似的广告，目的是抓住人们的目光。这三幅巨大的图片广告——能够通过鼠标的滑过来轮流展示，很吸引人的眼球，但这可能会削弱其他两个广告的效应。在页面顶端的，是搜索栏和导航条。

在主广告下面的内容就更有趣了，正如我先前所提到的，微软的商业运作涵盖了从企业用户到个人用户的方方面面。这块区域展示着微软不同商业领域的新闻与重要信息。但是，其内容是相当枯燥无味的，大量信息充斥在这样一个小空间内，毫无条理而言。

诚然，这些内容也被细分为了几个要点，但其字号很小并缺乏图片来区分条目。总之，它很难勾起我读下去的欲望，因为它确实，很没劲。

2.流动性

我所说的流动的意思是：该网站的结构布局，能让人轻松地找到所需的信息吗？我是否知道接下来应该看什么——这个网站能否让我更容易的到达目标，或者说我需要在网页内容中努力寻找我想要的东西吗？

这是 Apple.com 的 MobileMe 区块：

苹果在网页架构方面做得不错，在这个页面，首先吸引你的应该是右面的图片，然后是左边的大标题。看了大标题后，可以继续阅读下面的推荐广告，它们能够轻松地引领人们去点击免费试用的注册按钮。每一项广告下面都以链接到详细内容页面的“Learn more”文本结束，这使得网页没有死角，并让访问者浏览下去。

微软似乎努力过却收效甚微。这是他们的 SharePoint 区块：

是的，这儿是有个吸引目光的焦点——顶端长长的引述和一张服务器的图片——但是接下来呢？下面所有内容都极为单调，尤其是那个有 8 个链接的“Learn More”区块。干巴巴的介绍让访问者缺乏浏览的欲望。有些微软站点在布局上做的稍好些，能指引用户的吸引力流动，但它们都有一个通病：内容太多。

提供给用户的多种选择，增加了用户的负担——他们不得不思考自己想要什么，并处理更多的信息。通过减少选择余地，苹果引领用户进入了一个经过精心设计的，提供了良好用户体验的通道。

3.导航条

苹果的网站上方有一个大型的导航条，这使网站的每个部分都能够保持一致。可供选择的部分展示了苹果的主线产品，同样也有包括售后支持和在线商店在内的重要内容。导航条同样集成了搜索功能，同时还进行了品牌展示，比如主页按钮显示的是苹果的 Logo 而不是简单的“Home”标签。任何额外的二级导航都位于个别页面，而且都在网页的内文中，也许是在侧边栏，也许是个顶端的水平条。

微软的主页有一个类似的导航条，但它在网站中并不是始终一致的。事实上，所有的子页面都有各自不同的导航条——不论在样式上还是内容上。主页的导航条几乎是微软网站各个部分的网站地图。在包括主页在内的许多导航条上，微软都使用了下拉菜单——与苹果不同，苹果不光使用下拉菜单——而且是巨大的下拉菜单。有时候，下拉菜单竟然还有一个滚动条！（Firefox 中）

这是好是坏？在最近的一篇文章中，Jakob Nielsen——有名的可用性大师——写到，巨型的下拉菜单还是可行的。说它可行是因为它集中提供了多种选项，使人更容易地检索并获取所需。通过它能够达成某个既定目标，比如将只需要显示一次的命令集中放在一起。

微软使用大型下拉菜单也有一定的道理，但他们做的有点儿过了。有些不同的选项都指向了同一个内容，像‘Office’下拉项和‘All Products’下拉项中的‘Office’选项。大型下拉菜单还遮挡了其下面的页面内容，如果鼠标不小心滑过了菜单，还要刻意移开鼠标以继续浏览——同时还要小心谨慎，不把鼠标移到其他条目上。

大的下拉菜单同样包含了不少内容——有时一次显示大约 13 个条目，这使得分辨选项更加困难。同样，网站各区块导航菜单的不一致也给页面跳转制造了障碍。像从 Office 网站跳转到 XBox 网站。

4.可读性

因为网站中的主要内容都是文字，所以确保每部分内容都清晰易读是尤其重要的。下面是改进网站可读性所需考虑的要点：

使文本足够大以便阅读；

确保文字与背景有足够的对比；

在文字周围提供足够的留白以避免其他图片和内容干扰读者；

提供充足的大标题和高亮/粗体字，以便读者快速获取关键信息；

为个别文字区域添加图片和图标来强调内容，如产品或功能描述；

保持文字简洁并突出重点；

现在让我们来看看苹果和微软在这方面做得如何。这是 Apple.com 上一个典型的页面：

苹果使所有东西都轻松易读。其文字虽然很小，但都不至于太小使阅读困难。标题很大很突出，使人很快就能找到这一部分的要点。苹果还大量地运用留白以区分每一部分，并添加图片提升每段文字的趣味性。

这是 Microsoft.com 上的一个典型页面：

它遵循了可用性设计的通常准则，把大块的东西分割成容易理解的小段文字。其页面上的更多内容和对标题及高亮文字的多种不同处理方式，使它看起来要比苹果的网站忙得多。

页面上的过多样式导致了视觉的混乱，各种不同的颜色和粗体字吸引着人们的注意力，在这种情况下，页面需要简单化以使访问者更易阅读。这是微软的另一个网页，微软安全中心：

页面上的文字过小而难以阅读，而且它需要更多的留白来把文本分离开来。再来看看 Apple.com 上一个繁忙的页面：

这是苹果在线商店，到处都有大量的商品信息和分类链接。字体小得恰到好处以容纳更多内容，当然，留白的良好运用仍然确保了页面的可用性。

5.搜索

苹果网站的搜索区域集成在导航菜单里。当键入内容的时候，会有使用 Ajax 实现的实时搜索结果以小方块的形式弹出来。这个东西非常棒——完全没有延迟，结果被组织成几个分类并且相当迅速，通常是在输入完查询语句之前，这是它的样子：

如果想查看更多结果，可以在完成输入之后敲击回车键，这样标准的搜索结果页面就会显现出来。它非常简洁，同样搜索结果也有组织地按分类排列。还可以通过分类进一步探究搜索结果，还有右侧可选的菜单。这些对寻找他们的产品很有帮助。

微软有一个更熟悉的搜索结果页，看起来很像是 Google（或当前其他搜索引擎）。它使用了微软自家的 LiveSearch 核心，很善于发掘人们所要寻找的并展示出来。搜索结果是一个大大的列表，标榜着微软的商业地位，它有许多子页面和不同的搜索内容。其功能性很强，但外观和感觉却与其他页面不同，好像是在浏览另一个网站。

6.美感

苹果的网站美学反映出了他们的产品线。具有铝质感的导航栏有着柔和过渡的文字。此外，还有大量的思考和简约的设计元素。苹果公司一直致力于统一其整个产品线的界面外观和风格，从硬件到软件，其网站当然也不例外。

美感与可用性有什么关系吗？当然有。研究表明，人们认为，美观的界面更好用。吸引人的界面给用户留下更好的第一印象，甚至会让用户更能够容忍缺点。微软在美观性上做得如何呢？这是 Internet Explorer 8 的页面：

这个页面采用了有着淡蓝色云彩的微软主题，很显然这是一个关于 Internet Explorer 或是 Windows 的网页。其外观和感觉都很一般，没有充分的体现出它自己的不同，也没有建立出一个统一的品牌形象。这里是另一个页面，下载中心：

这又是完全不同的另一种设计，尽管背景同样是淡蓝色的。如果页面上没有标题，你能知道这个是微软的网页吗？大概不能吧。总的来说其设计还是相当不错的，但这远远不够，还是有许多前后不一致和欠雕琢的地方，这方面，苹果仍然领先。

7.一致性

一致性非常重要，你可以以此为基础建立使用模式。这意味着如果你的网站有一个一致的界面贯穿始终，访问者就会迅速了解网站的运行模式，并使用这种方式浏览每一个页面。

苹果在保持页面一致性方面也做得相当不错，其各个产品页面都具有相似的美感与相同的架构。整个站点的外观与风格始终如一，每一个页面都有着相同的导航条。这意味着整个用户体验都是非常连贯统一的——你知道你正在浏览的是同一个网站。

这是微软 Azure 平台的网页：

如果拿掉 Logo 的话，你还能认得出来这是微软家的东西吗？微软每一个网站各自的图形，样式和颜色集使微软没能够建立一个统一的网络品牌形象。微软的主要问题在于，Microsoft.com 上的每个不同部分都有自己的外观与风格，即便是导航条。微软的在线商店，Office 站点与安全中心就像是三个不同的网站。

更糟糕的是，其网站的导航条会消失，这意味着访问者不得不后退到主页或进入网站地图才能够浏览其他站点。它就像是托管在同一域名下的生态系统，不能像苹果的网站一样从一致性建设中获益。其品牌形象也极其分散，难以定义一个完整的微软网站。

结论

哪一个网站是赢家？仅仅考虑可用性的话，苹果是出类拔萃的。他们的主页设计得更好，选项更少，减少了用户的思考。他们的每个页面都有一个相同的导航条，使用了大量的留白和子标题来增加可读性。他们保持页面的简洁性，没有过多的使用文字处理效果。苹果的网站通常对用户友好，且为查看苹果最新产品的顾客提供了更加的体验。

话虽如此，苹果的网站在规模上要比微软网站小得多。与苹果不同，微软在 Microsoft.com 品牌下许多不同的站点和区块，创造了一个子网站的完整生态系统。每个站点都充斥着大量的信息和 LiveSearch 核心的搜索。微软网站的最大问题就是一致性。

微软网站没有一个一致，连贯，统一的品牌形象。每个区域看起来都不尽相同。没有个统一的导航，并且缺乏微软的可视化标识。而苹果网站中所展示的反映其产品理念的独特美感，也使得苹果建立了一个强大的品牌效应。

综上，在我看来，苹果显然是胜者。

原作者 Dmitry Fadeyev 运营着一个研究可用性的博客，名叫 Usability Post。

英文原文 http://www.webdesignerdepot.com/2009/05/apple-vs-microsoft-a-website-usability-study/

添加评论

提高网站可用性的10个小技巧

Oncoding — 2009-06-09 14:15:08

不论是企业网站、个人博客，或者购物网站、游戏网站，我们都希望能吸引访问者并且给他们留下愉快的访问体验。

可用性是用户体验的一种度量，它可以用访问者完成网站功能的方便程度来描述——无论是通过自身知识还是通过学习新方式来完成这种功能。我认为Jakob Nielson的解释非常到位，他说：

可用性是评估网站易用程度的一种属性。同时“可用性”这个词也指在设计过程中提高易用性的方法。

在本文中我希望能够提供一个可用性清单，内容覆盖了从视觉设计，到可以用在任何项目中的简单导航提示等多个方面。

1. 当前位置导航

要让用户在任何时候都知道自己身处哪个模块，或者在浏览那个分类。对任何网站来说，这都可以极大提升可用性。在这一点上，创建当前位置导航可以算是最有效的提升可用性方式。

当前位置导航的理想方式是在服务端创建，这样可以大量节省HTML和CSS代码。如果不方便在服务端创建导航，那么使用CSS操纵你的body元素从而直接定义每个导航标签也是一个不错的方法。

另外，你可以方便的使用JavaScript创建当前位置导航菜单。

要注意，你的当前位置导航最好和鼠标滑过样式保持不同，这是很多网站缩不注意的。

2. 可用的表单标签和按钮

使用HTML的label属性，可以让用户通过点击注释标签来激活表单元素，这是HTML的一个伟大的内置功能，但不幸的是，很少有用户知道这回事。

怎样让用户了解这个功能呢？你可以通过改变鼠标指针形状的方式来提醒用户，这只需要一两行代码就可以实现。

做成这样之后，用户就很容易的知道这标签是可以点的，我经常觉得HTML标准里没有把这些可以点的元素统一设置为小手指针是非常不应该的，所以我通常我会这样统一定义：

label, button, input[type="submit"]{cursor:pointer;}

3. 将你的LOGO链接到首页

我认为logo不链接到你的网站首页是一件令人沮丧的事情，恰恰有很多网站没有这样做。用户研究表明，这样做是很有必要的，用户需要它！

如今越来越多的网站意识到，给LOGO加链接的重要性。用户已不满足于一个标记为“主页”的文字链接，用户希望点一下logo就可以回到首页。

拿Facebook为例，它为每一个导航元素增加了“ref”属性来跟踪用户点击。如下图：

4. 加大链接的点击面积

大约一年前，37Signals 的 Ryan Singer 写了一篇文章来介绍它们在 Basecamp 项目中如何增大链接的可点击面积。这又是一个提升网站可用性的小细节，它只需要你增加链接周围的 padding 值就可以有效增大点击面积。

对任何网站来说这都是一个值得尝试的方法，它可以方式用户误点或点不到链接。并且对于手机网页的设计更为重要，因为很多用户使用手指来点击触摸屏上的链接，增大面积可以帮他们更方便的浏览网页。

5. 表单元素焦点显示

为处于激活状态的表单元素添加焦点显示，越来越成为UI设计的一种趋势。它让用户了解自己做了什么，在做什么。这是一种简单但有效的向用户传递有用细节信息的方式。

6. 提供有用的404错误页面

让网站呈现给用户一个大大的 Apache 错误信息会让人很不爽，创建一个友好的、有用的404错误页面是一个不错的解决方法。因为对非开发者来说，“404”这些数字没有任何意义和价值，用户只希望在网站上找到自己需要的信息。

要建立一种可以帮助用户正确的找到他们需要的信息的错误提示页面，比如显示一些抱歉的同时，加上搜索框、推荐文章或首页链接等，努力把用户留在网站上，而不要把责任都推给用户输入了错误链接。

这里有一些优秀的404页面欣赏：极富创意的404错误页面欣赏

7. 创造一个舒适的文字环境

如今，网站文案撰写已成为了一个很大的话题，做网站有越来越多的细节需要考虑。

从古到今，关于网站文字内容的讨论从未间断并且其标准在一直变化。当年Steve Krug 曾主张缩减掉一半的文字内容，转而用列表的形式呈现它们。

但现在不同了，我们需要用和朋友对话的方式来撰写文案，让用户感觉到一种舒适温馨的氛围。这样用户就会少一些局促感，即使他们遇到了使用上的问题，他也会心情愉悦的在网站帮助中寻找解决的办法。

8. 调整行距增强可读性

行距是可以从书报杂志等传统媒体直接过度到网页上的元素之一，这些内容的研究和改进已经进行了数百年，已经积累了大量优秀的经验。所以你下次设计之前，大可以先翻翻杂志找找灵感。

行距是网页设计中经常被忽视或滥用的地方，我通常从1.4倍行距出发开始设计，然后根据设计和内容进行调整。

9. 使用空白来区分和归类元素

将内容元素归类组合是显示内容的一种方式。你可以使用图片、边框或者仅仅是使用空白来归类区分。使用空白归类内容元素可以创造自然和谐的用户体验，即使是匆匆的一瞥，内容也会一目了然。

用户一眼扫过网页（比如阅读TOP10列表时），首先会注意标题。我们首先希望的是，我们的网站内容很有趣，能吸引用户进一步阅读。但是对用户进行正确的引导，会对内容的展示起到促进和相得益彰的作用。

10. 无障碍浏览

这里并不是指“508法案” ( 即section 508，美国法律，大体上描述为：某些特殊用户群体，如残疾人，浏览某网站时，如果无法正常获得所期望的信息，那可以依据相关法规，对该网站依法起诉。 ) 这里所说的“无障碍”，指的是为你的用户考虑到方方面面，让他们轻松的找到需要的东西。

如果说保证浏览无障碍可以让你的用户不会发怒，不会甩袖子走人，那么“快速响应”则是你留住用户的最后一道防线。

如果有决心的话，你可以做所有你能想到的测试，然后多方参考用户的试用意见。目的就是最大限度的留住用户，因为用户个体的意识和习惯之间存在差异，很难找到让所有用户满意的方式。

谈到“无障碍浏览”和“快速响应”，你可能会首先想到视觉障碍人士，但其含义远远超过这些。例如，你必须让你的网站适应用户的带宽限制（拨号上网，手机上网，网速慢等）和旧版本的浏览器（一些公司不会让员工升级浏览器）。

如果我们尽最大努力的消除网站使用的障碍，并且快速的相应网站的问题，我们就能建立一个完善的用户体验，给用户留下良好的印象并且还会再次回来。

作者

作者：Tim Wright
原文：Web designer depot
翻译： Oncoding编码营

低成本提高web可用性的几个细节(二)

jiangyang — 2009-06-10 19:44:37

接低成本提高web可用性的几个细节(一)
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动画图片就可以解决。

相关话题：提高可用性的一些方法源地址：http://www.myzdnet.com.cn/?p=44

低成本提高web可用性的几个细节(一)

jiangyang — 2009-06-10 19:41:18

可用性(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

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

(图6)
可以想象，如果我们改为：
名博排行前五十
不超过四十个字符
这样看起来会很累，而且不够直观。当然，对于电话号码就更不用说了。

(未完…)

相关话题：提高可用性的一些方法源地址：http://www.myzdnet.com.cn/?p=33

提高可用性的一些方法 - UCD大社区

10条有用的可用性结论和指南

Form标签最好放到字段的上面

用户关注面部

设计的质量是可信度的一个指标

大多数用户 不 滚动

蓝色是链接的最佳颜色

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

空白可以增进理解

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

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

大部分用户无视广告

号外：来自于我们的个案研究的结论

其它资源(英文)

关于作者

10个提高可用性的救命方法

80/20法则 (The 80/20 Rule)

增加可用性效果的美感 (Aesthetic Usability Effect)

加入限制 (Constraints)

遵守CRAP准则 (Make it CRAP)

减轻用户负担 (Lighten the load)

使用更少的文字 (Use less words)

折线之上 (Above the fold)

排序与分组 (Sorting and Grouping)

包容 (Forgiveness)

空状态 (The Empty State)

结论 (Conclusion)

可用性的价值

缩减设计周期

避免开发不必要的功能

加速决策过程

提升销售

避免从头开始

避免灾难

Web设计中9个常见的可用性错误(译)

1. 太小的链接点击区域

2. 错误使用的分页

3. 重复的网页标题

4. 内容难以扫描

5.没有办法取得联系

6. 没有办法搜索

7. 太多的功能需要注册

8. 老的永久链接指向“不存在”

9. 老长老长的注册表单

少过脑子

关于作者

关于译者

Apple vs. Microsoft——网站可用性研究

1.首页

2.流动性

3.导航条

4.可读性

5.搜索

6.美感

7.一致性

结论

提高网站可用性的10个小技巧

1. 当前位置导航

2. 可用的表单标签和按钮

3. 将你的LOGO链接到首页

4. 加大链接的点击面积

5. 表单元素焦点显示

6. 提供有用的404错误页面

7. 创造一个舒适的文字环境

8. 调整行距增强可读性

9. 使用空白来区分和归类元素

10. 无障碍浏览

作者

低成本提高web可用性的几个细节(二)

低成本提高web可用性的几个细节(一)

大多数用户不滚动