Wikipedia:VisualEditor/Feedback/Toolbar

The current sequence of buttons in VisualEditor's toolbar is a temporary layout that is not ideally suited for typical article editing activities. Your opinions about which ones should be included and where on the toolbar or menus they should be located are wanted. You can create a new section for your ideas or comment on other people's.

The current toolbar (as of March 2015)

Helpful links

commons:Category:VisualEditor icons includes images of the current icons.
Use {{Tracked}} and {{Phab}} to link to bug reports on bugzilla:. For example, {{Phab|54271}} produces T54271.
You can use {{multiple image}} to string together icons in the order you want:

Type this...

to produce this:

{{multiple image
| align     = center
| direction = horizontal
| header    = My proposal
| width     = 50
| image1    = VisualEditor - Icon - Picture.svg
| image2    = VisualEditor - Icon - Reference.svg
| image3    = VisualEditor - Icon - References.svg
}}

My proposal

Responses and proposals

The current toolbar gives too much priority to hard-coded formatting such as Bold, Italic, Lists and Indents. As a result:

The most important buttons (e.g. for referencing) are pushed into a secondary position and may even be forced onto the "More" drop-down
Wikilinking is incorrectly associated with formatting
Formatting buttons are divided between the left-end of the toolbar and the "More" drop-down
It isn't immediately clear what "More" is offering

I propose that article content buttons should be at the left end and formatting should be at the right end of the toolbar, so something like this:
Paragraph
If "More" is necessary, it would probably be inserted into the formatting buttons, and the users would expect to find more of them in the drop-down, like this:
Paragraph More
Of course, this is only a starting point. By the way: underscore and strikeout shouldn't be formatting options in the article space, "Page title" isn't necessary as a paragraph style. Thoughts? - Pointillist (talk) 14:21, 18 September 2013 (UTC)[reply]

Just wanted to note that I think you've got some really good ideas there. I've carried them over to

T54271. --Maggie Dennis (WMF) (talk) 15:20, 18 September 2013 (UTC)[reply]

I think good ideas also. My only comment is that I would have put the two list buttons (bullets and numbers) earlier, maybe just before bold: I just think that lists are more normal in articles than bold/italic. --NicoV ^{(Talk on frwiki)} 17:58, 18 September 2013 (UTC)[reply]

Bold is used in the first sentence of almost every article, and italic ought to be used every time you mention or cite (without a template) a book, magazine, or newspaper.

Lists are also common. Even though there aren't that many actual lists in articles, list formatting is used for ==External links==. Whatamidoing (WMF) (talk) 18:06, 18 September 2013 (UTC)[reply]

I went through 10 random pages: everyone of them had at least 1 bold (title in the introduction) and 1 list (various places, often several). I just feel that lists should be before bold (not strongly) because bold is not encouraged except for the title in the introduction, whereas lists are a way of presenting different kind of informations. So, order between bold and list is probably not very important, but lists should be before subscript, superscript, code, ... Edit: I think that bold/italic and both lists should be visible all the time because they are frequent, if some icons need to go in More, I'd rather see subscript, superscript, code, indent, ... --NicoV ^{(Talk on frwiki)} 18:36, 18 September 2013 (UTC)[reply]

As these are individual images, you can experiment with layouts without needing an image editor. All you have to do is cut-and-paste. Here's what we have so far:

Toolbar until recently

Paragraph More

Current toolbar (corrected 11:39, 19 September 2013 (UTC))

Paragraph More

Pointillist's starting point

Paragraph

NicoV's response

      Paragraph
or
      Paragraph
or
      Paragraph More
Over to you - Pointillist (talk) 21:30, 18 September 2013 (UTC)[reply]

Actually, the current toolbar is:

Paragraph

More

Fixed Thanks John, I've updated my earlier post accordingly - Pointillist (talk) 11:39, 19 September 2013 (UTC)[reply]

And I think this is much better:

Paragraph

Format text

The logic, left to right, is BIG to small with regard to text (paragraphs are bigger than lists which are bigger than formatting a couple of words), and then SPECIAL, from easiest to most difficult (links, media, references [2], templates). -- John Broughton (♫♫) 03:53, 19 September 2013 (UTC)[reply]

Since Bold is used for every title but not much else (except alternative names), could it be automated? (I know, the alternative names could be a problem, but maybe for that it could be under More.)Kdammers (talk) 08:06, 19 September 2013 (UTC)[reply]

Please keep the ideas & priorities coming. I wonder how often people need to use

ordered lists and

indents for article editing? Would

computer code and maybe

block quotes be more useful for article editing? - Pointillist (talk) 12:50, 19 September 2013 (UTC)[reply]

