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.

  • How do you know that what the user entered in the box returns exactly one item?
    – paparazzo
    Commented Aug 19, 2014 at 16:24
  • 1
    CPUBoss has separate search box in the navbar and two text boxes for comparison. It's clear and unambiguous.
    – gronostaj
    Commented Aug 19, 2014 at 22:45

7 Answers 7


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:

enter image description here

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

enter image description here

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.

  • I'd go with input and search button, then when input starts getting filled, popdown another box with placeholder text "Compare to...". This way, there's no confusion having two boxes initially, and it should be obvious enough (to me, at least) that the "Search" button will perform the action suggested in the placeholder. Make sense?
    – Phil Tune
    Commented Aug 25, 2014 at 19:52

Here is my implementation of a solution.
enter image description here (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.


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.

  • 1
    Well, if the buttons purpose is impossible to achieve in different states of the program it can be a good idea to change what it does. A play button on an old tape recorder makes the tape play. Press it again and it makes the tape stop (since it can't start an already started tape. This is true for some tape machines - not all). This behavior is adopted on youtube for example. Commented Aug 19, 2014 at 14:39
  • The action of playing and pausing as "the same action" has been around for ages. But compare and search are different actions. Search is looking for something, while comparing is already having two thing and you are trying to see the difference. Search could lead to comparing, but, that doesn't mean they are the same thing.
    – UXerUIer
    Commented Aug 19, 2014 at 14:53
  • @Majed it's the different modes, the different mind sets I'm talking about. on/off buttons are a different story.
    – msp
    Commented Aug 19, 2014 at 15:14
  • @HenrikEkblom that's of course true, but not really relevant to OP's question. The main difference is that the button's state changes with changed input, not by pressing the button.
    – msp
    Commented Aug 19, 2014 at 15:17
  • @Majed: I would think both could be described as "search for the thing or things typed into the text fields, and display the results somehow". That having been said, perhaps side-by-side comparisons should be done by individually finding and tagging items to be compared, and then requesting a side-by-side comparison of tagged items.
    – supercat
    Commented Aug 19, 2014 at 18:22

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.

  • 1
    Please don't just link off somewhere without providing any explaination about what it is. That doesn't constitute an answer, it's just a link. Also - you can create mockups in UX.StackExchange directly
    – JonW
    Commented Aug 19, 2014 at 15:18
  • IMO: it looks very bulky and is initially unclear what I should do, which requires reading. It's a bad thing to have a user immediately confused by a control.
    – Don
    Commented Aug 21, 2014 at 18:19

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.


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.


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.

Your Answer

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

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