• 中文案例
  • Work
  • Blog
  • About
  • Resume
Menu

Ke Lyu

  • 中文案例
  • Work
  • Blog
  • About
  • Resume

How to Generate Leads on Your Site — Display CTA Button at the Right Place

August 24, 2020

The first step for encouraging people to sign up for email newsletters is to make people aware with a visible sign-up button.

Sometimes we want our visitors to subscribe to the newletter, sometimes we want our visitors to download the ebook, and sometimes we want our visitors to try the demo. All these means we want every visitor on our site to click that CTA button and become potential clients.

But getting people to do what we want can be tough. Here I’d like to summarise different solutions to get visitors click that CTA button. There are multiple solutions to make a CTA more noticeable such as attractive headline, animations, colour contrast, interactive form, etc. Those can really make a difference. However, in this article I want to solely focus on where and in what form we can display the “advertisements” for getting visitors.

Popup Overlays

KarmaKoma

KarmaKoma

I know there are many books and articles talking about using popup overlay is a really bad UX solution to get users’ attention. But it works. Although you may not notice the exit rates are also high and the more visitors you attract, there are more you push away.

So be very careful choosing this sulotion. If you are so desperate to get visitors, do it creatively. Instead of pop up the overlay immediately, let visitors stay on the page for 5 seconds and then pop up. So visitors may already get into your story and are willing to take actions.

Another way of using popup is instead of full screen overlay, make the popup somewhere without interrupting users’ reading experience. You can call it Unobtrusive Popups.

Unobtrusive Popups

Popup from Getproper, it covers a part of the content

Popup from Getproper, it covers a part of the content

Popup from Precision Marketing Group, it is at the bottom right so it doesn’t cover any content

Popup from Precision Marketing Group, it is at the bottom right so it doesn’t cover any content

An optimised version of popup overlays in terms of the UX. It is still eye-catching but least disturbing to the visitors. It will be less annoying than a full screen overlay that is exploded in front of your face.

The unobtrusive popups could be directly displayed somewhere or slides in from the edge once a visitor enters the page. It is normally floating on the screen so whenever visitors feel the content is valuable enough, they can make the action anywhere on the page.

Header CTA Button

Bloomberg

Bloomberg

The New York Times

The New York Times

Another “lazy” way to get visitors subscribe to you site is to put that CTA button on the header row. When visitors arrive at your site, they’ll browse left to right, top to bottom. Most visitors follow this behavior if they are not attracted by a big intriguing image on the screen, but it is certainly what a visitor will do if it’s not one’s first move.

The advantage of this is that the header row is most likely across the site. So it is not limited to any particular page. The drawbacks are also obvious. Due to the size of the header row, you cannot make it visually appealing. The copy will certainly be simple like Subscribe, Free Download, or Try Demo, etc. Nonetheless, for any visitor that do want to subscribe, the button is there. Make sure it is visually different from any other links.

In the Middle of the Content

Smashing Magzine

Smashing Magzine

TechCrunch

TechCrunch

This is especially useful when you have a long content. You have a lot of space to make a creative design to attract visitors to click the CTA button. It is also less disturbing and as visitors have already read part of your content, it is more likely that they’ll take what you are offering here.

Bottom of the Page

Peloton

Peloton

All the solutions above will more or less disturb visitors reading experience, but this solution is 100% trouble free. Give you and also your visitors a chance to subscribe once they reach the bottom of the page. 

The drawback is that visitors have to scroll to the bottom to be able to see this, so make sure it is applied to those with less content and you may want to use this solution together with other options. Nonetheless, there’s no harm in putting it at the bottom since it doesn’t interrupt the experience at all.

Exit Intent Popup

Ryan Robinson Exit Intent Popup

Ryan Robinson Exit Intent Popup

Very much like the popup overlay, just it is triggered when visitors decide to leave your site. We mentioned that popups are annoying, but some may argue that the visitors are leaving anyway, it’s your last chance to get their attention before you never see them again. But still, use it as if you are desperate to raise your conversion rate.

Summary

I’ve listed some commonly used solutions to display the CTA button. Some are disturbing but effective, while some are less effective but user friendly. Balance is the key. Other than that, choose a solution or a combination of solutions that suit your site, then work on the content, be creative, make it what visitors exactly want, then you’ll get rewards from the increasing conversion rate.

Chinese Version: 如何让你的网站获得潜在客户-在正确的地点展示CTA按钮

Tags UX, Lead Generation, CTA

如何让你的网站获得潜在客户-在正确的地点展示CTA按钮

August 24, 2020

想要用户订阅你网站的电子邮件第一步是让用户能够发现你的订阅按钮。

有时候我们希望用户能够订阅网站的电子邮件,有时候我们希望用户能下载网站的电子书,有时候我们又希望用户能够试用我们的产品。所有这些都意味着我们希望访问网站的每个用户都可以点击我们为其量身定制的CTA按钮并成为我们的潜在客户。

但是,让用户按我们的想法去做不是一件容易的事。在本文中,我想总结一下不同位置展示CTA按钮的方式。有多种方式可以使得CTA更加引人注目,例如夸张的标题,有趣的动效,色彩对比,交互形式等。这些方法确实能够产生效果。但是在本文中,我想把重点放在网站的“广告”可以在什么地点展示从而吸引到用户点击。

