当前位置: 首页 >文章 > 听说80%的设计师,都把CTA按钮位置搞错了!
收藏
分享

听说80%的设计师,都把CTA按钮位置搞错了!

举报BIGD0BIGD0发布于 2020-12-181714阅读0点赞
教你CTA按钮正确的位置...

作者:anthony

来源:uxmovement

BIGD翻译整理,转载请注明出处。


哈喽小伙伴们~你们知道CTA按钮的位置也会对用户体验产生很大的影响吗?如果你的行为召唤按钮(CTA)放置在用户所期待的地方,那么就可以帮助他们更快地完成任务,极大的提高用户效率和用户体验。反之,则有可能让用户对你的产品完全摸不到头脑,甚至放弃它。


今天小编就给大家推荐一篇关于CTA按钮的文章,作者是UX Movement的作者和创始人。在本文中,他为我们全面的分析了界面中不同按钮位置的优缺点,以及如何正确的选择它们,相信一定会给大家带来帮助~



古腾堡(Gutenberg)原理


在用户进行操作之前,他们一定会先浏览界面内容,然后由界面上的内容告诉他们应该采取什么行动,并提供下一步操作的行动召唤按钮。那么当用户浏览完界面内容后,他们的视线会在哪里?




研究证明,用户的浏览路径会从界面左上角开始,到右下角结束,视线呈之字形移动。著名的报纸设计师埃德蒙·阿诺德称这种自然浏览模式为古腾堡原理。


这个原理阐述了眼睛是如何沿着方向轴从左向右移动,直到到达右下角。它形成一个明显的的浏览模式,称为阅读引力。因此,对角线上的设计元素往往最受到用户的关注,而对其他地方的元素就相对会忽略一些。


最佳按钮位置同样遵循古登堡原理。当用户准备采取行动时,应该将按钮放在用户浏览路径的末尾。很少有用户在浏览之前就准备好采取行动的情况,但这也只是在他们已经熟悉界面内容的情况下。



顶部 VS 底部按钮 


底部按钮


首先要决定的问题是,行动号召按钮应该放在界面的顶部还是底部?哪个按钮的位置遵循古登堡原理?


前面提到过,大多数用户会首先浏览内容,因为这与他们的任务相关,并且占据着整个界面。他们的眼睛会从界面的上半部分向下半部分移动。当内容结束时,他们会自然而然地寻找CTA。


而如果将行动召唤按钮放在顶部就会让用户感到困惑,因为顶部按钮的放置违背了它们的自然浏览流程,使它们偏离了完成的路径。




不仅如此,顶部按钮也会比底部按钮更小,因为它必须与界面标题共享空间。小巧的尺寸加上笨拙的布局,使得顶部按钮更难找到,点击起来也更慢。


而当我们将按钮放在底部时,用户就可以在没有过多眼球运动的情况下浏览内容后看到按钮。底部按钮不仅符合古腾堡原理,而且更大、更容易触摸。



但也有例外。


顶部按钮


只有当用户在界面上选择项目时,顶部按钮才有意义。例如,当用户选择表单内容时,应用栏更改,并为所选项提供相关操作,这时界面标题消失,出现所选项目的数量。




顶部按钮同样也适用于选择图像内容。在下面这种情况中,使用顶部按钮可以使用户在注意到应用栏中的状态更改后更快地采取操作。按钮与状态标题的接近也意味着用户的眼睛不必偏离太远。




水平 VS 垂直按钮 


水平排列


有几种方法使用底部排列按钮,其中一种是水平排列它们。当我们想要强调两个不同动作之间的关系时,这种安排是理想的。它可以让用户将这些选项视为一个集合,并给予同等的考虑。




在上面的例子中,水平放置的两个按钮会让用户轻易的了解:他们可以在购买鞋子之前编辑鞋子的设计。按钮的并排放置加强了两个操作之间的关系。



由于购买鞋子和修改设计对顾客的满意度同样重要,所以它们就像兄弟姐妹一样配对在一起。这样,就算用户急于购买商品,也不会忽略“编辑设计”按钮。


