1. Form Labels Work Best Above The Field

1.表单标签在输入框（field）之上的时候表现更好

——————————————————————————————————————————————————

UX Matters的研究发现标签的最理想位置其实是在位于输入框（field）之上的时候，很多时候标签都被置放于输入框的左边位置，创造出一种两列布局，这样看起来也许更好，但是并不是最舒适的使用方式，为什么呢？因为表格通常情况垂直分列的，也就是说一般情况下用户是从上到下进行表格数据输入，用户沿着向下的方向浏览表格内容，这样一来将标签置于输入框上方就更易于用户的识别和阅读。

Tumblr中一个依循UX Matter建议的简洁且精致的注册表单。

将标签内容放置于输入框左方还有另外一个问题：是左对齐还是右对齐标签呢？左对齐的话是能让表单更易于浏览，但是也让标签和输入框分离开了，这就让标签和输入框之间的指向关系变得非常模糊不易识别使用。如果采用右对齐的话则就有相反的问题出现：在视觉上看起来更好，但是表单的浏览就变得不容易了。大多数情况下将标签置于输入框上方是最好的处理方式。这个研究成果同样指出标签不宜为加粗字体，虽然这个建议仍然有值得探讨的地方。

2. Users Focus On Faces

2.用户更易聚焦于面部

——————————————————————————————————————————————————

当有人进入视线范围的时候，人们往往会本能的去注视这个人。在网页界面上，我们更趋向于去聚焦人物的面部和眼睛，这给市场人员提供了一个很好的吸引注意力的方式，但是我们注意人物的面部和眼睛只是在第一眼注视的时候，然后我们会跟随人物的视线方向继续看下去。

一个正在直视我们的小孩的眼动热研究图，来源UsableWorld study

现在小孩将视线转而看着文字内容，从眼动热图我们可以看见人们观看标题和文字的频率大大提高了。

这就是眼动热研究呈现给我们的事实，我们本能的注视人物面部，但是如果人物的面部直视的不是我们而是其他方向的话，我们也会跟随人物视线的方向阅读。充分的利用好这个现象可以将你的用户的注意力转移到最重要的内容或者广告上。

3. Quality Of Design Is An Indicator Of Credibility

3.设计的质量是可信性的一个指标！

——————————————————————————————————————————————————

已经许多研究分析了影响用户对一个页面的信任度的各种因素：

• Stanford-Makovsy Web Credibility Study 2002: Investigating What Makes Web Sites Credible Today
• What Makes A Web Site Credible? A Report on a Large Quantitative Study
• The Elements of Computer Credibility
• Elements that Affect Web Credibility: Early Results from a Self-Report Study (Proceedings of ACM CHI 2000 Conference on Human Factors in Computing Systems, v.2, New York: ACM Press)

我们不知道Fever的应用程序是不是真的比较好，但是整洁的网站界面提供了一个非常好的第一印象！

一个有趣的研究显示用户往往通过封面去评判一本书的好坏，那么更确切的就可以说，一个网站就是通过设计来提升其可信度，布局、一致性、排版、色彩和样式所有这些元素都影响用户对你网站的观感，以及对你项目的认识。你的网站不仅仅需要呈现一个非常好的形象，而且必须是针对用户需求的正确形象。

还有一些其他因素会影响网站的可信度：网站内容的质量，错误的数量，更新的频率，易用性和可信赖的作者等等。

4. Most Users Do  Scroll

4.大多数用户不使用滚动条

——————————————————————————————————————————————————

Jakob Nielsen的研究显示只有23%的用户在第一次浏览一个网站的时候使用滚动条(在 Prioritizing Web Usability)，这就意味着有77%的用户不使用滚动条，他们只是阅读首屏的内容（也就是不适用滚动条当前屏幕呈现的内容），而且回访的用户使用滚动条的频率也有所降低，只有16%的用户会在他们回访的时候使用滚动条，这个数据强调了在显著位置放置关键内容是多么的重要，特别是登陆的首页面！

