如何在B2B网站上设计高转换行动号召按钮

行动按钮调用对B2B网站比较有用,当你真的考虑一下。这是您的网站精心布局的信息架构和清晰制定的目标的高潮:让网站访问者和导致转化。

一系列因素对创建强有力的号召性用语按钮很重要:

  • 副本
  • 颜色对比
  • 尺寸
  • 缺乏分心
  • 时机
  • 展示位置

 

图片信用

 

根据MECLABS的内容总监Daniel Burstein提到的行动呼吁:

“语言的微妙变化可以使性能发生显着变化。”

你说对了。您的B2B网站的号召性用语按钮可以通过您在设计网页时做出的具体选择来制定或打破。是否应该消除着陆页上的所有导航?你认为你需要方向线索才能使你的呼叫行为按钮更加明显吗?正如您开始希望看到的那样,您几乎可以在所有不同的元素上编写完整的教科书,以便在您的网站上设计成功的行动号召。这就是复杂的转换科学可以得到的。

但是,我们今天对您有所帮助:我们将简化并提炼出您需要了解的关于创建高转化率行动的所有信息。这就是我们的博客文章将要处理的内容。最后,您将有足够的权力自信地对您的B2B网站的行动呼吁做出正确的决定。


1.标题

当谈到让人们阅读任何东西时,总是需要成功吸引他们的注意力并吸引他们的注意力。这是通过强大的标题来完成的。

您的标题排版必须很大,以便从买方的角度阅读。然后,为了进一步突出其他所有内容(仅有助于引起买方的注意),对于标题使用不同的字体,而不是销售页面上任何其他字体的文本。

Skyjunxion上可以找到呼吁行动之上引人注目的标题的一个例子:“旅行费用高于其应得的8个理由”阐明了该优惠的内容。图像和红色按钮完成其余的技巧。

在光谱的另一端,这是一个行动号召的坏例子,它实际上有一个标题,但它完全与动作按钮断开:

图片信用

 

所以标题告诉我有关保护我的投资组合……但可点击的项目是“节省150美元”……嗯?首先,保护我的投资组合很有价值,但这与节省150美元有什么关系?它没有。这种缺乏明确的关系迫使买方(至少那些有耐心的人)阅读剩余的副本以找出所提供的东西,但即使在这样做之后也不清楚。


2.良好的复制为您的呼叫行动按钮

在您的B2B网站上复制是非常重要的,因为成功的复制会告诉您的买家他们接下来会做什么。所以它专门用于您的号召性用语按钮。它不会含糊不清,因为这会损害转换; 同时,它不能太长,因为号召性用语按钮的空间非常有限。所以你会怎么做?

请记住,您的号召性用语复制是成为转化的潜在客户与放弃您网站的潜在客户之间的差异。这是至关重要的因素; 在做出决定之前,买家最后一件事与之交流。

您的号召性用语按钮附近的微镜也是您应该认真考虑的事情。这有助于说服买家在他们实际点击“行动号召”按钮之前克服可能出现的任何最后一刻犹豫。显微镜可以像提及您的优惠免费给前100位点击的人一样简单。

关注每一个小词(认真)

对您的按钮副本所做的小改动和调整可以在转换时产生巨大的变化。根据Unbounce的说法,将B2B订单信息更改为“获取信息”的结果是转化率提高了38.26%。正如你所看到的,你不能低估呼吁行动副本中即使一个词的力量。

图片信用

在Unbounce例子中,很明显,使用“order”这个词意味着你的钱立刻离开了蝙蝠,并且有一个更长的,可能旷日持久的过程。但是,当您阅读简单的词语“获得”时,您所遇到的情况更多的是即时满足的结果,您只需接收“行动号召”按钮中提到的信息,而不必考虑金钱或时间。

PROTIPA good rule to take away from this example is to use words that convey an instant benefit for your buyers, as opposed to words that put pictures of cost and length of time in their heads. Your conversion rate will thank you.


3.颜色和对比度

你应该使用什么样的颜色来调用按钮?