I think it's a good idea to make block quote formatting available as a "Format text" option. That would make eight items in that drop-down menu: Bold, italic, computer code, superscript, subscript, underline, strikethrough, and block quotation. One could also add "Hidden" to this list, once VE has the ability to display hidden text to editors. John Broughton (♫♫) 17:15, 19 September 2013 (UTC)[reply]

First of all, I suggest putting the underline button next to the bold ant italic buttons, like in most word processors. Next, how about putting the "tools" (references, media, references list and transclusion) at the beginning of the toolbar? Also, you could add a "sign post" button to make it possible to use the VE on talk pages. Finally, I think users should have the possibility of replacing the "more" menu with icons on the toolbar. The Million Rabbit 05:16, 20 September 2013 (UTC)[reply]

I think the toolbar should be organized in favor of actions recommended by manual of style of most wikis (VE is an editor for Wikipedia, not a generic document editor), and actions that are usually used in only a few situations should be less obvious. So that new editors are less prone to use formattings which are not recommended.

links, medias, references, templates, math, ... are important and they should be promoted so that new users try them
styles are important for titles
bulleted lists (and eventually numbered lists for articles like music albums) should be easily accessible. An idea: could they be removed and replaced by styles in the dropdown list ?
I have mixed feelings about bold: it's often abused by new editors, but bold is almost mandatory for article titles and not encouraged everywhere else
I don't know about italic: probably less abused
underline is one of the not recommended formats, so it should be less accessible
indent/unindent are rarely useful in articles
blockquotes could be useful but they need to be parametrized depending on the wiki: different languages use different ways of quoting (« » recommended in French, ...)
...

--NicoV ^{(Talk on frwiki)} 08:05, 20 September 2013 (UTC)[reply]

I agree with everything NicoV has just said above. I particularly like the idea of offering bulleted and numbered lists as styles in the dropdown list (rather than as buttons). Are indent/unindent and strikethrough ever useful in articles? I can't think of an example. - Pointillist (talk) 08:20, 20 September 2013 (UTC)[reply]

The toolbar isn't just for articlespace; in fact, VE is now usable in User space. Eventually it will be used everywhere except for pages where Flow is in use.

Ideally, the toolbar should adjust itself for whatever namespace it's in. So, in articlespace, for example, the option to format text as strikethrough should be greyed out. It should still be shown, so editors get used to a standard sequence of menu options, and so they don't wonder why an option has vanished. -- John Broughton (♫♫) 21:16, 20 September 2013 (UTC)[reply]

I agree that an auto-adapting set, per namespace, would be ideal. That's the only way that it makes sense to include strikethrough/underline/PageTitle/indent. If we can't remove those items per-namespace, then I think they should be removed altogether, as there really is very very little use for them in article space, and they're simply confusing and cluttering.

Relatedly, the computer code icon has to be changed. Anyone who has ever known wikimarkup is going to confuse that with a {{template}} button. I can't think of a better icon, at the moment. –Quiddity (talk) 05:34, 22 September 2013 (UTC)[reply]

Flow is expected to support VisualEditor, so the Toolbar would get used there, too.

If strikethrough is disabled in VisualEditor, how would you edit the lead of Strikethrough?

Quiddity, I think that the current computer code icon probably makes sense to users who have spent a lot of time programming in C (e.g., not me). I can't think of a good icon for it, either. Maybe "code" in a monospace font? Or just an "a" or "abc"? Whatamidoing (WMF) (talk) 00:58, 23 September 2013 (UTC)[reply]

Re: Flow, good point. We still wouldn't need "Page title (H1)" or "underline" though. Those are vanishingly rarely used, and simply distract/confuse.

Re: strikethrough, we'd use the edit source button, obviously! ;P Just as we would for all the other things not supported by the Toolbar or VE.

Re: Code icon: There were related concerns raised about the icon used for the CodeEditor, at Wikipedia:Village pump (technical)/Archive 116#Disable JS.2FCSS highlighting and toolbar and if we come up with a good solution for one, it will probably be usable at the other. Just a thought. –Quiddity (talk) 03:15, 23 September 2013 (UTC)[reply]

"More" dropdown

Text labels: I would guess that the layout currently used, was chosen so that they could add the words after the icons. I recall there were a few requests for "text labels" to be added to the icons, particularly the "transclusion" and "reference" icons. I agree that text labels are needed, unless those 2 icons can be drastically improved and (somehow?) made more intuitive. –Quiddity (talk) 05:34, 22 September 2013 (UTC)[reply]

Loose translation of feedback from fr.wp user Nemesis III: <<The Visual Editor has been updated recently, here I give my opinion on these changes.

