Page MenuHomePhabricator

Filtering UI for Categories without Participants
Closed, ResolvedPublic3 Estimated Story Points

Description

Now that Event Metrics has Category filtering without Participants, the rules for event filtering have grown more complex. The UI /UX described here is designed to help users understand those rules and to know whether their event is fully configured or not.

This ticket describes the new filtering UI only. A separate ticket, T218445, describes overall design changes to the Event Summary page, in which this filtering UI sits.

New elements of the UX

This ticket adds a number of new elements to the filtering UX. They are labeled in the illustration below.

parts.png (700×889 px, 131 KB)

Filtering rules

To understand the workings of the UI, it may be useful to keep in mind the basic rules of our filtering system:

  • Users must select Participant or Category filtering; these two can also be combined.
  • Participant filtering applies to all wikis and therefor covers the minimum requirements.
  • Category filters are specific to individual wikis. If users employ Categories without Participants, they must supply categories for every wiki for which they want results.
    • Partial results are allowed; if users supply categories for some but not all wikis, the system will give them results for the covered wikis.
  • There are no categories on Wikidata, so users who specify Wikidata as a wiki will get Wikidata metrics only if they supply Participants.

These are the rules this UI is designed to help users navigate.

States of the UX

For purposes of describing the UX, it's convenient to think of it as having 3 main states, with a couple of variations for Wikidata. (Actual implementation may well require a different scheme.) The sections below tell how the elements of the UI behave and what messaging is shown in each of the states.

Unfiltered state

Definition: The initial setup state. No filters have yet been supplied.
Mockup: get code for proper styling here. (See the illustration below)

unfiltered.png (925×889 px, 125 KB)
.

Behavior of elements
  • Filter panels are open
  • Error box is shown.
  • Status messages/icons are shown
  • Update button/Download menu are NOT shown (only the Settings button appears—this is existing behavior)
  • Error box help link: link to https://meta.wikimedia.org/wiki/Event_Metrics#Filtering_is_required
  • Help link hover text: Learn more about how filtering works
Messaging for Unfiltered

[Error title & subtitle]

  • Filters required
  • Event setup isn’t complete yet. Please use one or both of the filters below to more narrowly focus your metrics.

[Error messages]

  • You can filter by Participants or Categories—or combine the two.
  • You must provide filtering for every wiki for which you want metrics.
  • Participants filtering applies to all wikis and satisfies all filtering requirements.
  • Category filters are specific to individual wikis.
  • If you combine Categories and Participants, the system will provide metrics for contributions that satisfy both filters (i.e., Category AND Participants).

[Status messages & icons]

  • Participants: No participants supplied [icon="glyphicon-asterisk"]
  • Categories: No categories supplied [icon="glyphicon-asterisk"]

Partial state

Definition: No Participants are supplied and Categories are supplied for some but not all wikis. Wikidata is not a specified wiki.
Mockup: get code for proper styling here. (See the illustration below)

Screen Shot 2019-03-14 at 9.38.08 AM.png (940×876 px, 167 KB)

Messaging for Partial

[Error title & subtitle]

  • Event partially configured
  • You will get metrics for some but not all of the wikis specified for the event. To calculate figures, you may need to Update data. [Where "Update data" is a link that performs the same function as the Update data button]

[Error messages]

  • The following wikis require filtering: Wikiname1, Wikiname2 [Insert names of unfiltered wikis]
  • You must provide filtering for every wiki for which you want metrics.
  • Participants filtering applies to all wikis and satisfies all filtering requirements.
  • Category filters are specific to individual wikis.
  • If you combine Categories and Participants, the system will provide metrics for contributions that satisfy both filters (i.e., Category AND Participants).

[Status messages & icons]

  • Participants: No participants supplied [icon="glyphicon-warning-sign"]
  • Categories: Categories not supplied for some wikis [icon="glyphicon-warning-sign"]

Valid state

  • Definition: The filter settings meet the requirements and Setup is complete.
  • - The green banner shown below appears ONLY until the user has "Calculated totals" (and it appears every time the page loads until the user Calculates totals). Once totals have been calculated, the banner disappears but the status messages/icons continue to display.

Mockup: get code for proper styling here. (See the illustration below)

Screen Shot 2019-03-15 at 11.22.09 AM.png (722×1 px, 124 KB)

  • Filter panels are closed
  • Error box is not shown
  • Status messages/icons are shown only for the filters that are configured.
  • Update button/Download menu are enabled.
  • A green banner is displayed with the following legend and link: Not right, but fixed in T219436
    • Settings successfully completed or updated. Click "Update data" to calculate metrics.
    • The Update data link does the same thing as the Update data button. [This is existing functionality]
Status messages & icons

For the Valid state, show messages/icons ONLY in the filter panels for which valid filters have been set. E.g., if no participants were supplied, show no message or icon for Participants. If valid filters were set, then show message/icon in the following format:

  • Participants: X participants [icon=glyphyicon-ok]
  • Categories: X categories [icon=glyphyicon-ok]

Variations with Wikidata

Wikidata requires special messaging, since Category filtering doesn't work with Wikidata. Please see the cases below, where I've noted only the differences between the Wikidata and standard versions of these states.

Unfiltered state with Wikidata ONLY

  • Definition: The initial setup state, no filters have yet been supplied, and only one wiki is specified for the event: Wikidata. (See the illustration below)

Mockup: get code for proper styling here. (See the illustration below)

unfiltered wikidata.png (871×983 px, 111 KB)

Everything is the same as Unfiltered, above, except the following:

[Behavior of elements]

  • Filter panels: Participants is open but Categories is closed

[Error title & subtitle]

  • Filters required
  • Event setup isn’t complete yet. Please use the Participants filter below to more narrowly focus your metrics.

[Error messages—use only these two bulleted messages]

  • * You have specified only one wiki for this event: Wikidata. [Please observe boldfacing]
  • * To get metrics about Wikidata, you must supply Participants.

[Status messages & icons]

  • Participants: Required for Wikidata [icon="glyphicon-asterisk"]
  • Categories: Does not work with Wikidata [icon="glyphicon-info-sign"]

Partial state with Wikidata

  • Definition: No Participants are supplied and Categories are supplied for some but not all wikis. Wikidata is one of the wikis specified. See the illustration below)

Mockup: get code for proper styling here. (See the illustration below)

wikidata.png (921×877 px, 173 KB)

Everything is the same as Partial, above, except the following:

