制作良好的行动召唤按钮的10个技术

Having an effective call to action is an essential part of any website. A call to action is not just limited to ecommerce sites. Every website should have an objective it wants users to complete whether it is filling in a contact form, signup for a newsletter or volunteering their time.

A call to action provides…

  • Focus to your site
  • A way to measure your sites success
  • Direction to your users

How then do you create an effective call to action? Here are 10 techniques which help achieve just that.

1. Lay the groundwork

Before a user is willing to complete a call to action they have to recognise the need. Infomercials do this very well. Before they ask people to respond, they first identify a problem and present a product that solves that problem.

You also need to communicate the benefits of responding. What will the user get out of completing the call to action?

Take for example the VoIP service Skype. Immediately above their call to action (a download button) they have the following text:

Make calls from your computer — free to other people on Skype and cheap to phones and mobiles around the world.

They clearly explain what the user will get by downloading Skype.


Skype clearly show the benefits of downloading their application

2. Offer a little extra

Sometimes you may have to sweeten the deal to encourage users to complete a call to action.

Incentives could include discounts, entry into a competition or a free gift. This is the approach Barack Obama used on his fund raising website. If you made a donation of $30 or more you got a free t-shirt.


If you donated $30 or more to the Barack Obama election campaign you got a free t-shirt

Of course the beauty of this offer was that not only did he pursued you to donate, he also turned you into an advertising billboard!

3. Have a small number of distinct actions

It is also important to be focused in your calls to action. Too many and the user becomes overwhelmed. Studies in supermarkets have shown that if the shopper is presented with too many varieties they are less likely to make a purchase.

By limiting the number of choices a user has to make we reduce the amount of mental effort. Effectively you guide the user around the site step by step.

The number of appropriate actions will vary from site to site. However, it is not so much the number of actions as the distinctiveness of each.

Take for example pbwiki.com. They have three calls to action:

  • Create a wiki
  • View Demo
  • Buy now

Although three is not an unacceptable number, there is not a clear distinction between ‘create a wiki’ and ‘buy now’. What should I do first – buy a wiki or create one? I am confused. A better approach would be to push the buy option later in the process once the user has committed to building a wiki.


The three calls to action on the pbwiki homepage are not clearly distinguished

4. Use active urgent language

A call to action should clearly tell users what you want them to do. They should include active words such as:

  • Call
  • Buy
  • Register
  • Subscribe
  • Donate

All of these encourage users to take an action.

To create a sense of urgency and a need to act now, these words can be used alongside phrases such as:

  • Offer expires March 31st
  • For a short time only
  • Order now and receive a free gift

Carsonified use this approach when selling their workshops. To create a sense of urgency they offer discounts to those who signup early.


Carsonified create a sense of urgency by offering a discount to those people who sign up early to their workshops

5. Get the position right

Another important factor is the position of your call to action on the page. Ideally it should be placed high on the page and in the central column.

picsengine.com does this well placing their ’see in action’ centrally on the page above the fold.


Picsengine focuses users on their call to action by placing it centrally on the page.

6. Use white space

It is not just the position of your call to action that matters. It is also the space around it. The more space around a call to action the more attention is drawn to it. Clutter up your call to action with surrounding content and it will be lost in the overall noise of the page.

PlanHQ does an excellent job of focusing users of their calls to action by surrounding them with a lot of empty space.


PlanHQ draws attention to their calls to action by surrounding them with empty space.

7. Use an alternative colour

Colour is an effective way of drawing attention to elements, especially if the rest of the site has a fairly limited palette.

Things (the GTD application for the mac) does this expertly on their website. While the rest of their site is predominately muted blues and grey, their calls to action are highlighted orange. This extreme contrast leaves you in no doubt as to the next thing you should do.


The Things website draws attention to its calls to action by using a constrasting colour

Of course never rely solely on colour because many users are colour blind and will not see the contrast.

8. Make it big

As web designers we often get annoyed with clients who ask us to make things bigger. It is certainly true that size isn’t everything. We have already established that position, colour and white space are equally important.

However it cannot be denied that size does play a large part. The bigger your call to action, the more chance it will be noticed.

Mozilla have certainly taken this approach to heart on the firefox homepage where their download link dominates the page.


Mozilla uses size to draw attention to their call to action

9. Have a call to action on every page

A call to action should not just be limited to the homepage. Every page of your site should have some form of call to action that leads the user on. If the user reaches a dead-end they will leave without responding to your call.

Your call to action does not need to be the same for each page. Instead you can use smaller actions that lead the user towards your ultimate goal.

37 Signals understand the importance of having a call to action on each page. At the foot of every page of their Basecamp website they clearly display links to their tour and signup pages.


Basecamp has a call to action at the foot of every page

10. Carry the call through

Finally, consider what happens when a user does respond to your call to action. The rest of the process needs to be as carefully thought through as the call to action itself.

One particular word of warning – if you require users to provide personal data about themselves, resist the temptation to collect unnecessary information.

Marketing people in particular like to build up demographic information. Although I can appreciate the value of this, it brings a danger users will drop out of the process.

Wordpress.com is an excellent example of how to minimise the amount of data collected. They only ask for the minimal information required to setup a blog.


Wordpress miminise the amount of information required to setup a blog.

Conclusions

An effective call to action is the linchpin of a successful site and involves drawing together best practice in usability, creative visual design and powerful copy writing.

However, if it is done right it can generate real measurable return on investment and in the current economic climate that is what we all want.

时间: 2024-09-12 03:31:24

制作良好的行动召唤按钮的10个技术的相关文章

PhotoShop简单制作斜纹质感网页导航按钮教程

