After exploring many different options and discussing them with the team, this is the preferred approach to differentiate between suggestions and edit checks.

Desktop	Mobile

Card:

Edit Checks:

• Style: background-color-base (white) and border-color-base
• Title: Bold
• Icon: status icon (warning, error)

Suggestions:

• Style: background-color-progressive-subtle (blue) and border-color-subtle
• Title: Regular on desktop and Bold on mobile. We considered adding a question mark at the end of each suggestion title, but decided against it as it could cause issues with translations.
• Icon: TO DECIDE (once decided on icon, we will share in this task. For now, we can use e.g the info icon).

Highlighted text:

• Default: background-color-interactive-subtle
• Hover, Active, Selected: it will use the status color
  • Checks: background-color-warning-subtle
  • Suggestions: background-color-progressive-subtle

Mobile

• Title: it will be Bold in both checks and suggestions.
• Style:
  • Checks: background-color-base (white)
  • Suggestions: background-color-progressive-subtle (blue)
• Highlighted text: same behavior as on desktop

Random feedback:

• Switching to background-color-base for checks makes them feel less "clickable" to me. It also lowers their apparent emphasis -- my eyes are more drawn to the suggestions than to our more-important direct feedback on modifications.
• How should stacked checks+suggestions in mobile work?
• The pale blue text-highlight conflicts with normal selections and hover effects, which I think will be confusing. (This is why we didn't use it for the "revising" state in tone check, if you'll recall.)

El T404604#11233971, @DLynch escribió:

Random feedback:

• Switching to background-color-base for checks makes them feel less "clickable" to me. It also lowers their apparent emphasis -- my eyes are more drawn to the suggestions than to our more-important direct feedback on modifications.

I explored using the background-color-interactive-subtle (gray) for checks (as they are implemented now), but since this gray is too visually similar to the progressive-subtle (blue), it was more difficult to visually differentiate suggestions from checks. For this reason, and to be more aligned with the white bottom sheet on mobile, I would use the white background in checks.

In case we use a ToggleButton to show/hide suggestions (as represented in this proposal), the blue of the button will match with the blue of suggestions cards. This visual consistency will make the connection clearer and more evident for users.

• How should stacked checks+suggestions in mobile work?

I'm exploring this solution. The main check could show a +2 indicator (or other number) in its default/collapsed state when additional suggestions are stacked within that check. Once expanding the check cards, the suggestions would be shown and the user could expand them within the expanded check card.

Since this task is to define the suggestions card, should this be covered in this or in another task?

• The pale blue text-highlight conflicts with normal selections and hover effects, which I think will be confusing. (This is why we didn't use it for the "revising" state in tone check, if you'll recall.)

What do you mean? Why the blue highlighted text conflicts with other hover effects?

For this reason, and to be more aligned with the white bottom sheet on mobile, I would use the white background in checks.

Grey's definitely better to me. If you think it's too similar to the light-blue, how about a particularly-subtle version of the check's icon-color? (i.e. a paler version of the background color used when it's expanded.)

I'm exploring this solution. The main check could show a +2 indicator (or other number) in its default/collapsed state. Then, the suggestions within that check could be shown when expanding the check.

Not what I meant -- I was talking about when multiple checks and suggestions are applied to the same range of the gutter on mobile. Currently there's a numbered badge over the icon, and next/prev buttons inside the card to move between them in the stack.

