Next step

• Per the discussion we had during Thursday's (4 Feb) standup, the next step is for @iamjessklein to review and provide comments about the Patch demo prototype @Esanders created [i].
  • Note: please keep the with the task description's ===Open questions in mind as well as the over-arching requirements/stories contained within T250295's description in mind as you're reviewing.

i. Steps for reviewing the prototype:

1. Visit https://patchdemo.wmflabs.org/wikis/c555f5ca84/wiki/Main_Page
2. Create an account
3. Visit an old revision of a talk page (e.g. Talk:Douglas Adams)
4. Click a [ reply ] affordance within a section that, in subsequent revisions, has had new comments posted to it (e.g. Looking for help from a Python dev to help getting ReFill to build and run)
5. Wait a bit
6. ✅ Notice the "new comment" alert appears within the Reply Tool

Notes
@iamjessklein is going to follow up on the list items below as part of work on this ticket...

• Make it more obvious/clear what people need to do in order to see the new comments the alert is notifying about. //Right now, it's not clear what you ought to be clicking to reload. The box? The text?
• Explore making the notice a bit more discreet and less warning-/error-like [i]

i. Current new comment notification shown in conjunction with anon warning:

<meta thing happening here> I am asking a few people to come here and test out this same functionality here to see how phabricator handles it.

Here's a gif of the patch in action:

In T300560#7750743, @iamjessklein wrote:

<meta thing happening here> I am asking a few people to come here and test out this same functionality here to see how phabricator handles it.

Hi Jess!

and now let's try to break Phabricator

In T300560#7750743, @iamjessklein wrote:

<meta thing happening here> I am asking a few people to come here and test out this same functionality here to see how phabricator handles it.

Responding to this comment

IM FAMOUS

test

+1

In T300560#7750746, @iamjessklein wrote:

Here's a gif of the patch in action:

oops

hiiii

Hulllo test!

what should I say now? Hmmmm

salut jess

phabricator is dead

🧐 y'all had us worried about compromised Phab accounts for a second there!

In T300560#7750816, @aishwaryavardhana wrote:

and now let's try to break Phabricator

Please consider using the Phabricator test instance in cloud VPS for these kinds of tests.

https://phab.wmflabs.org/

@Dzahn sorry! thank you for letting me know about that test instance, I didn't know that existed.

@Esanders and @ppelberg -As the functionality will be maintained no matter what feedback I provide here I propose that we ship this iteration, and then I'll make and work on a separate ticket for iterating on the style. Specifically, the basic interaction of showing a warning, and then clicking on something to refresh the page, is not likely going to change. If I get agreement here (please +1 or -1) to let me know then we can take the next steps.

In T300560#7750980, @iamjessklein wrote:

@Esanders and @ppelberg -As the functionality will be maintained no matter what feedback I provide here I propose that we ship this iteration, and then I'll make and work on a separate ticket for iterating on the style. Specifically, the basic interaction of showing a warning, and then clicking on something to refresh the page, is not likely going to change. If I get agreement here (please +1 or -1) to let me know then we can take the next steps.

Next step

• @iamjessklein to design the changes she alluded to above and post them to this ticket for feedback. [i]

i. Note: during the team's 3 March standup, we decided work on design changes will happen in this ticket rather than in a new one.

In T300560#7750980, @iamjessklein wrote:

@Esanders and @ppelberg -As the functionality will be maintained no matter what feedback I provide here I propose that we ship this iteration, and then I'll make and work on a separate ticket for iterating on the style. Specifically, the basic interaction of showing a warning, and then clicking on something to refresh the page, is not likely going to change. If I get agreement here (please +1 or -1) to let me know then we can take the next steps.

+1 – We've merged the patches and the feature will be included in this week's release.

@BKots-WMF has done a few rounds of iteration here.
@BKots-WMF can you please share some screenshots and describe your latest round of iteration here?

In T300560#7833397, @iamjessklein wrote:

@BKots-WMF has done a few rounds of iteration here.

@BKots-WMF @iamjessklein some Design System feedback about these iterations:

1. Avoid to use yellow since we only use yellow in our system for warning feedback in warning messages

2. Try to use one of our current components. In this case, you could use, for example, one of our following components:

• You can use one of our current buttons

• You can use one of our messages (you could use them as toast messages)

3. If our current components don't work for the functionality you are creating (in this case, a clearable notification with the number of new messages) you can create a new custom component based in the styles that we have in our library since we need to use at least the tokens (styles) created in our system.

@bmartinezcalvo Can you make the Figma pages you're referring to publicly available?

Nice iteration @BKots-WMF

Of the two options, I think that you should anchor future exploration on Option 2 because there are two obvious interactions supported here: 1. clicking to viewing the comments and 2. clicking to ignore. That said, I prefer the visual contrast of the actual button in option 1. For your next iteration can you try exploring:

