5个实用技巧,提高按钮转化率

全文共2148词,阅读大约需要8分钟!

“是能点还是不能点呢?”这是当用户在面对一些操作按钮时,大脑中所迟疑的问题。

按钮越多,做决定的时间就越长。用户必须仔细看每个按钮,才能确定哪个是他们需要的。对于按钮的任何不确定性,都可能会导致他们不敢操作或误操作。

设计师可以把按钮的优先级设计的更加直观以减少这样的情况发生。当用户注意到哪个按钮与他们的任务目标更契合时,就能帮助他们快速做出决定。这篇文章就是介绍一些这样的设计技巧,通过简单的调整使得按钮变得更加直观有效。

1、根据阅读习惯设计按钮

在App中,一个常见错误就是按钮的排列顺序偏离了用户的阅读习惯。他们将优先级最高的按钮放在最前面,期望用户能首先注意到它。但其实只要按钮足够突出,视觉分量够重,用户就会注意到它,而无视它的排列顺序。按钮顺序不是为了提供可视性,而是为了要提高效率。在最前面放高优先级的按钮会导致用户自上而下的阅读习惯被打断,看到按钮后还会继续阅读下面的文字,然后再回过头来找前面的按钮进行操作。

不要让用户返回再次检查按钮,而是让他们以自然的阅读习惯看完所有的内容后,按视觉比重快速进行选择。

通过将优先级高的按钮放在底部,让它处于视觉阻力最小的路径上,这使得这个按钮可以更有效率的被点击。此外,底部位置是手指最容易达到的区域,这进一步提高了效率。

2、区分带形状按钮和纯文字按钮

App上的另一个错误是只使用文字来表示按钮。设计师使用文字按钮来表示优先级较低的操作。但是对于用户来说,这是一个糟糕的选择,因为纯文本没有一个按钮的外观,这可能导致用户会忽略了这些操作。

纯文本按钮会让用户迟疑到底是按钮还是内容,从而造成混淆。这种不确定性可能会导致他们直接跳过这些按钮。纯文本按钮不仅让人感到疑惑,在操作上也不容易点击。将文本内容放在按钮框中,可以使得按钮更容易被点击和注意到。

与纯文本相比,描边形式的按钮是降低优先级的更好方法。它们使每个选项都易于识别,以便用户能选择他们所期望的目标。

3、为主要按钮加上颜色

高优先级的按钮应该是最容易被识别到的,它是直接指向用户最需要的目标操作。如果不确定优先级,请考虑哪些操作会使得用户朝着目标前进,哪些操作会使得用户回退。

在这个例子中,”付款”具有更高的优先级,因为它顺应着用户的目标流程。但不大清楚”查看购物车”还是”继续购买”的优先级是如何。

“查看购物车”操作让用户查看已经在购物车的商品,然后继续结账。”继续购物”操作将用户带回到远离结账的产品页面。

通过思考这些操作,可以清楚的看到”查看购物车”具有中等优先级,而”继续购物”具有较低的优先级。判断的理由是哪些操作使用户朝着他们的目标前进,哪些操作使他们远离目标。

前进的操作总是会比回退的操作优先级更高,因此,它们应该被设计地有更强的视觉重量和更高的颜色对比度。

颜色是一种增加按钮权重的有效方法,因为它从文本颜色中脱颖而出,吸引了用户的注意力。当按钮的颜色与文本的颜色相同时,提示性就没有那么强了。为优先级更高的按钮使用不同的颜色来辅助用户进行快速决策。

如果对每个不同优先级按钮使用相同的颜色,用户将不知道哪个优先级更高。而使用不同的颜色只会让用户更加困惑,不知道这些颜色到底意味着什么。不仅如此,每个按钮使用不同颜色,还会让视觉权重重新变得一样。秘诀就在于使用相同的色相颜色,但改变饱和度和亮度就能改变这个按钮的优先级了,使得它比高优先级的按钮更轻。现在按钮的视觉比重有了区分,一下子就变得清晰了很多。

为了增加对比度,可以使用反色。在主按钮的深色背景上使用浅色文本,而在中等优先级按钮上使用浅色文本。这样就使得高优先级的按钮具有最亮的文本和最强的对比度。

4、改变文本的粗细

用之前说的几个方法,已经足以区分优先级,但还可以做的更好。每个按钮设计的越直观,让用户的思考就越少。

