人们通常不会阅读网页、应用程序、甚至文章或文本中的每一个单词,相反,他们通常扫描——因为他们在许多网站上的经验告诉他们这一点扫描可以提供几乎相同的价值(即信息量,信息量),具有显着较少的时间和精力。(记起人们天生高效,为了实现目标,他们会尝试投入尽可能少的工作.)

页面的视觉组织方式对人们浏览内容的方式起着很大的作用。如果页面布局允许用户快速识别与他们需求相关的基本信息,用户将节省大量的精力,并能够快速实现他们的目标。但是,另一方面,如果布局没有强调重要的信息,人们可能会错过它,他们可能会离开网站。

本文关注的是当页面上的信息被分成清晰的标题和副标题时发生的扫描模式。

定义字体千层蛋糕扫描模式主要是固定在页面的标题和副标题上,偶尔故意固定在(正文)文本之间。在眼球追踪热图或凝视图中,这种模式看起来大致像一组水平条纹和它们之间的空白,类似于一层蛋糕(蛋糕在一层,然后是糖霜,然后是蛋糕,等等)。

除了阅读每一个(或几乎每一个)的单词,层蛋糕模式是扫描页面的最有效的方法:大多数时候,它确保用户找到他们的信息寻找(如果它出现在页面上)。

副标题是粗体,比正文更大。
凝视图显示了层饼扫描模式的一个例子:大多数固定在文章的副标题上。凝视图显示的是一名研究参与者在Techcrunch.com上阅读一篇文章时的眼球运动。他扫视着过境当局把事情办妥了副标题在视觉上与正文不同,请阅读下面的正文。然后他浏览了更多的副标题过境系统具有创新需要成功的创新 - 具有大规模规模的内置用户群,并且存在期望差距。描述性副标题使用户能够轻松跳过相关正文中不太有趣的内容。
眼睛跟踪热图将黄色的“热度”覆盖在页面的副标题上。
从9个研究参与者获得的层蛋糕眼镜热线图表明,它们主要在BacnyC.org页面上的副标题(和按钮)上。
段落,标题,标题上的蓝色点。
我们在2004年的一项研究中首次记录了分层蛋糕模式。在该原始研究的本例中,用户对狗训练的一般主题感兴趣(但不在页面的特定部分)扫描www.dogbreedz.com上的副标题。副标题上方的间距和副标题文本的粗体使得在正文文本块之间很容易找到副标题。

如何创建副标题,促进有效浏览

我们说该层蛋糕是最有效和最有效的扫描模式之一。但是,如果(1)他们可以轻松识别副标题,并且(2)副标题正确总结与它们相关的文本部分的索引才能识别副标题。让我们检查设计人员如何创建支持两个帐户上用户的子标题。

有效的副标题的视觉指导

在副标题的视觉设计中有两个重要的元素:

  1. 标记副标题,使它们在视觉上相对于其他文本突出一致,可预测的方式
  2. 明确说明正文与副标题的对应关系

许多视觉文本效果可以用来使副标题脱颖而出。例如:

  • 不同颜色
  • 更大的大小
  • 不同的字体
  • 效果如粗体,阴影或下划线(但仅在副标题也是一种超链接时使用下划线)
  • 效果组合:上述视觉治疗的混合物

小心不要使副标题比正文更亮或更大,以致于它们看起来很可笑看起来像促销或广告而不是页面内容,并导致用户忽略它们。

在www.chao.org上的一个页面上,副标题很容易被发现,因为它们使用了与正文不同的字体。正文文本以深灰色Arial-body字体显示,而副标题则以粗体、绿色和Nunito字体显示,比正文文本大。
www.wegmanns.com上的一个页面通过对正文、副标题和三级副标题使用不同的字体,使副标题易于识别。正文文本出现在源代码Sans-Pro中;副标题出现在Archivo-nerrow中,粗体大得多;三级副标题也出现在Archivo-nerrow中,但粗体大小与正文相同文本。
在www.edwardjones.com上的一个页面以比前面的例子更微妙的方式差异化副标题,但仍然使副标题易于扫描并拾取。该站点使用相同的字体(proximanova)(proximanova),适用于身体文本和副标题,但副标题是粗体且大于正文文本的。这些视觉处理足以使副标题看起来与身体文本不同。

与视觉设计师和进行可用性测试迭代想法,得出一个呈现副标题的好方法。然后为你身边的所有文本创建一个视觉设计风格指南,特别是正文、副标题、页面标题和链接应该如何设计。

有效副标题的内容指南

就像IA.反映网站的信息结构迷你IA.,由所有的页面标题和副标题组成,反映了页面的信息结构。副标题使浏览页面变得容易,就像全局导航使浏览站点变得容易一样。好的副标题可以帮助用户确定一个章节是否值得阅读,好的类别名称可以帮助用户理解他们应该在哪里导航来完成他们的任务。

内容作者和编辑需要通过以下方式为用户提供清晰的内容层次结构:

  • 对页面上的内容进行优先级排序和排序:组织文本所以这对读者来说是有意义的。
  • 简洁:删除多余的内容。
  • 分块:打破内容,如段落或列表。将相关内容放在一起。

