User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am trying to create a good UI for the main page of my website. I need to ask 4 questions to users in easiest possible way-

  1. Query terms - e.g toyota Corola
  2. Category (optional) - e.g. Cars
  3. Location (optional) - e.g Elizabeth Street, Sydney
  4. Distance (optional) from the above location - e.g. 10 km (looking for an aesthetic way, in case a user dont want to filter upto a certain distance)

Whats the best way to ask the above questions without bothering the user with too much details as only the Query terms are the required part. Other questions are really optional.

How should I lay down my user interface?

share|improve this question
If this is a website for user contributed ads I think it would probably be along the lines of the users wishes to be able to search only using category or location without the free text. Seeing all cars for sale in my city for example. That feature would definitely lead to better UX IMO. – AndroidHustle Jan 3 '12 at 15:39
up vote 5 down vote accepted

The UI should show what' important and what is optional. I would make the 3 optional fields as small links that open a dialog for each. Once the user pics his prefrences - the dialog closes and returns to be a link. Obviously - that all depends on the quality and quantity of search results in the discussed system.

See this UI demo:

share|improve this answer
It looks like your images have since been removed by ImageShack and replaced with banner ads. Do you happen to have original copies of the images lying around? – Emrakul Aug 25 '15 at 6:35

I'm thinking something along the lines of this:

enter image description here

Having the query term in a text box and the category and location in selective drop boxes, with All Categories and All Locations being displayed initially.

Displaying the distance interactive component I didn't really get any good idea, having it incremental would probably be best though with increment and decrement being ~5 miles maybe. Needs more thought.

share|improve this answer
I would swap the +/- mechanism for the distance to a slider, starting at 5 miles and incrementing in 5-10 mile steps until reaching 'national' as the maximum value. If you want to search nationally or within a large area, repeatedly pressing '+' could get extremely tiresome. Granted, you could make it step through 5, 10, 20, 50, 100, 200, national but the user doesn't know that. Otherwise I'm inclined to agree with your solution. – Anonymous Jan 3 '12 at 15:26
@Anonymous- thanks. yes, I definitely spot a lot of flaws in the distance component in my solution, it would frustrate any user probably.. I thought of a slider as well but didn't get it the way I wanted when I mocked it up, so I decided on just entering a bad solution instead and pointing out just how bad it was. =) – AndroidHustle Jan 3 '12 at 15:32
Fair enough. =) – Anonymous Jan 3 '12 at 15:48

It sounds like you just need four text boxes, only the first of which needs to be filled in. These could be auto-suggest/complete text boxes that only allow data that matches (Category) or previous/common terms (Location?)

As to the layout - it will all depend on the overall layout of your page. A vertical arrangement will probably be the simplest to integrate into any design.

share|improve this answer

First off, are all fields absolutely necessary? Can a "toyota corolla" be anything else than a car?

Secondly, here's what I would do:

  • query: free-form text
  • category (if absolutely necessary): drop-down combo-box
  • location: postal code (shorter than most cities + states)
  • distance: pre-defined 4-5 numbers plus "everywhere" in a combo-box (decide what makes sense for Australia)

Aesthetics of the form should depend on the overall design of the site. You should stay away from using different elements for the same purpose, i.e. the filtering controls should behave the same way as the search controls.

share|improve this answer

Your Answer


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.