I have search box, and I want two options for users to search "NEW" or "USED". They will essentially be checkboxes, but I want to know the best way to make these look nice, like buttons (most likely using JQuery buttonset), and not the radio icons.

So it should look like some sort of switch, that is intuitive to the user that they can select either new or used. Any suggestions or examples on how that could be styled?

Here is the current image enter image description here

| improve this question | | | | |
  • what if you want to add more options? – Awesh Sep 5 '13 at 10:12
  • I won't, something can only be new or used, there is no other alternative. – Source Sep 5 '13 at 10:14
  • where do you want to put switch button? you can also use segment control if you are showing this on results page. please add current screen/wireframe. – Awesh Sep 5 '13 at 10:16
  • Do they need to search for new AND used? – bendataclear Sep 5 '13 at 11:31
  • No, it will only be one or the other. – Source Sep 5 '13 at 11:54

I think the UI component you're looking for is a flipswitch. These have been popularized by the iPhone in a more "on/off" switch kind of style. However, to reduce cognitive load for your users, I'd recommend using a style where you show both the new and used options, as these sample foundation switches depict. You can still use the core elements of the switch skeumorph if you like: a sliding motion, coloring the currently-selected option while leaving the other option blank, and separating the two by a large circle or other UI element.

These would be appropriate if your user has an either/or choice, but you might want to think about letting them choose both, since some users may not have a preference in this regard. In that case, something like grouped buttons might be better.

| improve this answer | | | | |
  • +1 for Grouped buttons options.. grouped button or check boxes would give freedom to select both options. – Awesh Sep 5 '13 at 11:33
  • Switches are more for Boolean type options, either on or off, or true or false, this is new or used, so both options must be clearly visible to the user. – Source Sep 5 '13 at 11:53

This is a proposal where you display the search box with the two available options beneath it. Usually the default radio button will be on the left.


download bmml source – Wireframes created with Balsamiq Mockups

| improve this answer | | | | |
  • But the drop down menu's are different dependent on which is selected, so this will not work. – Source Sep 12 '13 at 2:14
  • @Source what dropdown menu are you referring to? – AsafBO Sep 12 '13 at 6:02

Agree with @ninakix. It is important, however, to show both options and to make it clear to users that they can choose only one of them. Attached an example of a possible way to do this.


| improve this answer | | | | |
  • 2
    Which option is selected in this example? – Matt Obee Nov 6 '13 at 9:39
  • It's a slight modification of the foundation switches featured on the linked article. – EdGG Nov 26 '13 at 2:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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