Page MenuHomePhabricator

Create Topic Container Prototype (desktop)
Closed, ResolvedPublic

Description

This task involves the work of creating a functional prototype that volunteers can use to evaluate the Topic Container design the Editing Team is considering implementing on desktop.

Story

As someone who is interested in knowing, and sharing feedback about, how the appearance of Talk Pages is evolving, I'd like to be able to interact with the in-progress designs, so that I can simulate the experience of using them in my regular wiki-work and shar*e feedback about them.

Prototype

Link: https://patchdemo.wmflabs.org/wikis/daa71e218a/w/

Requirements

Meta

  • Platforms: Desktop
  • Localization: two patch demo instances will need to be created
    • One patch demo instance will need to be configured for RTL languages and another for LTR languages
  • Configurability: Volunteers ought to be able to switch between the various Topic Container concepts (currently there are two) on the same prototype. More context in ===Open question(s) below.

User experience
Requirements are currently located within T269950.

NOTE: The Desktop Topic Container prototype will NOT contain an overflow menu whereas the MOBILE Topic Container prototype will contain an overflow menu. More in T269950#7740111.

Designs

Mobile:
Work to implement Topic Containers on mobile is now happening in T303362 per T301139#7762713.

Desktop:
Limited - COLLAPSED

Topic_Container_Exploration_-_Desktop_Collapsed_Limited.gif (512×800 px, 21 KB)
Arabic_Topic_Container_-_Desktop,_Collapsed,_Limited.gif (402×800 px, 1 MB)

Limited - EXPANDED

Topic_Container_Exploration_-_Desktop_Expanded_Limited.gif (528×800 px, 1 MB)
Arabic_Topic_Container_-_Desktop,_Expanded,_Limited-1.gif (642×1 px, 1 MB)

Full - Collapsed

French_Topic_Container_-_Desktop_Collapsed_Full.gif (528×800 px, 887 KB)
Arabic_Topic_Container_-_Desktop,_Collapsed,_Full.gif (402×800 px, 1 MB)

Full - Expanded

French_Topic_Container_Desktop_Expanded_Full.gif (512×800 px, 873 KB)
Arabic_Topic_Container_-_Desktop,_Expanded,_Full.gif (402×800 px, 1 MB)

Open question(s)

  • 1. Are the design concepts posted in ===Design similar enough to be implemented on a single patch demo instance such that volunteers can "toggle" between them without having to visit a new link in a new browser tab?
    • To start, we will be showing one version of the Topic Container Prototype making the need for this "toggle" obsolete.
  • 2. What tweaks need to be made to the desktop prototype (https://patchdemo.wmflabs.org/wikis/71c861c74e) before T302120 can begin?
  • Add [edit] links to the topic container; they are NOT currently being shown. At least not on https://patchdemo.wmflabs.org/wikis/daa71e218a/wiki/Talk:Main_Page.

Done

  • Link(s) to localized Topic Container prototype(s) are added documented in the ===Prototype section above

Reference

Link to in-progress prototype from December 2020: https://patchdemo.wmflabs.org/wikis/fa0cc65da4b9ae353b77b061e6f1887b .

Event Timeline

Update
On 9 February, the Editing Team met to discuss how we will make prototypes available of the various Topic Container design concepts we will be inviting volunteers to experiment with and share feedback about.

In this meeting we came to learn:

NOTE: the notes above have been added to the task description
ppelberg updated the task description. (Show Details)

@iamjessklein I am assigned this task over to you to populate the task description's ===Design section with the mockups the engineering team will implement.

Issues for me:
In the ... dropdown:

  • We don't yet have a permalink feature
  • I initially read the "Edit" link as being "Edit this comment" (which we don't have).
  • If that is the section edit link, there are potentially two on some wikis (edit/edit source)
  • I think moving section edit links behind another click is a "big" change which has potential to cause experienced users to not want this feature.

Other issues:

  • What does an H2 section which don't contain any comments look like?
  • @iamjessklein Can you post static mockups? The GIFs are hard to work from.
Notes: 23 Feb Team Meeting

Below are the actions and questions that emerged during today's team discussion.

Actions

  • Editing Engineering to create a patch demo prototype that demonstrates the two Topic Container design variations:
    • 1. All Actions Exposed: this version will expose all section-level actions (Edit, Subscribe, and Copy Link) within the Topic Container rather than having some of these actions stored in an overflow menu.
    • 2. Some Actions in Overflow: this version will expose the Subscribe button within the Topic Container and the (Edit and Copy Link) actions within an overflow menu within the the Topic Container.
    • Notes:
      • Ideally, Editing Engineering can implement the above Topic Container design variations on a single patch demo instance so that volunteers can easily switch between the two.
      • Editing Engineering is going to pause before embarking on implementing functionality that would require "significant" effort (e.g. making section edit links placed within the overflow menu work).
  • Editing Engineering + @iamjessklein are going to ensure both prototypes mentioned above accommodate the three potential edit link variations:
    • Variation #1: [ edit ]
    • Variation #2: [ edit source ]
    • Variation #3: [ edit | edit source ]
  • Editing Engineering + @iamjessklein are going to ensure the sans serif font used to style the == H2 == text present within Topic Containers works well with the existing sans serif font used to style == H3 == and == H4 == level section headings

Questions

  • What – if any – changes will need to be made to the current Topic Container design in order for it to work well on discussion pages that contain some sections that do NOT contain discussions?
    • We will explore this question in T302450.

Here is a screenshot of the Heading hierarchy sizes. It should work quite well as it's comparable to what's happening on article pages. I've added a layer in the figma file now to help with documentation called "Talk Page text styles" to cross reference.

Mobile heading sizes:

Screen Shot 2022-02-25 at 11.09.52 AM.png (351×476 px, 52 KB)

Desktop heading sizes:

Screen Shot 2022-02-25 at 11.09.44 AM.png (329×499 px, 50 KB)

Editing Engineering + @iamjessklein are going to ensure both prototypes mentioned above accommodate the three potential edit link variations

Here's what @Esanders and I propose:

Screen Shot 2022-02-25 at 11.20.55 AM.png (400×1 px, 44 KB)

Here is a screenshot of the Heading hierarchy sizes. It should work quite well as it's comparable to what's happening on article pages.

Nice and +1: the headings you've shown in T301139#7738202 seem to compliment each other nicely.

On Friday, 25 Feb, @iamjessklein met to revisit the changes proposed in T301139#7733531. The outcomes of that discussion are listed below.

25 February Meeting Outcomes

  • The DESKTOP version of the Topic Container prototype will NOT include an overflow menu. Instead, Edit and Subscribe) actions will be exposed within the Topic Container. Note: the MOBILE version of the Topic Container prototype will include an overflow menu (•••) which will contain the Edit link.
  • We will NOT show Copy link affordances in the MOBILE or DESKTOP versions of the Topic Container prototypes at this time.
NOTE: I've update this task's description and T269950 to reflect the above.
ppelberg renamed this task from Create Topic Container Prototype to Create Topic Container Prototype (desktop).Mar 8 2022, 11:13 PM

8 March Meeting Outcomes

  • Work to implement Topic Containers on mobile will happen in a separate task: T303362
  • Topic Subscriptions will NOT be fully functionality in these initial Topic Container prototypes (desktop (T301139) and mobile (T303362)).
    • "NOT fully functional" in this context means: the 🔔 Subscribe button will change state when people click/tap on it; HOWEVER people will not be notified when new comments are posted in the section they are subscribed to and the 🔔 Subscribe button will revert to the "unsubscribed" state whenever a talk page is reloaded.

Next Steps

  • @iamjessklein: can you please review the latest version of the desktop prototype [i] and comment any edits you think ought to be made to it to before T302120 begins ?

    Note: the only thing I saw as needing adjusting was removing section collapsing. I've noted this in the task description's ===Open questions section.

i. https://patchdemo.wmflabs.org/wikis/daa71e218a/w/

Next Steps

  • @iamjessklein: can you please review the latest version of the desktop prototype [i] and comment any edits you think ought to be made to it to before T302120 begins ?

    Note: the only thing I saw as needing adjusting was removing section collapsing. I've noted this in the task description's ===Open questions section.

i. https://patchdemo.wmflabs.org/wikis/daa71e218a/w/

@Esanders, below is the edit @iamjessklein and I would value being made to the prototype. I've also added the below to the task description's Open question(s) section: