在这里了解当今互联网的最新动态
在这里了解当今
点击还是不点击——这是用户在看到号召性用语按钮时会想到的问题。
按钮越多,用户做出决定所需的时间就越长。他们必须检查每个按钮,以确定哪个按钮最符合他们的目标。任何不确定性都可能导致他们不采取行动或采取错误的行动。
你可以让你的防止这种Ç所有操作直观。当用户可以看到哪个按钮对他们的任务很重要时,他们就能够立即采取行动。以下是一些可用于使号召性用语按钮直观的用户体验技术。
根据扫描模式布局按钮
设计师常犯的一个错误是将他们的主要行动号召放在首位,因为他们希望用户首先注意到它。这是不必要的,因为按钮的视觉重量已经使其引人注目。
不仅如此,主要的号召性用语首先打破了用户的自然扫描模式。用户必须扫描所有按钮,然后反转扫描方向才能返回到主要的号召性用语。
与其强迫用户重新扫描按钮,不如将主要的号召性用语放在最后,以便用户可以通过在单个从上到下的流程中扫描按钮来获得它。这使得他们在决定之前检查每个按钮是有效的。底部位置也是手指最容易触及的位置,这进一步提高了效率。
用轮廓区分按钮和文本
另一个错误是仅使用文本来表示低优先级按钮。这对于号召性用语来说是一个糟糕的选择,因为文本看起来不像按钮。它看起来像纯文本,可能会导致用户忽略这些操作。
不仅文本按钮更难识别,而且它们也是更难点击的较小目标。为了使您的低优先级按钮更易于点击和识别,请将文本标签放在按钮轮廓内,不要使用纯色。现在,按钮显示为按钮,不会与主要的号召性用语竞争。
为高优先级按钮添加颜色
具有最高优先级的按钮最容易识别。它是引导用户直接实现目标的操作。如果您不确定按钮的优先级,请考虑哪些操作使用户朝着他们的目标前进,哪些操作使他们倒退。
在示例中,“结帐”按钮具有最高优先级,因为它可以最快地使用户朝着他们的目标前进。它应该具有最大的视觉重量和最高的对比度。但不清楚哪个操作具有中等优先级——“查看购物车”或“继续购物”。
“查看购物车”操作让用户查看他们添加到购物车中的商品,然后进行结账。“继续购物”操作将用户退回到离结账更远的产品页面。
基于此分析,“查看购物车”具有中等优先级,“继续购物”具有低优先级。“查看购物车”按钮比“继续购物”按钮值得更多的视觉重量和更高的颜色对比度。
通过了解用户的目标并检查每个操作如何推动用户实现目标,您可以确定按钮优先级。现在,您已准备好为每个按钮赋予适当的视觉权重。
颜色是表示高优先级按钮的有效方式,因为它可以从黑色文本中脱颖而出并吸引用户的注意力。不要在按钮上使用与文本相同的颜色。它削弱了按钮的视觉提示,使其更难被注意到。
蓝色是号召性用语的理想颜色,因为研究表明它是所有性别和年龄组最喜欢的颜色。它也是页面链接最常用的颜色,使用户更熟悉它。
研究还发现,用户看到蓝色时会感到信任、安全和可靠。用户更有可能点击唤起这些感觉的按钮。
此外,不要为两个不同的按钮使用完全相同的颜色,否则用户将不知道哪个具有更高的优先级。并且不要为每种颜色使用不同的颜色,否则您会混淆用户并让他们想知道颜色的含义。它会给每个按钮相同的视觉权重和信号同等的优先级。
相反,对两个按钮使用具有相同色调的不同颜色,但为中等优先级的按钮改变饱和度和亮度。这使得中优先级按钮的视觉重量比高优先级按钮轻。现在,两个按钮都没有竞争,而且明显是赢家。
要进一步增强对比度,您可以反转显示极性。主要按钮使用深色背景上的浅色文字,次要按钮使用深色背景。这为高优先级操作提供了更亮的文本标签和尽可能高的对比度。
改变文本标签的字体粗细
在每个文本标签上使用相同的粗体对它们施加相同的重视。最好用不同的字体粗细强调每个文本标签,以表示用户阅读时的优先级。
改变文本标签的字体粗细,使高优先级按钮最粗。然后使中等优先级按钮不那么粗,低优先级按钮最不粗。您必须选择一种提供不同字体粗细的字体来执行此操作。
在这个例子中,“checkout”标签比其他标签更粗更亮。“查看购物车”标签是半粗体,“继续购物”标签是中等大小。因此,文本标签反映了每个动作的视觉权重。
在高优先级按钮上放置一个图标
最后一项技术是顶部的樱桃,它可以让色盲用户访问您的按钮。色盲用户将无法分辨按钮的视觉重量之间的差异。他们需要的不仅仅是颜色作为视觉提示。
在高优先级按钮上放置一个图标会增加额外的重点以使其与众不同。如果您删除按钮颜色和标签,色盲用户仍然可以识别结帐按钮。
该图标加强了按钮的提示,并保证它会吸引最多的注意力。眼动追踪研究表明,视觉元素比文本更能吸引眼球。
你的按钮直观吗?
如果用户在操作屏幕上花费很长时间,或者您的点击率较低,您的按钮就不直观。如果是这种情况,请使用这些技术来增强号召性用语按钮的用户体验。您会看到之前和之后版本的差异,这会让您大吃一惊。
资讯列表