一旦完成了这些事情,就会改进副标题中使用的单词,因此它们在扫描时最具信息量。制作副标题:

  • 描述性的所有这部分的主题,以及只有本节中的主题:使用包含与副标题相关的所有正文的词语,这样用户就可以对该部分的所有内容有一个大致的了解。
  • 描述性的只有这些部分的主题:简明的并且只描述正文中出现的与副标题相关的概念和词语。不要把副标题写得太宽,以至于它似乎包含了正文中的内容
  • 用一些最重要的词来引导:带有信息的词能让人们马上知道副标题的重点。
  • 可以理解:使用清晰的语言,以便用户在扫描标题时能够快速理解其含义。

块和标签所有的页面,而不仅仅是文本:层蛋糕模式的衍生物

有系统布局的页面易于浏览;而无序和不可预测的页面则不然。当布局由一个或多个文本列组成时(如上面的Edward Jones示例),副标题允许用户快速确定哪个文本与哪个副标题相配。然而,当页面使用卡片或者其他不规则格式,使用the是很重要的完形邻近原则标明副标题或标签与正文或段落搭配。

仍然可以通过以下与文本布局的原则相同的原则来进行混合内容的页面仍然可以扫描,具体:

  1. 确定喜欢的内容并将其放在一起。
  2. 从视觉上区分内容块。使用以下方法执行此操作:
    1. 一种网格或其他图形系统,在每个块(如卡片、横幅)周围包括边框或彩色背景。
    2. 块之间适当数量的空间
  3. 适当时,用清晰的副标题标记每个内容块。

当页面以这种方式设计时,用户通常会扫描一系列迷你层蛋糕图案,寻找指示内容部分的文本。

几年前www.gateway.com就做对了,它使用空白和灰色边框来包围文本部分,用更大的全大写文本来包围副标题。
在www.nordstrom.com上购买凉鞋时,用户可以根据使用的间距,轻松识别出哪些文字和颜色样本与哪只鞋相关。鞋子上方的空间和下方的空间共同作用,向用户传达上面的文本与鞋子无关,但下面的文本与鞋子相关。这样的布局支持快速浏览鞋子的价格和颜色——这两者在电子商务中都是重要的任务。
图像与其关联文本之间的间距非常小,其中图像与未关联文本之间的间距(分别位于右侧和下方)更大。这使得区分哪些图像和文本是相关的变得更容易。凝视图显示用户正在查看图像及其相关文本。他没有查看图像和无关文本,也没有查看文本和无关图像。
用户在阿拉伯网站上扫描了一个页面超级科拉。图像和相关文本的分组促进了扫描,允许用户快速识别哪些内容以及哪个图像。具体地,在屏幕截图的顶部,与图像相关联的文本出现在其左侧。在页面的底部部分,与图像关联的文本出现在它下面。
当图像上方和下方的文本片段看起来与该图像等距离相比,用户难以告诉哪些内容与图像相关联。在芝加哥论坛报的网页上的凝视图中,用户查看了图像(上),下面的文本,然后是文本下方的不相关的图像,然后返回到顶部图像之间的文本。BackTracking表示用户需要修复几次以决定文本与之使用的图像。
《芝加哥论坛报》(Chicago Tribune)网站上的另一个页面则混合了文字和视觉效果。副标题让用户更容易决定哪个文本配哪个图像。
虽然www.bacnyc.org页面的工作人员页面被组织在副标题的信息中组织,但可视化实现难以扫描。首先,它们下面的子标题和名称以相同的字体(相同的字体,大小和粗体)出现。其次,内容块之间的间距不规则,使页面不可预测。在凝视图中,我们看到用户跳过页面顶部的子标题,但是在董事咨询委员会的页面底板上看较大字体子标题。用户看一些名字,但没有其他人,并以看似随意的方式跳过内容的块。

层蛋糕模式与f模式

虽然我们同时发现了f型和层状蛋糕型,但是F-Pattern.不应该是两者中更臭名昭著的一个。与f模式不同,它通常不能有效地从文本中提取正确的信息,layer-cake模式可以引导用户到页面上的正确位置(前提是标题对下面的内容有意义并具有代表性)。一旦人们确定了感兴趣的部分,他们就可以仔细阅读。

f模式

千层饼模式

页面特征

文本的列与小文本脱颖而出(例如字幕,内容大块,子弹,大胆,下划线)

标题和副标题的页面

效率

低的

用户行为

眼睛完全跳过文本的文本如何在列中流动。

眼睛直接扫描到标题,如果有趣或与他们的目标相关,可以读取相关的文本体。

效果

人们在不经意间错过了有意义的信息,并且不知道他们这样做了。

人们通过将注意力转移到相关的页面部分而跳过不相关的部分来节省时间。

www.vogue.com上的一篇文章没有任何副标题,这使得它很难被浏览。以这种方式排版的文本通常以f模式扫描。

总结

对内容进行分块并指定清晰、描述性的副标题,这些副标题与页面上的其他文本和内容不同,可以成倍地提高内容的可用性,因为它们支持层饼扫描模式,而层饼扫描模式与相对的F-模式不同,它允许用户快速识别需要的内容,从而提高用户的效率与他们的任务无关。

有关阅读和扫描的更多信息,请参阅我们的完整研究报告,“bob体育手机人们如何在网上阅读:眼球追踪证据”。