Page MenuHomePhabricator

Build New Discussion Tool v1.0 prototype
Closed, ResolvedPublic

Description

This task is about building a functional prototype of v1.0 of the New Discussion Tool.

Background

In order to evaluate the usability of the New Discussion Tool, we will be conducting usability tests on usertesting.com and on-wiki. [i]

The people participating in these tests will need a functional tool to test. This task is about creating said functional tool by way of incorporating the designs we created in T243248 into the demo widget we created in T260335.

Designs

New discussion tool/Compose/visualNew discussion tool/Compose/sourceNew Discussion Tool/Publish/source and visual

Done

  • 1. The "Designs" pictured above are implemented and fully functional. Note: the treatment of the topic's title/subject field will change per T267442.
  • 2. @iamjessklein conducts a design review of what's been implemented

i. T243249

Event Timeline

Task description update
Updating the "New discussion tool/Compose/visual" screenshot per T267442#6627321.

Note: the "New discussion tool/Compose/source" is unchanged as we do not have an updated mockup for this, afaik.

Change 623117 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/DiscussionTools@master] [WIP] Ability to add new discussion sections

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

@iamjessklein For your review. There are various minor differences from the mocks, since our standard components look slightly different.

The new discussion tool is connected to the "Add topic" tab only right now, I still need to work out the best way to also trigger it when the user clicks custom new section buttons (and to handle preload text).

The last few times we discussed this we were aiming for something between 1&2 where the new topic input has a full blue border, but uses the font and size of a heading (as is done in Flow). I don’t see that in the proposals above.

The last few times we discussed this we were aiming for something between 1&2 where the new topic input has a full blue border, but uses the font and size of a heading (as is done in Flow). I don’t see that in the proposals above.

@Esanders: do you recall where this conversation happened and/or who was a part of it? What you're describing sounds familiar, tho I don't a clear memory of it. cc @iamjessklein

For context, the designs pictured in the task description are a direct result of what was communicated in: T267442#6627321.

@Esanders that was our initial plan, however, we went with this version because testers were having a hard time seeing identifying the input as an input (so that's why we changed the field style). However now seeing this implemented, I'm wondering if this is the right decision because now the only preview is actually happening in source mode and visual mode is just a form (so that seems unintuitive). Thoughts @ppelberg @Esanders @matmarex?

**//This is what it looks like in Source mode://**

**//This is what it looks like in Visual mode://**

Other notes on the current implementation:

  1. After clicking the "New Topic" tab, the active input is currently the description box but it should be the "Topic" Field
  2. The highlight color should be either yellow90
  3. There should be a post - publish success message
  4. There's this funky thing happening where inputs and the notice message are repeated for me:

The last few times we discussed this we were aiming for something between 1&2 where the new topic input has a full blue border, but uses the font and size of a heading (as is done in Flow). I don’t see that in the proposals above.

@Esanders: do you recall where this conversation happened and/or who was a part of it? What you're describing sounds familiar, tho I don't a clear memory of it. cc @iamjessklein

For context, the designs pictured in the task description are a direct result of what was communicated in: T267442#6627321.

In person with you and Jess, at least twice. I assume it's in our notes somewhere.

This comment was removed by Esanders.

Jess posted the design I'm talking about in T267442#6625200 as "1. Maintaining the styles used in the discussion but adding input boxes"

I see both of you preferred option 2. in the replies but whenever we'd discussed it before I'd suggested option 1 and remembered us agreeing.

Documenting our decision from stand-up here for @matmarex to revise title/subject field input treatment to look visually distinct from body field in terms of text size and font.

It should look like this:

I updated the patch, new demo is here: https://patchdemo.wmflabs.org/wikis/6c9d8abccba2bc261a8e48e0d1527e1a/w/index.php/Talk:Main_Page

  1. After clicking the "New Topic" tab, the active input is currently the description box but it should be the "Topic" Field
  1. There's this funky thing happening where inputs and the notice message are repeated for me:

Fixed

  1. The highlight color should be either yellow90
  1. There should be a post - publish success message

Fixed – also, Ed has filed a separate task about these: T268994. We could deploy these changes separately from the new discussion tool, as they also affect the reply tool.

Documenting our decision from stand-up here for @matmarex to revise title/subject field input treatment to look visually distinct from body field in terms of text size and font.

Fixed

Great. I will review today.
As an aside, I like how you broke down my feedback and and replied with the status in phab. ;)

