Multiple identical icons which perform completely different actions

[maddisondesigns]

Issue Overview

I see multiple meaningless icons which are identical, yet they perform completely different functions. Icons that perform different functions, should be different. I can just imagine talking to a client when they're having an issue. "Click the icon with the 3 vertical dots. No, not that 3 vertical dot icon next to that block, no not that one either, the other three vertical dot icon at the top of the page".

Steps to Reproduce (for bugs)

1. Edit a page and you can see multiple icons which are the same

Expected Behaviour

Icons need to be unique. You're replacing text with a visual element. It needs to identify what function is performed when you click it, and it needs to be easily identifiable from every other icon on the page. If it doesn't satisfy each of these requirements, then it's pointless having it.

Current Behaviour

There's currently multiple icons that look identical, which basically have no meaning, and perform completely different functions, which is going to be extremely confusing for users

Possible Solution

Redesign the icons so they more meaningful and so that they different. I'm not saying that each individual block should have a different settings icon, but what I am saying is that the settings icon for all the blocks, should be completely different to the settings/more icon at the top of the page as they perform completely different functions.

Related Issues and/or PRs

#3708

Firefox Quantum 57.0
Gutenberg Version 1.8.1
macOS Sierra 10.12.1

[jasmussen]

Ultimately the block ellipsis menu is an experiment that will either be validated or invalidated by user testing, of which a bunch is coming up in the next week.

In defense of the ellipsis menu, it's a mobile pattern which means "overflow". Anything you put there has to be less important, i.e. actions that you can live without. Whether we've hit that balance is a different question, but that is the meaning of the icon. You can see it used in multiple places in Google Docs as well:

[karmatosed]

I think ellipsis is becoming a strong pattern universally - thanks to material design. However, we need to be sure to test this. I am confident though we will. I think the trouble you are experiencing comes down a few issues and I would rather we put the feedback in that @maddisondesigns. My thought is that way we can use as evidence to change, over having them in this issue that has no solution. Would that work and be able to close this issue?

[maddisondesigns]

My issue is not so much the use of the ellipsis icon, it's the fact that it's used in multiple places whilst also performing different functions. That makes things confusing.

On top of that, the use of the cog to close the sidebar also doesn't make sense. The cog icon is typically used for Settings or Options, not to open/close or show/hide panels.

This is a very quick mockup that I just created that I feel would be a significant improvement.

• Keep the Ellipsis icon at the top-right of the page
• Replace the Ellipsis icon next to each block with a cog icon. This indicates to the user that there are more settings that can be adjusted.
• Remove the cog icon from the top of the page completely
• Replace the Close Settings/X icon in the sidebar with an arrow icon

This solution has multiple benefits. It fixes the issue of using the Ellipsis in different locations. The cog icon has more meaning as a settings icon and therefore more suited to sit next to each block. It helps declutter the screen by completely removing one icon. It keeps the Open/Close icon consistent with the icon used in the Customizer that performs that exact same functionality (i.e. Open/Close the sidebar)

When the Sidebar is closed, simply show the Open/Close icon pointing the opposite direction. Again, this keeps it consistent with the rest of the WordPress UI on other screens (i.e. the Customizer)

Having two different icons on two separate screens, that basically perform the same functionality (i.e. open/close a panel), is confusing for users. By using the same icon that users are now familiar with, will make the interface easier for users as they'll already be familiar with what the icon is intended for.

[GlennMartin1]

excellent design, @maddisondesigns

[afercia]

Regardless of its icon, I'd love to see the control to toggle the sidebar in the position chosen by @maddisondesigns. Not speaking about its "visual" placement: it's more about its placement in the source. That would mean moving it after the content and immediately before the sidebar.
For accessibility, it would be a big plus since users would just need to press Tab once to go from the control to the sidebar. See also the related discussion on #467.

[karmatosed]

I do think a floating, detached arrow has a lot of issues for usability. That said riffing around that idea is possible. Placing in source is one thing but that isn't placing in source when it's closed.

I'm not super keen changing the ellipsis for a cog. The ellipsis in this pattern means 'more' and well having yet another icon to mean that adds yet more confusion. Not only is there a different icon for similar pattern, but it's an icon majority associated with settings/config - which that's not.

It's always good to ponder the patterns though. Testing will give us good feedback here.

[maddisondesigns]

I do think a floating, detached arrow has a lot of issues for usability.

And yet you do this in the Customizer. If it's good enough for that, why isn't it good enough for here? Alternatively, if you think it's so bad, then change the Customizer! They need to be the same. It's absolutely ridiculous having one icon for opening/closing the sidebar in Gutenberg and then a completely different icon in the Customizer. That's a horrible UI and you're just making the whole WordPress interface even more inconsistent than what it already is.

If you don't want to change the ellipsis icon next to the block, then you need to change the ellipsis icon in the top-right corner of the page. You can't have these two icons the same. It's poor usability and extremely confusing.

[afercia]

@maddisondesigns I think we should try to avoid terms like ridiculous and horrible and try to make positive criticism using a more appropriate language. That said, I do agree a lot about consistency. Some of the things Gutenberg does should be evaluated holistically in the context of the whole WordPress interface.

[karmatosed]

The Customizer is going to be the next focus after the editing experience. As a result the patterns we are laying down now could absolutely filter through. We shouldn't be tied to patterns that maybe changing improves.

I think it's important to let things be explored and not confine them just because we do things a certain way right now. Absolutely, some patterns are strong and indeed we should unify. We need to evaluate each one though.

I stand by that a floating arrow has a lot of issues on the screen. I do not personally like it in the Customizer. However, this is about finding a route that works for users, not just personal taste. I've not seen in tests what we have right now being an issue, that maybe points to us needing to test more and really dig into if it is or not - something we can do.

I am not keen we change any ellipsis at this point, so let's focus on the sliding in/out as a first step. I standby that the cog's there do not help interpretation. In the case we are using ellipsis right now there is no issue, they both are used for the same meaning as has been shown. However, we absolutely need to note this as a point to test and consider as we do. Let's focus though.

We have 2 possible routes I can see:

• Change out the cog for something else that means show hide Consider changing settings/sidebar icon from a cog to a sidebar #3622 has an option there.
• Change the cog to be exactly like the Customizer has.

I think it is important to loop @melchoyce into this as she is going to lead into the Customization focus as the design lead. I would love her insights here on the 2 possible routes above for swapping the cog or implementing what Customizer has.

[melchoyce]

Okay, seeing two separate issues here:

1. The use of the ••• icon for multiple menus

I agree with @karmatosed and @jasmussen here: the ellipses icon is becoming a popular shorthand for "more stuff." At this point, I see it as "Hello, I am a menu. More actions live here."

We do have a styling inconsistency. I like that the Editor Bar's ellipses menu looks like the kind of menu you'd see in a desktop app, and I think we should bring that particular paradigm into the block ellipses menu as well:

I think that pattern will extend particularly well as we start adding more actions to blocks, like copy/paste or grouping.

EDIT: Just saw that the latest pattern doc has an updated block menu that is closer in style to the Editor Bar menu:

2. Using a cog icon to toggle the sidebar open or closed

Specifically:

And yet you do this in the Customizer. If it's good enough for that, why isn't it good enough for here? Alternatively, if you think it's so bad, then change the Customizer!

The "collapse" icon in the Customizer has a lot of issues. It's hard to discover and hard to understand. We've seen that in user testing. We should change it. Once a solid pattern has been established by Gutenberg, we can migrate it over to the Customizer, or keep it in mind when designing the next generation of site customization in WordPress.

That said, I don't think Gutenberg's there yet. I agree the cog doesn't make sense for the action of toggling open and closed the sidebar. I think the placement is probably close — I do think the toggle should live in the Editor Bar, rather than exist free-floating. This is a good area for additional explorations, especially more outside perspectives!

[karmatosed]

With the recent changes and discussion in #3622 about a sidebar over cog, I think closing this works right now. What I am not doing in closing is saying we can't iterate. What we can do is review where we have inconsistencies and open up issues to reduce those.