Page MenuHomePhabricator

Implement user experience for non-existent (red-linked) *non-user* talk pages
Closed, ResolvedPublic

Description

This task is about implementing a new experience for not-yet-created/empty non-user talk pages.

Where "non-user talk pages" in this context means any talk page that exists in the following namespaces:

Namespace numberDescription
1Main/Article talk
5Wikipedia talk
7File talk
9MediaWiki talk
11Template talk
13Help talk
15Category talk
101Portal talk
119Draft talk
711TimedText talk
829Module talk

User stories

Understanding the purpose of the page

  • As a Junior Contributor who has clicked a link to a non-user talk page that not-yet-been-created, I want to instantly understand the purpose of the page [i] I am now viewing, so that I can decide whether I should engage with the page more deeply or leave/go somewhere else.
  • As a Junior Contributor who has clicked a link to a non-user talk page that not-yet-been-created and generally knows what the purpose of the page [i] is, I want to know where I can learn more about the page, so that I can feel more confident posting something to it.

Initiating a conversation

  • As a Junior Contributor who has clicked a link to a non-user talk page that not-yet-been-created, understands the purpose of the page [i], and who has a question they would like to ask/a topic they want to discuss with others, I want to know what I need to do to draft and publish that question/thought in a way others are likely to see and understand so that I can receive the input/guidance/etc. I need to help improve the encyclopedia.
  • As a Junior Contributor who has just published a question/thought to a talk page, I want to know I've done so successfully so I do not need to wonder if there are additional steps I need to take to ensure people will see what I have to say.

Editing the page

  • As a Senior Contributor who has clicked a link to a non-user talk page that not-yet-been-created, I want to be able to add content to the page (e.g. add a talk page template without being constrained by the New Discussion Tool's Title / Description fields so that I can relate the talk page to others like it and/or signal to future visitors/editors information about the page to which the talk page is related.
    • Example: adding a Wikiproject template, like {{WikiProject Jazz}}), to the page. Note: this behavior is most common at en.wiki.

Copy

This section contains the UI copy

  • Title: Start a discussion about [[PAGENAME|PAGENAME]]*
    • *This should link to the page to which the talk page is related/attached/etc.
  • Body: You can use this talk** page to start a discussion with others about how to improve [[en:PAGENAME|PAGENAME]].[[en:Help:Talk pages|Learn more about how these pages are used]]***.
  • Button copy: Start a discussion

Mockups

Desktop:

Button -_ Input.png (1×2 px, 327 KB)

Button -_ Input2 (Alternate).png (1×2 px, 263 KB)

Button -_ Input2 (Alternate) (1).png (1×2 px, 297 KB)

Button -_ Input4.png (1×2 px, 291 KB)

Button -_ Input5.png (1×2 px, 274 KB)

Mobile:

Tap new discussion button
Mobile Splash (5).png (1×744 px, 93 KB)
New Discussion tool revealed
Mobile Input (8).png (1×744 px, 84 KB)
Content entered and "add topic" tapped
Mobile Input - Filled (1).png (1×744 px, 118 KB)
Success messages
Mobile Input - Confirmation.png (1×744 px, 64 KB)
Final state
Mobile Input - Final.png (1×744 px, 64 KB)

Illustration

Requirements

Mockups should be created for both desktop and mobile user experiences.
New specification as of 6/2/2021: Create some variations of the mock up to share with Editing team based on notes here.

Minimum test case

Meta

  • Wiki: Beta Cluster
  • Platform: Desktop

Steps

  1. On the beta cluster – while logged in OR logged out – visit a talk page in any of the namespaces listed above that has not yet been created (e.g. https://en.wikipedia.beta.wmflabs.org/w/index.php?title=Talk:Dog_health&action=edit&redlink=1)
    • Note: the corresponding Article/Project/Template/Etc. will need to exist. We have an open ticket for cases where this is not the case: T288319.
  2. ✅Notice the following appears on the not-yet-created article talk page:

Screen Shot 2021-08-05 at 5.37.09 PM.png (1×1 px, 219 KB)

Open questions

  • What – if any – edit notices should people seeking to start a new conversation on a talk page that does not yet exist be notified about?

Done

  • Designs for mobile and desktop that fulfill the stories defined above are posted to the Mockups section.

i. Purpose of the page: a space to communicate with other volunteers about the page to which the talk page is related/attached.

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
ppelberg renamed this task from Create empty state mockups for *non-user* talk pages to Design user experience for non-existent (red-linked) *non-user* talk pages.May 15 2021, 1:13 AM
ppelberg assigned this task to iamjessklein.
ppelberg updated the task description. (Show Details)
ppelberg updated the task description. (Show Details)

I'm thinking that we should take a clean approach by having the new discussion form embedded within the page alongside a page notice to explain to the Editor why they are getting this page. @Esanders
and I discussed the possibility of making the "Edit Source" button the place where contributors can switch over to wikitext mode. I am going to work through that mockup just to check if i'm missing any possible edge cases.

Frame 2.png (1×2 px, 288 KB)

I'm actually not sure what needs to go in the blank version of the editor here - would there be a template?
I also realized that there should be some kind of additional messaging around the fact that the article page doesn't exist and will not be created. Thoughts? @Esanders

article page doesn't exist either - source.png (1×2 px, 328 KB)

LZaman added a subscriber: LZaman.

New specification as of 6/2/2021: Create some variations of the mock up to share with Editing team based on notes here. These notes are also added into the Description pf the ticket.

Here's what I'm thinking about for a version with an Add new topic button (rather than direct to field input).
Note: imperfect animation

emptystate.gif (505×1 px, 648 KB)

Here's what I'm thinking about for a version with an Add new topic button (rather than direct to field input).

@iamjessklein this is coming along nicely. Good work. I particularly how this version creates "asks" people to explicitly decide to engage with the "new topic" workflow rather than dropping them into it immediately.

A couple of questions for you:

  • During the drafting part of the workflow, what are you thinking the image/caption positioned to the left of the New Discussion Tool will communicate to people? I ask this wondering whether at this point in the flow it would be valuable to remind/reinforce what the page is "asking" people to do in this moment: draft a topic to discuss with other volunteers.
  • After people have successfully published their first discussion topic, do you think the current treatment will be effective at cauasing people to know they have done this successfully and thus, relieve them of wondering whether there are additional steps they need to take to ensure others will see what they've written?

Note: I've intentionally *not* made any comments about the copy or imagery.

Thanks for the review @ppelberg

I ask this wondering whether at this point in the flow it would be valuable to remind/reinforce what the page is "asking" people to do in this moment: draft a topic to discuss with other volunteers.

Yes that is exactly what I was thinking something educational should go here to reinforce either a common technical or conceptual problem.

After people have successfully published their first discussion topic, do you think the current treatment will be effective at causing people to know they have done this successfully and thus, relieve them of wondering whether there are additional steps they need to take to ensure others will see what they've written?

No I don't think that the treatment in the mockup is enough. I think at a minimum there should be the confirmation message and highlighting.

I might want a second button, so I can make non-section edits to an empty/red-linked page. Look at this edit (creates a redirect) and this one (copying content from another page) to see two reasons why editors might do this.

I've updated the mockup a bit using the illustrations by @KieranMcCann. In this version I've also added some additional feedback after publishing and added more contextual copy to get a sense of the kind of content we could put in the "tip" section.

I moved the illustration to the right side of the page based off of feedback from @Volker_E suggesting that this layout would be more "content-first."

empty-desktop-article.gif (667×1 px, 1 MB)

I might want a second button, so I can make non-section edits to an empty/red-linked page. Look at this edit (creates a redirect) and this one (copying content from another page) to see two reasons why editors might do this.

@Whatamidoing-WMF can you say more about this? I know we discussed it but I'm having some trouble remember what the button would actually say.

I've also started to work on the mobile experience of this flow. I am currently in the position where I've mocked up two different possible experiences taking cues from the different mobile web treatments. I'm sharing them both here so that we can discuss what is the best approach to move forward with.

Exploration 1

Tap new discussion button
Mobile Splash.png (1×828 px, 90 KB)
New Discussion tool revealed
Mobile Input.png (1×828 px, 94 KB)
content entered and "add topic" tapped
Mobile Input (1).png (1×828 px, 123 KB)
Success messages
Mobile Input (2).png (1×828 px, 67 KB)
Final state
Mobile Input (3).png (1×828 px, 62 KB)

Exploration 2

Tap new discussion button
Mobile Splash.png (1×828 px, 90 KB)
New Discussion tool revealed
Mobile Input (4).png (1×828 px, 36 KB)
content entered and "add topic" tapped
Mobile Input (5).png (1×828 px, 74 KB)
Success messages
Mobile Input (2).png (1×828 px, 67 KB)
Final state
Mobile Input (3).png (1×828 px, 62 KB)

My gut is telling me that exploration 2 is closer to the design patterns that we have going for the rest of mobile, but I wanted to double check.

per @matmarex in Slack:

Option 1 is closer to what we've done so far with the mobile reply tool (see David's link), and closer to the desktop new discussion tool.
Option 2 is closer to how the normal editor works on mobile, and closer to the current mobile talk page experience (which we're planning to retire in T280417).

With that in mind, I am going to build off of option 1 for the time being.

@iamjessklein these designs continue to progress, nice work. Some comments and questions below.

Note: I'm intentionally not commenting on any of the copy within the mockups at this time assuming this is something we can think about last.


Questions

Desktop

  • For the New Discussion tool revealed view, can you think of an alternative way of communicating the Be positive! message (e.g. displaying the message without the illustration, above or below and visually related to the New Discussion Tool as is done with edit notices and the anon message [i] or maybe even as an intermediate step before publishing to create a distinct moment of reflection [ii])?
    • I ask this thinking the current approach – the illustration + message appearing to the left of the New Discussion Tool – could be distracting for I perceive it to be subtly "asking" for people to move their focus away from what they are drafting. Whereas I consider messages that appear above or below the tool as being more closely integrated with it.

Mobile
These questions are limited to the Tap new discussion button and New Discussion tool revealed views considering: A) we will focus on the New Discussion Tool UX in T282258 and B) in the time between then and now, we'll continue to depend on the current mobile Add discussion workflow.

  • Tap new discussion button: What thinking informed the current layout? I ask this wondering whether the current approach creates tension between the call to action and the instructive copy + illustration, considered it's nested between the two.
  • New Discussion tool revealed: Same question as above: "Can you think of an alternative way of communicating the Be positive! message?"
    • Also, I'm assuming the copy in this view will be some version of the Be positive! message you mocked up on desktop.

