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.

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

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

In T274832#7149883, @iamjessklein wrote:

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."

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	New Discussion tool revealed	content entered and "add topic" tapped	Success messages	Final state

Exploration 2

Tap new discussion button	New Discussion tool revealed	content entered and "add topic" tapped	Success messages	Final state

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.

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:

Mobile:

Tap new discussion button	New Discussion tool revealed	content entered and "add topic" tapped	Success messages	Final state

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

In T274832#7167385, @iamjessklein wrote:

@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.

In T274832#7186871, @iamjessklein wrote:

Desktop:

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:

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.

In T274832#7186871, @iamjessklein wrote:

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

In T274832#7190202, @iamjessklein wrote:

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.

I just added the following to the the description:

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

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

In T274832#7189028, @DLynch wrote:

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