在每个按钮文本上使用相同的粗细以表示相同的重量,最好根据优先级不同去强调不同的文本。尝试改变文本的粗细,优先级越高的按钮使用最粗体,而优先级最低的文本则不加粗,这样,按钮文本也有了不同的优先级,用户在阅读这些文字内容的时候就能感知到。

在这个例子中,我把”付款”这个按钮文字使用了粗体,使它变得更加醒目和明亮。”查看购物车”使用了半粗体,”继续购物”使用了中等。所以,按钮文本此时也有了一定的视觉权重。”查看购物车”中的”3项”没有加粗,因为它是补充信息,不代表具体的操作。

5、给高优先级的按钮增加图标

最后一个技巧是一种更加全面的思考,它将使按钮可供盲人使用。色盲的人是无法通过颜色来区分按钮的视觉重量的,他们还需要清晰的视觉符号。

给高优先级的按钮加上一个图标能够起到强调作用而与其他按钮区分开。当用户浏览时,他们往往更视觉元素而不是文本。使用图标按钮的方式能够确保引起用户足够的注意力而快速选择到高优先级的按钮。

如果删除了颜色和外框,用户仍然能够识别付款按钮,图标与文本一样,也能够起到说明的作用。

你的按钮设计的直观吗?

如果用户要花很长时间在操作按钮上,或者按钮的点击率很低,那就可能是按钮设计的不够直观。如果遇到了这样的情况,请尝试使用文中所说的这些技巧来优化操作按钮,或许你将会在前后版本中看到非常大的差异。

Medium

译文地址:彩云译设计(公众号)

作者:UX Movement

译者:彩云Sky

本文翻译已获得作者的正式授权

(0)

相关推荐

  • 提高效率的Word实用技巧大全 好东西果断收藏!

    Word是我们最常见的办公软件,会议记录.文字整理.公司简介等都需要用到,就连打个通知也得用word!Word作为我们日常所需的排版文字工具,学会各种Word技巧则成为办公族必备技能,今天本文主要分享 ...

  • 谷歌浏览器你不知道的5个实用技巧

    对于一款浏览器软件来说,能够快速、安全、稳定的浏览网页自然是最重要的,正如Chrome浏览器在介绍中所描述的一般。不过,如果这样你就满足了,那就太没追求了,别看Chrome浏览器的界面非常简洁,它可以 ...

  • Android 4.0实用技巧你知道几个?

    基于制造商不同,即使是相同的操作系统,同样的功能,不同的手机会有不同的访问方法.这也是我们看到三星和HTC的Android 4智能手机软件外观有所不同的原因.下面,就来介绍一下"冰淇淋三明治 ...

  • 火狐中国版 视频单独播放窗实用技巧

    使用谋智网络(MozillaOnline.com)为你打造的火狐中国版(Firefox China Edition),可以将视频提取出来,在独立的窗口播放,全面满足你的要求! 一键提取视频 不知道大家 ...

  • 在Vista下操作磁盘配额的实用技巧

     我们知道,对于NTFS文件系统来说,可以为每个用户分配指定数量的磁盘空间,无论是本地或是远程登录用户都可以使用这一功能。如果你的系统像设置了多个账户,那么使用磁盘配额是很有必要的,否则,你的硬盘空间 ...

  • QQ空间实用技巧

     本教程为大家介绍一下QQ空间中的实用技巧。希望不懂QQ空间的朋友能学会,做出自己的个性QQ空间。 1、做个性欢迎录音 当别人进你的QQ空间时,听到的音乐是“欢迎浏览我的空间”的真人录音,是不是很有个 ...

  • Foxmail安装教程及实用技巧

    Foxmail是一款优秀的国产电子邮件客户端软件,具备强大的反垃圾邮件功能。它使用多种技术对邮件进行判别,能够准确识别垃圾邮件与非垃圾邮件。 Foxmail 详细安装过程请往下看: 双击foxmail ...

  • 11个QQ空间实用技巧

    本教程为大家介绍一下QQ空间中的实用技巧。希望不懂QQ空间的朋友能学会,做出自己的个性QQ空间。 1、做个性欢迎录音 当别人进你的QQ空间时,听到的音乐是“欢迎浏览我的空间”的真人录音,是不是很有个性 ...

  • Nero-Burnig Rom刻录软件实用技巧大搜罗

    Nero-Burnig Rom(以下简称)是大家用得非常多的刻录软件,现在又出了全新的版本,在此之际,让我们来回顾一下它的一些实用技巧是相当有必要的。很有可能里面有些你还不知道哦! 1.使用向导窗口 ...