颜色已被证明对消费者的行为和印象有重大影响。来自KISSmetrics的这个便捷的信息图会告诉你更多我们的意思。基本上,不同的颜色在购物者中引起不同的反应。

PROTIPYou can use this scientifically backed truth to design your call to action buttons in such a way to increase conversions like nobody’s business.

根据信息图表:

  • 红色刺激购物者的紧迫感,使其成为清仓销售的理想选择
  • 黑色是营销奢侈品的理想选择
  • 蓝色建立安全和信任,这就是银行使用它的原因
  • 绿色让消费者放松
  • 橙色是侵略性的
  • 由于其镇静作用,紫色与抗衰老和美容产品一起使用
  • 粉红色被用来引起女性的注意

尽管如此,尽管如此,你无疑注意到消费者心理中有许多不同的颜色,非常适合不同的目的。

图片信用

不过,对于号召性用语按钮,呼叫操作按钮没有单一颜色,每次都可以提高转化率。这是真的。尽管Unbounce出现了一个着名的错误,那就是在五年前预测未来呼吁行动的按钮将会是BOB或橙色的大按钮

您无法在整个互联网上看到针对B2B,B2G或B2C的橙色呼叫行动按钮,原因是存在大量影响您的行动呼叫按钮的转化率高低的因素。

Convert XL着眼于一系列不同的研究,以一劳永逸地确定呼叫行为按钮的最佳颜色。结论?呼吁行动按钮的更好转化率并非基于某种特定颜色比其他颜色效果更好,而是基于视觉和信息层次结构,以及采用有效和鲜明的对比使呼叫行动按钮脱颖而出首先。

在下面的章节中,我们将讨论这个设计按钮的非常重要和有趣的方面。

每次操作最佳的呼叫按钮都没有单一颜色; 信息层次和鲜明对比是CTA成功的更好预测因素。

对比:不要让您的CTA与您的品牌相匹配; 让它与之形成对比。

对比对帮助吸引您的号召性用语按钮至关重要。由于您的主页或登录页面的使命将是让用户进入调整所需按钮的最后一步,因此只有让您的买家脱颖而出才有意义。这是使用对比度使呼叫动作按钮显着的全部要点

对比也应该被看作是网页基本视觉层次结构一部分。毕竟,您希望引导买家的眼睛和注意力,如激光束,一直到您的号召性用语按钮。对比 – 不仅可以使用颜色,而且可以使用形状,大小和图案的对比 – 通知买家哪些页面的哪些部分比其他部分更重要,这是他们注意的提示。

PROTIP

Call to action buttons should be in a louder and more vibrant color than the background of your page. Always.  DO NOT play branding games with your CTAs.  It’s not about maing it look pretty, it’s about making it noticeable.

这个 CareLogger的例子中,这项服务使糖尿病患者能够更有效地追踪他们所有的重要信息,如血糖,药物和碳水化合物的摄入量。在该公司将其号召性用语按钮从绿色更改为红色后,在其主页的白色背景下突出显示,转化率提高了34%。不错,至少可以说。 

图片信用 

现在,为什么会发生这种情况?  那么,他们在绿色/灰色页面上有一个绿色按钮……没有足够的对比。  红色的不是更多,因为它是红色的……但是因为它与页面上的颜色形成对比;红色按钮是整个页面中唯一的红色的东西。

在另一个例子中,Mitchell咨询服务集团在其“职业”页面上做了。人们可以通过输入关键字并从下拉菜单中选择他们的选择来搜索公司的职位空缺。

但是,问题在于“行动号召”按钮,因为它正好融合到了页面的背景中。而不是使用色彩对比来吸引眼球,以便求职者可以轻松完成操作,而按钮则是简单的灰色。

 

图片信用 

对比的形状和大小

形状和大小也可以用来展示对比。在Cim – Team的概述页面上,我们的眼睛立刻注意到右侧的强烈对比的号召性用语。

 

图片信用 

 

右侧的“行动号召”按钮使用  大小和形状作为对比,这就是为什么它是本页面中查看的第一个项目:

 

