显式和隐式视觉提示如何帮助提高转化率

已发表: 2016-10-21

有证据表明,就注意力持续时间而言,与访问者相比,您更有可能让我 10 个月大的孩子在点击后登录页面上保持参与。

是的,你没看错。

网络用户的平均注意力持续时间约为 6-8 秒,而 10 个月大的孩子的注意力持续时间约为 60-120 秒。 这意味着我的儿子将专注于他的拨浪鼓,而不是您的访问者专注于您的点击后登录页面。

你可能会问,这有什么意义? 将访问者的注意力保持在您的点击后登录页面上足够长的时间以进行转换是一项挑战。

如果您的页面设计不佳,那么转换将变得越来越具有挑战性,因为 94% 的在线第一印象都与设计有关。 例如,如果页面混乱并且访问者无法区分一个元素和另一个元素,那么引人入胜的标题就会变得平淡无奇。 这同样适用于所有其他页面元素。

94% 的在线第一印象与设计有关。

点击推文

点击后登陆页面设计在保持访问者参与方面起着关键作用,其中空白和对比鲜明的 CTA 按钮并不是营销人员可以用来推动转化的唯一设计工具。

视觉提示也极大地有助于推动更多的点击后登录页面转化。

什么是视觉线索?

视觉或方向提示是一种 UX 设计工具,用于从字面上将您的访问者指向与您的转换目标(例如您的 CTA)不可或缺的元素的方向。 这些提示可帮助访问者浏览您的页面并保持视觉层次结构。

有两种基本类型的视觉提示:

明确的视觉提示

这些类型的提示是直接的,可以很容易地在页面上指出。 使用箭头、线条、手指和人的视线是在点击后登录页面上使用明确视觉提示的几种方式。

隐含的视觉线索

这些线索是微妙的,通常不会被游客注意到。 然而,他们在突出特定元素方面做得很好。 点击后登录页面上一些最常用的隐式视觉提示包括空白、颜色对比度和封装。

让我们看看如何在点击后登录页面上使用这两种类型的视觉提示,让访问者专注于页面足够长的时间以进行转换。

如何在点击后登录页面上使用明确的视觉提示

明确的视觉提示会迅速影响访问者在页面上的查看位置。 您可以使用箭头作为页面上的视觉提示,并将访问者引导到您希望他们在页面上的位置。

Outbrain 使用箭头和放大圆圈将访问者的注意力吸引到服务如何推广故事的形象上:

这张图片显示了 Outbrain 如何使用箭头视觉提示来吸引更多注意力到他们的产品屏幕截图。

您还可以将方向提示箭头设计为交互式页面元素,并帮助访问者导航到页面的不同部分,就像 Lumosity 所做的那样:

Boardvantage 的作用也是:

箭头还可用于将访问者引导至页面折叠下方。 我们的 Facebook 广告提示点击后登录页面采用了这种技术:

此图向营销人员展示了如何使用箭头引导访问者向下滚动页面以获取更多信息。

Strikingly 使用在表单左侧弹跳的动画定向箭头来鼓励访问者更多地关注它:

由于指示性凝视,使用视线也可作为有用的明确方向提示。

指示性凝视是一种认知偏见,它表明当我们看到有人在看某物时,我们的大脑会反射性地行动,我们也会开始看那个物体。 认知偏差使您能够影响访问者将注意力集中在页面上的位置。

这种特殊的视觉提示不仅可以让访问者看到您想要的地方,而且还为页面增添了人性化的吸引力,并为您的报价增添了情感。 视觉线索是如此有影响力和说服力,以至于总统候选人希拉里克林顿在她各自的竞选页面上使用了视线。

克林顿看着她的捐赠页面时,眼里充满了情感:

这张图片显示了希拉里克林顿如何使用她捐赠页面上的视线视觉提示来产生更多转化。

在这个页面上,她热切地看着表格,并敦促您加入官方活动:

这张图片显示了希拉里克林顿如何使用视线视觉提示将支持者引导到她的捐赠 CTA 按钮。

iCIMS 更进一步,将视觉提示加倍,使用视线和指向来鼓励访问者转换:

这张图片显示了 iCIMS 如何使用指向和视线视觉提示来生成更多的点击后登录页面转换。

那么哪个视觉提示表现更好呢? 箭头,指向,视线?

CXL 进行的研究表明,当涉及到明确的视觉提示时,箭头的表现优于人类的视线:

该图表显示,与所有其他视觉线索相比,箭头和线条的平均查看时间更长。

为了产生这些结果,眼球追踪研究和热图是数据收集的主要来源:

此热图向营销人员展示了不同的视觉提示如何对点击后着陆页转化产生积极影响。

不过要注意一点。 仅仅因为箭头在这个特定的点击后登陆页面上表现更好,并不意味着箭头将始终是最大化转化率的万无一失的方式。 与所有其他点击后登录页面元素一样,我们建议您进行 A/B 测试视觉提示,以确定这项研究是否适用于您的报价。

如何在点击后登录页面上使用隐式视觉提示

隐含的视觉提示不像箭头和指向那样直接。 这些设计元素并不直接指向特定对象。 相反,他们依靠更微妙的方法说服访问者实现转换目标。

在元素周围使用空白是一个很好的视觉提示,可以让访问者专注于该特定元素。 请注意空白对右侧文本与左侧文本的可读性的差异?

这张图片向营销人员展示了空白如何提高页面上文本的可读性并产生更多转化。

这种“负空间”有助于消除页面上的混乱,自动突出显示重要的页面元素。 DocuSign 点击后登录页面在元素周围使用大量空白,使访问者更容易专注于笔记本电脑屏幕截图和表单。 此外,它们包括一个指向潜在客户捕获表单的箭头:

这张图片显示了 DocuSign 如何使用指向点击后登录页面表单的箭头视觉提示来吸引更多注意力。

封装允许您将焦点放在页面上,即使用框或颜色来封装任何点击后登录页面元素并引起对它的注意。 该技术还可以帮助您整理页面并使访问者专注于一个特定元素。 这种设计技术还有助于在页面上建立视觉层次结构,并将潜在客户的视线引导至您想要的目标。

Offerpop 的点击后登陆页面上的表单用橙色包裹,带有黑色轮廓,这有助于它自己脱颖而出:

这张图片向营销人员展示了 Offerpop 如何使用封装和颜色对比在他们的 CTA 按钮上吸引更多注意力。

对点击后登录页面元素使用对比色也可作为视觉提示,因为对比色会将访问者的注意力吸引到特定位置。 HelloFresh 点击后登录页面上的橙色 CTA 按钮向访问者发出警告:

这张图片展示了 HelloFresh 如何使用封装和空白来吸引更多的注意力到他们的 CTA 按钮上。

您如何使用视觉营销来推动转化?

视觉营销不仅仅围绕在页面上使用视频和 GIF 展开,在点击后登录页面上使用视觉提示是说服访问者采取行动的有效方式。

不要依赖访问者的注意力来获得转化。 借助显式和隐式的视觉提示,将事情掌握在您的手中并引导访问者实现转化目标。 您可以创建对设计师友好的点击后登录页面,其中包含当今引起注意的视觉提示。 只需注册一个 Instapage Enterprise 演示。