The toolbar: because of the appearance of several buttons, you must now click on "More" to pull down a menu. Why not, but on the other hand it is a pity for those who have a big screen to have this menu while all these buttons may be displayed directly on the same line.
For the same drop-down menu: I think it's confusing; at the top you find the least used options. Personally and probably like many, I rarely add computer code, and much more templates or references. A priori, the developers have directly transposed a little bit too fast the logical organization of the previous horizontal menu (left; formatting text, right; peculiar wiki code), but it's no longer appropriate there (it should be arranged by frequency of use).
Again about this menu: the "Computer Code" icon, which consists of {}, inevitably makes you think that this button is used to add templates, even more so as it is in the first position. I think this is confusing and I'm not the only one concerned, the icon should be changed. Nemesis III (discuter) 21 septembre 2013 à 23:47 (CEST)>>

I disagree with the current placement of 'media' in the more dropdown menu. Conversation on its placement seems to be quiet at the moment.. I think media priority would be good showcase in the Visual Editor. After all, it is a 'visual' editor. We're engaging new users, who expect the ability to upload and add media. If we want wiki pages to slowly become more media-rich (and I think they really need to in an appropriate way of course), then having the add media button prominent will at least remind new editors to think. "Hey, Wikipedia wants appropriate images, is there one I can donate/upload/create to enhance this article while I'm here?" Anything less seems inconsistent with recent campaigns for commons uploads. As it is, the media button in the 'more' dropdown seems to continue to make media a second class citizen. Just a little less important than Superscript??? Really? Simple point: It's not where most users expect it to be. Experienced users might think the feature simply doesn't exist. I thought the feature was disabled until I 'found' it under the dropdown. There's a disconnect in the design here. MarkJurgens

Grouping

It's important to discuss not only the order of buttons, but also their layout and grouping.

	Paragraph	Format text
^Undo	^Structure	^Style	^Tools

Or maybe this way:

	Paragraph	Format text
^Undo	^Structure	^Style	^Tools

Something like this (with better styling) alleviates the problem of not having a label describing each button, and guides the user into the purpose of each group of buttons. Diego (talk) 03:43, 20 September 2013 (UTC)[reply]

