Page MenuHomePhabricator

Make it more clear the title/subject field should be edited
Closed, ResolvedPublic

Description

This ticket is about iterating on the current treatment of the New Discussion Tool's [i] title/subject field to make it more clear to people that they should edit/add text to it.

Background

As @Dvorapa and @Thomas_Shafee noted on mediawiki.org [ii][iii], the current treatment of the New Discussion Tool's title/subject field could lead people to interpret this field as a heading field (read: something they should not edit).

Design

form fonts (2).png (1×2 px, 337 KB)

Done

  • A new mockup is created that we think will lead Junior Contributors to instinctively arrive at the following conclusions:
    • "I should write something in here (where "here" means the title/subject field)
    • "I know what to write in here (where "what to write" means the title/subject for the topic they would like to talk about)

i.

image.png (894×1 px, 341 KB)

Image source
ii. https://www.mediawiki.org/w/index.php?title=Topic:Vwqyxgecjwrpljtp&topic_showPostId=vwqyxgeck0prtnrx#flow-post-vwqyxgeck0prtnrx
iii. https://www.mediawiki.org/wiki/Topic:Vx0yyxe5s0h246fd

Event Timeline

Thanks @ppelberg -To set expectations, I'm sharing how I am approaching this problem for this first iteration.
I want to be explicit about using this iteration (within the scope of the larger project lifecycle) to explore opportunities for making the text input more obvious within the current design and not adding new UI to other parts of the page.
If this is accurate, then the following ideas are out of scope for this iteration (but in scope for future iterations):

  • Additional links elsewhere on the page
  • Large blue buttons at the top of the page with custom calls to action
  • Links at the top of the page
  • An omnipresent form

Additionally, we have already designed an iteration for what it will look like with pre-loaded instructions and that will be handled the same way with this new ui treatment.

Enter topic 2 (3).png (1×2 px, 876 KB)

  • "New section" form is preloaded with a template/instructions
  • Instructions within new section form

What ideas are in scope?

  • Redesign the form fields to look like standard text inputs

Does what's included here match up with how you've been thinking about this work @ppelberg?

With that thinking in mind, I created two new iterations that address the idea for making the text input fields more obvious:

1. Maintaining the styles used in the discussion but adding input boxes

fonts used in doc - larger inputs.png (1×2 px, 337 KB)

2. Using form styling and input boxes

form fonts (2).png (1×2 px, 337 KB)

Do you feel any conviction about which direction we take?

Notes from the conversation, @Esanders, @iamjessklein and I had today are in-line below.

What ideas are in scope?

  • Redesign the form fields to look like standard text inputs

Does what's included here match up with how you've been thinking about this work @ppelberg?

Yes. This task is constrained to redesign the form fields such that people will instinctively recognize them as "things" they should type/write in.

With that thinking in mind, I created two new iterations that address the idea for making the text input fields more obvious...
Do you feel any conviction about which direction we take?

I default to you, @iamjessklein, about deciding on the approach you think will be most effective in communicating to people that: a) the field should be edited/written in and b) what they should write in it (the title/subject of the conversation they are trying to have).

Notes from the conversation, @Esanders, @iamjessklein and I had today are in-line below.

What ideas are in scope?

  • Redesign the form fields to look like standard text inputs

Does what's included here match up with how you've been thinking about this work @ppelberg?

Yes. This task is constrained to redesign the form fields such that people will instinctively recognize them as "things" they should type/write in.

With that thinking in mind, I created two new iterations that address the idea for making the text input fields more obvious...
Do you feel any conviction about which direction we take?

I default to you, @iamjessklein, about deciding on the approach you think will be most effective in communicating to people that: a) the field should be edited/written in and b) what they should write in it (the title/subject of the conversation they are trying to have).

Let's move forward with the iteration titled "2. Using form styling and input boxes".
@Esanders - after you implement this please check in with me so that I can perform a design review.

ppelberg closed this task as Resolved.EditedNov 17 2020, 5:48 PM

Let's move forward with the iteration titled "2. Using form styling and input boxes".
@Esanders - after you implement this please check in with me so that I can perform a design review.

Great. I've added "2. Using form styling and input boxes." to the task description and with it, I'm marking this task as "Resolved" considering the engineering work and subsequent design review will happen in T267595.