Page MenuHomePhabricator

Most of the VE editing toolbar buttons are unlabeled icons (albeit with tooltips), which can reduce usability
Closed, DuplicatePublic

Description

I love that VisualEditor is aiming to make editing much more usable for newcomers, but many of the toolbar icons are unlabeled right now, or just have alt text for labels, which can be confusing for many people, especially people with less computer experience/confidence.

This is especially an issue when the icons use unfamiliar metaphors. The underlined italic A, the link icon, and the bulleted list icon may be reasonably familiar from other word processing interfaces, but the bookmark icon for citations and the omega icon for special characters were symbols I didn't immediately have confidence in understanding. The "hamburger" icon for more options is also likely to be unfamiliar for less experienced computer users.

Less experienced editors are likely to be hesitant to click icons experimentally if they don't know what they mean, since they're likely to be concerned that clicking the wrong button can mess something up or take an unexpected action that they won't know how to fix.

Here's an article about this type of design problem.

I'd suggest providing text labels in the toolbar along with icons for better usability for everyone! Having a complete set of alt-text captions (the kind that pop up after a moment of hovering, which several of the toolbar icons have right now) is important but I don't think that's enough for this interface.
The type of solution that Phabricator uses for labeling its editing toolbar icons (upon hovering you instantly get a popup of an obvious black-and-white text label) seems ok to me if varying lengths of labels in different languages is too much of a design problem.

Event Timeline

Dreamyshade raised the priority of this task from to Needs Triage.
Dreamyshade updated the task description. (Show Details)
Dreamyshade added a project: VisualEditor.
Dreamyshade subscribed.
Dreamyshade set Security to None.
Dreamyshade updated the task description. (Show Details)
Jdforrester-WMF added a project: Design.
Jdforrester-WMF moved this task from To Triage to Freezer on the VisualEditor board.

Can you spare a dime, or a tooltip? Remember tooltips?:
https://en.wikipedia.org/wiki/Tooltip

I agree with Dreamyshade. And I have tens of thousands of edits on Wikipedia. I rarely use VisualEditor (VE) because it is way too slow for me since I use Firefox with addons. For example; it takes the Barack Obama page 25 to 30 seconds to be ready to edit in VE after I click the "edit" button.

I have been experimenting though with VE in my sandboxes as a tool in table editing. The edit toolbar icons though are meaningless to me in many cases. No tooltips. So just another reason not to use VE. Sometimes I wonder if many developers care at all about the user experience. And not just with VE. I notice this across many types of software and websites. A related bug is no "login" label on Phabricator. See: T113927

I see no tooltips for the icons even at the top of the Phabricator home page:
https://phabricator.wikimedia.org
Someone new to Phabricator is likely to go there early on. Maybe trying to figure out the icons at the top of all Phabricator pages. Why this aversion to simplicity and ease-of-use across so much software?: VE, Phabricator, etc..

Timeshifter renamed this task from Most of the editing toolbar buttons are unlabeled icons, which can reduce usability to Most of the VE editing toolbar buttons are unlabeled icons, which can reduce usability.Oct 21 2015, 11:00 PM

All of the buttons have tooltips.
All of the items in the menus have tooltips.
The menus themselves don't have tooltips, it's true, but this is also the case in most interfaces I can find.

If your system is suppressing tooltips, that sounds like an issue caused by one of the Firefox extensions you're using. :-(

It is the same for me in both Firefox and Google Chrome. I just checked.

The toolbar icons in the regular wikitext editing toolbar all have tooltips. But not all of the icons at the top of the VE editing toolbar. I am not talking about within the editing menus.

On the Google home page, all of the icons have tooltips. The icons at the top of Phabricator pages do not have tooltips.

Dreamyshade linked to this article:
The Importance Of Labels - Jensen Harris: An Office User Interface Blog

"In the end, one change caused a total turnaround: labeling the important toolbar buttons. Almost immediately, the toolbars were a big hit and everyone at all skill levels starting using them. ... On a recent vacation, we spent probably 10 minutes trying to figure out how to turn an oven on before just giving up because we couldn't tell what any of the icons meant."

Cooking with MediaWiki? :)

Timeshifter renamed this task from Most of the VE editing toolbar buttons are unlabeled icons, which can reduce usability to Most of the VE editing toolbar buttons are unlabeled icons, which can reduce usability. Some are without tooltips, too..Oct 22 2015, 2:24 AM

All of the tools have a label or a tooltip. The dropdowns don't have either, though.

Jdforrester-WMF renamed this task from Most of the VE editing toolbar buttons are unlabeled icons, which can reduce usability. Some are without tooltips, too. to Most of the VE editing toolbar buttons are unlabeled icons (albeit with tooltips), which can reduce usability.Mar 29 2016, 1:48 AM

Compared to most text editors we're doing a pretty good job:

pasted_file (81×1 px, 42 KB)

(LibreOffice)
There's always going to be a compromise with space available, and there are probably more tools to be added in the future.

The VE editing toolbar looks better since the last time I checked it. Everything is labeled within the dropdown menus.

But still no labels for the icons at the top of the menus. Tooltips, but not labels. And the tooltips can be slow to show up.

I suggest offering a preference for text labels for the menu toppers. Google toolbar offers this option:

Google toolbar with text labels for icons.jpg (37×1 px, 15 KB)

Volker_E subscribed.

As of 14 Sep 2017 all toolbar tools and dropdowns in VE have tooltips applied.