One button for two actions

Question

I have a comparison site. On the landing page there are two text boxes which are used for products to be compared, and a button to trigger "compare".

If a visitor fills these two boxes, products are compared according to their technical specs.

People also want to search single product details.

So, my solution is like;

On the landing page there are two text boxes and a button that is labeled "Compare/Search". If visitor fills one box and hit the button, it searches. Else, if two boxes are filled, it compares.

Do you think this is clear for visitors? Or do you suggest any other solution?

Thanks a lot.

Answer 1

You buttons should always say what they do. Avoid vague terms and, most especially, do not confuse the user by having a single button do two things! Also, giving the user two text fields can cause issue - if I only type something into the second box, what happens?

UX Movement has an article on naming buttons: Why Your Form Buttons Should Never Say 'Submit'. It is a good review of putting purposeful, descriptive, labels on your buttons. While it does not go directly into having a single button do two things, the consequences of doing that are apparent from the article... a button that does two things is not purposeful (it is very vague) and it is not descriptive.

What is your user doing most often? Your field should focus on that. Let's assume Search. If there is enough value added for including a compare then include it -- but only if it is truly adding value to your experience.

Show a search field, with the option to compare.

^{download bmml source – Wireframes created with Balsamiq Mockups}

The action to compare could take you to a new UI for comparing -- one that is very clear. I'd suggest that having two very distinct UIs is your first choice.

Take a popular example: Google Maps. They provide a search for a location:

You can also "compare" two locations... by getting directions to them:

Getting directions ("comparing") has a discrete button to get to, and the UI to do it distinctly different than the regular search.

If it must remain in-line with the search.

^{download bmml source}

Your UI should change (be it going to a new UI, or updating in-line) to remain descriptive.

1. Labels ("what's this field for?") should change appropriately. No matter your placement style (above, to the left, or inside placeholders)
2. Have a unique "Compare" button, in a unique location. This isn't the "search" button, don't make your users think it might be.

If, for some reason, you truly need a single button make sure you are as descriptive and forthcoming as possible on what everything is for and how to use it:

^{download bmml source}

Tell the user what happens if they only put in a value in the top. Tell them what happens if the add a second. Update the button text as a result. I'd not recommend this, but it will provide more context to your user than a static "search/compare" button.

Answer 2

Here is my implementation of a solution.
(watch video)

I'm not arguing as much as Evil Closet Monkey did and I will certainly tell again many things he already told, but it should probably look like this if it was an iOS app with modern/flat design.

• At beginning, only the search field is shown, no ambiguity.
• When the field is filled, the second shows up, and a label appears describing the meaning of that second text field.
• That's only when the second text field is used that the button changes. It spins and goes down replacing the label between the two fields, changing his action from Search to Compare.

The fancy spinning animation makes the interface engaging and insists on the changing action. But it can easily be replaced by something more sober, like changing the position, the size or the color of the button.
Make only the button title to change may not be as visible, and user may miss that change.

When comparing, the button is between the two fields, which reinforce the meaning of the action, unlike the Search button placed directly in front of the field.

"or compare" label shows that you can do much than Search, but is not —yet— a button.

In fine, the compare text field is half transparent when empty as if it was disabled, so the user understands that the search button doesn't consider this field.

The only missing thing is that the user don't know he can compare until he writes something in the first text field !
Maybe putting the "or compare" label next to the Search button at start should solve that problem.

Answer 3

Try to avoid different modes for the same button. A call-to-action should perform the same action each time and should not change its behaviour at all.

Rather use two different buttons. You could enable/disable the buttons depending on the user input, but don't forget to add a hint why they're disabled then. E.g. "Please select two products to compare"

For further reading on why different modes are often are a bad idea, see this short article about mode-errors that lists some examples.

Answer 4

This suggestion is probably a bit unconventional. But well, at least I had fun making it.

edit: Sorry @JonW. Didn't know that. I will elaborate below and look into the mockup-tool, it looks nice.

So what I did, is to make the button interactive. When the user wants to search, he just fills in Product A en clicks the button 'Search'. But when the user wants to compare, he also fills in Product B. In that case - at the moment the user fills in the second product - the button will slide to the right and the text on it will change to 'Compare'. When the user changes his mind he can empty product B, and the button will return to its initial state.

Answer 5

Well, you can still have one button that says "Proceed". So a label must be placed somewhere saying that if you complete only one textbox a search will be performed and if both textboxes are completed then a comparison will take place.

Answer 6

I personally understand the logic of this double-button and I think I would get the idea, but it all depends on the perception of every user.

I see this solution as a purposeful ambiguity, which is meant to simplify the design. If it's bound to lead to confusion or not, I can't say, unless I take a look on the overall design of that page. I see two options:

• If this is the only ambiguity from that page, I don't think it will lead to any confusion. Thanks to the hypothetical "cleannes" of the page, the user's attention will be overstrained only by that double-button, so there would be some elbow room for him to think about it and figure out your intention
• if there are other ambiguities on the page, through their accumulation, the user will feel stressed, given that his attention would span on a lot of unclear things.

But I also have a suggestion. Is it possible to individualize the relevant part of the text from that button? Something like:

• if the user fills both boxes, highlight the word "Compare", and the other one make it dimmed;
• if the user fills only one box, highlight the word "Search", and dim "Compare".

I don't know if it's possible, but I hope it helps.

Answer 7

Keep your search function separate from your compare function. The user may want to use the compare field for search, but they would be wrong in doing so, therefore do not allow them to.

If you put the search button/text field in a different place, and call attention to it as a search feature, your users should not be confused at all.