Searching with mandatory filters

feelerino 10/19/2018. 8 answers, 1.596 views
search filter default

I'm having trouble designing a search box with two mandatory filters/categories before the user hit the "go" button.

So far, the best solution I could come up with was this one:

enter image description here

I've presented the following solution to my client, but they insist it's not ideal once the user would have to open up the split button and change the axis of their cursor and all of that, but I don't really see how this can be a heavy impact on the navigation. If it was all up to me, I would go along with this one, but they insist it's not the format they want, so forget about it.

enter image description here

Well... any ideas?

8 Answers

JoL 10/19/2018.

I remember GitHub had something like what Mike M suggested for their search. I just noticed that it's changed, and what they do now is make the selection a part of their autocomplete-like menu:enter image description here

I imagine the default selection at the top is what they believe to be the most common, which makes sense to search in the current repo by default. An advantage I note in this is that it let's you switch without hassle. If I wanted to search "rails" in "All GitHub" (which makes more sense), all I need to do is press before hitting Enter. This means that switching the filter is just a single additional keypress.

Comparing this with other solutions:

  • dropdown input at the left means I have to Shift+Tab and hit either once or twice (I get the feeling that some dropdowns don't change the selection on the first hit and only open the menu with the selection unchanged, which gives me uncertainty about dropdowns in general).
  • 2 buttons at the right with the default on the left means I have to hit Tab twice.
  • 2 buttons at the right with the default on the right means I only have to hit Tab once to switch, but it might not be intuitive that the default is not what's closest to the input.
  • radio input is like dropdown but at least I can be sure that hitting the arrow key will cause a change in selection.

All these other solutions also suffer in that they have more visual noise, when the input is not in use. An advantage they do all have, however, is that they don't require javascript (if we're talking websites here), which is nice both for the developer and users.

Mike M 10/19/2018.

If the filter is mandatory, choose the most frequent search as the default.

You can try a scoped search dropdown before the search input field. This way the search button is Active from the beginning.

Lead with what your metrics show that the majority of users will want to search by, and don't make them pause to choose a filter.

enter image description here

The tradeoff

If you have some metrics that make the case for the most likely search, users who don't see the filter, and just search will be rewarded.

Those who would search 'Fragments' (let's say it's the lesser of the searches), might not see the dropdown, and search immediately.

Bromox 10/19/2018.

Since this is a mandatory tasks before interacting with search, consider search like the Call to action like save or submit. Before you can accomplish these actions you must fill out a form.

In this case your form is a radial group and a text input field.

enter image description here

DarrylGodden 10/19/2018.

If these are the only two options and are likely to remain so, I would go with something like this:


download bmml source – Wireframes created with Balsamiq Mockups

Yoav Barak 10/20/2018.

Did you consider an auto-suggest search for both categories?

That way you provide the user with immediate value before forcing him to make a further choice..

enter image description here

Fernando Vega 10/19/2018.

Probably not an ideal design decision — I mean I certainly wouldn’t do this, but since the client seems to be a bit of a stickler, I’m just throwing it out there as an idea.

Two search bars, one for each category, when the user focuses on one, disable the other.

Like I said, not a good idea, but I don’t see anything wrong with the other solutions you’ve already presented to the client, so it seems to me like the client doesn’t really want some that makes sense. Instead, they just want what they want, and they want you to just figure out what that is.

Maybe they want something stupid like this...?!

rackandboneman 10/20/2018.

One good alternative: Search for both every time (if performance considerations allow), and present the results in two tabs "documentos" and "fragmentos". Foreground the tab that is known to be about the more frequent search (can be globally set, or a per-user setting). If performance is a problem here, execute the search filling the background tab only if it is actually clicked.

Graipher 10/20/2018.

You could ask yourself how mandatory choosing really is and just search in both categories by default. You can then offer filters on the result page to refine the search.

If, as you say, the search terms are long anyway, the results might already be unique enough to yield what the users are searching for.

If you still want to give all options from the beginning, hide the filters under an advanced search drawer or something similar. - Download Hi-Res Songs


Birthday Party flac

AJR. 2019. Writer: Adam Met;Jack Met;Ryan Met;Peter Ivers;David Lynch.
2 Loote

Your Side Of The Bed flac

Loote. 2018. Writer: ​Jesse Saint John;Jackson Foote;Emma Lov Block.

100 Bad Days flac

AJR. 2019. Writer: Jack Met;Adam Met;Ryan Met.
4 Joe Jonas

Longer Than I Thought flac

Joe Jonas. 2018. Writer: Patrick Nissley;Jackson Foote;Dave Katz.
5 Loote

Out Of My Head flac

Loote. 2018. Writer: Emma Lov Block;Michael Pollack;Jeremy Dussolliet;Jackson Foote.
6 Iselin Solheim

Anyone Out There flac

Iselin Solheim. 2019. Writer: Iselin Solheim;Max Grahn.
7 Loote

Wish I Never Met You flac

Loote. 2018. Writer: Jackson Foote;Alex Peter Koste;Jeremy Dussolliet;Emma Lov Block.
8 Kim Petras

Heart To Break flac

Kim Petras. 2018. Writer: Cirkut;Aaron Joseph;Dr. Luke;Jacob Kasher;Kim Petras.
9 A L E X

Out On The Trampoline At Night flac

A L E X. 2018. Writer: A L E X.
10 A L E X

I Want To Hold Your Hand flac

A L E X. 2018. Writer: A L E X.
11 A L E X

Field flac

A L E X. 2018. Writer: A L E X.
12 A L E X

Save Me flac

A L E X. 2018. Writer: A L E X.
13 Devin

Summer Lover flac

Devin. 2019. Writer: Tommy Lee James;Stuart Crichton;Oliver Heldens;Nile Rodgers;Devin Guisande.
14 A L E X

9 To 5 flac

A L E X. 2018. Writer: A L E X.
15 A L E X

Skirt flac

A L E X. 2018. Writer: A L E X.
16 Florian Picasso

Midnight Sun (Extended Version) flac

Florian Picasso. 2019.
17 Florian Picasso

Midnight Sun flac

Florian Picasso. 2019.
18 21 Savage

Enzo flac

21 Savage. 2019. Writer: YungLunchBox;Sheck Wes;Offset;Gucci Mane;21 Savage;DJ Snake.
19 Tales Of Ratatösk

Battle Of The Doomed Gods 320kbps

Tales Of Ratatösk. 2019.
20 Tales Of Ratatösk

Andro 320kbps

Tales Of Ratatösk. 2019.

Related questions

Hot questions


Popular Tags