Unified Search Redesign

[kra-mo]

Supersedes #59766

Unified Search is incredibly useful and its performance is technologically very impressive. Unfortunately, its UI has not received nearly as much love as its implementations.

Making it more visible, as mocked-up in #59888 means it's the right time to also improve its usability.

Loading

The main advantage of unified search is being able to find anything in Nextcloud fast. This is undermined by how results are loaded. Before all results have loaded, the UI is plagued by frequent flashing, which slows down the process of finding a result.

I will describe an algorithm in an imperative manner that aims to fix this problem and still return results quickly without disrupting a familiar order.

---

Results are loaded per-category, as they are now.
Categories can be in one of the following four states:

⬜️ Loading
🟩 Loaded
🟨 Blocked
🟥 Failed

---

All of them start out as ⬜️ loading, in their preferred order.
We also start a 1500ms (TBD) ⏳ timer.

⏳ 0ms

⬜️ Apps
⬜️ Files
⬜️ Talk
⬜️ Collectives
⬜️ Notes
⬜️ Contacts

---

Results that come in order are now 🟩 loaded and we present them immediately.

⏳ 882ms

🟩 Apps
🟩 Files
⬜️ Talk
⬜️ Collectives
⬜️ Notes
⬜️ Contacts

---

Results that come in out-of-order will be 🟨 blocked by the preceding categories.

⏳ 1291ms

🟩 Apps
🟩 Files
⬜️ Talk
🟨 Collectives
⬜️ Notes
🟨 Contacts

---

When the timer goes off, we move any 🟨 blocked categories up to before any ⬜️ loading categories blocking them. They are now 🟩 loaded. We reset the timer.

⌛️ 1500ms 🔃 ⏳ 0ms

🟩 Apps
🟩 Files
🟩 Collectives
🟩 Contacts
⬜️ Talk
⬜️ Notes

---

If any request 🟥 fails, it will no longer be able to block other categories.
(We may still retry it depending on why it failed. This behavior can be discarded or simplified if this is not a thing :D)

⏳ 120ms

🟩 Apps
🟩 Files
🟩 Collectives
🟩 Contacts
🟥 Talk
⬜️ Notes

---

When a category loads, it pushes any 🟥 failed ones back to after 🟩 loaded ones:

⏳ 805ms

🟩 Apps
🟩 Files
🟩 Collectives
🟩 Contacts
🟩 Notes
🟥 Talk

---

Keyboard Shortcut

We should decide on a global keyboard shortcut to activate unified search in all apps. IIRC @marcoambrosini proposed ⌘ K for Mac and Alt K otherwise so as to not interfere with browser keyboard shortcuts, but imo stealing Ctrl K wouldn't be too big of an issue as it is quite an obscure shortcut and mostly superseded by Ctrl L. Other web apps do so as well.

Visuals

The general layout of the dialog works quite well. Still, there are a few quality-of-life improvements that should be made.

The Bar

The search bar should be repositioned and the whole top bar resized to be a tad smaller as mentioned in #59888.

Additionally, a hint should be added for the new keyboard shortcut (when horizontal space allows).

Focused

When the bar is focused, its styling should resemble that of any normal input field.

An additional Filter button should appear that, when clicked, pops-up the filters even before the user types a query (@jancborchardt's idea 🙈). After the user typed something, filters always show up, even if they didn't click this button. This is just here to allow users to select filters beforehand, should they choose to.

Results

As results come in according to the algorithm described above, they are displayed similarly to how they are currently. Some changes:

• A loading icon is shown at the end of the input field until all results have loaded. This replaces the current empty content page for every state, except for when everything has finished loading and still, no results have been found.
• A maximum of 3 results are shown per type. To see more, the user must click on "More from … →".
• For each section, there is either a regular heading, or, if more than 3 results are available, a "More from … →" tertiary button, which replaces the previous "… Load more results" button to save vertical space.
• The first result is automatically selected and this is visually indicated. Pressing ⏎ opens it. The user can navigate with ↑ and ↓ through the results (even if the input field is focused).

More from …

When clicking "More from …", results should be displayed in a new view like so:

Apologies for the repeated examples :)

More from connected services

The "Search connected services" toggle should be replaced with a "More from connected services"/"Less from connected services" button at the end of all results.

We should also include a link to configure this globally, as we should encourage people to set this setting instead of deciding on a case-by-case basis, though the option should still be there.

Filtering

Results can be filtered the same way as before, but the filter buttons have been redesigned to be similar to Files. When a filter is active, the button should become primary to indicate it.

Misc. Improvements

Apps should always be the first type to make Unified Search combined with the keyboard shortcut the most efficient way to switch apps, especially for those who miss the pre-waffle-menu times @mejo- @nickvergessen :)

I'm not exactly sure what the order of the other types is determined by, but it might be good to review that as well. Some types that seem less relevant tend to come up more than relevant ones.

also cc @pringelmann

[mejo-]

I'm not exactly sure what the order of the other types is determined by

There's a order value that each unified search provider can give, with the lowest values being listed first. In Collectives we give lower values when inside the Collectives app and higher ones if not. See e.g. https://github.com/nextcloud/collectives/blob/cdb4fc411e164f9dc299403c11780775aec3b172/lib/Search/PageContentProvider.php#L52

[SystemKeeper]

Any chance we consider making the result modal a bit wider/more adaptive? It feels quite condensed on the screenshots (let alone imagining it on a ultra wide monitor) given that paths and titles are cut off?

[kra-mo]

Any chance we consider making the result modal a bit wider/more adaptive

Maybe, I mean the width should be easily adjustable once implemented.

Then I'd also just make the search bar wider too, but that should look fine.

But

given that paths and titles are cut off

it should also work well on small screens, so if this is a problem, we should think about how to fix it. Maybe we can truncate parts of paths for example.

[jancborchardt]

@kra-mo One big thing we also have to consider is what to do with the in-app searches. They are very useful, but it is strange to have 2 search fields. How to we best consolidate this?

[kra-mo]

One big thing we also have to consider is what to do with the in-app searches. They are very useful, but it is strange to have 2 search fields. How to we best consolidate this?

An easy mitigation would be to change the labels of in-app search entries to just "Filter" when applicable, potentially even remove the magnifying glass. This would work in a lot of cases, but not Talk, or Files' "Search everywhere".

For Files, it's not the default mode though, so it's probably fine.

Talk already has "Join open conversations" as a separate dialog, so maybe that's also fine, although we may want to reshuffle some stuff.

Generally, I wouldn't want to compromise on convenience, though. It's nice being able to filter lists inline. Just change expectations?

[kra-mo]

We could also pick up the bottom filter bar pattern that some Mac and Linux apps employ, although it's not that common so I'm a bit dubious: