Page MenuHomePhabricator

[Talk pages] Polish the design for the table of contents shown on talk pages
Closed, ResolvedPublic

Description

Issue: When testing the table of contents there were a handful of observable issues that could easily be tweaked in the design. These issues included:

  • The word "beginning" within the table of contents looked like a conversation topic.
  • Several testers couldn't tell that the TOC was longer that the truncated display
  • Confusion as to which comment the metadata in the TOC referred to

Requirements

Augment the new ToC that appears on desktop when the Vector (2022) skin is enabled such that the following is true:

  • The number of comments contained within each of the talk page's H2 sections appears in parenthesis beneath the name of said H2 within the ToC
    • The number of comments should be presented on a new line and the number of comments should be presented in gray text without parentheses.
    • The number of comments should be presented in the following format:
      • If there are multiple comments: # comments
      • If there is one comment: # comment
  • The word Discussions should appear at the top of the table of contents
  • The number of comments that is presented after each H2 within the ToC should be automatically updated whenever a new comment is published to the page, regardless of the interface used to publish said comment
  • When a section link is active/bolded, the metadata that appears after it (e.g. (7 comments)) should NOT get bolded

Proposed design

Proposed designChanges
Screen Shot 2022-06-16 at 12.46.57 PM.png (910×380 px, 100 KB)
Talk Pages Visual Improvements
1) Remove icons within metadata, 2) Only show # of comments, 3) Run # of comments on after topic title (read: not on new line), 4) Present # of comments in gray text, within parentheses

Open question(s)

  • 1. What – if any – concerns does the Web Team have about the talk page-specific version of the ToC the Editing Team is proposing? See: ===Proposed design above.

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
ppelberg updated the task description. (Show Details)
ppelberg added a subscriber: KieranMcCann.

@alexhollender_WMF: per today's Editing / Web meeting, I've updated the task description with the new treatment we are proposing for the version of the ToC that will appear on Talk Pages. I'm assigning this over to you for review.

@alexhollender_WMF: per today's Editing / Web meeting, I've updated the task description with the new treatment we are proposing for the version of the ToC that will appear on Talk Pages. I'm assigning this over to you for review.

@ppelberg apologies for the delay. there are a bunch of mockups in the Figma file linked in the task description (link). can you provide a link to a patchdemo, or add the final mockups to this task, so i can be sure i'm reviewing the right thing?

@ppelberg I see you’ve uploaded F35247531 in T309463#8010116, but due to a recent change (bug?) in Phabricator, it’s not visible by default to anyone but you. I think you should find an Attach File button in the File MetadataReferenced (or File MetadataAttached?) section of https://phabricator.wikimedia.org/F35247531, which should make it visible to people who have access to this task (i.e. everyone).

@alexhollender_WMF: per today's Editing / Web meeting, I've updated the task description with the new treatment we are proposing for the version of the ToC that will appear on Talk Pages. I'm assigning this over to you for review.

@ppelberg apologies for the delay. there are a bunch of mockups in the Figma file linked in the task description (link). can you provide a link to a patchdemo, or add the final mockups to this task, so i can be sure i'm reviewing the right thing?

Ah, shoot. I hadn't realized the file didn't end up attaching. I'm sorry about that...is F35247531 now visible to you, @alexhollender_WMF?

Thank you for the tip, @matmarex.

Ah, shoot. I hadn't realized the file didn't end up attaching. I'm sorry about that...is F35247531 now visible to you, @alexhollender_WMF?

yes, thank you. looks great 😎

Jdlrobson renamed this task from Polish the table of contents to [Talk pages] Polish the design for the table of contents shown on talk pages.Jul 18 2022, 11:22 PM

Ah, shoot. I hadn't realized the file didn't end up attaching. I'm sorry about that...is F35247531 now visible to you, @alexhollender_WMF?

yes, thank you. looks great 😎

Excellent – thank you for reviewing, @alexhollender_WMF

small thing I just realized: when a section link is active/bolded, I think the metadata (i.e. 7 comments) should not get bolded

small thing I just realized: when a section link is active/bolded, I think the metadata (i.e. 7 comments) should not get bolded

Good spot and I agree, @alexhollender_WMF.

Requirements updated.

cc @nayoub for awareness.

As discussed during today's team meeting, the work to implement what this ticket is describing is mostly done. [i]

All that's left to do is implement the following requirement:

The word "Discussions" should appear at the top of the table of contents in black, bolded text

Once the above is done, this task should be moved to the Blocked / Needs more work column so that we can remind ourselves to use this task for QA once the ToC work is merged (T307823).


For the changing of the language of the title of the table of contents we currently render that inside Vector directly from a message. Since this would add logic it might make sense to contain the logic for different titles inside https://github.com/wikimedia/mediawiki/blob/master/includes/skins/components/SkinComponentTableOfContents.php#L89 and then get Vector to render the title from core here

Per our editing sync, web team can help review this one.

heads up:@bmartinezcalvo @Sarai-WMDE: one thing @nayoub brought up here is the styling of the menu header, for example compare

