如何设计一个按钮:获得点击的7个技巧

分享这
安迪Crestodina
分享

成功或失败归结为一个单一的点击. 获得网站点击(或触屏点击)取决于许多小因素. 按键本身的设计是造成巨大差异的一个小因素.

它们无处不在,在电子邮件、主页、登陆页、联系表单和电子商务车上. 大部分的 4 +十亿页面 在互联网上有导航按钮. 有很多按钮.

设计师们对于如何设计一个网站的按钮并不总是达成一致, 但这方面有很多研究. 这里有七种为你的网站设计按钮的方法。

注意:本文是关于特定的动作按钮的调用, 而不是一般的网站导航, 可点击的图标或文本链接. 并非所有可点击的都是一个按钮!

1. 用行动的话

对于新手来说,每个按钮的每次点击都是一个动作的隐喻. So 按钮需要动作字. 从动词开始. 这个小单词明确地告诉访问者他们正在采取什么行动, 当点击的时候会发生什么.

所以这些按钮没有动词…

  • 电子邮件注册

  • 白皮书下载

  • 更多的信息

当动词加在后面时,更倾向于动作。

  • 注册电子邮件更新

  • 下载白皮书

  • 了解更多

提示:在每个按钮中使用一个动作词.

2. 你的按钮通过WYLTIWLT测试了吗?

现在你有了你的行动词,看看你的按钮是否通过下一个测试. 将这些短语添加到按钮文本之前,看看按钮标签是否仍然有意义……

  • 你想要[按钮文本]?

  • 我想要[按钮文本].

换句话说, 问问你自己,按钮文本是否可以同时从网站和访问者的声音中读出.

如果你的按钮文本是“了解更多”,你会说 “你想了解更多吗??”“我想了解更多.” 因为它是双向的,所以这个按钮通过了测试.

如果你的按钮文本是“看你的报告”,你会说 “你想看看你的报告吗??”“我想看看你的报告.” 因为第二个版本不符合访问者的声音,所以没有通过测试.

这是一种快速确保每个按钮都以一个行动词开始,并在营销人员和访问者的声音中工作的方法. 顺便说一下, 脸谱网上的每个动作按钮都通过了这个测试!

 

打印

这个方法是由乔纳森·理查兹提出的 为它创建了一个缩写词,将“Would you like to, I Would like to”缩短为WYLTIWLT,读作“Wilty Wilt”.这就是今天的流行语!  

提示:使用WYLTIWLT测试以中立的角度设计按钮.

3. 我对. 第一人称还是第二人称?

使用代词可以代替中性的观点. 但是要小心使用代词. 引导页的Tim Paige测试了第一人称和第二人称语言, 设计两个动作召唤按钮. 以下是他的发现.

第一人称视角的按钮(创建我的帐户)比第二人称视角的按钮(创建你的帐户)多24%的点击量。. 的观点来看问题!

Tim认为按钮上的第一人称标签表现得更好,因为它们是从动作接受者的角度说话的, 拿着鼠标或触摸屏幕的人.

尤金·施瓦茨(Eugene Schwartz)曾经说过,你应该“加入潜在客户正在进行的对话”——所以如果他们正在关注你的行动号召, 他们会说他们想做什么? “我想…”

蒂姆•佩奇 引导页

提示:在标题和文本中使用第二人称代词(你, 你的),但是第一人称代词在按钮(我, my).

4. 使用与其他元素形成对比的颜色

十三水游戏的眼睛一直在扫描模式干扰物. 任何与周围环境形成对比的事物都会自动引起十三水游戏的注意. 它是人眼和大脑生物学的基础,被称为 孤立效应.

如何设计一个按钮

按钮设计师可以利用这一点,通过使用对比色(或互补色)将人们的注意力吸引到想要的动作上. 在一个蓝色的十三水在线游戏,大部分是很酷的颜色, 暖色元素, 比如一个橙色的按钮, 在视觉上很突出.

design-button

颜色是让按钮脱颖而出的好方法,但不是唯一的方法. 您还可以使用大小、间距和 在附近摄影的人的眼睛. 重要的是要确保所需的操作在页面的视觉层次结构中处于较高的位置.

号召行动应该是在任何营销中脱颖而出的第一件事. 没有人喜欢浪费时间浏览页面来找到合乎逻辑的下一步. 利用 发条转换颜色模型 四个生理学点,以确保你的初级CTA不仅脱颖而出, 但是你的用户的眼睛会被它吸引.

安吉Schottmuller, 三个深度营销

小贴士:用与周围环境形成对比的颜色来设计按钮, 除了想要的动作,不要用这种颜色.

5. 设计一个足够大的按钮

不是每个人手里都有鼠标. 按键需要为手机和平板电脑的触摸屏设计, 这意味着可以轻敲指尖大小的按钮.

