Page MenuHomePhabricator

Make the affordance(s) for adding a new topic easier to identify and access (Vector 2022)
Closed, ResolvedPublic

Assigned To
Authored By
ppelberg
Nov 6 2020, 9:29 PM
Referenced Files
F36910258: Screenshot 2023-03-13 at 3.29.31 PM.png
Mar 13 2023, 10:30 PM
F36910255: Screenshot 2023-03-13 at 3.29.00 PM.png
Mar 13 2023, 10:30 PM
F36897222: Screenshot 2023-03-07 at 4.02.55 PM.png
Mar 8 2023, 12:04 AM
F36897220: Screenshot 2023-03-07 at 4.02.44 PM.png
Mar 8 2023, 12:04 AM
F36897211: Screen Recording 2023-03-07 at 3.48.33 PM.mov.gif
Mar 8 2023, 12:04 AM
F36897210: Screen Recording 2023-03-07 at 3.49.48 PM.mov.gif
Mar 8 2023, 12:04 AM
F36897209: Screenshot 2023-03-07 at 3.51.26 PM.png
Mar 8 2023, 12:04 AM
F36887488: Screenshot 2023-03-01 at 3.07.27 PM.png
Mar 1 2023, 11:12 PM
Tokens
"Like" token, awarded by Jdlrobson.

Description

T304187 introduced a new Add Topic button within the new site-wide sticky header that appears on desktop.

This task involves the work of introducing an equally noticeable and accessible Add Topic button in cases where people do NOT have access to the new site-wide sticky header and the Add Topic button that now appears within it.

Examples of cases where people would NOT have access to the new site-wide sticky header and the Add Topic button that appears within it: desktop talk pages that are not "large enough" (be it b/c of the size of the person's browser window and/or the length of the discussion(s) on the page) for the site-wide sticky header to appear.

User stories

  • As a Senior Contributor or Junior Contributor who is arriving to a talk page knowing that they want to start a new discussion, I want to to be able to quickly and easily locate the affordance for doing so, so that I can proceed with drafting what I have in mind with minimal interruption.

Mockups

CaseSkinAffordance DesignMockupRequirements
#1Vector Legacy (2010). Implementation will happen in T326694"Add topic" section at the bottom
Legacy_SectionBottom.png (4×2 px, 1 MB)
1) A new Add topic affordance (container-scaled OOUI button) should appear at the bottom of the talk page, beneath the last section. 2) Once the new button is clicked, the New Topic Tool should open provided the person has the Enable quick topic adding enabled. If the person has the Enable quick topic adding setting disabled, they should be directed to the legacy section=new workflow
#2Vector (2022) with LangSelect widgetHeading "Add topic" button
case_3.png (4×2 px, 1 MB)
1) A new Add topic affordance should appear at the top of the talk page, above the page tools (e.g. Read, Edit, View history, etc.), 2) This Add topic button should appear in the right-most position in LTR interface languages and in the left-most position in RTL interface languages , 3) Once the new button is clicked, the New Topic Tool should open provided the person has the Enable quick topic adding enabled. If the person has the Enable quick topic adding setting disabled, they should be directed to the legacy section=new workflow
#3Vector (2022) without LangSelect widgetHeading "Add topic" button
case_2.png (4×2 px, 1 MB)
1) A new Add topic affordance should appear at the top of the talk page, above the page tools (e.g. Read, Edit, View history, etc.), 2) Once the new button is clicked, the New Topic Tool should open provided the person has the Enable quick topic adding enabled. If the person has the Enable quick topic adding setting disabled, they should be directed to the legacy section=new workflow
#4.1Vector (2022)"Add topic" button in Sticky Header (view 1)
NewVector_Heading+SectionBottom-2.png (1×2 px, 685 KB)
No changes needed per T267444#8187389
#4.2Vector (2022)"Add topic" button in Sticky Header (view 2: bottom section)
case_4.2.png (1×2 px, 575 KB)
No changes needed per T267444#8187389
NOTE: The changes to the appearance and placement of the Add Topic button described above should take effect regardless of the state of DiscussionTools. Said another way: the only affect DiscussionTools will have after this change is made is what happens after someone taps the Add Topic button.

