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?

  • 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

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: http://img210.imageshack.us/img210/6415/52622589.png

| 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? – user59879 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.

| improve this answer | |
  • 1
    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.

| 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.

| improve this answer | |

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.