设计中的完整性错觉：它是什么以及如何避免它的出现 / 木子杰软件教程

即使在屏幕的首屏分割线之外还有其它的隐藏内容，用户通常会认为他们看到了整个WEB页面，设计师必须帮助用户发现整个页面上所有的相关内容。

浏览网页就像通过望远镜看风景。通过它你会发现：出现在你眼前的风景，只是整个现实风景的一小部分，如果你想通过望远镜看完所有的风景，通常需要上下或左右平移才能看到。同理，在网页上，为了发现上面所有可用的内容，用户可能需要上下滚动，甚至是左右滑动。

当我们用望远镜看风景时，我们知道在每个方向上都有广阔的风景—我们可能需要移动望远镜，才能发现风景中那只难以看到的秃鹰。但是在网页上，用户必须依靠网页的设计来了解和探索他们关心的内容。页面上有价值的信息可能被隐藏在首屏的下面，如果用户不知道滚动页面或者查看页面的动力不足，那么用户永远也不会发现它。网页设计师要通过明确的引导设计，指引用户快速获取页面上有价值的内容。

完整性错觉的定义

当屏幕上的可见内容看起来是完整的，而实际上在屏幕的可视区域之外还存在其它的信息时，就会产生完整性的错觉。这个词是布鲁斯·托格纳兹尼在1998年提出的。当视觉设计不能引导用户观看屏幕外出现的附加内容时，就会产生错觉。当你认为一个页面是完整的，实际上并不是的时候-这就是一个很严重的可用性事故了：它可能会让用户丢失有价值的关键信息，使得用户没发完成自己的目标。

既然我们已经警告设计师这个可用性问题18年了，为什么现在又要写它呢？因为网站不断地在犯同样的错误，我们经常看到用户在我们正在进行的用户研究中被这样的完整性错觉问题所困扰。让我们谨记这个问题，最终从页面上彻底消除完整性错觉，这样我们就不必在2034年的时候再去警示设计师这件事情了。

垂直维度上的完整性错觉

在互联网的早期，用户不太可能滚动页面到首屏以下。自那以后，用户已经习惯了垂直滚动。然而，仅仅因为用户学会了滚动，我们就不能指望他们知道，即使在没有视觉指引的情况下也要滚动。如果你认为没有更多的信息了，为什么你还要滚动页面呢？

下面是一些设计风格的列表，它们通常会表示相关内容的结尾，并给人一种完整性错觉。

1、大图片和视频：

近期基于图像设计的趋势，促使许多网站在页面的顶部区域添加了醒目的图像或视频。这些方法通常会将重要内容推到首屏的下方，而不是直接显示，并且不会提供额外提示来引导用户进行页面滚动来查看页面的重要信息。

Maple.com是位于纽约的一家食品配送服务公司，它展示了一个占据整个屏幕的自动播放的视频。在所有设备上此图像铺满整个屏幕。

在上面的例子中，大型视频加上强烈的号召性用语使得页面显示完整，而实际上关于该公司的所有细节都在屏幕下方进行了介绍。这种设计会造成了虚假的信息隔离，或一个明显的网页结束。这样没有任何引导元素的设计加剧了页面的完整性错觉。

在一项可用性研究中，我们要求用户访问此网站并了解该公司提供的服务。八位用户中有六位没有意识到他们可以向下滚动页面。由于没有其他链接或明显的操作按钮，我们所有的用户都不约而同的选择了“Get Started（开始）”按钮，并且遇到了一系列要求提供个人信息的模块，后来才发现该自己所在的区域不能享受该服务。75％的测试用户感到很沮丧，不仅花费时间和精力在网站上输入他们的详细信息，结果却还是无法享受该公司的服务。

2、明显的水平分割线。

完整性错觉可以发生在页面的任何地方，不仅仅只是在页面的顶部（如上面的例子）。如果内容采用横跨页面左右宽度的横线进行区分，就会在页面上创建一个视觉屏障，这样就阻止了用户进一步滚动页面。如果用户在页面内容中遇到这样的横线，用户可以认为它不仅仅是一个章节的结尾，也有可能是整个页面的结尾。

横跨页面左右宽度的水平分割线，它们可能错误地暗示了内容的结束。

3、内容元素之间的较大白色留白。