Considerations

  • We should be mindful about changing the language and/or appearance of the existing New section / Add topic links for people who have the New Discussion Tool enabled considering the confusion/complexity this could cause. See: T264220#6813101.

Open questions

  • What language should appear on/in the affordance for starting a new discussion?

Volunteer feedback

This section includes links to the calls for feedback we've posted on-wiki

WikiLink to discussion
mediawiki.orgmw:Talk: Talk pages project/Usability

Done

  • Mockups are published in ===Mockups
  • Requirements are documented in ===Requirements
  • Requirements are implemented

i. https://www.mediawiki.org/wiki/Topic:Vwqjpk7gsmy36h71
ii. https://nl.wikipedia.org/w/index.php?title=Overleg_Wikipedia:Overleghulpmiddelen&type=revision&diff=57279610&oldid=57277033&diffmode=source
iii. https://www.mediawiki.org/w/index.php?title=Topic:Vx0hv02fcic0rj62&topic_showPostId=vx0hv02fcma2zn4a#flow-post-vx0hv02fcma2zn4a
iv. https://www.mediawiki.org/w/index.php?title=Topic:Vwpwr84naer42ovi&topic_showPostId=vx7brnglaeb6wm9p#flow-post-vx7brnglaeb6wm9p
v. https://www.mediawiki.org/wiki/Topic:Vwszsesi9o4iguw1
vi. https://cs.wikipedia.org/wiki/Wikipedie:Pod_l%C3%ADpou#Aktivace_n%C3%A1stroje_%E2%80%9EP%C5%99idat_t%C3%A9ma%E2%80%9C_pro_v%C5%A1echny)


Background

As @AdHuikeshoven, @Akoopal, @Awesome_Aasim, @Julle, @matej_suchanek, and @Vojtech.Vesely [i][ii][iii][iv][v][vi] have noted and previous usability tests have confirmed (T307845), the current "Add topic" / "New section" tab can be difficult for Junior Contributors to identify and all contributors to access, especially on longer pages.

Approaches

Below is a living list of approaches that have been talked about so far, on-wiki and in T249784:

InterventionLink
Additional links elsewhere on the page"Ajouter un sujet" (bottom of fr.wiki talk pages), + (bottom of some nl.wiki talk pages)
Large blue buttons at the top of the page with custom calls to action"Ask a question" (en.wiki), "New message" (cs.wiki), "Make a new request" (fr.wiki),
"New section" form is preloaded with a template/instructions"Request to administrators" (fr.wiki), "Request for immediate deletion" (fr.wiki), see T250768#6073965 for more examples
Links at the top of the page"Click here to ask a question" (nl.wiki), "Start a new topic" (~550 people are using this on en.wiki)
Instructions within new section form"You are going to request the immediate deletion..." (fr.wiki), "Instructions for discussion" (cs.wiki)
An omnipresent formF32249808
A button with an accompanying subject fieldSee the Požádat on this page at cs.wiki
An Add topic button at the bottom of the pageSee this page at fi.wiki
On Meta, the last section heading on a talk page has [ edit / Add topic ] instead of just [ edit ].https://meta.wikimedia.org/wiki/Meta:Babel

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Web team has code reviewed https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/884907/ . Let us know when you need a new review by adding "attention" on Gerrit and/or moving this task to our code review column.

Hey @Esanders @ppelberg just to let you know that our current sprint closes at the end of this week. Team has time to help review https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/884907/ in the remainder of this week but may not next week given our other scheduled priorities/focus areas. If you could respond to our feedback soon we can hopefully wrap this work up. Also let us know if you'd prefer us to take over the patchset to drive it completion.

Jdlrobson removed Jdlrobson as the assignee of this task.EditedFeb 24 2023, 1:18 AM

@Jdrewniak @Mabualruz could you take a look at the amended patchset Friday?

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

[mediawiki/skins/Vector@master] Add feature flag to "promote add topic" feature

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

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

[operations/mediawiki-config@master] Disable VectorPromoteAddTopic on production wikis initially

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

Change 884907 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Promote "Add topic" button to PageTitlebar

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

Change 891835 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add feature flag to "promote add topic" feature

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

Change 891836 merged by jenkins-bot:

[operations/mediawiki-config@master] Disable VectorPromoteAddTopic on production wikis initially

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

