0

I'm wondering if there are some icons better than others for the main action button on a homepage's hero banner.

enter image description here

In some case it would depend on the context and what the button is requiring the user to do but considering that all require the user to click on it I wonder if there is any study on icons that provide better results. I've noticed most websites don't use any icons for this button.

Options I can think of the top of my head:

  1. An arrow pointing to the text
  2. A check icon
  3. An icon that indicates the button action (a phone for a 'Contact Us', a search for a search button, a paper plane for a 'Send Enquiry')
  4. No icon at all

I'm not looking for thoughts on other variables (colour, size, etc) just icons.

1
  • I personally stick to point 3 and only add icons which make sense in context. If there is a clear icon that perfectly describes what the button does and is widely used in other similar applications then I use it, otherwise I leave it off. Mar 5, 2020 at 12:15

1 Answer 1

1

We have different types of buttons with a different language that they communicate. These actions are the CTA, primary, secondary and tertiary.

On the other hand, we have common styles of buttons. This style is just an aesthetic point of view and not how this button should be used. These styles are solid, line and ghost, rounded, text link, floating action, icon, icon with a text link and icon with a label.

Basically, the icons can be effective when they are used to improve visual interest and grab the user's attention.

In your request above, I share my thoughts about your options.

  • An arrow pointing to the text. For me, an arrow is another form that makes the action more protrusive but also I believe that indicates and at the same time, it gives me the feeling that I am going to leave the current view.
  • Check icon. At first, it gives me the impression that I am in a good way to indicate something that's approved.
  • An icon that indicates the button action. Basically, this is a good point of view, because using this option it should be fast to recognize and on the other hand, some buttons still need a label to ensure that the button communicates properly.
  • No icon at all. In this case, it is something that I see in the most common cases. The button is used when the platform/application wants to strongly suggest something that the user should do.

Personally, I like the third and fourth options above. But in any case, I would consider the overall use of buttons on the site/application and how the content interacts with the user.

enter image description here

1
  • Thank you, I was looking for research and maybe A/B testing that have been conducted on the subject but it is helpful to hear a fellow designer's thoughts! Mar 10, 2020 at 10:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.