Content search UI updates

[ggeisler]

Below are recommendations for updating the UV UI elements related to the content search experience. These were previously included in #529 but as part of separating different aspects of #529 into distinct chunks of work this ticket will just focus on the UI recommendations. For reference, here's the current UI in a content search context:

Recommendations

• Eliminate the two rows that contain the teardrop icons and the previous/next result links.

• Eliminate the blue-bordered highlight that surrounds the thumbnail area (not visible in the screenshot above) when a document is selected.

• Eliminate the white-bordered styling on the currently selected thumbnail (covered by the more prominent document highlight shown in the examples below).

• Update the sidebar scrollbar to more closely resemble a browser scrollbar.

• Add small arrow icons next to the sidebar scrollbar to indicate which pages have search result hits (similar in function to the current teardrop icons).

• Add a search box to the bottom of the sidebar.

• Add hit count indicator and hit navigation adjacent to the search box.

Examples

• Arrow icons next to the scrollbar show which pages in the document have hits. In the example above, there are hits on pages 2, 4, 6, 7, 8, 9, 18, and 46 (in a 46-page document). The first page in the document with a hit is selected and indicated by the colored arrow icon and the rectangular border.

• The hit indicator in the search box shows the currently active hit with the total number of matches (17/25). The previous and next icons enable the user to move through the matches, replacing the function of the current "Previous Result" or "Next Result" links.

For comparison, here's how the elements above change when the user moves through the matches to arrive at a different page:

---

When the user first encounters the viewer, or clears the terms in the search box, the search box is empty but should show a search icon to make clear the purpose of the control. Ideally, the search icon is just implemented like placeholder text; it is visible when the search box is empty, but as soon as the user clicks in the box or the box contains search terms, the search icon is not visible (this saves on horizontal space, which is tight in this design):

If the user hovers over a page indicator when results are displayed, a tooltip displays the page number and number of hits on that page. Ideally, if the page is not the currently displayed page, the hit indicator text is linked so the user can click directly in the tooltip to move to that page in the viewer:

[LlGC-szw]

All issues will be triaged for further investigation or closure by the 28 September 2023. If your issue is still relevant and would like for it be investigated further please comment by 14 September 2023.

[demiankatz]

Closed due to inactivity.