Page MenuHomePhabricator

Make reply links more discoverable
Open, Needs TriagePublic

Description

Problem

Usability testing has revealed that the reply links on Talk pages aren't very discoverable.

Screenshot

Possible Solutions

    1. Feedback
  • The positioning and styling of the "Reply" links look a little odd, though. It would be nice if it could be a little more distinguished from the actual text possibly by italicizing it or something like that. @Kaartic writing here.

Event Timeline

iamjessklein updated the task description. (Show Details)Jun 16 2020, 1:17 PM

I actually experimented with this when working on T249915: the main problem was that OOUI buttons are kind of big, and they affected the line-height of the text when we put them there (causing a "gap" before the last line of the comment). If we force the line-height not to change, then the buttons nearly overlaps the text on the previous and next line.

Here's a mockup of that problem:

I might need you or @Volker_E to tell me how you'd like the buttons to look when we make them smaller. The design guide doesn't have smaller or bigger buttons, and the existing OOUI code actually tries hard to give the buttons a minimum size that we can't override.

ppelberg updated the task description. (Show Details)Jun 18 2020, 1:59 AM
ppelberg added a subscriber: Kaartic.
Marc added a subscriber: Marc.Jul 20 2020, 10:44 PM

Since the beginning of my awareness of the Reply Tool, I use some css to style the 'reply' links. My considerations:

  • a background color and rounded corners to give it a button-ish look,
  • overall light colors to prevent it from being too prominently in view (too intrusive),
  • a reply icon in front of the text to make it better recognizable and more easy to spot (also for languages with a very short translation of 'reply').

Screenshot (with user language Dutch) from April 30, so before the square brackets were added:

CSS
span.dt-init-replylink-buttons {
  margin-left: 0.5em;
  font-size: 70%;
}
span.dt-init-replylink-buttons > a {
  color: #6699ff;
  background-color: #ddeeff;
  border: 1px solid #ddeeff;
  border-radius: 8px;
  padding: 0px 4px 1px;
}
a.dt-init-replylink-reply::before {
  content: "";
  padding: 0 8px;
  margin: 0 -2px 0 -4px;
  background-color: #6699ff;
  mask: no-repeat center/80% url("//upload.wikimedia.org/wikipedia/commons/9/95/Ic_reply_48px.svg");
}

Thanks @Marc and @matmarex - I want to consider this as part of our larger EPIC focused on the visual refresh. My thinking here is that we need to design a holistic UI treatment for the Talk page UI.