Page MenuHomePhabricator

Tools menu is not recognizable to new users (or even old users)
Open, Needs TriagePublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

  • Be a new user (or old user before T429258) coming into Wikipedia
  • Answer a pop quiz on where the "tools" menu is

What happens?:

image.png (1,701×709 px, 401 KB)

There are three mystery meat navigation elements to choose from; good luck figuring out where the Tools menu has gone now

What should have happened instead?:

The tools menu should have a distinctive icon that is not a three-dot kebab menu (or have the "Tools" label when there is space for it!)

Event Timeline

The kebab three dots style menu is user-hostile and bad UX. We know this. We know this. It's been part of basic UX teaching for years at this point.

It hides secondary actions behind a vague icon, increases the number of interactions needed to find anything, and makes the user guess what actually might be tucked away inside it. As basically the textbook definition of hidden UI navigation, it is ridiculous that this was ever treated as a good design pattern and implemented.

As per usual, the WMF did not communicate this change to anyone beyond a random Phabricator ticket with low user engagement.

Revert it, thanks.

I don't think the change in T429258 an improvement to the UI. It makes the target for opening the Tools menu uncomfortably small, replaces a clear label with a vague and overused "three dots" icon, and reduces consistency with the adjacent controls. I don't think saving a small amount of horizontal space justifies the loss in clarity and ease of use. Space is much less constrained on the desktop site than on a mobile device.

In general, consistency across platforms or skins shouldn't be a primary goal that takes precedence over usability.

It would be best to revert to the text-based menu name: "Tools".

  1. It's wide enough to be easy to open with a mouse or trackpad. An icon is going to be too small for such a commonly used menu.
  2. "Tools" is just fine as a general description for the tools and functionality contained under that menu. It's short, clear in meaning to users, and that's been the label for many years.
  3. The adjacent elements are also text.

I support the change to the ellipsis for the reason given in T429258 ("To help preserve space and reduce visual clutter") but also:

  1. this isn't merely a tools list, but rather a list of miscellaneous actions and links to tools and information.
  2. this is how many contemporary apps such as web browsers situate such things, so users will not tend to be as lost as you may think.

While more community input should have been solicited before its development and rollout, I also think users will quickly adjust to what was done, and because "Tools" doesn't cover all the items in the list, going back could be argued to be pushing an archaic nomenclature that doesn't properly encompass what's in the list.

Im not against making Wikipedia more accessible on smaller/ mobile/ whatever devices where there's a need to "preserve space and reduce visual clutter", however I don't think it's an improvement to force this onto users who prefer to edit from I assume home where they have big screens available. Changes as these make it harder to work efficiently, if the space allows for it, forcing users to hit a smaller hitbox and taking away a visual cue.

To resolve the aspect that the ellipses are vague, a solution to this concern is a tooltip, which is not without precedent already in the menu. It could read: "Miscellaneous actions and links to tools and information" (or something like that). Since we can assume people reading an encyclopedia can also read a tooltip that explains the ellipses, that should resolve users not knowing what it's for.

Today I was only using my laptop touchpad due to unavailability of a mouse, trying to review AfC drafts that are in userspace - where the AfC Helper Script doesn't work so we have to rely on manually clicking on the Review (AFC) button in the Tools menu.

The Kebab icon is basically impossible to click when using a touchpad.

When is this change going to be reverted?

Why not widen the berth a bit if that would help make it easier to click?

Thanks everyone for taking the time to share your thoughts and concerns.

I wanted to share a bit more of the design rationale behind the current proposal. The decision was based on a combination of considerations some of which have already been mentioned in the comments here:

  • The menu contains a broad mix of actions and it is difficult to find a single text label that accurately represents everything that can appear there. The ellipsis acts as a neutral indicator for additional actions.
  • It helps conserve horizontal space on toolbar for languages with long labels.
  • The ellipsis is a widely recognized pattern across modern interfaces for accessing additional actions.
  • It creates a more visually balanced action bar alongside other icon-only actions, such as Bookmark, whereas a text button after an icon-only action can feel visually out of place within the row. While we understand there are gadgets people can add, this is the configuration majority of people (including readers) will be seeing.

We agree that the current vertical ellipsis may feel a bit small. We are wondering whether a horizontal ellipsis might work better here as it would provide a slightly larger and more visible target.
To help compare the approaches, I've mocked up three options for review:

  • Previous: Text button (“Tools”)
  • Current: Vertical ellipsis (we tried to match it with what minerva has for consistency)
  • Potential future: Horizontal ellipsis (this allows us to make it slightly bigger icon and we can update minerva too for consistency)

What do you all think?

Additionally,

  • The codex icon for ellipsis is recently updated to have a bit more weight to it.
  • We also have T430857 to add tool tip on the icon for clarity.

Tools menu options.png (951×1,077 px, 64 KB)

Thank you for the mockups.

The horizontal ellipsis has the same UX problem as the vertical ellipsis: it places items behind an icon with with no meaning or discoverability.

The label Tools is still the strongest from a UX perspective as it tells the user what category of menu will open.

My concern, with the addition of the Bookmark icon (which I think is the new reading list that I am only vaguely aware of?) is that the interface on Desktop now has a mix of different control patterns:

  • text-only buttons
  • icon-and-text buttons
  • icon-only buttons

It's inconsistent, and genuinely not a good user experience. We should have more coherence, not less.

Thanks for mocking up the options.

The menu contains a broad mix of actions and it is difficult to find a single text label that accurately represents everything that can appear there. The ellipsis acts as a neutral indicator for additional actions.

This seems like a somewhat dubious justification for less clear interface. It's basically an argument that the label is perhaps 10% wrong *if* you're being nitpicky so let's replace it with a label that's 0% clear.

"Tools" is fine as a label and nobody is getting confused because it has a few actions under it. (It would be fine to add a tooltip of "Tools and actions" although I don't even think that is necessary.)

I agree with Qcne that the first option, "Tools" is best. It's clear to users and consistent with other items on that menu bar.

I think the horizontal dots icon with a tooltip would likely be an improvement (over the vertical dots icon) for space-constrained screens, but I would not recommend using it outside of that case.

Like I've stated before, going back to "Tools" shouldn't really be an option, as it doesn't accurately describe what it is heading. Anyone arguing for clarity for users shouldn't be advocating for a term that doesn't fit the bill. Also, I think it's safe to say that nearly all users use other apps that have the ellipsis in place for practically the same purpose, so I don't think we should underestimate our users' capabilities in this particular matter.

I see no reason to change what has been done, except to:

  • Give it a slightly wider berth for clicking
  • Apply a descriptive tooltip

Thank you for the mockups.

The horizontal ellipsis has the same UX problem as the vertical ellipsis: it places items behind an icon with with no meaning or discoverability.

The label Tools is still the strongest from a UX perspective as it tells the user what category of menu will open.

I agree with folks that "Tools" is still the best option out of the three. Maybe something more like a tools icon might make sense?

I'd be fine with an icon, just so we can get some consistency.

I agree with folks that "Tools" is still the best option out of the three. Maybe something more like a tools icon might make sense?

I agree with a new Codex tool icon (perhaps cdxIconTools?) with collapse/expand arrow on its right side, together with a tooltip "More tools" when hovering the new tool icon.