Comments

Meta

  • For your awareness, I think the title of the page will read as Creating Discussion: Nellie Bly rather than Talk:Nellie Bly, as is currently shown in the mockups [iii]).
  • Regarding the point @Whatamidoing-WMF raised in T274832#7161920 about including an additional affordance for people to make non-section edits, we decided it is NOT necessary to add an additional affordance to the experience being designed considering the standard Edit source tab will continue to appear in page's frame/chrome and function as it normally does.

i.

Screen Shot 2021-06-25 at 10.31.54 AM.png (658×1 px, 103 KB)

ii. This "moment of reflection" comment was prompted by the success Twitter has had with "prompts". More in https://blog.twitter.com/en_us/topics/product/2021/tweeting-with-consideration.
iii.
empty-desktop-article.gif (667×1 px, 1 MB)

Considering that we are trying to keep it uncluttered and clean, this next iteration removes the "be positive" copy and animation from both the desktop and mobile versions.

Desktop:

redlink.gif (667×1 px, 720 KB)

Mobile:

Tap new discussion button
Mobile Splash (4).png (1×744 px, 111 KB)
New Discussion tool revealed
Mobile Input (7).png (1×744 px, 81 KB)
content entered and "add topic" tapped
Mobile Input - Filled.png (1×744 px, 116 KB)
Success messages
Mobile Input (2).png (1×828 px, 67 KB)
Final state
Mobile Input (3).png (1×828 px, 62 KB)