[Error messages—Insert the following as the THIRD bulleted message

  • * To get metrics about Wikidata, you must supply Participants. (Categories don’t exist on Wikidata.) [Please observe boldfacing.]

[Status messages & icons]

  • Participants: Required for Wikidata [icon="glyphicon-asterisk"]

What to do after Updating Data

The descriptions above all accurately describe the behavior elements display immediately after the user has Saved Settings. Some elements will behave slightly differently, however, after the user Updates Data (by clicking the button or an Update Data link). Update Data options are available only in the Valid and Partial states.

  • Valid and Partial states, both filter panels closed: In both Valid and Partial states, after the user clicks Update Data, the filter boxes will display as closed (so the user can see her data). They will remain closed every time the user visits the page, until the user Saves Settings again.
  • Partial state only, display error box: In any Partial states, after the user clicks Update Data, the filter boxes will be closed but the Error Box messages will continue to display. Again, this behavior will continue until the user changes the Settings, in which case the cycle starts over.

All other behavior described above will remain the same, no matter whether the user has just Updated Data or Saved Settings.

Changes to instruction text and labels of filter panels

Small changes to the filter-panel labels and to the instruction text within the panels will clarify functionality for users.

Participants filter text changes

  • Change filter name: from "Participants" to "Participants filter"
  • Change instruction text as follows (see mockups for layout/styling):
    • Add wiki usernames below, one per line, to limit metrics to specific participants. [? help icon]
    • You can copy/paste directly from an on-wiki list.
  • New URL for help link: https://meta.wikimedia.org/wiki/Event_Metrics#Filter_by_Participants
  • Help link hover text: Learn about Participant filtering

Categories filter text changes

  • Change filter name: from "Categories" to "Categories filter"
  • Change instruction text as follows (see mockups for layout/styling):
    • Enter categories (with wiki names) to limit metrics to pages in those categories. [? help icon]
      • Categories must be on main namespace pages; hidden categories are allowed. [Pls include bullets for these two sub-instructions. Waiting for styling from @Prtksxna]
      • On Commons only, use this tool to filter files (images, videos, etc.), instead of pages.
  • New URL for help link: https://meta.wikimedia.org/wiki/Event_Metrics#Filter_by_Categories
  • Help link hover text: Learn about Categories filtering

Related Objects

Mentioned In
rGEVM7a6bbac6254c: Show error on participants panel for any Wikidata event
rGEVMd3ffe5072f55: Display fewer errors for Wikidata-only events
rGEVMc054372fcc58: Give full list of all unfiltered wikis
rGEVM6450a53c2f69: Give full list of all unfiltered wikis
rGEVM5110baaa1c04: Display fewer errors for Wikidata-only events
rGEVM8d1bc077ad6b: Give full list of all unfiltered wikis
rGEVM73201351a5cf: Adjust error display for Wikidata events
rGEVM4ed28cd153f3: Add green checkmarks to form panels
rGEVM2ece42875257: Add green checkmarks to form panels
rGEVM0f5de11ab353: Add green checkmarks to form panels
rGEVM24b08335875e: Change participants and categories form labels
T219436: Make filtering UI handle certain unaccounted-for states
rGEVM29424b9ee869: Change participants and categories form labels
rGEVM8368edc21978: Add more filtering-display logic
rGEVM72fecda2e832: Add more filtering-display logic
rGEVM66430ffb4c69: Reconfigure filter warning messages
rGEVM3b7508176296: Reconfigure filter warning messages
rGEVM4706291ba4b8: Reconfigure filter warning messages
rGEVM193711d23905: Reconfigure filter warning messages
rGEVM81af4d9a3f69: Remove category list from metadata and reorganise remaining
rGEVM3b1431a9a9f1: Remove category list from metadata and reorganise remaining
rGEVM9f411c2d66ee: Reconfigure filter warning messages
rGEVM62b3baf69cdd: Reconfigure filter warning messages
rGEVM12afb8d5a3f0: Reconfigure filter warning messages
T218445: Update data display UI on Event Summary page
Event Metrics
T216300: Implement filtering UI that supports Category filtering without Participants (placeholder)
rGEVM010f5dc2acdc: Reorganise the metadata part at the top of the event page
rGEVM57a4c24f6acd: Reorganise the metadata part at the top of the event page
Mentioned Here
T219436: Make filtering UI handle certain unaccounted-for states
T207214: Add # of pages to categories in Category filter menu (and widen the menu)
T204168: Do away with inputs in add/remove forms, and use trash icons instead of Remove buttons
T218445: Update data display UI on Event Summary page

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

@Samwilson, please note that I've updated all the mockups in the description so that they are correct in all details. I don't know if the changes are significant--typically the changes made are small issues of text styling or something that should not have tripped you up, assuming you were working from the spec.

One item that all have been updated with is that they now show no Categories list at the top. If you've built this already, that's great. We can keep it in. Prateek's idea for what to do with a long list of categories was to show some small number (3?) and then have a More link that shows a popup menu. As I say, I'm OK with that or with dropping.

Before:

Screenshot from 2019-03-20 18-03-27.png (334×1 px, 54 KB)

After:

Screenshot from 2019-03-20 17-52-22.png (318×1 px, 60 KB)

I like the links, but in my opinion the left alignment is more legible. Can we at least add some extra spacing between the "Last updated" line and the information below it? And perhaps go back to a table-like format for the "From" and "To" part?

Additionally, in some other languages where the translation for "View all edits" is longer, it can throw off the alignment:

Screenshot from 2019-03-20 17-55-49.png (344×1 px, 63 KB)

The left alignment would give us more room for a long list of wikis/categories, and they will wrap naturally.

Also, the "Category: NASA, NASA Programs, NASA Space Stations and 24 more" (with the truncation and showing "N more") will require JavaScript, I think, and it will flicker after page load. Correction: It will require JS if you want it to truncate so that the list doesn't wrap onto multiple lines. If you're okay with the list wrapping (like you see for the wiki list on F28428248), then there's no problem.

I agree, left-aligned and with four separate labels looks good and gives plenty of room for long wiki and category lists. Also would mean the long 'view all edits' button would be less likely to get in the way (it'd be next to the two date lines).

Should categories have a dash or something if there are none?

I wonder if categories should be listed at all. It is a "filter", and we don't list other filters (which currently only includes participants). The real issue I see is there's no wiki specified, outside clicking on the link. Another option, and I'm unsure about design, would be to specify the number of categories. That could link to the actual category list, and make it expand.

A long time ago, there was discussion about making the entries in the list of participants and categories into links. This would mean doing away with the inputs (T204168), which ropes back to Sam's point from way back when that you probably won't ever change the entries, only remove or add new ones, hence there may be no need to show them as inputs. My point here is that if we want links to the categories, we can do this where they are already defined. An example:

Screenshot from 2019-03-20 19-13-00.png (429×647 px, 46 KB)

And for participants (including talk on contribs links):

Screen Shot 2018-09-12 at 17.54.08.png (444×737 px, 55 KB)

Additionally, in some other languages where the translation for "View all edits" is longer, it can throw off the alignment: F28428230

Sorry, the "View all edits" button is getting moved with T218445, so disregard this concern.

@Samwilson, as long as you're working on the filtering UI, would it be OK to ask you to make the fix that @Prtksxna had originally suggested in T207214 . The issue is that long category names run over the edge of the category menu. Prateek suggested we that we don't need to change the size of the entry box, but if we increased the width of the menu—to as the right edge of the Save button—that would help people out. What do you think?

CurrentlyWith the menu fix
Screen Shot 2018-11-27 at 5.33.56 PM.png (462×1 px, 110 KB)
Screen Shot 2018-12-03 at 3.41.51 PM.png (624×1 px, 105 KB)

I've removed the categories in https://github.com/wikimedia/eventmetrics/pull/240 — ready for review.

The filter messages are also ready for review: https://github.com/wikimedia/eventmetrics/pull/234

I agree with @MusikAnimal that the category links belong in the category panel; let's revisit adding them in a separate ticket.

@jmatazzoni I'll have a look at the dropdown width problem.

Still to come for this ticket are the two points in T218340#5034961.

@Samwilson @MusikAnimal, the issues with the layout for elements above the filter panels/Error box are not part of this ticket, which deals only with the filtering UI. Those elements are part of T218445, and I think the issues have been addressed there. If not let's move the discussion there.

@Samwilson an issue suddenly occurred to me relating to the Partial states. It's quite possible that users will want to get results in the Partial states. What I'd like to do is this:

  • Add a line to the partial state Error Box saying that they should Update Data (with a link). I'll put the exact language into the spec if you say it's OK.
  • Make a rule saying that any time the user—n either Partial or Valid states—Updates Data, then when the page refreshes a) the filter panels will display as closed while b) l the Error Box message, if relevant (i.e., if we are in Partial) will remain displayed.

