Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

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

6 Answers 6

up vote 10 down vote accepted

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.

mockup

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.

mockup

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:

mockup

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.

share|improve this answer
    
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? –  philtune Aug 25 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.

share|improve this answer

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.

share|improve this answer
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. –  Henrik Ekblom Aug 19 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. –  Majo0od Aug 19 at 14:53
    
@Majed it's the different modes, the different mind sets I'm talking about. on/off buttons are a different story. –  msparer Aug 19 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. –  msparer Aug 19 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 Aug 19 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.

share|improve this answer
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 Aug 19 at 15:18
    
It looks very innovative. I like it. Thanks :) –  ARTniyet Aug 19 at 15:27
    
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 Aug 21 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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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