Nielsen Norman Group：什么是网页设计中的完

2016-01-21 本文已影响192人王水

译者：王水

摘要：有时尽管屏幕外还有待浏览的内容，用户可能误以为他们已经浏览了整个页面。在界面设计中，设计师需要帮助用户发掘页面中的所有相关信息。

浏览网页正如用望远镜观赏风景，实时成像只能显示风景的一小部分，你需要经常上下左右变换取景位置来一窥全貌。与此类似，用户在浏览网页时经常需要上下滚动或左右滑动页面来获取全部内容。

通过望远镜观赏风景时，我们知道只需移动望远镜，其它方向的广阔的风景就会出现。但是在浏览网页时，用户必须依据页面设计来判断是否有继续探索的可能。用户也许从未看到掩藏的金矿，除非他们知道或有意愿滚动网页。这就需要设计师在界面设计中，通过对屏幕下方或侧边的内容给出提示信号，来引导用户发掘页面中的重要信息。

定义：完整性错觉

当屏幕上的可见内容看上去好像是完整的，但实际上在可见区域之外还隐藏着更多信息时，便产生了完整性错觉（illusion of completeness）。该术语由Bruce Tognazzini在1998年提出。当视觉设计不能很好的引导用户发掘屏幕区域之外的内容时，错觉将产生。用户认为所呈现的页面是完整的，实际上却并不是这样，这是一个严重的可用性问题，它可能会导致用户错过有价值的内容，阻碍用户达成目标。

既然已经就此可用性问题对设计师提示了长达18年，为什么现在再次提及呢？因为直至今日很多站点依然在犯同样的错误。我们在正在进行的很多用户研究中发现，用户依然被完整性错觉所困扰。现在就让我们一鼓作气来消灭网页中的完整性错觉，以便它不需要在18年后的2034年再一次提起。

垂直维度的完整性错觉

在早期的网页中，用户较少滚动页面查看。之后用户逐渐养成了垂直滚动的习惯。然而，及时用户习得了滚动的操作，我们不能期待他们即使在缺少视觉提示时滚动页面。如果用户并不认为页面上有其它信息，他们凭什么要滚动页面呢？

以下是一些表示相关内容结束的设计样式，它们会造成完整性错觉：

巨大的头图或视频

基于图像的最新设计趋势使得很多网站在页面顶端展示引人注目的影像或视频。这种处理方式经常造成重要的内容被挤到首屏下方，且无附加线索引导用户滚动页面。

纽约的外卖网站Maple.com，自动播放的视频占据了整个首屏。在所有设备上，其它内容都隐藏在在这张图片的下方。

在上面的实例中，大尺寸的视频与强烈的标语显得页面似乎已是完整的，但实际上关于公司的所有细节概述在屏幕的更下方。这样的设计创建了页面的“伪底部（a false floor）”，给了页面一个明显的结尾。此外，导航元素的匮乏也促成了这样的效果。

在可用性研究中，当我们让访问此站点的用户找出此公司提供何种服务时，八位被试中有六位都没有意识到此页面可以向下滚动。因为没有其它可见的链接或者行为召唤按钮，我们的所有被试都选择了“Get Started”按钮，填写一系列询问个人信息的模态窗口，之后却发现他们所在的地区竟不在服务范围。75%的被试感到挫败，他们不仅费时费力在网站上填写了个人信息，而且不能找出公司提供何种服务。

明显的水平线

完整性错觉不仅发生在页面上方（如上个例子），它可能发生在页面的任何部位。用通栏的水平线标记的内容间隔可能会造成视觉障碍，阻止用户继续滚动页面。如果用户再浏览页面时遇到页面内容中的强烈横向隔断，也许会假设这里不仅是一个部分的结束，更是整个页面的末尾。

virginamerica.com在页面部分之间有通栏的水平线，这会错误地提示内容的结束。

内容组件间的大量留白