Before signing off on this I'd love a review from @DLynch as well as @ppelberg

@iamjessklein moving this to Blocked, and that will be the signal for @ppelberg to look at the design.

@Whatamidoing-WMF can you say more about this? I know we discussed it but I'm having some trouble remember what the button would actually say.

I'd been thinking about a discreet little button that would let me bypass the &section=new aspect, so I can edit the whole page.

However, if the normal [Edit source] tab at the top of the page still lets me do that, then it wouldn't actually be necessary.

Desktop:

redlink.gif (667×1 px, 720 KB)

Your mockup shows the “History” tab and the “More ▼” dropdown all the time. Before actually posting the first message, they shouldn’t be visible (just like how they’re not visible currently), but they should preferably appear (if applicable—the dropdown is usually not visible for logged-out users, as it contains nothing) when the message is posted. I don’t know how much animation these little things need, but they should be considered. (The same goes for mobile as well.)

Re: @Whatamidoing-WMF

I'd been thinking about a discreet little button that would let me bypass the &section=new aspect, so I can edit the whole page.
However, if the normal [Edit source] tab at the top of the page still lets me do that, then it wouldn't actually be necessary.

Yes, we were thinking that's what the Edit source tab would do, sorry for not saying that explicitly. Another option is to do something like this, however this could potentially be a confusing CTA to newcomers, so I'd hesitate to do that:

screen_shot_2021-06-30_at_2.52.20_pm.png (398×492 px, 77 KB)

Re: @Tacsipacsi

Your mockup shows the “History” tab and the “More ▼” dropdown all the time. Before actually posting the first message, they shouldn’t be visible (just like how they’re not visible currently), but they should preferably appear (if applicable—the dropdown is usually not visible for logged-out users, as it contains nothing) when the message is posted. I don’t know how much animation these little things need, but they should be considered. (The same goes for mobile as well.)

Good observation. Yes, this assumption is totally correct and I just didn't animate that part of the page because I wasn't making any changes to that behavior. But yes, correct, I'll update the mockups just to make sure that's noted.

Before signing off on this I'd love a review from @DLynch as well as @ppelberg

@iamjessklein these look good. The open questions I have are for engineering.

Comments

  • "Be positive" message: I support the suggestion you are making to exclude this from the initial experience; I figure we can revisit this in a future iteration. Here is the ticket where we this work can happen: T285916.
  • "Create blank page": I agree with what you shared above about the risk of this affordance distracting Junior Contributors unnecessarily. As such, I think we should omit the affordance for this iteration. If Senior Contributors have difficulty locating the pages's Edit link, we can consider ways to make the full-page editing affordance easier to notice discover.

Questions

  • Editing Engineering: would it be disruptive to y'all if I were to express an opinion about how I think the copy should read after y'all start work on this task? I ask this as I have not yet put thought to it.
  • Editing Engineering: F34533040 shows the Add a new topic near the bottom of the page on mobile...do you think that layout will cause people using a mobile iOS device to have to tap twice in order to engage with that button?

Editing Engineering: would it be disruptive to y'all if I were to express an opinion about how I think the copy should read after y'all start work on this task? I ask this as I have not yet put thought to it.

It's fine whenever. Ideally we'd have final copy before the patch actually lands, because that's when it goes out for translators to look at.

Editing Engineering: F34533040 shows the Add a new topic near the bottom of the page on mobile...do you think that layout will cause people using a mobile iOS device to have to tap twice in order to engage with that button?

I think as-presented it's high enough that on iOS (at least, on the non-mini? @matmarex will have better insight there) it'll not trip the status bar. At least, now? Not sure yet how the new location bar on iOS 15 will interact with it.

As for the design, it seems reasonable.

There's a strong chance it'll be much easier for us to do a page-reload after the topic-post, rather than transforming the empty page into a regular one. As @Tacsipacsi notes, things are different between a not-created page and a just-created page -- off the top of my head, there's the mentioned tab bar (including the contents of the "more" menu), there's different links in the "tools" part of the sidebar, and there's a different footer.

I noticed there's different versions of the flower image between desktop and mobile (the background circle), is that intentional?

