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

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.

leftium

I created some rudimentary Custom CSS to move the time settings to the left as I suggested:

#sidebarForm > div:nth-child(3) > div {
    position: absolute;
    left: -400px;
    display: block !important;

    visibility: visible;
    height: auto !important;
}

body > div.app-box-center {
    margin-left: 200px;
}

I think it's much more convenient!

leftium

Vlad Have you tried achieving this with custom CSS?

Alas, it is difficult to target (only) the elements that need to be styled using only custom CSS.

Either the major elements need to be given unique ids/classnames
OR custom JS is also needed (to detect the URL and/or element contents)

The custom CSS I just posted above is broken on the "News" tab because there is no (simple) way to target just the time menu/items on the "All" tab. The CSS styling "leaks" into other tabs that should not be styled:

Most Kagi custom CSS seems to be just color "themes" that don't touch the layout...

Kagi Custom CSS would be more powerful if:

Major components all had unique ids or classnames.
Used more flexible grid layout(s). (As long as the major components are uniquely targetable, I think it is possible to use a CSS grid layout even if Kagi does not use one!)
(Also even the simpler color "themes" should be easier to make)

If the Kagi search menus all had uniquely targetable classnames and used grid layout I think "search options to the left" could be accomplished via custom CSS. But in the current state it is quite difficult, if not impossible.

leftium

I tweaked the CSS so the sidebar is less prominent; no border and semi-transparent until hover:

#sidebarForm > div:nth-child(3) > div {
    position: absolute;
    left: -400px;
    display: block !important;

    visibility: visible;
    height: auto !important;

    border: none;
    box-shadow: none;

    opacity: .2;
    transition: opacity 0.3s ease;
}

#sidebarForm > div:nth-child(3) > div:hover {
  opacity: 1;
}

body > div.app-box-center {
    margin-left: 200px;
}