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
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:
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