众所周知,苹果推荐按钮的最小尺寸为44 x 44像素 麻省理工学院联系实验室 显示, 平均食指是45 x 57像素. 那是因为你的指尖不是圆的. 他们是椭圆形的.

大拇指有点大. 如果你希望你的按钮被拇指点击(如果它在基于平板电脑的应用程序的底部角落, 例如)使它更宽:45 x 72像素. 这就是“拇指法则”……抱歉,我忍不住要用双关语!

打印

提示:设计一个45 × 60像素左右的触摸式按钮.

额外提示:当设计小屏幕时(特别是电子邮件和移动友好的登陆页面), 要注意调用动作按钮的位置. 你的设计的某些部分就在访问者的拇指下面. 其他的则更难触及.

button-thumbs

来源:Luke Wroblewski的简易指南: 优化跨设备触摸

考虑添加选择. 添加次要链接或低对比度按钮旁边的动作按钮,以显示不采取行动的负面结果. 按钮文本会传达"我不想要你在另一个按钮上承诺的好东西". 这将改变“我是否按下按钮”的决定?到“我该按哪个按钮??”

布莱恩·梅西 转换的科学家

6. 降低承诺(现在购物vs. 现在购买)

有些行动是重大的承诺. 其他人,就没这么多了. 同样,有些按钮意味着比其他按钮更大的承诺. 它们会引发不同的心理和更多的关注.

如果按钮的行动召唤暗示访客将要花费时间或金钱, 访问者可能不太可能点击.

石蕊 语言测试按钮 两个行动呼吁,“开始测试”和“阅读十三水游戏的概述.他们发现第二个版本的点击量增加了124%.

打印

不同之处在于承诺. “开始测试”告诉访问者点击按钮是潜在的漫长工作过程的开始. 但是“阅读十三水游戏的概述”意味着时间的投入更少.

同样,“现在购物”听起来就像在产品目录中愉快地漫步. “现在就买”听起来像拿出钱包.

十三水游戏测试了博客文章中“低承诺表现更好”假设的几种变体, 在电子邮件, 直接在十三水游戏的定价和注册页面. 十三水游戏发现,低投入几乎总是会增加点击量, 但这并不总是更好的底线-所以明智地选择你的成功指标. 虽然特定的按钮处理可能会导致更多的点击(在电子邮件中测试按钮的标准目标), 对于其他实验来说,一个更好的衡量成功的方法可能是访问, ups迹象, 转换或收入.

贾丝廷约旦, 石蕊

提示:在你的按钮上降低语言的承诺级别.

7. 由代码生成,而不是图形.

“按钮”这个词通常表示图形图像,就像“链接”通常表示文本一样. 然而,聪明的设计师正在把按钮做得看起来像图像,但实际上却像链接.

图形按钮有问题…

  • 它们加载速度较慢

  • 残疾游客无法进入

  • 它们可能不会在电子邮件中显示. 许多电子邮件客户端不显示图像,直到“显示图像”被点击.

基于代码的按钮没有这些问题. 因为你可以使用HTML和CSS设计可爱的按钮, 我想不出一个让你的按钮成为图像的理由.

由HTML/CSS制作的按钮有时被称为“防弹按钮”,因为它们到处呈现, 包括电子邮件. 如果你的团队没有时间帮忙,不用担心. Campaign Monitor创建了一个工具,几乎任何人都可以轻松使用 创建防弹按钮.

如果你已经有了图形按钮,却无法更改它们, 至少要确保“alt”标签包含按钮标签. 这样,即使订阅者没有点击下载图片,它也会在电子邮件中显示出来.

按钮图像

提示:使用HTML和CSS设计一个防弹按钮,尤其是用于电子邮件的按钮.

开始点击了

Getting traffic is only half the battle; getting visitors to act is the other half. 点击是关键时刻,而按钮本身会产生巨大的影响. 小事情可以带来不同.

所以,与其推动更多流量,不如看看你的按钮. 也许一些小的设计或标签的改变会带来很大的不同.

分享这

你有什么想法??

只要签字,你就同意了十三水游戏的 隐私政策.