左还是右?


现在我们知道了,将主要操作放在水平按钮的左侧或右侧可以加强不同CTA之间联系。但是哪种布局可以让用户更快地采取行动呢?




当主操作位于左侧时,会与阅读引力相反,用户的视线会不自主地想要移动到右下角,但是按钮的视觉重量让他们一直盯着左下角。这样用户浏览轨迹就变成了先移到右下角,然后又回到左边,点击主按钮,用户的眼睛来回扫视,增加了用户的任务时间。


当主操作位于右侧时,用户可以更快地完成任务,因为右侧是读取重力结束的地方,用户不需要重复他们的浏览流程,或者多次专注于主操作。



垂直按钮


另一种排列按钮的方法是垂直排列。如果希望用户关注每个操作,那么这种安排是理想的,因为他们会花更长的时间盯着每个按钮,以便更仔细地考虑。




垂直按钮比水平按钮更突出,因为它们有更大的空间来跨越整个界面宽度。更大的尺寸不仅使按钮更容易点击,也使主要操作更明显。


在上面示例中,主要操作是“Add to cart”按钮,这比“Add gift message”按钮更重要。因此将其设置为垂直按钮会强调它的重要性,因为次要的操作并不具有竞争性。


上还是下?


主要操作应该放在上边的按钮还是下边的按钮?古登堡原理规定,阅读重力是向下流动的。因此底部的按钮只需要向下浏览,用户就可以轻松找到它。而上面的按钮用户就必须向下浏览,再向上点击才能完成。



混合按钮


最后一种方式是水平和垂直按钮的混合。如果你至少有三个按钮,那么请使用此方法。


三个按钮需要用户更长的时间来决定,因为有更多的信息需要处理。而这种混合按钮方式可以通过其视觉层次结构缩短用户的决策时间。用户可以通过查看按钮的大小和方向提示来回忆每个操作,而不是每次都依赖于标签。



在上面的案例中,主要操作是绿色的大按钮,它非常显眼,因为没有其他相同大小或颜色的按钮。然后,用户可以将一个操作关联为最左边的按钮,另一个操作关联为最右边的按钮。


用户点按按钮的次数越多,他们就会根据尺寸和方向判断不同的操作。很快他们就会养成一种习惯,以不假思索地采取行动。



重点


阅读引力决定主要行动在底部,次要行动在其之上。优先级较高的按钮最需要关注,应该在用户浏览流程结束时进行。


次要操作不应该有明显的颜色,不然它将会和主要操作竞争。相反,它们都应该具有中性色,带有轮廓或浅色阴影按钮样式。


并且你也不必将它们与垂直按钮齐平,垂直边缘的偏移可以强调按钮的左右方向。




粘性按钮 


粘性按钮可以让用户始终看到主要操作。它一直固定在界面底部,允许用户在任何滚动的位置进行操作。



需要注意的是,我们可以在本地应用上使用这些粘性按钮,但在基于浏览器的web应用程序中一定不要使用它们。web应用程序上的粘性按钮会导致点击问题,因为当用户点击该按钮时,会弹出浏览器栏。


虽然在这个问题上也有变通的办法,但非常复杂。最简单自然的解决方案是在按钮和浏览器栏之间添加额外的填充。




最后 


行动号召按钮是用户完成任务前的最后一步。它的位置可以极大地影响任务达成的效率。而通过古腾堡原理,我们可以了解用户的浏览路径以及如何放置我们的按钮,以提高我们产品的用户体验。


原文链接:https://uxmovement.com/mobile/the-optimal-placement-for-mobile-call-to-action-buttons/


用设计的角度看世界,用学习的方式来成长

BigDcc


0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,481人)

【4月】趣味MG动画制作训练营
距离开班仅剩11天31人已报名
【4月】零基础手绘插画训练营
距离开班仅剩11天59人已报名
电商海报设计训练营
距离开班仅剩39天23人已报名
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了46,688
并提交了341份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证