Yes, we were thinking that's what the Edit source tab would do, sorry for not saying that explicitly.

Are you okay with the existing empty-state "create source" label remaining, or is this design calling for that to be changed to "edit source"? (I figure this is probably just a boilerplate tab bar being used, but verification is good.)

For your awareness, I think the title of the page will read as Creating Discussion: Nellie Bly rather than Talk:Nellie Bly, as is currently shown in the mockups [iii]).

@ppelberg should we keep the "Talk:" bit in? I wonder if it'll confuse people to have the page's apparent name change after saving. Could be as simple as `Creating Discussion: Talk:Nellie Bly". Alternately, there's room for a subheading on wiki pages, and we could perhaps provide the "you're making a discussion" information there?

Thanks @DLynch

I noticed there's different versions of the flower image between desktop and mobile (the background circle), is that intentional?

We've been finalizing the illustration so when you are ready to implement we will hand over only 1 design (most likely the one with the bees).

Are you okay with the existing empty-state "create source" label remaining, or is this design calling for that to be changed to "edit source"? (I figure this is probably just a boilerplate tab bar being used, but verification is good.)

Yes, keep the existing label copy.

should we keep the "Talk:" bit in? I wonder if it'll confuse people to have the page's apparent name change after saving. Could be as simple as `Creating Discussion: Talk:Nellie Bly". Alternately, there's room for a subheading on wiki pages, and we could perhaps provide the "you're making a discussion" information there?

If we did we could avoid the redundancy of the discussion and talk. Creating: Talk:Nellie Bly

should we keep the "Talk:" bit in? I wonder if it'll confuse people to have the page's apparent name change after saving. Could be as simple as `Creating Discussion: Talk:Nellie Bly". Alternately, there's room for a subheading on wiki pages, and we could perhaps provide the "you're making a discussion" information there?

If we did we could avoid the redundancy of the discussion and talk. Creating: Talk:Nellie Bly

As discussed during today's standup, we're going to keep the title of the page as-is: Creating Talk:PAGE_NAME.

Next steps

  1. Upload final mockups
  2. Move ticket to Ready to be worked on and unassign yourself from the task

I just added the following to the the description:

📱 mobile mock finals
🖥 desktop mock finals
🐝 bumblebee and flowers svg

iamjessklein renamed this task from Design user experience for non-existent (red-linked) *non-user* talk pages to Implement user experience for non-existent (red-linked) *non-user* talk pages.Jul 1 2021, 11:20 PM
iamjessklein removed iamjessklein as the assignee of this task.

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

[mediawiki/extensions/DiscussionTools@master] Apply an empty-state to pages with the new topic tool enabled

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

Editing Engineering: F34533040 shows the Add a new topic near the bottom of the page on mobile...do you think that layout will cause people using a mobile iOS device to have to tap twice in order to engage with that button?

I think as-presented it's high enough that on iOS (at least, on the non-mini? @matmarex will have better insight there) it'll not trip the status bar. At least, now? Not sure yet how the new location bar on iOS 15 will interact with it.

I'll test it on the old iPhone SE (the smallest one) once it's implemented, since the font size, line wrapping etc. will affect where the button ends up. I think we could always make the image smaller to avoid the problem.

I'm moving this ticket back into "Doing" in order to make it so when someone clicks on a red-linked talk page, they are presented with what's depicted in F34534738 and F34534939 (read: people should see the designed empty state experience with the NDT *not* open).


Note: more context about the decision to implement the above can be found in T270323#7247813.

@DLynch: are you able to adjust the implementation to include the copy I've posted to the task description?

@DLynch: are you able to adjust the implementation to include the copy I've posted to the task description?

We talked about this and came to decisions in T274831. We're going to make a -link message for the help page and let the projects adjust it if-needed.

Change 708713 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Apply an empty-state to pages with the new topic tool enabled

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

In addition to myself, I'd like @KieranMcCann to do a design review.

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

[mediawiki/extensions/DiscussionTools@master] Apply design tweaks to empty states

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

Change 711670 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Apply design tweaks to empty states

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