用PhotoShop制作一种斜纹质感的网页导航按钮效果,简单易学. 效果图: 大家好,下面由我来开始教如何做上图效果的简单按钮: 1.首先打开photoshop软件,Ctrl+N新建一个10 x 10px的72dpi(分辨率)的文件: ①.我们先在图层面板新建一个新的图层,然后把背景图层删除(可按del键快捷键) ②.接着在"导航器"把界面放到最大 可按ctrl+"+" 快捷键,然后选择矩形选框工具,再选择上面的"添加到选区",然后按照下图选出那

PS教程:制作金属边框的蓝色透明按钮

PS教程:制作金属边框的蓝色透明按钮,制作的时候只要画好相应的图层,加上图层样式效果就出来了. 本教程的按钮构成部分不多,总共为两大部分,金属外框和蓝色玻璃部分.制作的时候只要画好相应的图层,加上图层样式效果就出来了.制作过程比较简单. 最终效果 1.将背景色填充为黑色.前景色设为 #0090ff ,用"形状工具"在画布中央画一个圆. 2.对这个圆应用下面的图层属性: 3.最终,你得到这样的效果: 4.用"矩形"工具,画出下面的形状,确保矩形之间的间距是一样的: 5

如何创建有效的行动召唤按钮

行动召唤在网页设计中--尤其是在用户体验方面--是一个描述在网页中用于诱导用户行为的元素的术语.在网站界面中,最流行的行动召唤的表现是出现在点击表单按钮.完成一个行动(比如"Buy this now!")或使用附加信息带到一个页面(比如"Learn more -")等请求用户来采取行动的地方. 我们如何创建有效的行动召唤按钮来吸引用户的注意并引诱他们点击?我们将在本文中通过分享一些有效的设计技术和查看一些实例来尝试回答这个问题. 有效的行动召唤按钮的最佳实践 设计行

WPS演示中怎么制作带图片的图标按钮

  WPS演示中怎么制作带图片的图标按钮           1.打开WPS演示,新建空白文档,把里面的文本框全部删除. 2.点击菜单栏--插入--形状. 3.选择一款图标样式. 4.鼠标按住不放,在空白处画出该图标. 5.右击图标,选择设置对象格式. 6.在颜色与线条标签,点击颜色后面的小三角符号,选择填充效果. 7.然后切换到图片标签,点击插入图片. 8.在本地选择一张精美的图片,插入. 9.OK了,看看制作的图标,是不是很精美呢?

一分钟就能制作出漂亮的网页按钮(图)_常用工具

    一分钟就能制作出漂亮的网页按钮(图),Crystal Button水晶按钮可以帮你在一分钟内打造出晶莹剔透的网页按钮.    Crystal Button水晶按钮可以帮你在一分钟内打造出晶莹剔透的网页按钮.  Crystal Button小档案 软件版本:2.20 软件大小:1034KB 软件性质:共享软件 适用平台:Windows 9x/Me/NT/2000/XP 下载地址:http://sq2.onlinedown.net/down/HA-CrystalButtonv2.20.exe

Mashable:2010年美数字广告10大技术创新

中介交易 SEO诊断 淘宝客 云主机 技术大厅 曾几何时,创意好像是设计与文案的事儿,而今迈入web2.o时代,一个好概念好创意,靠一根笔杆几把美工刀显然不能压阵了.科技博客网站Mashable今天评出了2010年美国数字广告业务领域的10大技术创新,其中包括宝洁旗下Old Spice品牌应答视频.条形码扫描广告.基于地理位置的广告服务以及苹果iAds移动广告平台等. Mashable指出,2010年期间,美国数字广告的最重要趋势在于:移动广告规模迅猛增长,而苹果iAds平台在该业务领域成为领先

摩尔定律永不过时?Intel 全球首发 10 纳米技术,并正面怼上了三星、台积电

摩尔定律失效了吗? 这是最近几年被反复提及的一个问题.自从 1965 年被提出到现在,摩尔定律一直在沿着半导体制程工艺不断增强的方向前进,但是到了 10 纳米时代,业界有不少声音认为摩尔定律已经逼近相应的物理极限,并将因此而失去效用. 然而,在举行于 9 月 19 日的"英特尔精尖制造日"上,这家半导体行业的领军者针对以上问题给出了自己的答案. Intel:摩尔定律不会过时 会上,Intel 执行副总裁兼制造.运营和销售集团总裁 Stacy Smith 对摩尔定律的意义进行了强调.他表

吴甘沙清华讲:大数据的10个技术前沿(中)

本次讲座是清华大数据产业联合会"技术•前沿"系列讲座的第一讲,主讲人为英特尔(中国)研究院院长吴甘沙.回复"清华大数据"可获得完整版PPT. 吴甘沙院长从大数据技术前沿的十个问题入手,对大数据产业进行了深度解析.讲座分为三部分: 大数据的10个技术前沿(上)--数据,12月25日已发 大数据的10个技术前沿(中)--计算,本期 大数据的10个技术前沿(下)--分析,待续 演讲正文: 第四,软硬兼施.就是软的硬的两手抓. 首先,对大数据来说,一定要选择更好的硬件架构.

link环境下用codefirst制作的网盘软件中,bmp缩小技术是怎么实现的?

问题描述 link环境下用codefirst制作的网盘软件中,bmp缩小技术是怎么实现的? link环境下用codefirst制作的网盘软件中,bmp缩小技术是怎么实现的? 解决方案 参考:Asp.Net 上传图片并生成高清晰缩略图http://www.cnblogs.com/sosoft/p/3521860.html 解决方案二: 你是指缩略图吧. http://www.jb51.net/article/9494.htm http://www.open-open.com/lib/view/op