当然这不就意味着你就得将所有的内容都挤进首屏显示，只是说你必须非常好的使用这个区域，如果只是单单的将内容填充满这个区域会使页面看起来非常的难以理解和阅读，当你呈现给用户过多的信息的时候，用户往往也就会迷失于如何展开浏览阅读了！

Basecamp非常好的利用了屏幕空间，在首屏内(768 pixels)，顶部展示了一张大大的截图，品牌口号、价值主张、行动电话、视频以及特色展示图片。

对首页来讲这是最重要的内容，大多数用户都是从首页开始阅读浏览，因此务必在这里提供最重要的内容信息：

1. 网站名称,
2. 网站的价值主张（或者说用户将可以获得相关利益）
3. 与用户操作相关的主要的导航按钮

但是现在用户的使用习惯已经产生了明显的改变，最近的一个研究显示用户其实对滚动有着非常大的满意度，在某些情况下用户其实非常愿意滚动到页面底部，许多用户更为喜欢滚动条而胜于分页浏览的方式，对于许多用户来说一个页面的最重要的信息并不必要一定要显示在首屏上（这是因为各种各样的展示解决方案都太过时了，不赞成使用），因此将你的布局分隔成段将是非常好的注意，并用留白分隔让内容看起来更易于阅读浏览。

如想了解更多的相关信息：
Unfolding the fold (Clicktale), Paging VS Scrolling (Wichita University – SURL), Blasting the Myth of the Fold (Boxes and Arrows). (thanks, Fred Leuck).

5.Blue Is The Best Color For Links

5.蓝色是最佳的链接颜色

——————————————————————————————————————————————————

尽管将页面设计的非常独特是一件非常棒的事情，但是当我们需要考虑可用性的时候，采用大多数用户习以为常的东西可能就更好了，遵循惯例，因为当一个用户浏览一个新的网站，他们的第一视线关注的地方往往和其他网站都是一致的，他们依循他们的经验来理解新的内容，这就是用户使用习惯。用户希望某些东西是一致的，比如链接颜色，网站的logo位置，导航操作习惯等等。

谷歌将所有的链接设置为蓝色有一个非常明显的原因：这个链接颜色对大多数用户来说都是最熟悉的，这就让定位和使用起来更为简单。

到底你的链接的颜色应该是什么呢？首要考虑的问题就是对比性：连接应该尽量暗或者明亮以区别于背景的颜色，第二点，他们应该从其他文字的颜色中跳跃出来，因此，不要在黑色字体上使用黑色链接。最后，研究显示如果可用性是你网站关注的重点，那么保持链接色为蓝色是最好的。浏览器的默认链接色就是蓝色，这就是用户期望的色彩。采用一种不同的颜色并不意味着就是一种错误，只是用户选择定位链接的速度就可能会受到影响了。

6.The Ideal Search Box Is 27-Characters Wide

6.最佳的搜索框长度是27个字符宽

——————————————————————————————————————————————————

到底最佳的搜索框式多宽？有一个确切的数字吗？Jakob Nielsen专就此问题做了一个调查（优先考虑网页可用性）。调查显示多数限制的搜索框都过短了，短的搜索框往往在你需要输入一段较长的文字的时候就显现出来了，只有一部分的文字可以显现出来，这就不利于你修改和查阅你输入的内容。

研究显示平均的搜索框长度为18个字符宽，数据也显示27%的查询内容太长以至于输入框无法适应，如果扩展为27个字符的话就能适应90%的查询情况了。记住你可以使用em设置宽度而不只是像素或者点， 1em正好是一个“m”字符的宽度和高度(无论你的网站使用多大的字号)，因此你可以很容易的用这个测量值来控制你的搜索框长度。

谷歌的搜索框就足够长来适应长句的搜索查询要求。

苹果的搜索框就有些短了，搜索文字被切断显示了。

通常情况下，搜索框总是宜长不宜短，这样用户就能快速的查看自己输入的内容，查证和提交自己的搜索内容，这个规则太简单了但是不幸的是它被太多的忽视了，在输入框内使用内边距一样可以提升用户体验。

7.White Space Improves Comprehension

7.留白能够增进理解

——————————————————————————————————————————————————

