Page MenuHomePhabricator

Suggestions: Find alternatives for multiple resolution actions
Open, Needs TriagePublic

Assigned To
None
Authored By
bmartinezcalvo
Thu, Feb 5, 12:25 PM
Referenced Files
F71691012: image.png
Thu, Feb 5, 1:00 PM
F71690999: image.png
Thu, Feb 5, 1:00 PM
F71690886: image.png
Thu, Feb 5, 12:54 PM
F71690801: image.png
Thu, Feb 5, 12:54 PM
F71690424: image (22).png
Thu, Feb 5, 12:25 PM
F71690303: image (21).png
Thu, Feb 5, 12:25 PM

Description

Background

Some suggestions include more than one action to solve the suggestion. For example, the yearLink suggestion can offer multiple resolution actions (e.g. “Use 2002”, “Use 2004”), in addition to secondary actions like Dismiss. At the moment, all these buttons are included as stacked buttons in the card, which is not a good solution.

image (21).png (207×310 px, 12 KB)

The Check/Suggestion card was originally designed to support two equal primary actions: Accept and Dismiss. When a suggestion requires more than one valid resolution action, we need to define a clearer grouping pattern so that resolve and decline remain visually balanced, while additional resolution options do not compete for space or attention.

User stories

  • As an editor, when a suggestion offers multiple valid ways to resolve it, I want the Accept + Dismiss options to be clearly structured so I can quickly understand and choose between them.

Possible solution

If there are more than 1 action to solve the suggestion, we can group all them under a MenuButton (ButtonMenuSelectWidget in OOUI).

image (22).png (560×714 px, 125 KB)

Open questions

Add here the questions to be answered in order to design and implement the component

Artifacts

Design mockups, prototypes, etc.

Design proposal

Acceptance criteria (or Done)

  • Explore feasible solutions to group solving actions when there is more than 1 per suggestion
  • Test solution if needed
  • Implement decided solution

Event Timeline

If there are more than 1 action to solve the suggestion, we can group all them under a MenuButton.

In this particular case, we are fairly confident in the suggestion, so for me the most important actions are the two "use" buttons, not dismiss.

At the moment, all these buttons are included as stacked buttons in the card, which is not a good solution.

I agree the stacked buttons don't look great, but I think we have to accept that is going to happen sometimes, for example "Convert reference" may not fit on the same line as "Dismiss" in every language

One possibility might be to style accept buttons differently to dismiss:

image.png (207×312 px, 16 KB)

With longer labels these could still stack, but maybe we can float the dismiss button as well:

image.png (275×312 px, 26 KB)

If we used the menu in this external link case we would have to label the first action something generic like "Fix", as the two actions are quite different. I think it would be off-putting to a user (who has come to expect the buttons to resolve the issue instantly) to click on a button called "Fix" not knowing what it does. "Fix..." might help a little as an ellipsis suggests there is more to the process, but I think separate buttons would be better.

(Note the ellipsis menu not show in these, but that could be moved to the title bar as previously suggested)

Esanders updated the task description. (Show Details)

Other prior art would be how OOUI dialogs automatically layout actions. When all actions fit on one line a horizontal layout is used:

image.png (123×349 px, 9 KB)

When they don't it automatically switches to a vertical layout:

image.png (171×342 px, 14 KB)

If we used the menu in this external link case we would have to label the first action something generic like "Fix", as the two actions are quite different. I think it would be off-putting to a user (who has come to expect the buttons to resolve the issue instantly) to click on a button called "Fix" not knowing what it does. "Fix..." might help a little as an ellipsis suggests there is more to the process, but I think separate buttons would be better.

We could always find a better copy that represents the action that will occur, something like "Choose...".

I do think it improves scannability to have the actions clearly visible. Having to click in every time to see what my options are means I can't at-a-glance work through a stack of suggestions.

There's obviously cases where there's too many actions to reasonably show inside the card, but 2 + dismiss is well below that threshold.

El T416587#11589019, @DLynch escribió:

I do think it improves scannability to have the actions clearly visible. Having to click in every time to see what my options are means I can't at-a-glance work through a stack of suggestions.

I agree that visible actions improve scannability. But the issue here isn’t the number of buttons, but their meaning. In Checks/Suggestions, the current mental model has 2 equal actions: Solve + Decline. That’s why I think we need a rule-based approach: show actions in 1st level when they’re equivalent, but group them behind a clear CTA when they represent different resolutions.

I don't really think it makes sense to group them that way. Partially that's because "decline" can be a "solve" of its own -- sometimes, like in paste check, it's the "I've thought about this and I affirm that I'm allowed to do this" resolution, for instance.

I also think that in most cases where we might want to collapse multiple different actions into one "Fix" button, that bit of indirection about the exact action the button is going to take will wind up confusing people. If I see a "wrong year used in link" check and it just has "fix", it's really ambiguous what that button is going to do -- and it introduces a fear of breaking things if you click it and it does the wrong thing.

Basically, I think the trade-off isn't worth it. Better to keep everything visible for as long as we can.