3

I have been asked to design a search engine. It searches for properties, streets or towns. The fields work mutually exclusive to each other and cannot be combined.

I have come up with two layouts.

The first sets the scope via radio buttons

enter image description here

The second uses three search fields. When the user clicks in one, the other two are disabled. If the user needs to change scope they have to clear the search then type in the new field.

enter image description here

Which is the better approach?

Improve this question
1
  • The best approach would be a full text search or free form search,similar to the way google search works.Let the user type whatever he/she wants and educate the system to suggest options to the user as they are typing each word,this way you can eliminate the concept of separating out your attributes all together.
    – Nirav Chadda
    Commented Jun 21, 2016 at 13:15

4 Answers 4

Reset to default
4

If you're torn between these two, I'd go with convention: your first design uses radio buttons to communicate that the values are mutually exclusive. The UI elements in the first design clearly show the user that they can only choose one of them.

I would imagine with your second design, a user would use it the first time and think "oh, these other fields are disabled now. Okay.." without really understanding why.

As a side note, I actually like the second design better, but without the "search only one field at a time" requirement. It seems reasonable that I would want to search for a particular street within a town.

Improve this answer
2
  • yes, I know and that's what we wanted to do too but for some technical reason we cant perform that boolean. there are gaps in this project that are annoying
    – colmcq
    Commented Jun 20, 2016 at 15:20
  • 2
    Pretty open-and-shut case, this one. The first layout clearly communicates the form's functionality. The second layout communicates what the form's functionality should have been.
    – Daniel Beck
    Commented Jun 20, 2016 at 16:07
4

I would prefer the first design in a different way. As the user should search for one particular field at a time it's better to have a drop-down in front of the search field, the user knows it is mandatory to choose one from the drop-down and they can also see the options they opt to search from the drop-down menu. It also consumes less space for the search bar to fit in the header or any part of the web page. enter image description here

Improve this answer
2
  • what tool did you use to make this gif?
    – Dave Haigh
    Commented Jun 21, 2016 at 15:16
  • I'm using "timeline" option in Adobe Photoshop for making minimal GIF's @DaveHaigh
    – Bharath Selvaraj
    Commented Jun 22, 2016 at 4:39
3

Both ways are frustrating as the user must pay careful attention either to the specific search box or the selected radio button.

Search box should be single and simple.

The fact that the searches are mutually exclusive does not necessarily means the user should be limited to search a single field at a time. Searching 'London' for example, he may want to see also entries of Streets and Properties with 'London' in their names.

Improve this answer
2

A Single search box, intelligent enough powered by programming obviously, which will provide results based on search query. In first approach

  1. Design One

we are expecting users have carefully selected the option among Town / Street / Property

  1. Design Two

It seems a 'Sequential' flow. Ohh..i have to enter Town first then Street then Property?..ok..But then rest 2 fields will be disabled. This may cause user a bit of confusion.

If only these designs are the options, then Design ONE.

Improve this answer

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.