你会看到对比度的巨大影响吗?抓住你眼睛的前几个元素特别是那些有对比的元素(看红点)。当买方扫描页面时,其中在该屏​​幕上注视的其他元素将是开头段落,标题和正文拷贝的字体大小的差异。这种有效的对比也使买家更容易阅读这家公司是谁以及它做了什么。  此外,“我们的保证”标题使本节非常可扫描。

不具备对比度的页面上的呼叫按钮可能无法从页面的其余部分中突出显示。本主页上的按钮就是这种情况:

图片信用

4.将主要呼叫与次要呼叫区分为行动

在每个转换页面中,应始终只有一个转换目标 – 对此毫无疑问。每个着陆页都应该是这种情况。

但是,在某些情况下,您需要向用户展示多个选项,主要是因为该页面已呈现给多个受众群体,并且您正尝试在不同情况下向买方展示不同的用户流量。仍然在这种情况下,我们建议您定义您的主要和次要目标。

主要和次要号召性用语的典型例子是在主页横幅中:

建立层次结构时,请注意以下几点:

  • 在主要颜色和次要颜色之间建立清晰的层次结构。您无法创建两个按钮看起来平等或边界相等的情况。
  • 为主按钮使用鲜明的色彩。  认为主要是您在整个页面层次结构中首先要做的事情之一。它不会显得沉闷。
  • 对于辅助CTA,请使用与主要CTA对比的颜色。中学仍然是一个CTA,它仍然需要从页面中脱颖而出,只是不如初级。
  • 避免在主要和次要操作上使用幽灵按钮

5.位置,位置,位置:呼叫操作按钮的位置

如果您实际将您的号召性用语定位到行动按钮,也会对您获得的转换次数产生巨大影响。

在折叠之上

如果你的目标是把你的号召性用语按钮放在折叠的上方 – 尽管网络正在发展,仍然可以找到很多按钮,但你不能让它独立存在。它必须得到您网页上其他重要元素的支持。以下是您应如何处理您的展示位置的方法:

  1. 把一个巨大的,引人注目的标题放在最上面
  2. 在它下面包括一个免费的,更短的子标题
  3. 将价值主张与一些关于您的产品或服务的描述性要点放在一起
  4. 除了您的价值声明和标题之外,请将您的号召力行动起来
  5. 第五,在你的呼吁行动中包含显示特别报价或紧急声明的显微镜(有些人也称之为“ 点击触发 ”,原因很明显)

在折叠下方(通过使用AIDA)

当然,您也可以在折叠下放置您的号召性用语按钮,这可以同样有效。在这种情况下,AIDA不是Giuseppe Verdi的歌剧,而是一个代表注意力,兴趣,欲望和行动的缩写。AIDA的基础是相信您的买家会在最终做出决定的过程中经历一系列线性步骤(您的行动呼吁会促使他们这样做)。

PROTIPOn a homepage or landing page, you’ll have to use directional cues when you’re working with longer forms on a lead-capture page. On pages that have longer forms, your call to action will have to be placed below the fold, which is why directional cues come in handy so much. Your best bet would be using a can’t-miss arrow that guides your buyers to scroll down the fold.

要让AIDA工作,您必须遵循以下步骤:

  • 注意:首先,您可以通过页面顶部的巨大而迷人的标题吸引买家的注意力
  • 兴趣:第二,通过在标题下以一种引起他们兴趣的东西(比如视频)的形式将他们的问题与他们的问题联系起来,从而获得购买者的兴趣
  • 欲望:第三,在产生兴趣的元素之下,你明确了你的产品或服务的特点和好处,从而激发了他们的愿望
  • 行动:最后,将有效的号召行动置于折叠之下,因为它完美地包含了您在页面上讲述的故事

以下是呼吁行动按钮摆放位置的大图:

  • 只有在您的配角(标题,副标题,价值主张,要点)到位后,才能将您的号召性用语按钮
  • 在更长的页面上合并多个呼叫操作按钮
  • 如果您的号召力低于折叠次数,则可以使用定向提示(如果您的号召力超过折叠次数,您仍然可以使用它们,但不是那么重要)
  • 使用讲故事技巧充分利用AIDA引导买家采取行动呼吁按钮