• a higher contrast button
• what the button looks like when it animates on during the conversation?
• what happens if you click to see the new comments?
• what happens if you click the "x" part of the component?

I am looking forward to seeing the mobile explorations as well.

In T300560#7856935, @matmarex wrote:

@bmartinezcalvo Can you make the Figma pages you're referring to publicly available?

@matmarex to be able to view these Figma links you should create you own Figma account here with your Wikimedia email. All our Figma links are available for all Wikimedia team members.

@bmartinezcalvo Thanks, that lets me see them, but I think Wikimedia community members who are not Wikimedia Foundation employees would also appreciate being able to view it. Is it possible to make them public?

In T300560#7864579, @matmarex wrote:

@bmartinezcalvo Thanks, that lets me see them, but I think Wikimedia community members who are not Wikimedia Foundation employees would also appreciate being able to view it. Is it possible to make them public?

@matmarex I'm not sure if we want to make public our WIP design system file now to all the community. Currently we are giving public permissions to specific files but not to our design system file since we are working on it and it's in a step where we don't have relevant elements like tokens created there. I think we will make it public in the future but not now. What do you think about this @iamjessklein?

Thanks for these @BKots-WMF.

My main issue is that it is not clear that the button is clickable and what clicking on the "button" does. Conversely if you are looking to see the new comments, it is not clear that it is the button which does that.

For a visually impaired user that is missing the contextual clues of the button placement, and it's asynchronous appearance during the middle of an edit, this would be even more confusing.

For accessibility and discoverability, I think there needs to a be clearly labelled action to "show new comments"/"reload the page".

Agreed that it's not obvious what clicking the button will do (or that it's a clickable-button), and since it's a fairly disruptive action (triggering a reload/refresh and viewport movement), it might be good to hint to users somehow what would occur. The real time preview project has a similar use case for a manual-refresh button in their preview UI, so it might be an opportunity to share some design cues?

I noticed that the design has picked up a "<username> and X others typing..." text below the input box, and I wanted to note that (a) its not something we have the technical ability to add currently, and (b) it has some privacy concerns if we did add it as-pictured.

Hi all,
Thanks @Esanders and @DLynch for the feedback. This is something to think about, especially on my next iteration.

Meanwhile, I have been working on the animations and transitions. In the prototype, I have explored the following:

1. What the button looks like when it animates on during the conversation?
2. What happens if you click to see the new comments?
3. What happens if you click the "x" part of the component?

Next steps

• Have a yellow fade out highlight on the new comments or any other indicator

• Explore on the different states of the button

• Smoothen out the transitions and animations

You can click here to view the prototype.

MULTI ACTION BUTTON EXPLORATIONS

I was exploring on how to distinguish the two actions;

1. Click to view the comments
2. Click to dismiss the alert/button

This is how Figma has done it

Let me know your thoughts and ideas

I think we can keep a concise message and have an accessible button by merging the call to action and the information about how many comments there are, using a message like:
"Show 8 new comments"

This is similar to what happens on Special:RecentChanges

To keep it as short as possible, using an ✖ instead of “Dismiss” is probably better, but I don’t like the two bubbles. What about using an icon and @Esanders’ text version, but having one (divided) bar, like in your first exploration?

Yes @Tacsipacsi, that's what we have decided to work with. Thanks.

In T300560#7857593, @BKots-WMF wrote:

Option 2

If implemented as a ButtonGroupWidget it would look something like this:

In T300560#7906988, @Esanders wrote:

If implemented as a ButtonGroupWidget it would look something like this:

I think I prefer this style: it separates the "show new replies" and the button to close without a lengthy "dismiss" or the two-buttons-stuck-together took of F35097502.

Well will also have to tweaks the input padding as it is currently possible for the text and button to overlap:

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

[mediawiki/extensions/DiscussionTools@master] Redesign "new comments" warning

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

As discussed during the meeting we had as a team today, if after someone elects to dismiss the new comment alert another new comment is published in the discussion they are drafting a reply within, another new comment alert will NOT be shown unless they decide to reload the page.

Test wiki created on Patch demo by ESanders (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/067eeb0265/w/

Patch demo testing:

• Start a reply in this section: https://patchdemo.wmflabs.org/wikis/067eeb0265/w/index.php?title=Talk:DiscussionTools&oldid=23#Badminton_module
• Wait about 10 seconds (Patch demo is slow)

In T300560#7909618, @Esanders wrote:

Patch demo testing:

• Start a reply in this section: https://patchdemo.wmflabs.org/wikis/067eeb0265/w/index.php?title=Talk:DiscussionTools&oldid=23#Badminton_module
• Wait about 10 seconds (Patch demo is slow)

With @Esanders filing and fixing T307807, I think this work is ready for release (pending code review and QA, of course).

Change 789657 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Redesign "new comments" warning

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

Test wiki on Patch demo by ESanders (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/067eeb0265/w/