Do you think having this arrow with a micro animation pointing outwards on a main CTA is a good or bad idea in terms of optimal user experience? I designed this button to go across all pages, and I have another colleague saying that an arrow pointing away from the content takes the user's eye away from the button. Whereas, when I did my research with Chat GPT, it said there is no problem with this decision and it will instead attract the user via the micro animation. My personal opinion is that the arrow pointing outwards signals that it will take the user somewhere. Let me know your thoughts or if there is any valid research or data on this.
Add a comment |
3 Answers
I think there are other, more serious problems than the arrow itself. In a simple window with few elements, you're incorporating too many contrasts (I counted seven or more relevant ones), which is always detrimental from a perceptual standpoint. I'll list a few:
1 - Size contrast: referring to the button itself, the icon size is larger than the area occupied by the text on the button.
2 - Style contrast: in three lines of text, there are two different typographic styles (noticeable in characters like the letter "a"); a third style, the arrow, is added, which doesn't match either of the previous two:
3 - Color contrast: this isn't a perceptual impediment in this case; it's just another compositional element.
4 - Texture contrast: the background illustration significantly influences how easily or difficult it is to perceive each overlapping element. This should be taken into account when incorporating more visual data, such as irregular shapes or animations.
5 - Direction contrast: With so few formal elements at play, everything adds up (or detracts) at a perceptual level. If you analyze the reading direction, you are also adding a new contrast whose contribution should be studied:
6 - Timeline contrast: It is not visible in the example image, but it is indicated in the question: there is an animation. At a perceptual level, it is another compositional element.
7 - Shape contrast: In my opinion, in addition to the other contrasts mentioned, this last one only adds noise.
As a solution, I wouldn't focus the design on the arrow yes/arrow no, but rather on studying a way to simplify, clean-up, or unify the overall composition at a formal level in order to improve the user's immediate perception.
Adding supportive icons to buttons is a common pattern. The problem with adding arrows to buttons is that buttons are used for actions, and arrows are used for navigation.
If "Verify Insurance" is the main action you want users to take, that should be your primary button, and the "Call us" action should be a secondary button (or not a button at all).
Also, in navigation, an arrow-in-a-box icon is used to signal that the user is leaving the website they are on and going to an external site. It might be confusing to those who have seen that pattern.
I think Danielillo's answer is very comprehensive and gives a lot good ideas for the whole design.
To me, looking at it as if I was an end-user, the [Call us xxx-xxx-xxxx] button feels like it is the main button, with the [Verify insurance] seeming secondary to that (is that intentional?). The arrow adds nothing (possibly detracts) from the experience.
If it's correct that "call us" is intended as a secondary/back-up option then perhaps the "verify" (without the arrow) option could be larger and above the 'call us'? The 'call us' choice might also benefit from a bit of context like 'for more information' or 'to discuss insurance policies in more detail'.
