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

1 Alan Walker

On My Way flac

Alan Walker. 2019. Writer: Alan Walker;Sabrina Carpenter;Farruko.

Here With Me flac

CHVRCHES. 2019. Writer: Steve Mac;Martin Doherty;Marshmello;Lauren Mayberry;Iain Cook.
3 5 Seconds Of Summer

Who Do You Love flac

5 Seconds Of Summer. 2019. Writer: Andrew Taggart;Talay Riley;Oak;Sean Douglas;Luke Hemmings;Calum Hood;Ashton Irwin;Michael Clifford;Trevorious;Zaire Koalo.
4 Bonn

No Sleep flac

Bonn. 2019. Writer: Albin Nedler;Bonn;Martin Garrix.
5 Avril Lavigne

Crush flac

Avril Lavigne. 2019. Writer: Johan Carlsson;Avril Lavigne;Zane Carney.
6 Katy Perry

365 flac

Katy Perry. 2019. Writer: Zedd;Katy Perry;Caroline Ailin;Corey Sanders;Daniel Davidsen;Cutfather;Peter Wallevik.
7 Alan Walker

Are You Lonely flac

Alan Walker. 2019.
8 Jonas Brothers

Sucker flac

Jonas Brothers. 2019. Writer: Kevin Jonas;Joe Jonas;Nick Jonas;Ryan Tedder;Louis Bell;Frank Dukes.
9 Brooks

Better When You're Gone flac

Brooks. 2019. Writer: David Guetta;Emma Lov Block;Ido Zmishlany;Jackson Foote;Jeremy Dussolliet;Brooks.
10 Dido

Hurricanes flac

Dido. 2019. Writer: Dido;Rick Nowels;Rollo Armstrong.

Happy flac

DEAMN. 2019.
12 Ariana Grande

Bloodline flac

Ariana Grande. 2019. Writer: ILYA;Max Martin;Savan Kotecha;Ariana Grande.

Rise flac

IZ*ONE. 2019.
14 Avril Lavigne

Dumb Blonde flac

Avril Lavigne. 2019. Writer: Mitch Allan;Bonnie McKee;Nicki Minaj;Avril Lavigne.
15 Little Big Town

Don't Threaten Me With A Good Time flac

Little Big Town. 2019. Writer: Thomas Rhett;Karen Fairchild;The Stereotypes;Jesse Frasure;Ashley Gorley.
16 Ariana Grande

Make Up flac

Ariana Grande. 2019. Writer: Brian Malik Baptiste;Tayla Parx;TBHits;Victoria Monét;Ariana Grande.
17 Dzeko

Halfway There flac

Dzeko. 2019.
18 Ariana Grande

Imagine flac

Ariana Grande. 2019. Writer: JProof;Priscilla Renea;Happy Perez;Andrew "Pop" Wansel;Ariana Grande.
19 Ariana Grande

NASA flac

Ariana Grande. 2019. Writer: Ariana Grande;Scootie;Tayla Parx;TBHits;Victoria Monét.
20 Ariana Grande

Thank U, Next flac

Ariana Grande. 2019. Writer: Crazy Mike;Scootie;Victoria Monét;Tayla Parx;TBHits;Ariana Grande.

Related questions

Hot questions


Popular Tags