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 Ariana Grande

7 Rings flac

Ariana Grande. 2019. Writer: Ariana Grande;Richard Rodgers;TBHits;Njomza;Michael "Mikey" Foster;Kaydence;Tayla Parx;Scootie;Oscar Hammerstein II;Victoria Monét.
2 Alan Walker

Lily flac

Alan Walker. 2018. Writer: Alan Walker;Lars Kristian Rosness;Magnus Bertelsen;K-391;Didrik Handlykken;Marcus Arnbekk.
3 Alec Benjamin

Let Me Down Slowly flac

Alec Benjamin. 2019. Writer: Alec Benjamin;Sir Nolan;Michael Pollack.
4 Alan Walker

Lost Control flac

Alan Walker. 2018. Writer: Alan Walker;Thomas Troelsen;Mood Melodies;Sorana;Fredrik Borch Olsen;Magnus "Magnify" Martinsen.
5 Skylar Grey

Everything I Need flac

Skylar Grey. 2018. Writer: Elliott Taylor;Rupert Gregson-Williams;Skylar Grey.
6 Post Malone

Sunflower flac

Post Malone. 2018. Writer: Carl Rosen;Louis Bell;Billy Walsh;Carter Lang;Swae Lee;Post Malone.
7 Westlife

Hello My Love flac

Westlife. 2019. Writer: Steve Mac;Ed Sheeran.
8 Alan Walker

Different World flac

Alan Walker. 2018. Writer: Shy Nodi;Alan Walker;Fredrik Borch Olsen;James Njie;Marcus Arnbekk;Gunnar Greve Pettersen;K-391;Corsak;Shy Martin;Magnus Bertelsen.
9 Sam Smith

Fire On Fire flac

Sam Smith. 2018. Writer: Steve Mac;Sam Smith.
10 Conor Maynard

Way Back Home (Sam Feldt Edit) flac

Conor Maynard. 2018. Writer: Ji Hye Lee;Shaun.
11 Normani

Dancing With A Stranger flac

Normani. 2019. Writer: Mikkel S. Eriksen;Tor Hermansen;Jimmy Napes;Normani;Sam Smith.
12 Slushii

Never Let You Go flac

Slushii. 2019. Writer: Sofía Reyes;Slushii;Aviella Winder.
13 Skrillex

Face My Fears flac

Skrillex. 2019. Writer: Poo Bear;Skrillex;Utada Hikaru.
14 Alora & Senii

Love U So flac

Alora & Senii. 2019. Writer: Alora & Senii.
15 The Chainsmokers

Hope flac

The Chainsmokers. 2018. Writer: Kate Morgan;Chris Lyon;Alex Pall;Andrew Taggart.
16 Imagine Dragons

Believer flac

Imagine Dragons. 2019. Writer: Dan Reynolds;Lil Wayne;Wayne Sermon;Ben McKee;Daniel Platzman;Robin Fredriksson;Mattias Larsson;Justin Tranter.
17 Alan Walker

I Don't Wanna Go flac

Alan Walker. 2018.
18 Mike Perry

Runaway flac

Mike Perry. 2019. Writer: Andreas Wiman;Dimitri Vangelis;Richard Müller;Sasha Rangas;Stefan Van Leijsen;Mike Perry.
19 Gesaffelstein

Lost In The Fire flac

Gesaffelstein. 2019. Writer: Ahmad Balshe;Nate Donmoyer;Gesaffelstein;DaHeala;The Weeknd.
20 Hozier

Almost (Sweet Music) flac

Hozier. 2019. Writer: Hozier.

Related questions

Hot questions


Popular Tags