Mentioned in SAL (#wikimedia-operations) [2023-02-28T21:03:25Z] <samtar@deploy2002> Started scap: Backport for [[gerrit:891836|Disable VectorPromoteAddTopic on production wikis initially (T267444)]]

Mentioned in SAL (#wikimedia-operations) [2023-02-28T21:05:20Z] <samtar@deploy2002> esanders and samtar: Backport for [[gerrit:891836|Disable VectorPromoteAddTopic on production wikis initially (T267444)]] synced to the testservers: mwdebug1001.eqiad.wmnet, mwdebug2001.codfw.wmnet, mwdebug2002.codfw.wmnet, mwdebug1002.eqiad.wmnet

Mentioned in SAL (#wikimedia-operations) [2023-02-28T21:14:01Z] <samtar@deploy2002> Finished scap: Backport for [[gerrit:891836|Disable VectorPromoteAddTopic on production wikis initially (T267444)]] (duration: 10m 36s)

Test Result - Beta

Status:
Environment: beta
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps
StatusACSkinAffordance DesignRequirementsTest Artifact
AC1Vector Legacy (2010) Implementation will happen in T326694"Add topic" section at the bottom1) A new Add topic affordance (container-scaled OOUI button) should appear at the bottom of the talk page, beneath the last section. 2) Once the new button is clicked, the New Topic Tool should open provided the person has the Enable quick topic adding enabled. If the person has the Enable quick topic adding setting disabled, they should be directed to the legacy section=new workflownot in scope
AC2Vector (2022) with LangSelect widgetHeading "Add topic" button1) A new Add topic affordance should appear at the top of the talk page, above the page tools (e.g. Read, Edit, View history, etc.), 2) This Add topic button should appear in the right-most position in LTR interface languages and in the left-most position in RTL interface languages , 3) Once the new button is clicked, the New Topic Tool should open provided the person has the Enable quick topic adding enabled. If the person has the Enable quick topic adding setting disabled, they should be directed to the legacy section=new workflowThe workflows work correctly, but the language button is the right-most/left-most button rather than the "Add topic" button.
Screen Recording 2023-03-01 at 2.04.17 PM.mov.gif (1×1 px, 306 KB)
Screen Recording 2023-03-01 at 2.05.33 PM.mov.gif (1×1 px, 434 KB)
Screenshot 2023-03-01 at 2.57.32 PM.png (713×1 px, 139 KB)
AC3Vector (2022) without LangSelect widgetHeading "Add topic" button1) A new Add topic affordance should appear at the top of the talk page, above the page tools (e.g. Read, Edit, View history, etc.), 2) Once the new button is clicked, the New Topic Tool should open provided the person has the Enable quick topic adding enabled. If the person has the Enable quick topic adding setting disabled, they should be directed to the legacy section=new workflowUncertain how to turn off the LangSelect widget
AC4.1Vector (2022)"Add topic" button in Sticky Header (view 1)No changes needed per T267444#8187389The Add topic button does not appear in the sticky header.
Screenshot 2023-03-01 at 3.03.57 PM.png (474×1 px, 122 KB)
AC4.2Vector (2022)"Add topic" button in Sticky Header (view 2: bottom section)No changes needed per T267444#8187389The Add topic button does not appear in the sticky header.
Screenshot 2023-03-01 at 3.07.27 PM.png (463×1 px, 121 KB)

Hey Ed! Could you respond to our about what's expected here? Thanks in advance!

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

[mediawiki/skins/Vector@master] Switch order of "Add topic" and language dropdown

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

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

[mediawiki/skins/Vector@master] Fix selector for add topic button

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

Change 894739 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix selector for add topic button

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

Change 894711 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Switch order of "Add topic" and language dropdown

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

Test Result - Beta