So, basically, if you've Updated and you are getting results (i.e., you're not in Unfiltered state) then filter panels display as closed, but you still see Error message if relevant. That way people in Partial will be able to see their results.

Is that OK? Can I add it to this ticket or do I need to make a separate ticket? Is that hard?

@Samwilson, please note: at Sati and Alex's request, I added one more message to the Partial state Error Box messages. (It's the last error message from the list in the Unfiltered state). That means it will be in the "Partial" and "Partial state with Wikidata" Error boxes. This is the message:

  • If you combine Categories and Participants, the system will provide metrics for contributions that satisfy both filters (i.e., Category AND Participants).

(Do I need to have Prateek update the mockups? Or is it OK if the text on the mockups is not complete?)

@Samwilson, I've added a spec for the behavior we discussed in Standup today. Find the new spec in the Description under What to do after Updating Data Let me know if you have any questions. .

@Samwilson, please note: at Sati and Alex's request, I added one more message to the Partial state Error Box messages. (It's the last error message from the list in the Unfiltered state). That means it will be in the "Partial" and "Partial state with Wikidata" Error boxes. This is the message:

Done in PR234. The other bits of this ticket will come in separate patches.

@Samwilson, I've added what will be the last of my tweaks for this ticket (promise!). It is a change, not shown in the mockup, to the language of the "Subtitle" for the Partial states. It's in the Description, but here is what I wrote:

You will get metrics for some but not all of the wikis specified for the event. To calculate figures, you may need to Update data. [Where "Update data" is a link that performs the same function as the Update data button]

Screen Shot 2019-03-21 at 9.20.33 PM.png (240×1 px, 60 KB)

@Prtksxna, please take note. I don't know if you want to add this to the mockups or not...

@Samwilson, I've added what will be the last of my tweaks for this ticket (promise!). It is a change, not shown in the mockup, to the language of the "Subtitle" for the Partial states. It's in the Description, but here is what I wrote:

Cool. I've added this to PR234.

@Samwilson, I have the URLs for the [?] Help icons that were labeled as "to come" until now. I've added them to the Description. For your convenience, I'll put them here, too:

Help icons in the Valid and Partial Error boxes

The address and hover message for both Valid and Partial states are the same

Help icon inside the Participants filter panel

Help icon inside the Categories filter panel

(And now I really, really am done with this spec!)

PR234 is merged and ready to be seen on the staging site.

Remaining parts of this to come soon...

@jmatazzoni: Does the "Settings successfully completed or updated. Click "Update data" to calculate metrics." green banner stay showing always, even after the stats have been updated? At the moment it disappears after update, but from the spec it sounds like it should stay there always.

