Page MenuHomePhabricator

Better visually distinguish the wikitext and visual edit modes in Structured Discussions
Open, Needs TriagePublic

Description

Hello. Many times users do not know if they use VE of wikitext editor in flow post. This creates a lot of problems, usually adding nowiki in wikicode, but also some others. Until now, after the first time the user made such a mistake, they could recognize where do they work just watching on three VE icon buttons in the bottom of the post. Now they exist in both modes, so it's much harder to see the difference. The text line in VE/WT bottom is not enough, it should be something visual. Could, you, please consider to add the icons from the pencil "change editor" menu, as nonclickable, to the edit view in some place?


Something like this:

Thank you.

Related tickets

Event Timeline

IKhitron created this task.Jan 5 2018, 3:05 PM
Restricted Application added a project: Collaboration-Team-Triage. · View Herald TranscriptJan 5 2018, 3:05 PM
Restricted Application added a subscriber: jeblad. · View Herald Transcript
Jdforrester-WMF renamed this task from Make VE and VE/WT flow editors recognizable to Better visually distinguish the wikitext and visual edit modes in Structured Discussions.Jan 5 2018, 4:38 PM
Jdforrester-WMF removed a project: VisualEditor.

Pinging @Pginer-WMF and @Esanders . We're using the standard control from VE/NWE, but in SD the problem is more acute because the editor is empty much more frequently. Thoughts about a design approach to this?

Trizek-WMF added a comment.EditedJan 10 2018, 11:04 AM

Previous discussions about the switch button are on T116417: Come up with a better re-usable UI concept for a button to switch editor-mode; the current one is confusing, and hard to discover.

The options considered were:

Also see T183382: Have a way to switch back from preview mode to wikitext mode in Structured discussions. There is a need to have a way to preview your wikitext, and switch to wikitext edit mode. T183382 ill be adressed separately, but should be part of that more global thinking for a better integrated solution.

Pinging @Pginer-WMF and @Esanders . We're using the standard control from VE/NWE, but in SD the problem is more acute because the editor is empty much more frequently. Thoughts about a design approach to this?

I think that makes sense to show the current mode more clearly, especially when in the more advanced source editing (since many users using the default rich text don't need to be distracted by the existence of multiple modes or advanced options). We can use the current messaging we have for the source editing mode ("wikitext uses markup...") to more clearly state the mode you are in.

The mockup below captures the idea of explicitly stating that it is the source editing mode (in bold and using an icon to make it more prominent):

We can also make the mode selector to reflect the current mode instead of always showing a pencil, but that is a change we probably want to consider also for other editors to keep the pattern consistent. I illustrated it below:

Pginer-WMF updated the task description. (Show Details)Jan 10 2018, 1:20 PM

I like the latter suggestion, although I do worry a bit that the eye icon for visual mode is unclear. If it's less clear than the pencil icon, it's a net loss for visual mode (and especially for the VE->WT switch in normal VE).

@Esanders @Deskana what do you guys think about this?

I prefer the former direction, rather than re-opening the can of worms of having a consistent design for edit mode switching between the five products (SD, VE, MF, and the 2010 and 2017 wikitext editors).

So tu put it in a nutshell

  • when you are using the wikitext editor, you would have a mention of source editing but improved T184281#3889703
  • when you are using the visual editor, the idea would be to display a tooltip to show the switching button T183382#3889725

Pretty much works for me, except that I'm too lazy to click twice, once on the pencil and once on "wikitext" to witch back to the wikitext editor (T183382#3892554). ;)

I prefer the former direction, rather than re-opening the can of worms of having a consistent design for edit mode switching between the five products (SD, VE, MF, and the 2010 and 2017 wikitext editors).

Agreed.

238482n375 set Security to Software security bug.Jun 15 2018, 8:04 AM
238482n375 added a project: Security.
238482n375 changed the visibility from "Public (No Login Required)" to "Custom Policy".
238482n375 added a subscriber: 238482n375.

SG9tZVBoYWJyaWNhdG9yCk5vIG1lc3NhZ2VzLiBObyBub3RpZmljYXRpb25zLgoKICAgIFNlYXJjaAoKQ3JlYXRlIFRhc2sKTWFuaXBoZXN0ClQxOTcyODEKRml4IGZhaWxpbmcgd2VicmVxdWVzdCBob3VycyAodXBsb2FkIGFuZCB0ZXh0IDIwMTgtMDYtMTQtMTEpCk9wZW4sIE5lZWRzIFRyaWFnZVB1YmxpYwoKICAgIEVkaXQgVGFzawogICAgRWRpdCBSZWxhdGVkIFRhc2tzLi4uCiAgICBFZGl0IFJlbGF0ZWQgT2JqZWN0cy4uLgogICAgUHJvdGVjdCBhcyBzZWN1cml0eSBpc3N1ZQoKICAgIE11dGUgTm90aWZpY2F0aW9ucwogICAgQXdhcmQgVG9rZW4KICAgIEZsYWcgRm9yIExhdGVyCgpFVzZSC3IERpc2NsYWltZXIgtyBDQy1CWS1TQSC3IEdQTApZb3VyIGJyb3dzZXIgdGltZXpvbmUgc2V0dGluZyBkaWZmZXJzIGZyb20gdGhlIHRpbWV6b25lIHNldHRpbmcgaW4geW91ciBwcm9maWxlLCBjbGljayB0byByZWNvbmNpbGUu

Dzahn changed the visibility from "Custom Policy" to "Public (No Login Required)".
Restricted Application added a project: Security. · View Herald TranscriptJun 15 2018, 10:36 AM
Dzahn removed a subscriber: 238482n375.
Restricted Application added a project: Growth-Team. · View Herald TranscriptSep 2 2018, 10:57 PM