current (#54595d)blackblack & bold
image.png (2×2 px, 2 MB)
image.png (2×2 px, 911 KB)
image.png (2×2 px, 2 MB)

the table of contents is a somewhat unique list/menu in our interface, but I figured it would make most sense for the DST to come up with guidance for non-interactive heading/label styling on menus.

Note: I've updated the requirements to match the decisions we made in T307823#8206958.

the table of contents is a somewhat unique list/menu in our interface, but I figured it would make most sense for the DST to come up with guidance for non-interactive heading/label styling on menus.

Agreed: the ToC is its very own list/menu pattern. We defined the style of menu headings for Codex (following OOUI quite closely), which combines bold text with the disabled gray color (#72777d, to indicate that headings are structural elements that cannot be selected). This is the result of applying Codex's menu heading style to the ToC:

Screenshot 2022-09-02 at 10.46.45.png (1×2 px, 1 MB)

In this context, the use of #72777d might be causing the ToC's heading to lose too much hierarchy. At the same time, I suppose that indicating the user's position on the page is the priority (the style of the current section should be more prominent than that of the heading). For these reasons, I'd suggest sticking to gray, but going for the darker, "subtle", content color (which matches the current #54595d):

Screenshot 2022-09-02 at 10.41.19.png (1×2 px, 1 MB)

If we want to align the ToC with our current system styles I would do the following:

  1. Why we use color-base #202122 for the selected menu item? I think the right behavior for this element (following our color tokens) would be to use color-progressive--active #2A4B8D since this is a link using progressive color, so it would use an active progressive color when the item is selected. In addition, the Bold is already used to indicate that the item is selected so I think with the progressive color would be enough.
  2. If we use color-progressive--active #2A4B8D for the selected menu item then we could use color-base or color-subtle for the title (depending on the importance that you want to give to the title).
  3. Regarding the [hide] element, it should be a button (or an icon-only button) since links should be used just for navigate to other places and this is an action.

Change 829192 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/DiscussionTools@master] Table of contents style tweaks

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

I believe the design requirements changed (but the mockup in the description didn't change) — the heading is no longer supposed to be bold.

I believe the design requirements changed (but the mockup in the description didn't change) — the heading is no longer supposed to be bold.

It isn't bold in the actual implementation, and we're just letting Vector style it. (Note that the screenshot above shows the first TOC item as active in bold, not the TOC heading.)

Change 829192 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Table of contents style tweaks

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

I believe the design requirements changed (but the mockup in the description didn't change) — the heading is no longer supposed to be bold.

It isn't bold in the actual implementation, and we're just letting Vector style it. (Note that the screenshot above shows the first TOC item as active in bold, not the TOC heading.)

ah whoops, sorry about my mistake there

Change 830262 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/extensions/DiscussionTools@master] CommentFormatter: Fix TOC info being repeated for subsections

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

Change 830262 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] CommentFormatter: Fix TOC info being repeated for subsections

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

@alexhollender_WMF: considering the Editing Team is not doing anything special to how the ToC is styled, I'm assuming that the feedback @bmartinezcalvo shared in T309463#8208164 applies to the Web Team/how y'all have implemented the ToC in Vector (2022) rather than what we're implementing in this ticket.

With the above in mind, this task is ready for Editing Team code review.

@alexhollender_WMF: considering the Editing Team is not doing anything special to how the ToC is styled, I'm assuming that the feedback @bmartinezcalvo shared in T309463#8208164 applies to the Web Team/how y'all have implemented the ToC in Vector (2022) rather than what we're implementing in this ticket.

@ppelberg agreed

  • ✅ The number of comments should be presented on a new line and the number of comments should be presented in gray text without parentheses. See
    Screenshot 2022-09-15 at 17.07.28.png (1×2 px, 669 KB)
  • ✅ The number of comments should be presented in the following format: See
    Screenshot 2022-09-15 at 17.01.45.png (1×3 px, 649 KB)
    • ✔️ If there are multiple comments: # comments
    • ✔️ If there is one comment: # comment
  • ❗️ The word Discussions should appear at the top of the table of contents in black, bolded text

I don't see it. I see 'Contents'. @ppelberg, this expected? See

Screenshot 2022-09-15 at 17.12.01.png (1×3 px, 656 KB)

  • ✅ The number of comments that is presented after each H2 within the ToC should be automatically updated whenever a new comment is published to the page, regardless of the interface used to publish said comment. See https://photos.app.goo.gl/u4aAW1kqwaWwt6hp6
  • ✅ When a section link is active/bolded, the metadata that appears after it (e.g. (7 comments)) should NOT get bolded. See
    Screenshot 2022-09-15 at 17.01.20.png (1×3 px, 651 KB)
  • ❗️ The word Discussions should appear at the top of the table of contents in black, bolded text

I don't see it. I see 'Contents'. @ppelberg, this expected? See

Screenshot 2022-09-15 at 17.12.01.png (1×3 px, 656 KB)

Great spot, @EAkinloose.

Per T309463#8206691, the Editing Team does not currently have a way to alter the text that appears atop the ToC. This means two things:

  1. We do not currently have a way to meet the requirement you identified above
  2. The Editing Team will need to create a way to change the title of the ToC in Vector (2022)

Next steps
With the above in mind, I'm going to:

  • REMOVE the The word Discussions should appear at the top of the table of contents in black, bolded text requirement from this task
  • CREATE a new task for the work required to meet the requirement above

Assuming, the above sounds good to you, please mark this as Verified when you see fit.

ppelberg updated the task description. (Show Details)
ppelberg added a subscriber: Esanders.