4

I have a page displaying details regarding a specific piece of equipment. To view the details of an individual piece of equipment, a user has to filter down to only one piece of equipment.

The plan is that a user can either search by the specific name of the equipment (unique across the system) or they can filter by the type and model (type and model combination is unique across the system).

How can I best present these 2 exclusive search options? Is there a better way to use search and filter tools based on these restrictions?

Options I am considering:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

5
  • 3
    TBH in this particular case it doesn't seem that those search options ought to be mutually exclusive in the first place. I assume the real reason is "the back end doesn't support it" -- if so I'd suggest fixing that rather than letting its limitations drive your UI decisions. May 16, 2016 at 16:25
  • @DanielBeck, I was about to say the same thing. Just provide one searchbox, like Amazon does or, if you must use drop-downs, search on all the inputs the user provides and display them all. The user can sort things out. May 16, 2016 at 17:40
  • @DanielBeck Good point. This is a redesign of an existing screen and we have received feedback that users will regularly search for equipment by the type and model or by name (Roughly 50/50). When users search by Type and Model, they don't know the exact name so the dropdowns help them recognize the Type instead of having to recall it. I would worry about sacrificing the recognition tool if it was a single input box.
    – Benjamin S
    May 16, 2016 at 18:55
  • 2
    I wasn't suggesting combining it into a single input box. I was suggesting allowing both kinds of search in the same query. (e.g. I know I'm looking for something of type Foo, and remember part of the name, but don't know the model -- I should be able to do a search against that partial name within that type.) May 16, 2016 at 19:04
  • @DanielBeck Sorry about that. I think I got that impression from reading Ken's comment as well. You're scenario seems likely and it does offer a good amount of flexibility to allow a user to find what he is looking for.
    – Benjamin S
    May 17, 2016 at 13:12

3 Answers 3

4

I would use tabs.

UI guidelines for using tabs stipulate that they present different views of the same information.

so put the type and model search on the first tab, and the search by name search on the second tab.

(Side note: Have a look at the Auto Trader website and the way they implement searches for different types of cars - I found it very easy and intuitive to use.)

1
  • 1
    It's good to hide the other search so it doesn't confuse the use of the current one. But tabs can be ignored by users. So be careful which one you default to. May 16, 2016 at 17:38
1

What you are describing is essentially different facets of the same products. Search best practice suggests you use find as you type search ( single input). There is actually a number of patterns within this category with varying levels of difficulty in terms of implementation.The example below uses an auto-complete approach. "Designing Search: As-You-Type Suggestions" form UX magazine offers a comprehensive review

enter image description here


Outcomes could also be different depending on your target audience and future plans. which brings us to scalability. Do you intend to expand search to other product facets? if so, then your search box could handle search for the most frequently used product facets. beyond that you will need to investigate facetted search. For reference i would recommend reading "Best Practices for Designing Faceted Search Filters"

0

You could rather use a single text field for equipment name that intelligently drops a suggestion box in case the user inputs a specific equipment type and/or model name/number.

Let's say your equipment model numbers start with XT, then as the user starts typing "XT" in the textbox, suggestions would start dropping down.

Suggestion list dropdown on Model Number Entry

Otherwise, the search box would simply search equipments in the standard fashion.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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