Status:
Environment: beta
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps
StatusACSkinAffordance DesignRequirementsTest Artifact
AC1Vector Legacy (2010) Implementation will happen in T326694"Add topic" section at the bottom1) A new Add topic affordance (container-scaled OOUI button) should appear at the bottom of the talk page, beneath the last section. 2) Once the new button is clicked, the New Topic Tool should open provided the person has the Enable quick topic adding enabled. If the person has the Enable quick topic adding setting disabled, they should be directed to the legacy section=new workflownot in scope
AC2Vector (2022) with LangSelect widgetHeading "Add topic" button1) A new Add topic affordance should appear at the top of the talk page, above the page tools (e.g. Read, Edit, View history, etc.), 2) This Add topic button should appear in the right-most position in LTR interface languages and in the left-most position in RTL interface languages , 3) Once the new button is clicked, the New Topic Tool should open provided the person has the Enable quick topic adding enabled. If the person has the Enable quick topic adding setting disabled, they should be directed to the legacy section=new workflow
Screenshot 2023-03-07 at 3.51.26 PM.png (890×1 px, 154 KB)
Screen Recording 2023-03-07 at 3.49.48 PM.mov.gif (888×1 px, 576 KB)
Screen Recording 2023-03-07 at 3.48.33 PM.mov.gif (888×1 px, 632 KB)
AC3Vector (2022) without LangSelect widgetHeading "Add topic" button1) A new Add topic affordance should appear at the top of the talk page, above the page tools (e.g. Read, Edit, View history, etc.), 2) Once the new button is clicked, the New Topic Tool should open provided the person has the Enable quick topic adding enabled. If the person has the Enable quick topic adding setting disabled, they should be directed to the legacy section=new workflowUncertain how to turn off the LangSelect widget
AC4.1Vector (2022)"Add topic" button in Sticky Header (view 1)No changes needed per T267444#8187389The Add topic button does appear in the sticky header, but should it be to the right of the Language button?
Screenshot 2023-03-07 at 4.02.44 PM.png (888×1 px, 358 KB)
AC4.2Vector (2022)"Add topic" button in Sticky Header (view 2: bottom section)No changes needed per T267444#8187389The Add topic button does appear in the sticky header, but should it be to the right of the Language button?
Screenshot 2023-03-07 at 4.02.55 PM.png (890×1 px, 352 KB)

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

[mediawiki/skins/Vector@wmf/1.40.0-wmf.26] Switch order of "Add topic" and language dropdown

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

Change 895297 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.40.0-wmf.26] Switch order of "Add topic" and language dropdown

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

