如何使用 F 模式提高转化率

已发表: 2017-01-26

创建您的点击后登陆页面以包含所有重要的点击后登陆页面元素很重要，但同样重要的是它们的顺序和位置——点击后登陆页面的布局。

在设计您的点击后登录页面布局时，必须考虑访问者最有可能查看您页面的方式。 承认我们倾向于从上到下阅读是让访问者专注于您希望他们做的事情的良好开端。 通过了解他们的视线可能会去哪里，您可以创建视觉层次结构并将您的 CTA 放置在他们转换的最佳位置。

创建视觉层次结构并将您的 CTA 放置在访问者转换的最佳位置。

点击推文

也有广泛的研究来支持这一点。 2006 年，Nielsen Norman Group 进行了目前最有用、引用次数最多的眼动追踪研究之一。 在研究期间，他们检查了 232 位用户如何查看数千个不同的网页。 调查结果得出结论，用户的主要阅读行为在不同的站点和任务中相对一致。 用户阅读 F-Pattern 布局。

什么是 F 模式？

F-Pattern 是我们在线阅读内容时眼睛移动的方式。 在几秒钟内，我们的眼睛以惊人的速度在网站的副本和其他视觉元素上移动，按以下顺序扫描页面：

  • 一、跨页顶阅读重要标题
  • 然后，在页面左侧向下查看数字或项目符号
  • 最后，再次跨页阅读粗体文本或副标题

下面的三个热图来自三个不同网站的用户眼动追踪研究。 颜色键如下：

  • 红色 = 观看次数最多且最受关注
  • 黄色 = 一些观点，但较少固定
  • 蓝色 = 最少观看且几乎没有任何注视
  • 灰色 = 几乎没有任何观点和固定

这张热图图片向营销人员展示了人们如何倾向于阅读在线内容以及如何相应地设计点击后登录页面。

请注意，F-Reading 模式更像是一个粗略、概括的轮廓——不一定是精确的 F 形。 另外请注意，F-Pattern 设计并不像传统的 F 那样将自己限制为两个水平杆。

有时用户只阅读一条水平线，使图案看起来像一个倒置的 L。有时他们会阅读页面的第三部分，使设计看起来更像 E 而不是 F。 ，如果您的点击后登录页面较长，您需要包含两个以上的词干，以帮助创建人们更有可能遵循的视觉层次结构。

F 模式如何应用于点击后登录页面

设计具有有意流程的网页很重要。 如果没有特别放置任何东西来吸引观众的注意力，他们的眼睛会自然地在 F-Pattern 设计中的内容丰富的页面上移动。

F-Pattern 设计最适用于文本密集的页面——例如博客文章、搜索结果页面、较长的销售页面等。然而，这并不意味着你不能设计短格式的点击后登录页面F-Pattern 布局。

使用眼动追踪研究的结果，您可以战略性地设计任何点击后登录页面，以便最重要的元素正是访问者最有可能关注的地方。

请记住，在浏览页面的其余部分之前，观众的眼睛几乎总是从页面的左上角开始。 因此，如果您的点击后登录页面很忙，并且您希望访问者立即注意到某个特定元素（例如您的报价的倒计时），请务必将其放置在左上角的部分。 然后，用清晰的视觉层次结构和将观众引导至 CTA 的流程来设计点击后登录页面的其余部分。

忽略 F 模式的点击后登录页面

Pest Exterminator 创建了这个点击后登录页面，它不遵循 F-Layout。 它缺乏任何视觉层次结构：

这张图片向营销人员展示了 Pest Exterminator 如何未能使用 F-Pattern 布局，并且可能会花费自己的转换成本。

你的注意力首先去哪里？ 图片？ 折扣？ 一种形式的字段？ 底部的三个优惠？

你的眼睛不会被某个特定的地方所吸引。 有太多事情将您的注意力拉向几个不同的方向。 每个元素都经过格式化以吸引尽可能多的注意力，这使它们都相互竞争。 因此，访问者很难确定页面的主要目标，而且 Pest Exterminator 可能难以产生转化。