评论(31)
  • 谢谢你的洞察力!

  • 这太棒了——我在所有方面都同意. 🙂

    • 谢谢你,Shellie. 如果你喜欢,我就知道它很好吃. 如果你想补充什么的话(也许是引用?),让十三水游戏知道. 🙂

  • 一如既往的好建议,安迪. 今天十三水游戏要再次回顾一下十三水游戏网站上所有的按钮语言! 谢谢.

    • 是的,把它们都复习一遍! 你曾经有第一人称视角在你的主页CTA(“开始我的指导演示”),但它看起来你改变了它. 我现在看到它通过了WYLTIWLT测试…

  • 另一个很棒的技巧

  • 很喜欢安迪!
    我在品牌峰会上听了你精彩的采访后就过来了.

    感谢你将按钮设计分解到如此细粒度的层次. 我正在做明年要发布的新产品,我一定会执行你的建议.

    最好的问候,
    1月

    • 谢谢,简. 所有的小事情加起来就会有很大的不同! 让我知道进展如何……

  • 很好的见解,安迪. 谢谢,节日快乐!

    • 祝你节日快乐,乔伊! 希望生意上和家里一切都好…

  • 不久前,Zebraa做了一个关于平面按钮和3D按钮的简单测试: http://interruptions.net/private/misc/Zebraa-Become_a_hero.png (这是一个说明性的不能点击的截图). 人们点击了一个3D按钮.比他们点击平面图标的频率高5倍. 所以我的一般建议是使用3D按钮而不是平面按钮. 我想你也可以测试一下,然后把它作为第八招. 🙂

  • 很棒的文章安迪! 我看到你的抄写建议效果更好. 很高兴听到对颜色的推荐——这应该是所有流行鬼按钮的必读资料.

  • 伟大的见解安迪. 这些都是有助于转换的简单更改. 十三水游戏已经在十三水游戏的网站/登陆页面添加了大量的CTA,并且肯定会使用这些信息. 节日快乐.

    • 谢谢你,艾伦. 我希望这些建议能给你们带来巨大的不同. 祝你节日快乐,2015年的高转化率!

      • 安迪,这是我设计过的最好的cta按钮. 你在博客文章中提到,如果你用的是“蓝色”,那么你可以用任何暖色,比如“橙色”,让CTA脱颖而出. 蓝色和白色一起被许多品牌使用,特别是在社交媒体上, 所以你不认为蓝色也是cta着陆的好选择吗?

        • 谢谢你的赞美,哈马荣. 实际上, 如果网站都是蓝色和灰色, 你可以通过使用对比色(甚至互补色)来让你的cta更加突出,比如橙色. 不要用蓝色的按钮!

  • 伟大的文章! 有一个小问题:为什么大家都叫它“替换标签”?“它真的是”替换文本.事实上,“Alt”是“IMG”标记中的一个属性.

  • Hi
    我喜欢你的网站, 真的帮了我很多, 喜欢所有的文章,但我有一些有关定制和设计的查询, 你能分享你的邮箱或Skype吗. 谢谢提前

  • 安迪,
    你认为主页上的“选择我的旅游”按钮会起作用吗?
    该网站致力于私人徒步旅行.

    • 听起来是个不错的按钮标签. “开始我的徒步冒险”听起来可能会更有趣. 🙂

  • 嗨,安迪,
    优秀的绘制成了可视图发布. 我想试试这个指南,希望它能帮到我.

    穆斯塔法

  • html按钮的另一个原因, 而不是图形——当智能手机缩小电子邮件或页面以适应视图时, 他们通常会“放大”文本,使其仍然具有可读性. 所以图形按钮会按比例缩小, 即使整个按钮足够大,可以点击, 如果上面有太多的文字, 很难读懂. 但是html按钮会缩小,这样文本就可读了, 而一个正确编码的按钮也会随之“成长”.

    安迪也有类似的问题, 我认为这篇博客文章可以作为如何撰写和呈现一篇文章的指南. 做得非常好,容易阅读,权威. 伟大的工作!

    • 伟大的输入! 我还没有想到移动设备对按钮样式的影响……谢谢你的赞美. 这对你来说意义重大,汤姆!

  • 我是如此渴望一个蓝图来创造彩色按钮. 这是老板. 谢谢你令人愉快的策略.

  • 喂,
    手机版网站上的命令按钮怎么样? 在内容较长的帖子中,读者无法全面了解网站的设计,而“行动呼吁”可能会被隐藏一点.
    你觉得粘稠的cta怎么样?

    干杯

  • 对于网络研讨会的注册按钮,你有什么建议吗?

  • 感谢这篇文章和里面的好主意 !

  • 这非常有用. 谢谢你!! 🙂

  • 嗨,安迪,

    杰西卡(罗伯茨)和我这些天在为十三水游戏的动物收容所项目设计很多按钮,这篇文章非常有帮助, 一如既往地. 这是第2点 & 3 .有一点冲突.

    .2说一个按钮应该通过WYLTIWLT测试-我得到了. 然而, .3说按钮应该是第二人称. 在这个例子中,没有通过WYLTIWLT测试:

    Button: Find My Pet(第二人称)

    你想找我的宠物吗(失败)

    我想找到我的宠物(通行证)

    如果按钮是“Find A Pet”,它将通过这两个,但不是第二人称 .3个建议.

    的想法?

    谢谢,

    罗伯特。

  • 我是一个毫不掩饰的Cresto Fanboy. 谢谢你,安迪。!

  • 非常有趣的文章. 谢谢楼主分享. 试图建立一个网站并使其正常运行是非常有压力的, 但这是非常有用的. 谢谢

 
加入每两周接受网络营销建议的16000多人.

只要签字,你就同意了十三水游戏的 隐私政策.

分享这