当水平间距太大或内容不能刚好填满容器区域时，用户向下滚动页面，却看到了内容组件之间的大间距，这可能暗示着页面的结束。如果看起来用户似乎不会在页面中获得更多信息，那为什么要继续滚动页面呢？

Urbanoutfitters.com红色阴影标示出了内容部分。尽管页面下方还有更多内容，各部分之间的水平间隔使页面看起来似乎已经完成

内容流的中断

广告、内部推广或社会化分享按钮会向用户表明他们已经到达了页面相关内容的尽头。如果广告足够大以至于很难看见它下面的内容，问题会更加严重（特别在小尺寸的移动设备上）。此外，当广告位于内容流的“自然终点”时（如文章的末尾），用户有理由认为页面下方已没有其它有趣的信息（尽管广告下方可能仍然有文章评论或者相关内容）。

Salon.com在主体内容部分的中间插入了大尺寸的广告。广告之后是否有还有其它内容并不清晰

横向维度的完整性错觉

尽管用户已经习惯了在网页端垂直滚动，横向滚动（或滑动）仍不是用户预期的pc端页面上的交互方式。甚至在水平滑动手势很常见的移动设备上，依赖横向手势的界面仍然对需要对用户进行有力的引导来表明交互作用的方向。

用户在使用ios应用Yahoo Digest浏览新闻文章时，需要滑动来显示下一篇文章。这种手势很像在一副扑克牌中移除顶端的牌来露出下面的牌（这就是为什么这种交互模式被称为“扑克牌”的原因）。在这种情况下，缺乏视觉提示的屏幕提示水平滑动的可能性。

在pc网页上，水平导航时常与轮换图相关。因此，暗示轮换图的交互方式、显示剩余的轮换图帧数的提示非常关键。

Novartis.com.图片底部的圆点是较弱的提示：它们并不显而易见，导航箭头只在光标移上去时才显示出来。不过从好的一面看，轮换图下方显露的下面部分的导航(Corporate, Careers, News and Research)成功地引导用户垂直滚动页面。

整个网页横向布局，需要用户用水平滚动条来浏览全部内容的情况并不多见。有时设计师或创意公司在网站中应用水平滚动来展示创意成果。在主流的网站中不建议完全使用水平滚动。水平滚动条笨重繁琐，因其需要持续的注意和体力来控制光标在狭窄的区域中，且基于水平滚动的网站很容易与垂直滚动的网站一样产生完整性错觉。

Secondstory.com使用水平布局。页面右侧隐藏的额外内容并不容易被发现。用户需要识别出页面右侧、隐藏在图片的顶部的黄色箭头，或者使用鼠标熟练操作页面底部的横向滚动条。

确保你的页面传达连续性而不是完整性的Tips：

1.避免使用全尺寸的头图。在页面顶部使用大尺寸的banner、轮换图或者视频时，确保更多内容出现在页面首屏，以引导用户继续滚动。

2.注意内容之间的对比线或大量留白。这些视觉信息可能会被误认为相关内容的结尾。

3.留心内容流的打断。如果必须在内容中插入广告或社会化分享图标，你需要告知用户页面下方还有其它信息。

Delish.com:文章中的广告前加入提示，以便用户继续阅读。（尽管使用了低对比度的文字）

4.为水平滑动创造明显的提示线索。关键信息不应放入轮换图或任何水平滚动容器中。用户经常错过导航提示，即使它们很明显。另外，这些线索提供的提示作用太弱，人们不确定是否应对其它附加内容加以期待。当你使用轮换图时，应该找到方法来清楚地表示附加信息的存在：

5.以“出血”的方式展示屏幕外的附加信息（在屏幕边缘展示不完整的信息）。

6.在各个帧的轮换图中展示标题列表，用来提示内容

7.提供突出明显的箭头控件和滑动计数控件

Netflix.com用轮换图来展示每个类别中的项目。右侧视觉元素溢出屏幕的处理暗示着选项的延续性。