Page MenuHomePhabricator

Show an overview of all matches found in a Flow board
Open, MediumPublic

Description

Searching in flow is presented as a layer on top of the existing board content. This is great to keep the context of conversations, but it may cause the user to miss some matches that happen in the middle of long documents.

By providing an overview of the whole document, the user can better identify both clusters of matches (the main area where a topic is discussed) and isolated matches (that may go overlooked otherwise).

Search.png (355×653 px, 36 KB)

The initial proposal uses the bottom of the search bar to provide an overview of the relevant information:

  • Highlight search matches. Represent search matches in the progress bar (represented regardless their topics have been already preloaded or not). The representation position should be consistent with the distance between topics in the board. At this scale, accuracy is not important, but users would expect that distance between matches in the progress bar is somewhat proportional to what happens in the board.
  • The active highlight on the progress bar. The selected match should be represented in a style that is similar to the one used in the Flow board. Moving to the next match should update the status in both places (board and progress bar).
  • Scroll on the progress bar. As the user scrolls, the progress bar should show the current overall position (shown in darker grey in the example above). This requires dealing with gaps in the topic load process (if a user jumps to the end using ToC, the progress bar should indicate the user is close to the end even if most of the topics are not loaded in between), and the scroll indicator should be consistent with the matches represented (as soon as the scroll indicator reaches a match, the match is expected to be visible in the Flow board).

Another option considered is to represent the overview vertically. It has the advantage of aligning scrolling with the content presented in the overview (although the horizontal model matches the next/prev arrows). That normally works well for static content since you can use the native scrollbar as a referent of the current position, but it is problematic when contents are loaded dynamically.

Event Timeline