Show search result settings in left sidebar: reduce clicks and save vertical space

leftium

Currently, the search result settings like "Order By" and "Time" take 2+ clicks to set, and consume valuable vertical space.

Also, users are not aware search tools like "verbatim" and "personalized" exist. Or if they do, they cannot quickly tell if they are set or not.

Moving these to a sidebar on the left would reduce clicks and save vertical space. Also the available search tools are surfaced and current settings are clearly visible:

CSS breakpoints should be set so if the user's window is too narrow, the current settings menus are shown instead of the sidebar.

There is a user script to restore the Google left-hand sidebar:

Only one click to change setting
Can see possible options without clicking
Some vertical space regained

Compare to Kagi:

At least two clicks required to change a setting.
Can't see options until setting name clicked.
Settings uses up valuable vertical space.
Horizontal space is wasted.

Some of Kagi's search settings are very long (like the region setting):

Limit max vertical size for facets; scrolling when required. (Like how region setting already scrolls.)
Show the top 3, then "Search Region..." opens up a search modal

Of course Kagi Images, Videos, News, and Podcasts should also use sidebars with facets, too.

Vlad

leftium The problem with this is some users would consider it visual clutter. If you rarely use extra filtering tools, having them present on the page expanded all the time for 1% when you need it could bother people. And making it an option sound very niche.

Have you tried achieving this with custom CSS?

leftium

Vlad What if there was a pseudo-option? (like Hide/Show stats)

Just a button/link next to filter/sort options to switch to sidebar mode
And another button/link in the sidebar to switch back to the "uncluttered" version
No new UI needed in settings pages

I thought about trying via custom CSS, but I think that's beyond my CSS abilities 🙁

Vlad

leftium CAm you try to do a mockup of what would ths look like in kagi sidebar for others to inspire upvoting?

leftium

Vlad Sure:

"Sidebar Facets" pseudo-option is added:

When clicked, sets the options to "sidebar" mode until reset by clicking "Inline Facets":

Notes

I call them "Facets", but users may understand "Options" better. (Not sure what Kagi refers to them as.)
- Just an icon could also be used, but its purpose may not be as clear.
Alternatively, "Inline Facets/Sidebar Facets" could be an option just under More>Hide/Show Stats.
"Quick Answer" may be moved to sidebar to save vertical space, or left in main area (where vertical space would not be saved)
"Clear" resets facets like current clear button. May use actual button, if desired.
An option followed by ... like "Search Region..." and "Custom Range..." opens up a modal dialog.
Ascending/Decending is automatically set to the logical default (Decending for time, acending for AdTracker Count, etc). Clicking again toggles ascending/decending.
Explicit Acending/Decending options may also be added.
Sidebar text is set to lighter colors and checkboxes removed to reduce "clutter."
Adding labels may make facets easier to use ("Region", "Order By", "Time", "All Results")
Similar Facet UI should be implemented for Images, Videos, and News tabs.

Vlad

leftium Thanks for the mockup. As I feared they are just too many of them. It would not fit most laptop screens.

leftium

Vlad

I don't think all the facets have to fit above the "fold." Users are used scrolling down for more facets, just as they are used to scrolling down for more results. On a laptop with a trackpad, I think hitting the PageDown key is easier than trying to hit a tiny menu with the options.

In addition, my mockup puts "Inline Facets" (the option to switch to the current drop-down style menus) at the very top, making it very easy to switch back to the inline style facets. Inline Facets would presumably remain the default way to show these options until the user opted-in by clicking "Sidebar Facets."

Here is an example of site with facets below the fold (imagine if all these facets were Kagi/Google-style menus...): https://www.amazon.com/s?k=laptop

leftium

Vlad Some ideas for how to fit on a laptop screen:

Limit sidebar search tools to a few top ones like "verbatim" and/or "pinned" tools and/or active tools.
Tuck the remaining tools under a "More/Less" menu like Gmail:

Less mode:

More mode:

It would require more clicks again, but you could also have (some of) the search tool options fold like the little Gmail triangle menus:

Folded:

Open:

Fold/tuck based on the amount of vertical real estate available.

Value7609

The google one looks so cool.

Maybe there could be toggles in the settings to enable/disable and reorder specific "facets". For example I'm using the time, verbatim and region options a lot. Having just those 3 on the side, would also fit and not look to cluttered, if the font and style would match more the google one, as it seems smaller and less padded. While others that wan't everything at the side would have the option to do so.