大多数设计师都知道留白的好处，留白就是指页面中段落、图片、按钮和其它元素之间的空白。留白让元素之间有足够的空间不至于显得非常凌乱，我们同样可以采用减少元素之间的留白或者增加留白的方式将页面中的元素进行分组，这对呈现元素之间的关系是非常重要的（比如按钮和文字之间的层级关系）。

注意The Netsetter大块内容的margin、padding以及段落间隔，这让内容看起来非常的易于阅读。

留白空间可以让内容更易于阅读，一项研究(Lin, 2004)显示正确良好的在段落之间使用留白空间以及左右间距可以提高内容的理解度20%左右，用户会更容易的聚焦和处理空白的内容。

事实上，基于Chaperro, Shaikh和 Baker的研究显示，网页界面的布局（包含留白、标题、缩进和图表）虽然不能明显的影响表现但是肯定会影响用户的使用体验。

8.Effective User Testing Doesn’t Have To Be Extensive

8.有效的用户测试不一定需要非常广泛

——————————————————————————————————————————————————

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

Source: Jakob Nielsen’s AlertBox

最大的问题通常是第一个或者第二个用户发现的，后面的其他测试用户会确定这个问题并发现一些其他的小问题，只要测试两个用户就能发现网站存在着的一半问题了，这就意味着其实我们不需要将测试做的过于宽泛或者昂贵以获得更好的结果，最大的收益结果是在0个测试用户到1个测试用户之间获得的，因此不要担心做的不够多，任何测试都是聊胜于无any testing is better than none.。

9.Informative Product Pages Help You Stand Out

9.产品信息页能帮助你凸显出来

——————————————————————————————————————————————————

如果你的望着有产品页面，人们网购的时候会清晰的浏览他们，但是许多产品页面缺少有价值的信息，甚至缺乏用户快速浏览的信息，这是个非常严重的问题，因为产品信息帮助用户作出购买决定。研究显示缺乏产品信息会导致8%左右的的可用性问题和甚至会失去高达10%的用户 (也就是说用户放弃浏览并离开这个网站) (Prioritizing Web Usability).

苹果提供了独立的技术细节页面，这就将负责的细节信息分离于简单的产品销售页面，但是提供了非常简易的访问入口在用户需要了解的时候。

为你的产品提供详尽的产品信息，但是不要做得太过了，不要对用户进行信息轰炸，让这些信息非常容易的理解是非常重要的!让页面看起来更为易于浏览可以将文字分成小段并使用大量的子标题，为你的产品添加大量的图片，并使用恰当的语言，而不要使用术语，要知道用户不一定和你都是专业人士。

10.Most Users Are Blind To Advertising

10.大多数用户无视广告

——————————————————————————————————————————————————

Jakob Nielsen在其AlertBox entry报告中指出大多数用户无视广告banner，如果用户在页面中寻找信息或者专注于阅读内容的话，他们就不会被旁边的广告干扰。

这就意味着用户不仅仅会无视广告，也会同样的忽视任何看起来像广告的东西，也许这些不是广告，一个设计的很重风格的导航条也许看起来就像一个广告条，因此要慎用这些元素。

FlashDen左侧的方形banner事实上并不是广告，他们是内容链接，说实话这看起来并不舒服，太像一个广告banner了因此肯定会被一些用户所忽略。

这就是说如果广告看起来像正文内容的话就会导致用户的点击和阅读，这将产生更多的广告收益但是也消耗掉了用户的信任度，因为他们点击的是他们认为真的是内容的东西。如果你需要采用这样的方式，请先衡量一下你是在乎短期收益还是想获得用户的长期信任。

Bonus: Findings From Our Case-Studies

号外：我们的案例研究结论

——————————————————————————————————————————————————

近些年，Smashing Magazine的编辑团队已经实施了一系列的案例研究试图去分析一些普遍的设计解决方案和实践。因此，我们已经分析网页表单、博客、排版和作品集，更多的案例研究将在下月发表，我们发现了一些有趣的模式也许能在你下一次设计的时候提供一些参考准则。

在这里，我们将回顾一下我们在那些个案研究中发现的一些实践和设计模式，并且简化了这些概述，压缩了整个表述以使你看起来更为方便。