6.方向线索

定向线索一直是真正有效的主页或登录页面上的支持者,因为它们可以轻轻推动买家进行转换。方向暗示既可以是隐式的,也可以是明确的。

隐式方向提示包括:

  • 查看方向
  • 颜色
  • 视觉加权
  • 重复颜色,大小和形状
  • 优先级

明确的方向提示包括:

  • 箭头
  • 指着手指
  • 人们或面对呼唤行动的人们(肢体语言)
  • 曲线



图片信用 

 

当您的方向提示不够生动或未能指向特定的号召性用语按钮时,则会出现问题。毕竟,方向提示是为了帮助您使页面的用户体验更加清晰

在Pontchartrain合作伙伴的主页上,买家可以在页面中间看到方向线索。最大的问题在于它们的颜色微弱,不能说明它们指向的是什么。只有当你点击它们后,你才会意识到它们提供了关于公司提供的特定服务的更多信息。


图片信用 

7.可用性

启示是一个对象或环境上的操作的可能性。其他含义已经形成,主要是误解的结果。心理学的原始定义包括所有可能的物理行为。

当这个概念应用于设计时,它也开始只涉及人们意识到的那些行动可能性

设计Call-to-Action时最重要的是按钮:

  1. 使用户对期望控制的感知:  这是按钮给用户的控制,很容易被察觉:“我可以在这里做到这一点”
  2. 改进所需的操作发现性:  也就是说,它允许用户(正确使用时)更好地了解点击后会发生什么。

请记住,最重要的原因按钮不会被点击是不确定的,或者缺乏清晰度:如果用户不确定点击后会发生什么,他很可能不会点击。清晰度胜过一切,并且可供性可以帮助您提高清晰度。

B2B网站上最常见行为的一些常见功能包括:

下载东西

   将用户发送到其他页面

   订阅一些东西

   播放视频

   通过邮件联系

   分享到社交媒体

   发送一些东西给某人

   安排一些事情,或注册一个定时事件

    电话联系信息

    立即与我们聊天

下面是一个按钮中的功能如何显示的例子

您可以在fontawesome.io中找到更多图标,但我们发现这些是B2B网站上最常见的事件。

8. STP原则

建立在可供选择的想法基础上,对于更具体的要约,确保遵循STP。它代表“显示产品”。您可以在靠近实际的号召性用语按钮处添加图片或图形,突出显示您正在宣传的内容。这为买家提供了更强大的体验,因为他可以很容易地直观地看到他点击通话行为按钮后会收到的内容。

这是一个小例子:

这是一个好行动,对吧?清除复制,方向提示…

现在怎么样:

 正如你所看到的,PDF小图标为这个call to action按钮创建的期望添加了一个完整的其他维度。它不仅告诉你你会得到什么,它会显示你。

获得差异?  这是STP原则。  如果你有东西要展示,请展示它!

结论

现在,您拥有了所有需要的功能,以便在B2B网站上成功定位您的号召性用语按钮。

从这篇博客文章中要记住的一件事是,您的号召性用语按钮是转换事件的转折点。它必须可见; 它的作用不是“匹配”你的品牌。“

它的工作原理是,一个经过深思熟虑的设计和呼叫行为按钮的放置可以获得转换。在您阅读时,需要进行大量深思熟虑的分析以及考虑许多不同的因素才能找到行动按钮的完美位置。当然,即使你对此感觉正确,并且按钮可以让你获得一些转换,但你仍然需要不断地测试它,因为你不可能100%确定事情在将来不会改变。

尽管尺寸很小,但行动号召键是B2B网站中的关键转换点:您的主页,定价页面和着陆页。您的网站上的所有内容都支持它,因为您希望自己的潜在客户了解页面的目标是点击“号召性用语”按钮。只有当他们有你的B2B网站 – 你的设计和开发过程 – 实际上完成了它的工作。