Make source/wikitext icon consistent
Closed, ResolvedPublic

Description

"Source" icon is different in Flow wikitext mode, Flow VE mode, and VE. Ideally all of them should use the same icon, but at least we should make sure the same icon is used in the same product.

Aspects to determine:

  • The appropriate metaphor: Flow uses a more generally recognisable "</>" to represent code, while in VE a more specific "[[]]" is used to represent wikitext. A general metaphor may be usable for a wider audience (e.g., users not afraid to dealing with code such as markdown or html), while a more specific metaphor may be more direct to those users that know that wikitext is what is behind the rich text content.
  • Whether the icon is recognisable enough. If we find it is not, we can consider making it more prominent (e.g., use more prominent and quicker tooltips, add a label, etc.)
Pginer-WMF updated the task description. (Show Details)
Pginer-WMF raised the priority of this task from to Needs Triage.
Pginer-WMF added subscribers: Pginer-WMF, Aklapper, DannyH.

Do we have any instrumentation for the"source" button? It would be great to know the funnel for the switch mode workflow (how many people "switch modes", "switch modes + edited the content", and "switch modes + post") to establish a baseline.

No, there is no instrumentation for the switch currently. I agree that could be valuable, though.

Mattflaschen-WMF triaged this task as Normal priority.Apr 28 2015, 8:08 PM

On this feedback, a user tells the switch to wikitext button is "encrypted". Several times, I needed to explain how to switch to wikitext.

The recent change concerning the source icon, from </> to [[]] raises a new problem: some users (and I include myself in) would like to know when they are on wikitext mode or on VE mode.
Is it possible to have two different icons?

The recent change concerning the source icon, from </> to [[]] raises a new problem: some users (and I include myself in) would like to know when they are on wikitext mode or on VE mode.
Is it possible to have two different icons?

Switching the icon can generate the (action vs state confusion). So I would avoid that approach.

If the toggle button does not seem enough to highlight you are accessing the source view, I think we have other ways to better emphasise the mode you are in. For example, using a monospaced font-family for wikitext (which are commonly associated with the idea of "code") or making the bottom instructions we show for wikitext more prominent could help to differentiate both modes better.

I quickly put together some of the above ideas in a mockup:

The recent change concerning the source icon, from </> to [[]] raises a new problem: some users (and I include myself in) would like to know when they are on wikitext mode or on VE mode.
Is it possible to have two different icons?

Switching the icon can generate the (action vs state confusion). So I would avoid that approach.

I think people may already find this confusing. Although it's supposed to indicate you're in wikitext by showing the wikitext icon selected/pressed down, people may still think they need to click it to switch into wikitext.

What about toggle buttons, like https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Buttons_and_Switches#Toggle_buttons ? I think it's pretty clear there which is selected, we can add text for both sides of the button ("wikitext" and "VisualEditor"), and I think we can add icons to each button.

I was also thinking about toggle switches, but they don't appear to be as clear here.

Thanks @Pginer-WMF!
Emphasize by changing the typo is a good idea, which could solve T95831: Flow wikitext area doesn't respect text formatting option (monospace, sans-serif, etc.) :)

That is actually asking for Flow to respect the <textarea> font from user preferences. And the default there is "browser default", which apparently varies by browser (see e.g. http://stackoverflow.com/questions/20013784/what-is-default-font-style-of-textarea-in-chrome-text-input-vs-textarea-size).

I don't know if we necessarily should implement T95831: Flow wikitext area doesn't respect text formatting option (monospace, sans-serif, etc.), though.

DannyH set Security to None.Nov 6 2015, 12:56 AM
DannyH removed a subscriber: DannyH.

Visual editor now uses the pencil icon to switch from the wikitext.

Quiddity added a subscriber: Quiddity.EditedNov 8 2015, 4:01 AM
In T97451#1769967, @Mattflaschen wrote:

Thanks @Pginer-WMF!
Emphasize by changing the typo is a good idea, which could solve T95831: Flow wikitext area doesn't respect text formatting option (monospace, sans-serif, etc.) :)

That is actually asking for Flow to respect the <textarea> font from user preferences. And the default there is "browser default", which apparently varies by browser (see e.g. http://stackoverflow.com/questions/20013784/what-is-default-font-style-of-textarea-in-chrome-text-input-vs-textarea-size).

That's a good thing! It means users will recognize the "browser default" that they are accustomed to getting in most other sites (or, their personal preference that they've set in their userpreferences, e.g. someone who purposefully uses one of the various 'dyslexia-friendly' typefaces).

This task as written in the title has been Resolved since September 2015; could it be re-worded to focus on… I'm not actually sure what's left here?

I think this ticket can be closed. The current discussion included other topics that expanded a bit the scope of the initial description, but those are resolved or have their own tickets: better distinguishing wikitext (Flow already uses a different font for each mode) and the identification of the mode/switch discussion (covered in T116417 with more detail).

Pginer-WMF closed this task as Resolved.Mar 2 2017, 11:08 AM
Pginer-WMF claimed this task.