Page MenuHomePhabricator

Create prototypes for usability testing of Usability Improvements (desktop + mobile)
Closed, ResolvedPublic

Description

This task involves the work of creating a functional prototype that volunteers can use to evaluate the three Usability Improvements the Editing Team is exploring:

  1. Topic Containers
  2. Clear Affordances
  3. Page Frame

Prototype

  • Link to prototype: #TODO (prototype last updated on: TBD DATE)

Requirements

Meta

  • Platforms: Desktop & Mobile
  • Skin(s): New Vector, Vector Legacy, and Minerva
    • Note: "Topic Containers" and "Clear Affordances" should still appear for people who enabled the Vector Legacy setting within Special:Preferences#mw-prefsection-rendering` whereas the new Table of Contents and Sticky Header will NOT appear in Vector Legacy or Minerva Neue.
  • Localization: two patch demo instances will need to be created (one instance for RTL languages and another for LTR languages)
  • Prototype location/implementation: https://patchdemo.wmflabs.org/

User Experience

  1. Topic Containers
    • Note: implementation of Topic Containers (mobile + desktop) will have happened in T303362 and T301139.
  2. Clear Affordances/Clearer Visual Cues
    • The reply buttons that are appended to signed comments should all look the same, regardless of whether the comment to which the reply button is connected is indented or not.
  3. Page Frame
    • Table of Contents: see ===Requirements in T303634
    • Sticky Header: see ===Requirements in T304187

Designs

Designs that illustrate the requirements above can be found in the ===Phased roll-out annotated designs section of T299814.

Open questions

  • 1. What – if any – skins beyond Minerva, New Vector, and Vector Legacy will the Usability Improvements be compatible with?
  • 2. How – if at all – should section edit links be displayed for H3s and H4s?
    • Section edit links should continue to be displayed next to === H3 === and ==== H4 ==== section headings.
  • 3. How – if at all – will Reply buttons be styled and placed differently on desktop vs. mobile?
    • Consider the case of votes on desktop: Talk:DiscussionTools#Proposal_to_turn_the_DYK_helper_into_a_gadget .
    • Mobile + Desktop: both interfaces will use the "quiet" style buttons
    • Mobile: the "quiet" style Reply buttons will appear on the line beneath the last line of the comment to which they are connected
    • Desktop: the "quiet" style Reply buttons will appear on the same line as the signature contained within the comment to which they are connected

Related Objects

Event Timeline

Note: "Topic Containers" and "Clear Affordances" should still appear for people who enabled the Vector Legacy setting within Special:Preferences#mw-prefsection-rendering` whereas the "Page Frame" interventions (ToC) + Sticky Header will NOT appear in Vector Legacy.

What about other skins: Minerva, Monobook, Timeless as well as the unsupported and no longer selectable, but still existing Modern and Cologne Blue? Those parts that apply to legacy Vector could probably apply to other skins as well. Also, I don’t think testing Vector but not Minerva on mobile makes much sense, using Vector on mobile is quite an edge case.

Note: "Topic Containers" and "Clear Affordances" should still appear for people who enabled the Vector Legacy setting within Special:Preferences#mw-prefsection-rendering` whereas the "Page Frame" interventions (ToC) + Sticky Header will NOT appear in Vector Legacy.

What about other skins: Minerva...

Ah, good spot, @Tacsipacsi. I specified "Mobile" as a platform the prototype should support without specifying that it also support "Minerva"...task description updated.

...Monobook, Timeless as well as the unsupported and no longer selectable, but still existing Modern and Cologne Blue?

You can expect a comment from me in the next week or so addressing what skins – beyond New Vector, Vector Legacy, and Minerva – the Usability Improvements will be compatible with.

In the meantime, what skins would you expect the Usability Improvements to be compatible with? And if you can bring language to it, I'd value knowing what contributed to this expectation.

(@ppelberg to finalize whether all [ reply ] links will be styled the same way or styled differently depending on whether the comment to which the [ reply ] link is connected is indented)

Per the conversation @iamjessklein and I had today, to start, all reply buttons will be styled in the same way, regardless of whether the comment to which the button is connected is indented or not.

Note: I've updated the task description to reflect this decision to style all reply buttons in the same way.

task description updated.

Please make it clear what exactly is in scope for Minerva. According to the note, the sticky header changes won’t be available on legacy Vector—but you didn’t write they won’t be available on Minerva either, even though neither Minerva has a sticky header.

In the meantime, what skins would you expect the Usability Improvements to be compatible with? And if you can bring language to it, I'd value knowing what contributed to this expectation.

I’d expect them to be available on all skins unless a skin is by design incompatible with them (this currently means that the ToC improvements and the sticky header button may not be available in any skin other than new Vector). Of course I don’t expect active support for deprecated skins (Modern, Cologne Blue), but I see no reason not to make Usability Improvements that only touch the content area available there. Just because I happen to use Timeless (or even Cologne Blue), I might want to use topic containers; the skin and Usability Improvements preferences are orthogonal.

  • 2. How – if at all – should section edit links be displayed for H3s and H4s?

This question surfaced during the team meeting we had on 13 April.

@iamjessklein talked about this after and have to think that section edit links should continue to be displayed next to === H3 === and ==== H4 ==== section headings.

Note: @Esanders implemented the above already. See: https://patchdemo.wmflabs.org/wikis/484c06ac07/wiki/Talk:DiscussionTools#H3 .

ppelberg updated the task description. (Show Details)
ppelberg updated the task description. (Show Details)

task description updated.

Please make it clear what exactly is in scope for Minerva. According to the note, the sticky header changes won’t be available on legacy Vector—but you didn’t write they won’t be available on Minerva either, even though neither Minerva has a sticky header.

Good spot. I've updated the task description in T305655#7874540; please let me know if you see any remaining ambiguities in the scope.

In the meantime, what skins would you expect the Usability Improvements to be compatible with? And if you can bring language to it, I'd value knowing what contributed to this expectation.

I’d expect them to be available on all skins unless a skin is by design incompatible with them (this currently means that the ToC improvements and the sticky header button may not be available in any skin other than new Vector). Of course I don’t expect active support for deprecated skins (Modern, Cologne Blue), but I see no reason not to make Usability Improvements that only touch the content area available there. Just because I happen to use Timeless (or even Cologne Blue), I might want to use topic containers; the skin and Usability Improvements preferences are orthogonal.

This is helpful context. We talked about skin support as a team this week and converged on the below. I've also created T306730 to make this information/decision easy to reference in the future.

Skin(s)Support LevelDescription
New VectorSupportedEditing Team will offer the following features and fix issues related to them. Note: issues will be subject to the Editing Team's normal prioritization process.: Topic Containers, Clear Affordances, new ToC, and Sticky header
Legacy Vector, Minerva NeueSupportedEditing Team will offer the following features and fix issues related to them. Note: issues will be subject to the Editing Team's normal prioritization process.: Topic Containers, Clear Affordances
Timeless, MonoBook, CologneBlue, Modern, NostalgiaNOT SupportedEditing Team will offer the following features without providing any guarantee that we will fix issues related to them: Topic Containers, Clear Affordances
VPuffetMichel subscribed.

Assigned to Ed and move to "Doing" as he is already working on this!

As @Esanders, @iamjessklein, and I talked about offline today, Ed is going to investigate the work involved with adding the Add topic button within the sticky header to the desktop version of the prototype.

Note: we made the decision to add the Add topic button to the site-wide sticky header on desktop in T304187#7862352 and the work to implement this for use in production will happen in T304187.