全屏弹窗

KarmaKoma

KarmaKoma

我知道有很多书和文章里都有提到,通过全屏弹窗来吸引用户注意在UX的角度来看是非常危险的。但这确实有效果。尽管你可能不会注意到退出率也同样很高,并且在吸引了更多用户的同时,也让很多用户决绝地离开了你的网站。

因此,在选择这种方法时要非常小心。如果你非常急于吸引用户,最好选择更有创意的方式来使用全屏弹窗。例如,让用户在页面上至少停留5秒钟后再弹出窗口,而不是立即弹出。这样,用户可能已经阅读了部分网站的内容,更有可能为之采取行动。

另一种使用弹窗的方法是,与其使用全屏弹窗,将弹出的窗口放在不影响用户阅读体验的位置。你可以称这种弹窗为“非模态弹窗”

非模态弹窗

Getproper的弹窗,遮盖住了部分内容

Getproper的弹窗,遮盖住了部分内容

Precision Marketing Group的弹窗,位于右下角,没有遮挡任何内容

Precision Marketing Group的弹窗,位于右下角,没有遮挡任何内容

作为全屏弹窗的UX优化版。非模态弹窗仍然引人注目,但对用户的干扰较小。这比全屏弹窗在你面前炸开要好多了。

非模态窗口可以直接显示在页面某处或从边缘滑入。同时窗口一般会浮动在页面上,这样只要用户觉得内容有足够的价值,他们就可以在页面上的任何位置点击CTA按钮。

导航栏CTA按钮

Bloomberg

Bloomberg

The New York Times

The New York Times

让用户订阅的另一种“懒惰”的方法是将CTA按钮放在导航栏上。当用户来到你的网站后,大多数用户都会遵循从左到右,从上到下的浏览行为,除非页面上有刻意吸引人的巨幅图片将用户视线所引走。但是,哪怕导航栏不是用户第一时间注意到的,那也会是第二个注意到的区域。

这样做的好处是,同样的导航栏基本上会出现在网站的所有页面。因此,它不会局限于某个特定的页面。当然缺点也很明显。由于导航栏的大小及功能限制,按钮很难做到在视觉上非常突出。文案也会较为简单,例如“订阅”,“免费下载”或“试用”等。尽管如此,对于确实希望订阅的用户来说,按钮始终就在那里。同时记得确保按钮在视觉上与其他任何的链接都不相同。

在内容之间

Smashing Magzine

Smashing Magzine

TechCrunch

TechCrunch

当你网站的内容较长时,这种方式会更加有效。在这里我们有大量的空间来进行创意设计,以吸引用户点击CTA按钮。同时也减少了对用户的干扰,而且用户已经看过了网站的部分内容,因此他们很可能会接受在这里提供的“广告”内容。

页面底部

Peloton

Peloton

之前的方案都会或多或少地干扰到用户的阅读体验,但是这个方案完全不会打扰到用户。当用户达到页面底部时,给你的用户及自己一个让他们能够订阅的机会。

这个方案的缺点在于用户只有滚动到页面底部后才能看到我们想要宣传的内容,因此尽量将其应用于内容较少的页面,并且你可能会希望将此方案与其他方案一起使用。尽管如此,将其放到页面的底端也没有什么害处,毕竟它对阅读体验没有任何负面影响。

退出弹窗

Ryan Robinson的退出弹窗

Ryan Robinson的退出弹窗

退出弹窗本质上和全屏弹窗是一样的,交互上的唯一区别在于当页面检测到用户离开的意图时即会触发。我们提到过弹窗会让用户感到不快,但是有人会争论说用户已经决定了要离开,那么这是你获得用户的最后机会。但仍然,只在你极其迫切提高转化率的时候考虑使用它。

总结

我在本文中列出了一些CTA按钮常用的展示方案。其中一些容易打扰用户,但有效。而有的效果没那么好,但不影响用户体验。平衡在这里是关键。除此之外,选择适合你网站的方案或组合方案,然后优化内容、发挥创意、使其针对来访用户的需求,然后便有机会提高转化率并获得你想要的客户。

English Version: How to Generate Leads on Your Site — Display CTA Button at the Right Place

Tags UX, Lead Generation, CTA

Latest Posts

Featured
Aug 24, 2020
How to Generate Leads on Your Site — Display CTA Button at the Right Place
Aug 24, 2020
Aug 24, 2020
Aug 24, 2020
如何让你的网站获得潜在客户-在正确的地点展示CTA按钮
Aug 24, 2020
Aug 24, 2020
Aug 27, 2018
How to implement 2FA on your site from a designer’s view
Aug 27, 2018
Aug 27, 2018
Aug 27, 2018
从设计师的角度看如何在网站上实现2FA(双因素认证)
Aug 27, 2018
Aug 27, 2018
Aug 11, 2015
A Case of Design Psychology, the Tricks that We Use in the Design
Aug 11, 2015
Aug 11, 2015
Jul 31, 2015
洞悉用户心理,设计中的“诱导”和“欺骗”把戏
Jul 31, 2015
Jul 31, 2015