当水平空间太大或内容没有完全填满它时，内容元素之间的巨大留白也就意味着页面的结束，当用户继续向下滚动时，只会看到一个较大的空白区域。如果用户看不到更多的信息，为什么还要继续滚动页面呢?

Urbanoutfitters.com 红色阴影突出显示了内容部分。在各部分内容之间较大的水平间隔使某一部分页面单独看起来是完整的，尽管更多的内容还在页面的下面。

4、内容流的中断。

广告、内部促销或社交分享按钮向用户表明他们已到达该页面相关内容的末尾。如果广告很大的话，就会导致用户很难看到下面的内容，尤其是在屏幕尺寸较小的移动设备上，这个问题就会更严重。此外，当广告放置在内容流的一个结尾时（例如，在文章的结尾），用户就会认为下面没有更有价值的信息了（不过，例如，该页面可能仍然包含文章注释或广告下面的相关内容）。

Salon.com在主体内容的中间显示大型广告。目前尚不清楚该文章的其余部分是否继续刊登广告。

水平维度上的完整性错觉

尽管用户习惯于在网页上进行垂直滚动，但是水平滚动（或滑动）却不是一种很好的页面交互方式。因为，即使是在水平滑动手势相当普遍的移动设备上，依赖这些手势的界面也需要强大的视觉符号来引导用户与之交互的方向。

在雅虎文摘的iOS应用程序上浏览新闻类文章，用户必须通过滑动方式才能看到下一篇文章。这个手势很像从一副牌中移除上面的牌来显示下面的牌（这就是为什么这种交互模式被称为“牌组”的原因）。在这种情况下，页面缺少显示水平滑动的视觉指引符号。

在桌面上，水平导航通常与轮播相关联。提示用户如何切换轮播图，并且显示出轮播结构的其余部分内容是至关重要的。

Novartis.com.底部的圆点是较弱的轮播信号：它们不明显，导航箭头只在鼠标悬停时可见。从好的方面来看，该网站通过展示下一个(企业、职业、新闻和研究)信息的轮播图，成功的鼓励了用户垂直滚动页面。

整个网站使用水平布局的设计方式并不常见，这就要求用户使用水平滚动条的方式来查看所有内容。有时，设计师和创意企业会在他们的网站上展示他们的创意设计能力。对于主流网站来说，是不鼓励使用水平滚动方式来浏览信息的。因为，水平滚动条操作起来很麻烦，要在狭窄的水平空间内移动光标是需要持续的注意力和体力的。而使用水平滚动方式的网站可能会轻易造成相同的视觉设计错误，从而导致垂直维度上的完整性错觉。

Secondstory.com 使用了水平布局的方式。用户不清楚右边的屏幕外是否存在其它额外的内容。他们必须注意到右边的黄色箭头才可以翻页，但这是他们可能想不到的，因为这个翻页按钮隐藏在明亮的图片中，他们只能小心翼翼地用鼠标移动底部的滚动条。

确保你设计页面的沟通延续性与完整性

1、避免全屏内容。当在页面顶部使用大图、轮播或视频时，要确保页面上额外内容在首屏分割线的上方，用来引导用户进一步滚动页面。

2、要注意内容之间的分割线或巨大的留白。这些视觉效果会让用户误以为相关内容结束了。

3、避免内容流向的中断。如果你必须用广告或社交分享按钮图标来中断内容，那么就要告诉用户，额外的信息可以在页面的下方找到。

Delish.com文章中的广告前面有一个用于阅读的提示（虽然字体颜色不明显)

4、为水平滑动设计明显的提示。关键信息不应该放在轮播或任何其他水平滚动的页面中。用户经常会忽略明显的导航提示，因为这些提示所提供的信息太弱，用户不确定从额外的内容中会得到什么。当你使用轮播的时候，要想办法清楚地体现出这些额外的信息的存在：

要将屏幕外的信息显示出来；
用于说明不同轮播内容的文字标题；
提供明显的箭头控制和轮播图数量；

Netflix.com使用轮播来显示每个类别的节目。屏幕边缘节目内容的视觉表达方式（显示额外内容的一部分）有助于引导用户水平滑动来浏览屏幕外的内容。

在更多设备上测试，以确保设计元素能在不同大小的屏幕上运行。

版权由原作者所有，转载请注明~~~

nngroup

译文地址：熊猫小生

作者：Kim Flaherty

译者：熊猫小生

校对：不器

设计中的完整性错觉：它是什么以及如何避免它的出现