Page MenuHomePhabricator

Surround "Reply" link with brackets to make it easier to identify/notice
Closed, ResolvedPublic

Description

T249184 implemented a new translation for "Reply" link text to make the tool easier for people at ar.wiki to notice.

This task is about doing a more thorough exploration of how we might change the visual appearance of the make the "Reply" link/affordance to make it more discoverable.

Context

Several contributors to ar.wiki [1][2] and hu.wiki [3]have mentioned that the "Reply" link, in its current form, can be difficult to notice:

Arabic Wikipedia

  • "...in english Reply is a 4 characters word but in Arabic it is only 2 characters, and frankly after activating the feature I spent some time to find the word on the page and I had to read the mediawiki documentation to learn how to the tool works."
  • "...the word “Reply”, we have to find a way to enhance it or show it more."
  • "I suggest to put [the word reply] in a blue box with white characters and away from the text with an EM."

Hungarian Wikipedia

  • "Highlight the Reply link to find it, it looks like part of the signature many times (button style?)"

Done

  • The reply link should be surrounded by brackets. Meaning, the page should look like this:


  1. Arabic Wikipedia link
  2. Another link
  3. https://www.mediawiki.org/w/index.php?title=Topic:Vjxycppfwer4qmrm&topic_showPostId=vjxycppfwip6yqpu#flow-post-vjxycppfwip6yqpu

Event Timeline

In the short term, just adding square brackets "[ reply ]" might make them stand out a bit from the rest of the text. This also matches the section edit link style:

and here with the reduced font size that section edit links use (13px):

ppelberg added a comment.EditedApr 8 2020, 1:57 AM

In the short term, just adding square brackets "[ reply ]" might make them stand out a bit from the rest of the text...

@iamjessklein, are you able to share what you think of what @Esanders is proposing above?

To make evaluating the proposed solution easier, Ed came up with a way for us to see how it will look on live pages. See the "Testing instructions" below.

My instinct: let's deploy it and see how people react.


Testing instructions

  1. Visit any talk page on one of our partner wikis (e.g. https://nl.wikipedia.org/wiki/Overleg_portaal:Gebruikersportaal)
  2. Open your browser's 'Console' by typing ++J
  3. Paste the following into the browser's 'Console': $('.dt-init-replylink-reply').replaceWith('[ <a href="#">reply</a> ]') (Note: clicking the "Reply" links will not work)

Nice work @Esanders

I think that this is a good solution to test for educational purposes. Additionally, remember we discussed doing more pronounced changes in conjunction with the visual refresh release, so that's good to have in the back of our minds as we iterate on this.

One nit: The styling of "Reply" should probably have parody with other actions, so in that case I would capitalize it.

cc/@ppelberg

While the toolbar actions are capitalised, the inline section edit links on which this is based are not capitalised.

@iamjessklein Hi, There is no capitalized characters in some languages like in Arabic.

In our planning meeting @iamjessklein determined for now it can be lower case.

JTannerWMF added a subscriber: iamjessklein.

This is now ready for an engineer.

ppelberg renamed this task from [DESIGN SPIKE] How might we make the "Reply" affordance more prominent/easier to notice to Surround "Reply" link with `[` `]` to make it easier to identify/notice.Jun 9 2020, 5:13 AM
ppelberg renamed this task from Surround "Reply" link with `[` `]` to make it easier to identify/notice to Surround "Reply" link with brackets to make it easier to identify/notice.
beforeafter

Change 604114 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/DiscussionTools@master] Add square brackets around reply link and use lower case (when possible)

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

ppelberg updated the task description. (Show Details)Jun 10 2020, 12:14 AM

Adding "Done" to task description; thank you for the screenshots, Ed.

The spacing between the brackets at the text is 0.25em which is the same as section edit links (although those use a smaller font size). I also increased the spacing between the whole button and the comment from 0.25em to 0.5em.

Ammarpad updated the task description. (Show Details)Jun 10 2020, 9:51 AM

In terms of an interim step this looks alright. After the last round of usability tests, I have a stronger conviction that these should ultimately be buttons.
cc @ppelberg

Change 604114 merged by jenkins-bot:
[mediawiki/extensions/DiscussionTools@master] Add square brackets around reply link and use lower case (when possible)

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

ppelberg closed this task as Resolved.Jun 13 2020, 1:38 AM