Search in view aka. filtering
Closed, ResolvedPublic

Description

Besides a search UI (google for kube), we want search/filtering in various places in the UI:

  • maillist (filter list)
  • conversation view (highlight matches and navigate through matches)
  • folderlist (filter folders, potentially combined with subscription management)
  • calendar
  • contacts

I think this is a required complementary solution to a dedicated search ui, because the user wants to search within an already existing ui, which is different from starting a search from scratch. The two solutions could overlap/interact with each other by the current view being the starting point for a launched search UI, with it's own pros and cons (UI state altered vs. unaltered)....

How the search should function and what all is affected seems to be fairly specific to the UI:

  • For the addressbook having a persistent searchbar seems like a natural primary UI element. For a calendar less so.
  • Searching maillist and conversationview in tandem (one to filter and one to highlight matches) seems like a specific case that wouldn't make sense e.g. together with the folder list.

The challenge is to come up with a system that:

  • Is intuitive
  • Doesn't litter the UI with searchbars
  • Allows you to search where you want

The solution we're currently striving for is:

  • Avoid persitent searchbars unless part of the primary UI elements (e.g. in the addressbook or the search view)
  • Have a button (looking glass) and shortcuts on searchable UI elements.
  • Use a search overlay to provide:
    • a searchbar
    • an indicator for which area is being searched

Visually I'm trying to:

  • Dim everything not part of the search
  • Not dim the searched area
  • Initially the search bar is roughly in the center.
  • Once searching starts and the UI elements change accordingly the searchbar moves to the top (to be out of the way), so the user can fully interact with the application.
cmollekopf triaged this task as Normal priority.

A downside of dimming/focusing part of the application is that only that part is really usable during the search. This shouldn't be a problem for maillist + conversationview, but if we do the same for the folderlist you have to finish the search to be able to view the contents of the folder properly. Not sure how problematic that will end up being.

First version:

Just opened

Searching

We have the folderlist dimmed on the right (not all that noticable because black on black). Additionally there is a blue outline for the searched area.

I think in the initial part we should be dimming everything a little bit to highlight the searchbox.
Some animation to ease in/out of the dimming and for moving the search would also be good.

Other than that it seems to work and not be completely horrible... We'll see.

It looks better live than in the gif, but:

Of course this doesn't solve the problem of where to place the search button. (We also have an experimental help button in the bottom left, so maybe we can find a good place for both)

Here's an attempt with a translucent button that get's a bit more opaque on hover

For reference, here's how a persistent search bar looks.

And this is what geary does (I am not proposing that we should copy this behaviour in any shape or form):

cmollekopf moved this task from Backlog to 0.8 on the Kube board.Jul 12 2018, 8:01 AM
cmollekopf edited projects, added Kube (0.8); removed Kube.
cmollekopf lowered the priority of this task from Normal to Low.
cmollekopf moved this task from Backlog to Done on the Kube (0.8) board.Aug 29 2018, 9:03 AM
cmollekopf closed this task as Resolved.May 26 2019, 6:25 PM
cmollekopf claimed this task.