https://github.com/wikimedia/eventmetrics/pull/246 contains the rest of the filtering logic.

The last part of this will be the "Changes to instruction text and labels of filter panels" (we're still waiting for design for this, according to the spec). One point however: I think the URLs should follow the form that I've just added for the help-links in the error boxes, i.e. this sort of thing so that the target can be moved around as required in that page.

In T218340#5056878, @Samwilson wrote:

@jmatazzoni: Does the "Settings successfully completed or updated. Click "Update data" to calculate metrics." green banner stay showing always, even after the stats have been updated? At the moment it disappears after update, but from the spec it sounds like it should stay there always.

Good question @Samwilson. I've added the answer to the description above. Here it is, for your convenience:

  • The green banner shown below appears ONLY until the user has "Calculated totals" (and it appears every time the page loads until the user Calculates totals). Once totals have been calculated, the banner disappears but the status messages/icons continue to display.

In addition, I've made some adjustments to the messaging, based on the fact that I didn't fully understand some of the existing functionality. Find those adjustments in T219436.

I think everything in this ticket is merged now and ready for QA on the staging site. The remaining parts will be done in T219436.

@Samwilson, great work on this! I found a few small things to fix.

  • Missing green checkmark: in the Valid state, I'm not seeing the green glyphyicon-ok in the filter chrome.
  • Info-sign icon should be blue In the Unfiltered with Wikidata state, the glyphicon-info-sign icon is meant to be blue.

In Unfiltered state when Wikidata is one of multiple wikis specified

  • **Do not show the "Unfiltered with Wikidata" state (as currently happens). I've renamed that "Unfiltered with Wikidata ONLY," to make it more clear that this state applies, as the spec says, when "only one wiki is specified for the event: Wikidata."
  • **So, when Wikidata is one of several wikis specified, and none are filtered, just show the standard Unfiltered state. (Yes, users might not handle Wikidata right on the first Save, but I don't want to overload them in this firsts screen.)

In the Partial with Wikidata state, when multiple wikis are specified and Wikidata and at least 1 other wiki are not filtered

  • Everything looks good except the the first bullet point about "The following wikis require filtering..." should also include Wikidata. (Currently it lists only the other wikis).

In Partial with Wikidata, when 1) multiple wikis are specified, but 2) Wikidata is the only one not filtered**

You’ve kind of invented a new state here. It’s just like the one above, but you’ve closed the Categories filter panel—which is nice. I like it. But just do the following:

  • Currently the first bullet point listing the uncovered wikis is omitted entirely. It should not be omitted: include it and list Wikidata as the wiki that "requires filtering." (In other words, this is just as above but with the twist that the Categories panel is closed)
  • QA as of 4/1: This one has gone backwards. Not only are you not showing the first bullet, but now Participants is closed too. Again, you can fix in two ways, as yo prefer: 1) If you want to make this one exactly like the one above—which is to say, both filter panels are open—that is fine, 2) or just show Participants as open. But in either case, provide the first bullet point, listing the wikis that need attention (which will be Wikidata).

The above points have all been addressed and the code for them is merged and ready for QA.

Thanks @jmatazzoni, I'm fixing up the missing bits now.

It seems that I was blind earlier when I said that everything was merged; it wasn't, there is still PR269. Moving this back to needs review.

Another PR: https://github.com/wikimedia/eventmetrics/pull/272 (I hope no one minds me keeping these small; it seems easier to review this way.)

@jmatazzoni When there are multiple wikis and Wikidata is the only one not filtered and the participants panel is open, should the 'Required for Wikidata [red asterisk]' be present on that panel?

@Samwilson, better but still a few small issues unsolved. Please see below.

Partial state with Wikidata (when multiple wikis are specified and Wikidata and at least 1 other wiki are not filtered)

This looks correct overall but it no longer shows the following Status message & icon (see screenshot)

  • Participants: Required for Wikidata [icon="glyphicon-asterisk"]

Screen Shot 2019-04-03 at 11.46.33 AM.png (984×1 px, 209 KB)

Partial with Wikidata, when 1) multiple wikis are specified, but 2) Wikidata is the only one not filtered**

In addition to the problem above (wrong status message/icon), both panels are closed.

  • Let's make it simple and make this state the same as the one above. I.e., the 6 bullet points, "Required for wikidata" status message/icon on Participants panel, both panels open.

Yay! Resolving this. I think the UI came out really nice. Thanks Sam.