Page MenuHomePhabricator

Add @ mention affordance to visual mode's toolbar
Closed, ResolvedPublic

Description

This task is about adding an affordance within the Reply tool's visual mode that signals to people:

  1. A feature exists that enables you to ping/@-mention other people.
  2. This is how you use/activate said feature.

Background

In order to use/activate the Reply tool's new username suggestion list (T232601), people need to know to type @ in the tool's visual mode.

In T232601#6091882, we decided not to include any visual indication that the @-mentioning functionality exists. This decision was based on the following assumption:

  • Reasoning: we assume that typing is a known design pattern/convention that does not need to be visually communicated in the interface.
  • Caveat: at least one person has mentioned something counter to the above. [i] They have said it not being intuitive that the is magic considering they, and potentially others, are used to typing {{ and [[ to trigger interactive functionality, not .

Trouble is, we are continuing to get feedback that suggests the opposite: without a visual indication people, particularly experienced contributors, do not expect this functionality to exist.[1][2][3][4]

Open questions

  • What – if any – instrumentation needs to be added to track usage of the affordance this ticket will introduce?

Done

  • Add the userAdd icon to the Reply tool's visual mode toolbar
  • When the userAdd icon is clicked, the following should happen:
    • The default syntax that will precede the mentioned user name when the drafted comment is posted to the page (currently @) should be inserted into the Reply tool's text area and the username suggestion list should open. See recording below. [5.]

  1. In https://w.wiki/PNj @Pelagic writes:

It wasn't immediately obvious to me that I could keep typing after the @ to filter the list. But once I discovered that, it was easy to use and felt responsive...

  1. In https://w.wiki/SjD @Dvorapa writes:

It is not prominent at all, I had to play a minute with the UI only to find out there is no UI feature at all.

  1. In https://w.wiki/SjE @geraki writes:

Well, since there is no button (and why are they on another side?) there is NO way to know how to ping unless you already know the template.
I now see in other comments that you just have to type "@" (as in Structured Discussions). Nice, but I did not figure it the first time as there is no hint about that

  1. In https://w.wiki/SjF @Wladek92 writes:

I found ping is a template. Using {{ , i discovered templates can be inserted in the response but it seems this is not the solution. Then I discover '@' i could use as a shortcut for 'user:' . May be this was requested ? ...

5. Recording show the experience we should replicate [from GitHub]
Video:
Screenshot:
Screen Shot 2020-06-04 at 3.27.29 PM.png (594Γ—1 px, 119 KB)

Event Timeline

userAdd icon (from Flow):

image.png (229Γ—786 px, 15 KB)

@ icon:

image.png (239Γ—791 px, 15 KB)

RE T254366#6193316, these are helpful to see; thank you for mocking them up, Ed.

Approach
As a first approach, I think we should show the userAdd icon from Flow in the Reply tool's visual mode editing toolbar. When said icon is clicked, the following should happen:

  1. Person clicks userAdd icon
  2. The default syntax that will precede the mentioned user name when the drafted comment is posted to the page (@) [i] should be inserted into the Reply tool's text area and the username suggestion list should open. See recording below. [ii]

Rationale

RequirementDescription@userAdd
A.The mention/ping icon in the visual mode's toolbar needs to clearly communicate to people, across languages, who have experience pinging people on Wikipedia and those who do not, that clicking the chosen icon will enable them to notify another person on the platformI assume @ is fairly universally understood as a way of notifying another person in so far as it's used on a variety of wikis (e.g. bn.wiki, ru.wiki, zh.wiki, hu.wiki and nl.wiki) and platforms (e.g. Github, Twitter, Facebook, LinkedIn and WhatsApp) .I assume userAdd is equally recognizable as a signifier for notifying another person based on its use in Flow and a similar icon being used on Facebook.
B.If a keystroke is used for the mention/ping icon in the visual mode's toolbar, said icon should not cause people to become confused about what keystroke will trigger the username suggestion list. Communicated in a different way: I think it would be confusing to people if the icon used in the toolbar: a) was a keystroke AND b) said keystroke was different from the keystroke used to trigger the feature. Also raised here: T250332#6166695.I wonder if a the icon being a keystroke and it inserting a different keystroke into the text input, in the case of ar.wiki [iii], could cause confusion.βœ…I think using an icon that is not a keystroke avoids the risk of the icon carrying a double, and perhaps contradictory, meaning.

@iamjessklein: what do you think of the above? Do you think the userAdd icon satisfies the "Requirements" above?


i. The default syntax could change, per T250332.

ii. Recording show the experience we should replicate [from GitHub]
Video:
Screenshot:
Screen Shot 2020-06-04 at 3.27.29 PM.png (594Γ—1 px, 119 KB)

iii. See T252460#6127013 and https://w.wiki/Sxe


EDIT 5-June: updated requirements table above

DECIDED
Per conversation with @iamjessklein + @Esanders:

  • We're going to add the userAdd icon to the Reply tool's visual mode toolbar
  • The work to make the userAdd icon consistent with other OOUI icons will happen in: T254800
    • This work will not block the implementation of this task.

The above has been added to the task description.

Engineering implementation note:

We will likely need a custom action, as 2 separate commands are required: one to insert the '@' (which doesn't trigger the sequence), and one to open the suggest box (then maybe another to focus the surface).

Change 604744 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/DiscussionTools@master] Add user mention tool

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

Change 604744 merged by jenkins-bot:
[mediawiki/extensions/DiscussionTools@master] Add user mention tool

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

matmarex subscribed.

This was implemented with the 'userAvatar' icon, while y'all figure out what to do about 'userAdd'.

image.png (483Γ—2 px, 61 KB)

This was implemented with the 'userAvatar' icon, while y'all figure out what to do about 'userAdd'.

image.png (483Γ—2 px, 61 KB)

Using userAvatar as opposed to userAdd: is there a conversation where this decision was made? I didn't see anything in Gerritt. Tho, maybe the conversation that led to this happened on T254800?

...I ask the above curious about the rationale.

We can't use 'userAdd', because it's only a part of the Flow extension and not available elsewhere, until someone works out how it's supposed to look and includes it in OOUI (I believe T254800 is the task about doing that).

I thought that you meant that we should implement the interface anyway even though the icon is not final (T254366#6203271).

We can't use 'userAdd', because it's only a part of the Flow extension and not available elsewhere, until someone works out how it's supposed to look and includes it in OOUI (I believe T254800 is the task about doing that).

Ah! I did not realize until this moment that userAdd not being upstreamed prevents it from being used within the Reply tool.

Said another way: I thought we could use userAdd before T254800 is resolved.

I thought that you meant that we should implement the interface anyway even though the icon is not final (T254366#6203271).

T254366#6203271 was built atop the assumption that we could use userAdd before it's been upstreamed. However, considering that assumption seems to be incorrect, then next steps seem like what's described below. Before moving forward on those "Next steps," can you please confirm what I described in this comment is correct?

Next steps

  1. Use userAvatar in the meantime as Ed implemented and you drew attention to in T254366#6225439 (thank you, Bartosz).
  2. Prioritize T254800

Instrumentation

  • @DLynch: considering I'd like for us to track usage of this affordance, should I file a ticket to implement something like the below?
    • "feature": mwUsernameCompletion
    • "action": window-open-from-tool

cc @Mayakp.wiki @MNeisler

I've added the above as an "Open question" in the task description.

Nothing new would need to be done for instrumentation. The window-open-from
stuff is all automatically instrumented.

Nothing new would need to be done for instrumentation. The window-open-from
stuff is all automatically instrumented.

Dope. Thank you for confirming, David. I've updated the task description to reflect this. I've also added a comment on the QA task to make sure we are testing this event: T252926#6226312.

We can't use 'userAdd', because it's only a part of the Flow extension and not available elsewhere, until someone works out how it's supposed to look and includes it in OOUI (I believe T254800 is the task about doing that).

Ah! I did not realize until this moment that userAdd not being upstreamed prevents it from being used within the Reply tool.

Said another way: I thought we could use userAdd before T254800 is resolved.

I thought that you meant that we should implement the interface anyway even though the icon is not final (T254366#6203271).

T254366#6203271 was built atop the assumption that we could use userAdd before it's been upstreamed. However, considering that assumption seems to be incorrect, then next steps seem like what's described below. Before moving forward on those "Next steps," can you please confirm what I described in this comment is correct?

Next steps

  1. Use userAvatar in the meantime as Ed implemented and you drew attention to in T254366#6225439 (thank you, Bartosz).
  2. Prioritize T254800

Yes, that's all correct.

Yes, that's all correct.

Roger that. Thank you, @matmarex

Said another way: I thought we could use userAdd before T254800 is resolved.

I was hoping to do this too, but the current version hasn't been merged into OOUI yet: https://gerrit.wikimedia.org/r/#/c/oojs/ui/+/602822/