Mentioned in SAL (#wikimedia-operations) [2023-03-08T21:29:06Z] <kindrobot@deploy2002> Started scap: Backport for [[gerrit:888804|Enable history page visual diffs everywhere except Wikipedias and Wiktionaries (T314588)]], [[gerrit:895375|Release DiscussionTools on mobile on enwiki (T328942)]], [[gerrit:895297|Switch order of "Add topic" and language dropdown (T267444)]]

Mentioned in SAL (#wikimedia-operations) [2023-03-08T21:30:46Z] <kindrobot@deploy2002> kemayo and kindrobot and esanders: Backport for [[gerrit:888804|Enable history page visual diffs everywhere except Wikipedias and Wiktionaries (T314588)]], [[gerrit:895375|Release DiscussionTools on mobile on enwiki (T328942)]], [[gerrit:895297|Switch order of "Add topic" and language dropdown (T267444)]] synced to the testservers: mwdebug2001.codfw.wmnet, mwdebug1002.eqiad.wmnet, mwdebug1001.eqi

Mentioned in SAL (#wikimedia-operations) [2023-03-08T21:46:51Z] <kindrobot@deploy2002> Started scap: Backport for [[gerrit:895297|Switch order of "Add topic" and language dropdown (T267444)]], [[gerrit:895375|Release DiscussionTools on mobile on enwiki (T328942)]], [[gerrit:888804|Enable history page visual diffs everywhere except Wikipedias and Wiktionaries (T314588)]]

Mentioned in SAL (#wikimedia-operations) [2023-03-08T21:48:45Z] <kindrobot@deploy2002> kemayo and kindrobot and esanders: Backport for [[gerrit:895297|Switch order of "Add topic" and language dropdown (T267444)]], [[gerrit:895375|Release DiscussionTools on mobile on enwiki (T328942)]], [[gerrit:888804|Enable history page visual diffs everywhere except Wikipedias and Wiktionaries (T314588)]] synced to the testservers: mwdebug2002.codfw.wmnet, mwdebug1002.eqiad.wmnet, mwdebug2001.cod

Mentioned in SAL (#wikimedia-operations) [2023-03-08T21:54:40Z] <kindrobot@deploy2002> Finished scap: Backport for [[gerrit:895297|Switch order of "Add topic" and language dropdown (T267444)]], [[gerrit:895375|Release DiscussionTools on mobile on enwiki (T328942)]], [[gerrit:888804|Enable history page visual diffs everywhere except Wikipedias and Wiktionaries (T314588)]] (duration: 07m 49s)

The Add topic button does appear in the sticky header, but should it be to the right of the Language button?

Great spot, @Edtadros.

Per what the Editing Team talked about offline today, we're not going to consider what you noticed above as blocking for this ticket.

Instead, we're going to decide whether the order in which the Add topic and Add languages buttons appear within the sticky header and "within" the page itself ought to be consistent in T331687.

Thanks for the update @ppelberg. I'm still hung up on Case #3

#3Vector (2022) without LangSelect widget Heading "Add topic" button1) A new Add topic affordance should appear at the top of the talk page, above the page tools (e.g. Read, Edit, View history, etc.), 2) Once the new button is clicked, the New Topic Tool should open provided the person has the Enable quick topic adding enabled. If the person has the Enable quick topic adding setting disabled, they should be directed to the legacy section=new workflow

How can I turn off the LangSelect widget on a page?

Thanks for the update @ppelberg. I'm still hung up on Case #3

#3Vector (2022) without LangSelect widget Heading "Add topic" button1) A new Add topic affordance should appear at the top of the talk page, above the page tools (e.g. Read, Edit, View history, etc.), 2) Once the new button is clicked, the New Topic Tool should open provided the person has the Enable quick topic adding enabled. If the person has the Enable quick topic adding setting disabled, they should be directed to the legacy section=new workflow

How can I turn off the LangSelect widget on a page?

Good question...@Jdlrobson, the above seems like a question you/the Web Team would be best positioned to answer. Of course, please tell me if you think this is not the case...

How can I turn off the LangSelect widget on a page?

What does the editing team mean by the LangSelect widget here?

If we are talking about the language button in the page, I believe it is always present

either in this form (as in on https://en.wikipedia.org/wiki/Talk:Sandwich)

Screenshot 2023-03-13 at 3.29.00 PM.png (602×1 px, 164 KB)

or this form (as on https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical))

Screenshot 2023-03-13 at 3.29.31 PM.png (408×1 px, 96 KB)

Is there a situation where the editing team is expecting that to not show?

Perhaps pages on sites which don't have languages e.g, MediaWiki.org (https://www.mediawiki.org/wiki/Talk:Reading/Web/Desktop_Improvements ) ?
If so I'm not sure if how we test this except to wait for the code to roll out to production?

Is there a situation where the editing team is expecting that to not show?

Perhaps pages on sites which don't have languages e.g, MediaWiki.org (https://www.mediawiki.org/wiki/Talk:Reading/Web/Desktop_Improvements ) ?

@Jdlrobson is an example of precisely the case the Editing Team had in mind...thank you for going the extra step to demonstrate this. Next time, I'll take responsibility for doing this rather than implicitly asking you to do it.

If so I'm not sure if how we test this except to wait for the code to roll out to production?

Waiting to test this in production sounds good to me.

With us deciding in:

  • T267444#8690039 to test that the new Add topic button functions as expected on pages where the LangSelect is disabled in production
  • T267444#8682176 not to block this ticket being resolved on the Add topic and Add languages buttons needing to appear within the sticky header and "within" the page itself in a consistent order

...it seems to me like we can consider this ticker "verified". @Edtadros: do you see any reasons for us not to consider this ticket as being "verified"?

@ppelberg this can be considered "verified" in beta given the decisions above. I will test it in production as well.

@ppelberg this can be considered "verified" in beta given the decisions above. I will test it in production as well.

Wonderful – thank you for volunteering to do as much.

Meta: it's been a pleasure collaborating with you on this ticket. The ways you've documented the outcomes of the testing you've done has made it easy for me and the Editing Team to decide what needs to happen in response.

Test wiki on Patch demo by ESanders (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/e22ef06cf7/w/

This comment was removed by ppelberg.