按照我们的排版研究：

• Line height (in pixels) ÷ body copy font size (in pixels) = 1.48
• 行高(像素) ÷ 主体字体大小(像素) = 1.48
  1.5倍行高是传统印刷书籍中被广泛应用的，因此我们的研究也支持这个方法。现在非常少的网站使用少于这个数值的，超过这个的也在不断的减少。
• Line length (pixels) ÷ line height (pixels) = 27.8
• 行长度(像素) ÷ 行高(像素) = 27.8
  The average line length is 538.64 pixels (excluding margins and padding), which is pretty large considering that many websites still have body copy that is 12 to 13 pixels in font size.
• Space between paragraphs (pixels) ÷ line height (pixels) = 0.754
• 段落之间的空间(像素) ÷ 行高(像素) = 0.754
  It turns out that paragraph spacing (i.e. the space between the last line of one paragraph and the first line of the next) rarely equals the leading (which would be the main characteristic of perfect vertical rhythm). More often, paragraph spacing is just 75% of paragraph leading. The reason may be that leading usually includes the space taken up by descenders; and because most characters do not have descenders, additional white space is created under the line.
• Optimal number of characters per line is 55 to 75
• 每行字符数最好是55到75之间
  According to classic typographic books, the optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular in practice.

按照我们的博客设计研究：

• 布局通常采用固定宽度(基于像素) (92%)并且通常是居中的(94%)。固定布局的宽度大部分在951px和1000px之间(56%)。
• 首页显示10到20篇日志的摘要(62%)；
• 一个网站的整体布局的58%用来显示主内容。

• Layouts usually have a fixed width (pixel-based) (92%) and are usually centered (94%). The width of fixed layouts varies between 951 and 1000 pixels (56%).
• The home page shows excerpts of 10 to 20 posts (62%).
• 58% of a website’s overall layout is used to display the main content.

According to our Web form design study:

按照我们的网页表单设计研究：

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

• The registration link is titled “sign up” (40%) and is placed in the upper-right corner.
• Sign-up forms have simple layouts, to avoid distracting users (61%).
• Titles of input fields are bolded (62%), and fields are vertically arranged more than they are horizontally arranged (86%).
• Designers tend to include few mandatory fields and few optional fields.
• Email confirmation is not given (82%), but password confirmation is (72%).
• The “Submit” button is either left-aligned (56%) or centered (26%).

According to our portfolio design study:

按照我们作品集设计研究：

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

• 89% of layouts are horizontally centered, and most of them have a large horizontal navigation menu.
• 47.2% of portfolios have a client page, and 67.2% have some form of standalone services page.
• 63.6% have a detailed page for every project, including case studies, testimonials, slideshows with screenshots, drafts and sketches.
• Contact pages contain driving directions, phone number, email address, postal address, vCard and online form,

Other Resources其他资源

• 15 Valuable Usability PDFs You’ve Never Heard Of
• 15 Important Research Findings You Should Know
• 10 Additional Research Findings You Should Know
• Introduction To Good Usability
• 11 Striking Findings From an Eye-Tracking Study
• 25 Incredibly Useful Usability Cheat Sheets And Checklists
• 10 Usability Findings To Increase Sales And Customer Loyalty
• Web form design guidelines: an eye-tracking study

更多精彩文章

• [年度翻译计划24]13个成功改版网站分析 (1)
• [年度翻译计划20]50个优秀企业网站设计欣赏[50P] (1)
• [年度翻译计划18]36个在网页设计中使用照片的优秀实例 (1)
• [年度翻译计划23]45个设计中使用3D元素的优秀网站 (2)
• [年度翻译计划22]2010网页设计趋势 (3)
• [年度翻译计划21]设计师的7种人格类型 (0)
• [年度翻译计划19]好的设计师复制，伟大的设计师偷窃？ (2)
• [年度翻译计划17]20个你不应该成为自由职业者的理由 (3)
• [年度翻译计划16]设计过程中的自我限制[8P] (2)
• [年度翻译计划15]60个免费PS修片动作推荐[60P] (1)