Page MenuHomePhabricator

Turn ToC bar into a Search/ToC bar (Search)
Open, NormalPublic2 Story Points

Description

Spec:

The ToC bar becomes a combined Search/ToC bar.

The default state:

When the Search area gets the input focus (e.g., the user clicking on it or switching to it using the tab key), the ToC area reduces to an icon:

When the user clicks on the ToC, "Browse topics" is highlighted, and the topics list opens underneath:

When the user scrolls, the bar becomes sticky (fixed to the top of the page), the ToC part takes most of the space showing the current topic title (search becomes an icon), and the ToC is scrolled so that the visible topics in the list are the ones next. Note that the expansion of the ToC part on scroll will not occur if the input focus is on search (or there is an active search).

Design notes

  • When the different parts of the Search/ToC bar expand/contract, a quick transition should be used to avoid the change to feel jarring.
  • Keeping the access to sorting options. Until the advanced search panel is available (were sorting options may go in the future) we want to provide access to sort options in the following way:
    • In the ToC, show a footer with the drop-down to select between the two sorting options.

  • When the text focus is on the search bar, show the same component below the search bar to suggest the options to sort.

Event Timeline

DannyH created this task.Feb 13 2015, 12:51 AM
DannyH assigned this task to Pginer-WMF.
DannyH raised the priority of this task from to Normal.
DannyH updated the task description. (Show Details)
DannyH moved this task to Product/Design Work on the Collaboration-Team-Triage board.
DannyH added a subscriber: DannyH.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 13 2015, 12:51 AM
DannyH updated the task description. (Show Details)Feb 13 2015, 12:53 AM
DannyH set Security to None.
Pginer-WMF updated the task description. (Show Details)Feb 16 2015, 5:40 PM

@DannyH, I added details to the task description to answer your questions. Feel free to remove the questions if you consider them to be answered.

DannyH renamed this task from Turn ToC bar into a Search/ToC bar (with questions for Pau) to Turn ToC bar into a Search/ToC bar .Feb 18 2015, 1:02 AM
DannyH removed Pginer-WMF as the assignee of this task.
DannyH updated the task description. (Show Details)
DannyH added a subscriber: Pginer-WMF.

@Pginer-WMF, thanks! I updated the ticket, and we'll talk about it in the estimation meeting tomorrow. :)

DannyH renamed this task from Turn ToC bar into a Search/ToC bar to Turn ToC bar into a Search/ToC bar (Search).Feb 18 2015, 1:10 AM
DannyH updated the task description. (Show Details)Feb 18 2015, 7:13 PM
DannyH edited a custom field.Feb 18 2015, 7:19 PM

Once search and filters are available, the plan is to support sorting through the advanced search panel (T99875 ). However, we don't want to remove the functionality until the advanced panel is available. Thus, we'll need a temporary access to sorting on the initial steps of implementing search (when the basic search bar is available but there are no filters or advanced panels.

The idea is to provide the sorting option through a simplified toolbar shown when the search bar gets the input focus and at the footer of the ToC. This is similar to way quick filters (T90471) will be presented but considering only one selector to select the sorting options.

DannyH edited a custom field.Jul 7 2015, 6:27 PM
Pginer-WMF updated the task description. (Show Details)Jul 9 2015, 5:31 PM
Pginer-WMF updated the task description. (Show Details)

The simplest way to provide some basic support would be to extend the current sorting menu with a "Favourites" that would show the topics you starred first. That will not solve all filtering needs but it would provide users at least with an option to mark items for later and not having to hunt for them with lots of scrolling. I'm not sure if the internal data structures make it an easier change, engineers can provide a better estimate on this if we consider the change worth it.

@Pginer-WMF: is you idea related to T99785: Show richer info on Flow topics at the Table of Contents?
I've suggested on T106410 to display a "resolved" mark on the TOC, can it be done at the same time?

@Pginer-WMF: is you idea related to T99785: Show richer info on Flow topics at the Table of Contents?

Its in the same area but not directly related. Enhancing the ToC facilitates visual scanning but the elements you are not interested in are still in the middle.

What I commented here would result in something like this:

It uses sorting as a basic replacement for filtering, but it would allow you to get easily to the items you expressed your interest in before with minimal scrolling. It will not solve all usecases, but will facilitate different patterns that are quite hard right now.

I've suggested on T106410 to display a "resolved" mark on the TOC, can it be done at the same time?

My concern with the resolved mark is that it may be emphasising those elements where we I'd expect users to focus on the pending ones more. It would be great to be able to allow to discriminate completed items without affecting the scanning line or drawing too much attention to them.
In the ticked you linked we were exploring the option of having some visual cues on the left side for that purpose. We can try to apply the same approach to increment a bit the prominence of resolved topics. Some mockups below to illustrate how that may look in different contexts:

One resolved topic:

Two resolved topics:

Future uses of the same pattern to highlight other elements (e.g., items with recent activity the user has not read yet):

Thank you for your detailed answer!
I like the highlight principle, but I'm still concerned by accessibility concerns (I don't always see the light grey you use, which is black to me). :)

saper added a subscriber: saper.Sep 29 2016, 9:32 PM