I like how if I start a new discussion and then close the window and then click the new discussion button that the content I previously wrote is saved.

One tiny fix on the copy for the success message. We want it to match the label of the button so can you change it to say "Your topic was added."?

One more tweak - I believe that the yellow is too light here. I've just learned in our style guide meeting that we can use #ffe29e - can you try substituting that color?

#ffe29e:


it's quite.. orangey

yellow90:

green90:

One tiny fix on the copy for the success message. We want it to match the label of the button so can you change it to say "Your topic was added."?

Done

One more tweak - I believe that the yellow is too light here. I've just learned in our style guide meeting that we can use #ffe29e - can you try substituting that color?

Done

#ffe29e:

it's quite.. orangey

I actually like this color… although it's very close to the current one, which I picked ;)

The "orangey" tone made me think of the notification bar for new talk page message (https://commons.wikimedia.org/wiki/File:Echo_Notifications_new_message_indicator.png). Maybe more orange is actually the way to go…

I basically like the design. Two issues I found so far:

  1. The new section form feels like part of the previous section, it doesn’t emphasize enough that it’s something entirely new. There should be a vertical bar, some space, whatever. Actually there’s less space between the previous paragraph and the title than between the title and the section text:
  2. There’s no warning if one tries to post without a section title. Posting without a section title is valid, but almost certainly not what the user wants. (Unless it uses a custom affordance that specifically disables it with section=new&nosummary=1 in the URL, but custom affordances are not yet supported.)

Good spot @tascipacsi on #2, @ppelberg will create a ticket to address it.

Good spot @tascipacsi on #2, @ppelberg will create a ticket to address it.

Said ticket: T269285. Thank you, @Tacsipacsi.

I basically like the design. Two issues I found so far:

  1. The new section form feels like part of the previous section, it doesn’t emphasize enough that it’s something entirely new. There should be a vertical bar, some space, whatever...

Well put, @Tacsipacsi. Work on this issue will happen in T269157.

The loading time feels very slow to me when I:

  1. switch between modes
  2. publish the post

Example::

I'm assuming that nothing can be done to improve this @matmarex, but thought I'd mention it.
While I'm discussing this, I'm thinking that we should change the progression animation at some point cc @ppelberg - it feels outmoded.
This could possibly be related to this work and should NOT block this feature release.

The loading time feels very slow to me when I...
I'm assuming that nothing can be done to improve this @matmarex, but thought I'd mention it.

Leaving this here for engineering.

While I'm discussing this, I'm thinking that we should change the progression animation at some point cc @ppelberg - it feels outmoded.

Sounds good to me.

  • @iamjessklein: can you please file a ticket to serve as a placeholder for this work?

This could possibly be related to this work and should NOT block this feature release.

This is helpful context and agree RE work on revising the loading interaction as not blocking this release.

It's weird, sometimes it's quite slow, sometimes it's normal. I don't really understand why, but it's almost certainly just a problem with Patchdemo. I don't think it's worth investigating, unless it becomes unusable.

Change 623117 merged by jenkins-bot:
[mediawiki/extensions/DiscussionTools@master] Ability to add new discussion sections

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

Change 655966 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[operations/mediawiki-config@master] Enable DiscussionTools' newtopictool as beta feature on Beta Cluster

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

I realized that we have no way of testing this on the Beta Cluster, since it's hidden – this patch will enable it there using the same configuration as we're planning to use in production (T270119). I'd like to deploy it tomorrow @ppelberg.

(After the discussion today, I'm not planning to deploy it right now, until we figure out what exactly we want)

Change 655966 merged by jenkins-bot:
[operations/mediawiki-config@master] Enable DiscussionTools' newtopictool as beta feature on Beta Cluster

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

The current version can now be tested on the Beta Cluster wikis, after enabling the beta feature (e.g. https://en.wikipedia.beta.wmflabs.org/wiki/Special:Preferences#mw-prefsection-betafeatures).