(Separately I don't think that can work -- stacking them inside the card like that seems extremely confusing. For one thing, your example is strange because pasted content couldn't contain any suggestions since it's 100% modified-content. As a different issue, on mobile making those cards really-tall seems problematic.)

Since this task is to define the suggestions card, should this be covered in this or in another task?

Has to be handled here, I think, since we can't implement it without knowing how this should interact.

What do you mean? Why the blue highlighted text conflicts with other hover effects?

Because they're also pale blue, so it's hard to tell the difference between a selection and a suggestion-highlight.

After reviewing the design proposal with @AAlhazwani-WMF (Growth) and also applying the feedback collected in this task, we will include the following updates in the design proposal:

Card's color

The blue color makes suggestions cards more prominent and clickable than checks, so we will finally use background-color-base (white) for both checks and suggestions. The reason to use white instead gray for the unselected cards is that it looks cleaner when many checks/suggestions are visible in the article, we reuse the Codex Card styles, and there’s no need to visually emphasize interactivity since users will already discover that through cursor interactions improvements being implemented in T394713: EditCheck: Improve interactions.

We will rely on the rest of visual clues to differentiate them (icon, border color, Bold text, and copy if possible).

We will also unify to white in the mobile bottom sheet for both check and suggestions.

Highlighted text

Since the current background-color-progressive-subtle used in the selected suggestions text was not contrasted enough on white background and it was so similar to the background-color-interactive-subtle used in the non-selected highlighted text, I've created T406468: Update Blue50 color token in Codex to increase this contrast. This way, the highlighted text for suggestions will be contrasted enough when selected, same as the warning checks highlighted text (yellow).

Multiple checks + suggestions in the same text

To avoid confusion by stacking different checks/suggestions within the same card, I've updated the proposal with the following:

• Desktop: We can keep the current approach and simply display all cards in a list, without trying to merge them. That keeps the model consistent and avoids the complexity of deciding when to combine. We could potentially use more padding (16px) to separate cards that belong to different text blocks and less padding (4px) to separate cards that are related to the same text block.
  
• Mobile: We will use the numbered badge since the space is limited.
  

During the last Editing team meeting, we've agreed to move forward with the design proposal shared above (and documented in the task description). For now, we will implement Suggestions using blue and observe how this works. We will test the color, icon, and other aspects in a separate task.

In T404604#11251458, @bmartinezcalvo wrote:

We will test the color, icon, and other aspects in a separate task.

T406808: Conduct usability study of Suggestion Mode MVP (newcomers)

besides conversations and explorations around visual treatments and styles, i believe that UX copy can play a major role here...

if we frame suggestions as questions, they'll automatically be positioned differently compared to edit checks that use a more direct language. for example...

edit checks

• revise tone
• review pasted content

vs

suggestions

• add a citation?
• remove external link?

@AAlhazwani-WMF there's a trade-off there, though, because it means that any check that gets contributed will need a second translation for the suggestion-form of its title.

In T404604#11264584, @DLynch wrote:

@AAlhazwani-WMF there's a trade-off there, though, because it means that any check that gets contributed will need a second translation for the suggestion-form of its title.

@DLynch i think i'm confused :) so here's the question: could an edit prompt (e.g., revise tone) be both an edit check AND an edit suggestion? i'm asking because i'd thought those were two different domains, meaning that an edit prompt needed to be classified as a check OR as a suggestion.

@AAlhazwani-WMF Yup, they're the same thing. A suggestion is a check that's running on content you didn't modify in your current edit session. You actually used a current check in your suggestions example, because "add a citation" was our first released check.

There's some checks that won't ever show up as suggestions for semantic/technical reasons -- e.g. the pasted content check can't possibly show up as a suggestion, because we can only detect pasted content from the current session and so it'll always be a check.

(We could enforce that some checks/suggestions are only valid in one mode even if they technically could run, but we haven't implemented such a restriction yet for our MVP.)

Hey all, is this still blocked, or do we have enough info to get started on implementation?

El T404604#11497865, @ldelench_wmf escribió:

Hey all, is this still blocked, or do we have enough info to get started on implementation?

I've updated the task's description with the up to date design. All details are specified to start implementing the Card's component. Later, in other tasks, we will decide how each suggestion behaves. Let me know if you need other details to start implementing this.

Two questions:

1. I'm seeing the mobile card "banner" as having a white background and the desktop "banner" as having a blue background...what explains this difference?

Platform	Card	Notes
Mobile
Desktop

2. @bmartinezcalvo: would it be accurate for me to think the following...?
   • For now, we're using the 💡 icon for all Suggestions, regardless of type.
   • Later, we can replace the 💡 icon with icons that are more specific to the Suggestion at-hand

El T404604#11560850, @ppelberg escribió:

Two questions:

1. I'm seeing the mobile card "banner" as having a white background and the desktop "banner" as having a blue background...what explains this difference?

Yes, as for Checks, we will use the colored background just on the desktop expanded card while we use white bottom sheets on mobile, indicating the blue color just in the bottom sheet's icon.

2. @bmartinezcalvo: would it be accurate for me to think the following...?
   • For now, we're using the 💡 icon for all Suggestions, regardless of type.
   • Later, we can replace the 💡 icon with icons that are more specific to the Suggestion at-hand

Yes, as we discussed some time ago, we will use a unified icon for all decisions. In case we want to use specific icons for each type of suggestions I recommend creating a separate task to evaluate that change and decide which icons we would use for each suggestion/suggestion's category. In terms of consistency with the lightbulb ToggleButton, I would recommend using the same icon in cards for findability, at least for now.

https://gerrit.wikimedia.org/r/c/mediawiki/extensions/VisualEditor/+/1230353

@Esanders I've reviewed the implementation and here are some things to address to align with the design. Not sure if we need to address them in this task or in T394713: EditCheck: Improve interactions:

1. active state (pressing) should use border-color-progressive--active
2. On desktop, the hover and active states are missing when the card is expanded, to indicate that the card can be collapsed if clicked on again. We need to indicate the hover/active in the border of the card as we do when the card is collapsed.
3. When hovering over the card, the highlighted text should be hovered, indicating that this card is related with that highlighted text

Apart from this, all looks good.

Change #1237485 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/VisualEditor@master] EditCheckActionWidget: Add hover and active border colours

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

Change #1237480 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/VisualEditor@master] Add hover state to highlights when action widget is hovered

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

Test wiki created on Patch demo by BMartinezCalvo (WMF) using patch(es) linked to this task:
https://f719abad0f.catalyst.wmcloud.org/w/

Change #1237480 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Add hover state to highlights when action widget is hovered

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

Change #1237485 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] EditCheckActionWidget: Add hover and active border colours

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

@Esanders I've reviewed the updated implementation and it looks good.

We will need to continue working on some improvements for the overall design of Check cards and highlighted text in T394713 and T399294.