现在让我们看一些遵循 F-Reading 模式的点击后登录页面示例。

请记住，对于较短的点击后登录页面，我们显示了整个页面。 对于较长的页面，我们只显示在首屏。 此外，列出的一些品牌可能会使用不同于下面显示的版本的替代版本对其页面进行 A/B 测试。

遵循 F 版式的点击后登录页面

多维科

这张图片向营销人员展示了 Dovico 如何使用 F-Pattern 布局让访问者专注于免费试用号召性用语。

上面的 Dovico 点击后登录页面采用了 F-Pattern 网页设计最佳实践。 请注意每个重要组件如何完全沿着 F-Pattern 路线定位，访问者在查看此页面时自然会看到：

  1. 观众将首先查看页面的左上角，在那里他们会看到公司徽标。
  2. 沿着第一个水平杆移动，他们就会来到女人的笑脸。 这里特别有趣的是，F 角向下倾斜到她的脸，而不是直接穿过电话号码。
  3. 将页面左侧向下移动到下一个水平词干，观众会将注意力集中在标题和副标题上。
  4. 最后，他们将沿着垂直主干继续 F 模式，在那里他们将来到 CTA 按钮，这是点击后登录页面的主要目标。

像这样沿着 F-Layout 放置最重要的点击后登录页面元素有助于优化 Dovico 的页面并说服访问者对报价采取行动。

动态收益

这张图片向营销人员展示了 Dynamic Yield 如何使用 F-Pattern 让访问者专注于产品演示号召性用语。

Dynamic Yield 的点击后登录页面也遵循 F-Pattern 布局，但由于它们的名称和徽标是折叠上方最小的东西，因此观众的眼睛可能会从不同的位置开始：

  1. 他们可能会首先被页面标题所吸引，因为字体更大，而且有一部分是粗体的。
  2. 接下来，他们将沿着第一个主干移动到右侧的图像，完成第一个水平主干。
  3. 向下扫描垂直主干，观众将阅读副标题。
  4. 继续往下看，亮蓝色的 CTA 按钮很可能接下来会吸引访问者的注意力。
  5. 在 CTA 按钮之后，客户徽章充当附加主干，页面以类似的方式在折叠下方继续。

联合脊骨疗法

这张图片向营销人员展示了 The Joint Chiropractic 如何使用 F 模式让访问者专注于转换。

由于 F-Pattern 设计并不总是必须遵循传统的 F 形，请注意联合脊椎指压治疗点击后登录页面如何具有相当多的水平词干：

  1. 与 Dynamic Yield 类似，标题以 F-Pattern 开头（并继续以表格形式向右）。
  2. 其次，使命陈述（比副本的其余部分印刷更大）落在下一个词干上。
  3. 最后，The Joint Chiropractic 的图像和大胆的好处构成了模式的最后一个主干。

尽管词干数量较多，但该页面在创建时考虑了 F-Pattern 网页设计最佳实践 - 使访问者可以轻松跟进并专注于点击后登录页面的最重要部分。

波士顿环球报

这张图片向营销人员展示了波士顿环球报如何使用 F-Pattern 布局让访客专注于促销活动。

波士顿环球报的点击后登录页面不遵循典型的 F 形，这最终有助于他们说服访问者在促销活动中进行转换：

  1. 从左上角开始，访问者首先会看到报纸的标志。
  2. 徽标正下方是标题，然后是沿同一水平主干的图像。
  3. 沿着垂直的主干继续向下，访问者会注意到亮绿色的 CTA 按钮。
  4. 如果他们选择继续深入垂直方向，他们将了解在注册无限制访问时可以期待什么。

轮到你使用 F-Pattern

包括所有必要的点击后登录页面元素对于转换很重要，但它们的布局也同样重要。

F-Pattern 设计可帮助您建立视觉层次结构和有意的流程，让访问者专注于特定元素。 如果您可以让他们遵循您想要的路径，他们将不太可能反弹，而是更加投入并在您的页面上采取行动。

记住这些示例后，轮到您将 F-Layout 付诸实践。 使用 Instapage 创建您自己的专业点击后登录页面，立即请求企业演示。