Page MenuHomePhabricator

Tweak Advanced Filters navigation UI during the interim period of 2 Advanced Filters only
Closed, ResolvedPublic

Description

In usability testing, users are finding the Advanced filters (T167384), but typically by seeing the buttons at the bottom of the main filter panel. We'd like to make these filters more discoverable at the top level, where they are currently accessible through icons. This task has been repurposed so that it now just pertains to the 'interim state,' below. A separate ticket has been created for the "Final state," T172232.

Changes to the feature (final state, when all four Advanced menus are available)

  • Add the words "+ Advanced filters" next to the icons.
  • Clicking on + Advanced filters opens a menu that contains all available options, displayed with icons and names.
    • The "+ Advanced filters" button will follow the standard state changes (e.g., hover, etc.) for "frameless" buttons on OOJS UI.
    • The "+ Advanced filters" button will have a tooltip: "Add advanced filters".
  • Two icons continue to be displayed next to the menu, but...
  • Which icons are displayed will depend on user behavior: the icons displayed will be those representing the last two filter panels the user has used.
    • So, when a user clicks in the dropdown menu to select an Advanced filter set that isn't currently at the top level, that filter's icon takes the place of the second-to-the-last-used icon at the top level. It then persists in that spot when the menu is closed. It remains there as a new, passively set "default."
  • Before the user intervenes, default icons will be: Tagged edits and Namespaces.
RC-next-advanced.png (768×1 px, 248 KB)
RC-next-advanced-open.png (768×1 px, 254 KB)

Layout and typography guidelines are illustrated below:

RC-advanced-menu-layout.png (335×458 px, 29 KB)

Interim state (only two Advanced options available)

RC-next-lang-menu Copy 10.png (768×1 px, 248 KB)

  • During the interim, while only two options are available, we will not show the dropdown menu.
  • The words "Advanced filters" will be displayed next to the icons, as a label. The "+" will not be displayed.

Event Timeline

@Pginer-WMF, some questions and requests:

  • Re. the menu name, some teammates didn't like "Advanced" filters. I like that that word creates a hierarchy between these and the main filters, in a way that just "More" or "Additional" filters might not. But it does strike me that these might be called something like "Special-purpose filters" or, probably better, "Specialized filters." The idea being that the other filter panel offers filters of various types, but each of these panels offers filters only of a single type. Is that any better, do you think? As I say, I'm fine with Advanced.
  • Please put illustrations in the Description as needed, including one for the Interim state.
  • Also please see my question in the Description about rollover state.
  • When you've added whatever info and images are necessary, go ahead and 1) unassign yourself and 2) move this to RFP. Thanks!
jmatazzoni renamed this task from Tweak Advanced Filters navigation to Tweak Advanced Filters navigation UI.Jul 27 2017, 8:07 PM
jmatazzoni updated the task description. (Show Details)
  • Please put illustrations in the Description as needed, including one for the Interim state.

I have been exploring options for the interim stage. While the idea of labelling the "advanced" filters (F8913561) may work, it requires to interpret generic label-less icons. So I wondered if we could use the label to clarify one of those instead, for it to "explain by example".

RC-next-avanced-interim.png (768×1 px, 247 KB)
RC-next-lang-advanced-interim-open.png (768×1 px, 250 KB)

We could expose the namespaces option explicitly (with icon and label) and provide a "more" option to explore similar options, where "tagged edits can be found". Since users may have already associate these two together due to their relation in the current UI, and tags may become problematic if it becomes a distraction from the main filter entry point, the balance may work well.

In T171894#3485570, @Pginer-WMF wrote:

I have been exploring options for the interim stage. While the idea of labelling the "advanced" filters (F8913561) may work, it requires to interpret generic label-less icons. So I wondered if we could use the label to clarify one of those instead, for it to "explain by example".

Putting the label "Namespace" in as an example doesn't work for me becuase it doesn't label this for what it is: part of a group of "Advanced filters." That label, "Advanced filters" is critical IMHO because it establishes the hierarchy between the main filters and these add ons. So in the mockup, I feel like Namespace has too much prominence, and isn't clearly part of a group.

  • I think the solution you offered at the top is good. For the interim state, until we need the menu, I think we just need to get rid of the "+" and we're good. Can you please illustrate that?
  • Also, if you could please clarify in the description how the "+ Advanced filters" is supposed to work in the final state: does it have a rollover, a hover, etc.?
  • I think the solution you offered at the top is good. For the interim state, until we need the menu, I think we just need to get rid of the "+" and we're good. Can you please illustrate that?

I added a mockup with the only adjustment of showing the label before the items being labelled.

  • Also, if you could please clarify in the description how the "+ Advanced filters" is supposed to work in the final state: does it have a rollover, a hover, etc.?

I added in the description the following to clarify the different states and the use of a tooltip:

  • The "+ Advanced filters" button will follow the standard state changes (e.g., hover, etc.) for "frameless" buttons on OOJS UI.
  • The "+ Advanced filters" button will have a tooltip: "Add advanced filters".

I also added layout and typography guidelines for the menu in the description.

Change 369563 had a related patch set uploaded (by Mooeypoo; owner: Mooeypoo):
[mediawiki/core@master] RCFilters: Add 'advanced filters' label to the view selection

https://gerrit.wikimedia.org/r/369563

@Mooeypoo, did you do just the Interim? Or is the rest of it ready to go as soon as the filters are ready (and should we make a separate task for the final state stuff?)

@Mooeypoo, did you do just the Interim? Or is the rest of it ready to go as soon as the filters are ready (and should we make a separate task for the final state stuff?)

I just implemented the interim. The rest will have to be added when we have something to add.

jmatazzoni renamed this task from Tweak Advanced Filters navigation UI to Tweak Advanced Filters navigation UI during the interim period of 2 Advanced Filters only.Aug 1 2017, 10:48 PM
jmatazzoni removed Pginer-WMF as the assignee of this task.

@Mooeypoo, did you do just the Interim? Or is the rest of it ready to go as soon as the filters are ready (and should we make a separate task for the final state stuff?)

I just implemented the interim. The rest will have to be added when we have something to add.

OK, I changed the title of this so it's just about the interim, and created a new task to manage the navigation UI when we add in Categories and User filters, T172232

Change 369563 merged by jenkins-bot:
[mediawiki/core@master] RCFilters: Add 'advanced filters' label to the view selection

https://gerrit.wikimedia.org/r/369563

In betalabs the label (just the label) has been added:

Screen Shot 2017-08-03 at 11.28.53 AM.png (240×1 px, 44 KB)

The 'Advanced filters' functionality (which is the ticket is about) is awaiting implementation. Since there is another task T172232: Add navigation UI to access Categories and/or User filters, this one can be probably closed?

QA Recommendation: Product should weigh in

jmatazzoni claimed this task.

! In T171894#3498213, @Etonkovidova wrote:

In betalabs the label (just the label) has been added:

Screen Shot 2017-08-03 at 11.28.53 AM.png (240×1 px, 44 KB)

The 'Advanced filters' functionality (which is the ticket is about) is awaiting implementation. Since there is another task T172232: Add navigation UI to access Categories and/or User filters, this one can be probably closed?

Yes, this is for the interim state, where we have 2 filters only. I put the rest of the navigation UI into T172232. Closing this.

This comment was removed by Pginer-WMF.