Page MenuHomePhabricator

Add button to sidebar to hide/show unused fields
Closed, ResolvedPublic1 Estimated Story Points

Description

Background

In usability testing it was found that some templates have a large number of parameters but few in use, which can make it hard to navigate and get an overview. This effect is multiplied significantly when dealing with multi-part template content. This ticket will help for both single and multi- situations, but a follow up ticket will expand on the multi-part situation.

Requirements

  • Add OOUI quiet progressive button without icon below the search bar. The text of the button changes based on the state and switches when clicked.
    • When unused parameters are shown, the label should be Hide unused fields. When clicked, all unused parameters are hidden and the button switches states.
    • When unused parameters are hidden, the label should be Show all fields. When the clicked, all unused parameters are shown and the button switches states.
  • When a user types into the parameter search bar, then the hide/show filtering is temporarily disabled and the button is hidden. Search results then show both checked and unchecked results. When the search term is cleared, the filter is re-enabled and is sticky to whatever it was set to before the user starting using the search.

Nice to have

  • When single templates are opened or inserted, the default state is unused parameters are shown
  • When multi-part templates are opened, the default state is unused parameters are hidden Note: In story time it was discussed this might give an opportunity to help improve performance. This was not explicitly made part of this ticket but could be a follow-up ticket. If there is relevant information learned in the course of this work, then it should be noted here.

Mocks

Desktop - Hide unusedDesktop - Show allMobile - Hide unusedMobile - Show all
Shown.png (667×901 px, 62 KB)
Hidden.png (667×901 px, 59 KB)
Mobile - Hide unused.png (568×320 px, 19 KB)
Mobile - Hide unused-1.png (568×320 px, 19 KB)

Specs

Screen Shot 2022-01-13 at 12.09.08.png (693×302 px, 30 KB)

Event Timeline

thiemowmde set the point value for this task to 8.Jan 5 2022, 12:44 PM

Moving out of UX/PM review. Most things have been updated, including mocks and the addition of specs. There is one last piece of UX copy which might be updated but the work can begin on the rest with this as a placeholder. Copy should be finalized by end of the day today.

While implementing this: What should happen, if no parameter is used and you hide the unused. Should there be some text or do we show an empty nothing :-D?

While implementing this: What should happen, if no parameter is used and you hide the unused. Should there be some text or do we show an empty nothing :-D?

Good question. It probably should say something but I need to give this some design time, which I probably won't have until tomorrow. If it's blocking you then feel free to move into the PM/UX column. Otherwise, I'll add to the task description once I have a solution.

Change 753462 had a related patch set uploaded (by WMDE-Fisch; author: WMDE-Fisch):

[mediawiki/extensions/VisualEditor@master] [WIP] Add button to sidebar to hide/show unused fields

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

Answers to the current open questions

What should happen, if no parameter is used and you hide the unused. Should there be some text or do we show an empty nothing :-D?

Show empty nothing. The button will say Show all fields which is enough to indicate that there is something to show. In most cases, this will also only happen after a user has intentionally clicked the button and hidden the fields, so they are aware that they are there. No additional text is needed.

should there be an additional “show all fields” button when filtering via the “find field” input field?

No. Stay with the behavior as specified in the ticket and hide the button when searching. The user can clear the field (also with the clear button in the search field) if they want to see all fields.

Does a field vanish if you uncheck it while the hide filter is enabled?

No, it should stay visible. If the user then shows all, then re-hides, then it would be hidden along with all the other unchecked boxes. I believe this is the behavior as currently implemented.

Change 753462 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Add button to sidebar to hide/show unused fields

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

Aaaaand another edge case: What should the user see, when there are no parameters at all?

I guess the button makes no sense then. So hide it? And if the user adds unknown parameters there, show it? 🤔

[…] when there are no parameters at all?

I think this is relatively straightforward (unless @ECohen_WMDE says otherwise, obviously): it should behave the same as the search field above. As of now we hide the search field when there are no parameters, and display it the moment the first undocumented parameter is added.

Another question is if it makes sense to have the search field and the "hide unused" button when there is only 1 parameter? Or 2? Or 3? Basically: when the list of parameters is shorter or the same length as the two filter widgets, I suggest to not waste the limited screen space for the filters but show only the parameters. It feels like 3 parameters are a good cut. When there are 4 the two filters appear.

Change 753984 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Defer creating template parameter search when it's not needed

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

Change 753992 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Defer creating template parameter widget for 0 parameters

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

Change 753993 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] [POC] Hide parameter search when there are only 3 params

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

[...] it should behave the same as the search field above. As of now we hide the search field when there are no parameters, and display it the moment the first undocumented parameter is added.

Agree, these should act as a unit - either both be visible or hidden at the same time. At a minimum I would match this existing search field behavior.

[...] when the list of parameters is shorter or the same length as the two filter widgets, I suggest to not waste the limited screen space for the filters but show only the parameters. It feels like 3 parameters are a good cut. When there are 4 the two filters appear.

I think this would be a nice to have. I tested on mobile and it seems like on a small iphone, starting to show the search field at 4 would work well. I'm fine to go ahead with this cut-off.

Screen Shot 2022-01-18 at 16.10.33.png (130×280 px, 11 KB)

I know this is still in-progress, so please ignore if this comment is coming too early! But I was checking something else on beta and noticed that the field and the button are not aligned at the moment. This might have not been clear enough in the specs, but the idea is that the edge of the button itself is aligned, not the label within the button.

[…] starting to show the search field at 4 would work well. I'm fine to go ahead with this cut-off.

Happy to hear that! Look how one of my test cases currently looks like. 😉

Screenshot from 2022-01-18 16-59-04.png (1×303 px, 32 KB)

WMDE-Fisch changed the point value for this task from 8 to 1.

Change 755351 had a related patch set uploaded (by WMDE-Fisch; author: WMDE-Fisch):

[mediawiki/extensions/VisualEditor@master] Fix left margin of hide unused button

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

@ECohen_WMDE
Here's another edge case, when the template has no parameters the sidebar looks buggy due to its utter emptiness:

image.png (332×939 px, 43 KB)

[…] sidebar looks buggy due to its utter emptiness

This might partially resolve itself or at least get better with T298257: Show/hide options button and bottom bar is always visible. Another option is to collapse the sidebar in this case, and expand it only after the first parameter was added.

@ECohen_WMDE, I suggest to track this in a separate ticket in case we decide to do something about this.

Change 753984 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Defer creating template parameter search when it's not needed

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

Change 755351 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Fix left margin of hide unused and checkboxes

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

Change 753992 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Defer creating template parameter widget for 0 parameters

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

@awight Good point, that does look odd when it's 100% empty, though I'm now sure how/if we want to change this. Agree with @thiemowmde, that if anything, I'd create another ticket.

Will add this to my list to discuss with Lena at our next JF. Especially since the last we discussed, the decision had been made not to do T298257: Show/hide options button and bottom bar is always visible. Will take another look with this edge case in mind.

WMDE-Fisch added a subscriber: WMDE-Fisch.

Change 753993 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Hide parameter search when there are only 3 params

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

thiemowmde claimed this task.
thiemowmde moved this task from Demo to Done on the WMDE-TechWish-Sprint-2022-01-19 board.