CTA in the search icon or separated search button?

Question

The search field of this page has a text insertion, search icon, and search button. My working process is as follows: place the text and click on the most immediate graphic object, the search icon. But in this case, it doesn't work like that, the action is produced by clicking on the button below. I confess it took me a couple of seconds to realize it, despite the button size, and after making several clicks on the magnifying glass icon. I think either the icon doesn't make sense or the button is not necessary. I understand that for people not used to interactivity, a button is necessary, but for those of us who constantly work with elements of this type, an icon within a text field without action is somewhat frustrating. What's the solution?

• Remove the search button
• Remove the search icon
• Repeat the action on both elements: button and icon
• Leave it as it is

Answer 1

This has become quite common. Initially, I was frustrated that the magnifier wasn't interactive, but I adapted once I understood its behavior. Some forms also incorporate submitting via the Enter key, which is much better.

So, what's the ideal solution? I think a button with a clear label is always the best option, 100 out of 100 times. The cognitive burden added by a merely decorative icon is significant. So, the simple solution would be to get rid of the icon and be a happy camper.

However, upon further consideration, the decorative icon conveys an affordance, quickly indicating that this element is a search field, not just any other text input. Interestingly, the poor accessibility might actually play a beneficial role. It provides a cue without being overly intrusive, thus balancing the cognitive load.

Ultimately, the decision should be based on user testing, as is often the case. However, considering that this is becoming a standard UX design pattern, I'd recommend keeping it unchanged, though integrating the Enter key functionality might be a cool addition.

Answer 2

Indeed, there are a few issues with the designed you presented, which contributes to the confusion:

1. There is visual inconsistency between the search box and the search button (radius, shadow, size). This inconsistency can give the impression that the two elements are not related, which is the exact opposite of what was intended.

2. Nowadays, search boxes are an integral part of most apps and they usually come without search button. So users expect search boxes to work as standalone (usually with a delayed auto-search or by pressing Enter key). The search button used to be very useful years ago when people didn't know how to use websites or the internet.

3. A separate search button makes the most sense in 3 scenarios:

   • if there are multiple filters that apply together with the search keyword
   • if the target audience has low digital literacy (like very old or very young people)
   • if the target audience uses assistive technology (like screen readers) that requires a submit button

4. The icon inside a search box is usually non-interactive. For interactivity, it can be transformed into a solid icon-only button and it can be placed inside the input field, or connected to the field. The search box should also allow Enter key, which is the default submit action in forms.

Which solution is better depends very much on the context and the use cases. If we are talking about an ecommerce website, where you can search for a product, many of the best ecommerce websites have a large search box in the top bar, with no search button or as I described in point #4 (also related to a target audience, as in point #3).

Answer 3

1. The search icon is not needed on the right side of the box. It is quite confusing as the user will expect it as an action icon over there. It can be placed on the left side of the box to indicate that this is a Search field.

2. Providing an action to initiate the search process is an old-fashioned UI and now we can see most search boxes don't have an explicit action and the user just hits the Enter key to search.

3. If an action is needed to initiate the search process, then providing an action icon on the left side of the bar or giving a button depends on the context. If you are following the guidelines of using explicit buttons everywhere in the product, then it is better to use a button. Otherwise, a separate icon can be a good choice and will require less space on the UI.

Answer 4

Well, for me, it all depends on the audience you are designing for. Given the presented design, you have an introductory title "Search Product", then a search form with a search icon and then an action button down.

I can say you design something standard for all categories of users including those who require the use of assistive technologies like screen readers. The elites will know what the search icon is for, the oldest and youngest mayn't recognise the search icon but will read the word search from exactly where you are supposed to do so.

With a "Search Product" title maintained. I would remove the search icon from the right to the left, add a "Search" placeholder in the field, enable Enter Key to search, enable auto-suggestion and add a text-based button at the extreme right end of the search form field (purposely to allow all screen readers to read this well). Remember, some screen readers may announce placeholder text by default, while others may not. In such a scenario, the text-based button would solve this.