I like this idea a lot. Diving into the details, one question seems to be whether to put the most-used options for articles (that would be "Tools") to the left, or to put the least complicated options to the left (and I'm not sure which that would be), with the most complicated options (again, Tools) to the right. -- John Broughton (♫♫) 21:21, 20 September 2013 (UTC)[reply]

I like the idea of having text formatting in its own menu, separate from the other things that are currently in the menu. Whatamidoing (WMF) (talk) 17:37, 19 November 2013 (UTC)[reply]

Icon for Reference

There have been a few threads discussing the "Add Reference/Citation" icon. (Wikipedia:VisualEditor/Feedback/Archive_2013_5#Editing_a_footnote (most recent), Wikipedia:VisualEditor/Feedback/Archive_2013_1#Icons_are_incomprehensible, and 5 other less specific threads linked at bugzilla:51372). It took me quite a few seconds to initially recognize that the current icon is meant to be a book, with a ribbon-bookmark hanging over the side (even after being told).

As I said in the most recent thread, I believe that the superscript blue bracketed numbers^[24] are the most recognizable visual representation of a "reference",^[42] and that "element" needs to be part of any icon design for this function. (per xkcd!) Sorry if this is already being discussed/considered elsewhere, but I thought it worth mentioning here in case it isn't. –Quiddity (talk) 21:45, 20 September 2013 (UTC)[reply]

Do you think that the book would be more recognizable if it weren't so square? Whatamidoing (WMF) (talk) 01:00, 23 September 2013 (UTC)[reply]

Personally, I don't think the concept of "book/bookmark" is a good abstraction of "reference/citation/footnote". Therefore making the book icon look more "booklike" wouldn't help.

The (very napkin-sketch level) idea I put forward at File:VisualEditor - Toolbar - Reference-edit1.png (and described above) is still my favoured solution. I know that there was an objection to the blue not fitting into the current all-grey color scheme, but frankly that's a good thing, because "Add Reference" should be one of the most used buttons on this toolbar. –Quiddity (talk) 03:00, 23 September 2013 (UTC)[reply]

@Quiddity: I agree that the current icon isn't very intuitive. Personally, I'd favor a better version of a book with bookmark - say, this, plus a reference number ([1]), in blue, as shown in the second column, second and third rows, at File:VisualEditor - Toolbar - Reference-edit1.png.

But we need to keep in mind that any icon with characters as part of it is going to require creating new icons for languages that don't use those characters. So even "1", as the footnote number, isn't going to work for all the time - see Eastern Arabic numerals, for example. That, in turn, means the VE code needs to treat these icons - or the entire toolbar - as a variable (Standard, Eastern Arabic, Indian, etc.), rather than as a static thing. Which means more coding. So an alternative more consistent with the universal approach of the current toolbar would be (blue) brackets without a number between them. -- John Broughton (♫♫) 02:46, 24 September 2013 (UTC)[reply]

@John Broughton: I don't think the language variants will be a problem, because ~~all languages (afaik) use western numerals for footnote links, eg ar:الصفحة_الرئيسية, he:מגרש_הרוסים, zh-yue:道格拉斯·希渣, etc.~~ Dangit. mr:बराक ओबामा uses non-western numerals. Hmm. Well, most languages use western numerals. Translatewiki is confusing me atm, so I'm not sure where to find a specific list.

However, the superscript/subscript icons will have to be changed for RightToLeft languages, and the icons that use latin characters (bold/italic/strikethrough/underline) will also probably need to be changed, and the numbered-list icon uses western numerals 1-3, so icon-changes are a somewhat normal part of VE deployment. (I assume!) –Quiddity (talk) 04:02, 24 September 2013 (UTC)[reply]

@Quiddity: I missed the 1 2 3 for list numbering, so I'm going to withdraw my point - whatever solution WMF has for substituting some other numbering (be that a new toolbar or just a different icon), for the numbered list icon, can also be used for a number in the Reference icon. So I'm voting for a (better) book icon, with a blue "[1]" added to it. (I still think a book icon is best; the bookmark part of it is just a bonus, in my opinion.) -- John Broughton (♫♫) 02:30, 25 September 2013 (UTC)[reply]

Three icon substitutes

Here are three substitute icons in case you would like to try them in mockups:

Trying out Quiddity's suggestion in monochrome.

Cite rather than ref.

Possible alternative for computer code.

This is what they look like next to the current tools:

Hope this helps - Pointillist (talk) 07:53, 24 September 2013 (UTC)[reply]

Nice, just a bit too grayish compared to the other ones. --NicoV ^{(Talk on frwiki)} 08:15, 24 September 2013 (UTC)[reply]

I agree. That is the problem with text on icons—anything more than two characters is too small. - Pointillist (talk) 08:23, 24 September 2013 (UTC)[reply]

Book icons

As suggested above, here are some buttons in the shape of an open book (or journal, newspaper, magazine) styled like the bookmark and media buttons:

like

The fourth from the left (Open-book-2.svg) is the clearest on my screen, but your mileage may vary. As for where to put a citation indicator^[42], well, I dunno—that would probably require a designer. The fifth from the left uses a smaller book, but there still doesn't seem to be room for the footnote number. Over to you... - Pointillist (talk) 12:01, 25 September 2013 (UTC)[reply]

Some suggestions from Gryllida

The user suggest here (with examples) that a set of "themes" for the toolbar is provided. --Elitre (WMF) (talk) 14:16, 7 November 2013 (UTC)[reply]

Right. Thanks. (Everything referenced and pasted as pictures above is all one theme, the mono-color high-contrast one.)

--Gryllida (talk) 09:01, 8 November 2013 (UTC)[reply]

New toolbar, December 2013

Several changes have been made to the toolbar recently. Please leave your thoughts on these here, along with any suggestions for future improvements. Whatamidoing (WMF) (talk) 19:41, 19 December 2013 (UTC)[reply]

I like it; it's much clearer, and will hopefully reduce vandalism where people bold or italicise excessive amounts of text. The only issue is that the two dropdown menus, Formatting and Insert, look completely different to each other. One has an icon, no text label, and no downward-pointing arrow; the other has no icon, but does have a text label and a downward-pointing arrow. However, they are identical in functionality. So I think this needs to be clarified somehow. This could most simply be done by adding the downward-pointing arrow to the Formatting menu. — This, that and the other (talk) 01:42, 20 December 2013 (UTC)[reply]

The formatting menu will be getting a down-arrow. Apparently something fiddly went wrong with it at the deadline, so we get to live without the arrow for a while. But James F has promised me that it was on its way. Whatamidoing (WMF) (talk) 06:06, 20 December 2013 (UTC)[reply]

Great to hear. Keep up the good work, Whatamidoing! — This, that and the other (talk) 06:42, 20 December 2013 (UTC)[reply]

This toolbar is much better than the previous one, really clearer. However on large screens around one third of the toolbar is empty. Personnaly I prefer more icons/buttons than a lot of dropdown menus (of course they will have the same appearance), especially when there is empty space. Another idea would be, for experimented users (or something availaible in the preferences), that there are only icons. (sorry for my bad English) NemesisIII (talk) 22:57, 20 December 2013 (UTC).[reply]

The new toolbar must have an alignment option for images. This is a core necessity.

Hi there. That option is already available in the media dialog itself (click on the pic, then Advanced Settings --> Position). Have you tried it? Best, --Elitre (WMF) (talk) 15:29, 4 June 2014 (UTC)[reply]