+1

Does it make the menus in the toolbars too hard to see?

Maybe they could be a little thicker

In T111550#1610501, @Jdforrester-WMF wrote:

Does it make the menus in the toolbars too hard to see?

Yeah, I noticed it too after seeing your comment.

In T111550#1610798, @Esanders wrote:

Maybe they could be a little thicker

.oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator had its opacity set to 0.3, probably because the triangle icon has a lot of weight and was taking too much attention?

Will submit a patch so that you can experiment with opacity and stroke width.

Change 236518 had a related patch set uploaded (by Prtksxna):
MediaWiki Theme: Replace triangle arrow indicators with chevrons

https://gerrit.wikimedia.org/r/236518

Lined / outlined icons are always have extra information, extra details vs icons that are filled. Filled icons also generally work better when they have to be very tiny. Detailed icons work great in some context, but other times, you just need a quick icon to support your info.

Although I've given considerable amount of thought in this area, I still come to a conclusion that we may need both. That's why I'm interested in hearing your thoughts around replacing triangles for chevrons.

In the context of toolbar, most of the time there is a lot of info, choices, actions, etc. packed in one long line. This "expand" action icon right next to a label cannot be missed. Most of all, it shouldn't add more noise to the interface. Or in other words.. invisible but intuitive. The triangle icon fits the bill for me in this context. A chevron is too detailed, wide, and doesn't work very well in small sizes. An "expand" icon on toolbars are usually half the size of icons used elsewhere.

In the context of an accordion menu where the label could typically be on the far left and the expand icon on the far right, details could actually helpful in this context. Details/Intricacy = attention.

In a normal dropdown menu, I'm quite indifferent. There is hardly a space restriction, hence icons can be wide at normal size or a bit larger, and there isn't visual interruption (as opposed to accordion menu with large space in the middle of label and icon) -- icon always right next to label. But I would favor always the simplest solution.

If we want to stick to one and not both, I would favor the triangle icon for how versatile the icon is at its simplest state.

Adding Pau because he had a similar task before.

For reference, this is the former Trello card where "triangle vs. chevrons" was discussed, and based on that I have been using chevrons so far.

I don't have a strong preference since I consider that both solutions work, and the most important is to keep them consistent. As it is detailed below, different sizes need to be used for them to have a similar visual weight, and we need to take that into account. In my experience, when I tried between both options in a given context I found chevrons to work slightly better, but I can live with triangles. I provide more details on my thinking around this:

The purpose of this cue for the controls discussed above is to indicate that more options will be provided. It helps set expectations on what will happen next, but we need to consider that the cue is complementing the main message of those actions (communicated by an icon and/or text). For example, for the "insert" action, the most important aspect is to communicate that it will insert stuff (being aware that you'll be provided with options on what to insert is a nice additional purpose). Making the action prominent is useful when scanning for it in a sea of icons, labels and other shapes. Thus, if triangles are too heavy there is a risk of them being distracting while you look for the action.

Since triangles have more mass than chevrons, triangles need to be smaller compared to chevrons to achieve the same prominence level. In practice I found that chevrons could work at a bigger size while still feeling lightweight enough not to be distracting. It would be great to see the examples above with the chevrons slightly bigger.

As an example in a slightly different area (with the purpose of expanding more content not additional options/actions), mobile web uses chevrons to expand article sections. They are relatively big (making them touch friendly) but don't distract from the article titles. It would be great to visualise how that would work with triangles. I'd expect them to need a much smaller size to avoid distractions.

Moving comment from Gerrit…

@Nirzar's comment from https://gerrit.wikimedia.org/r/#/c/236518/:

This was changed for Visual Editor Toolbar. the triangles reduce visual clutter among series of tools and needs to be changed in MW-UI +@violetto

My personal preference is to stay with wedges (filled) rather than chevrons (open) for neatness and size, but it's not my call. :-)

In T111550#1625148, @Pginer-WMF wrote:

It would be great to see the examples above with the chevrons slightly bigger.

…mobile web uses chevrons to expand article sections…It would be great to visualise how that would work with triangles.

In T111550#1708866, @Jdforrester-WMF wrote:

My personal preference is to stay with wedges (filled) rather than chevrons (open) for neatness and size, but it's not my call. :-)

My personal preference is the exact opposite for the same reasons :)
@violetto's and @Pginer-WMF's preferences seem different too (though both agree that both are useful).

So…

(animation doesn't run for me :( See https://phabricator.wikimedia.org/macro/view/13/ )

Clutter comes with details so I agree that switching to chevron is a step back. It looks very clean the way it is now! :)

As I mentioned earlier, I'm more interested in the consistency side of the discussion. If we go with triangles, are we expected to abandon all existing chevrons and replace them with triangles or do we expect some rules and exceptions?

For example, do we think that changing the expandable sections of the mobile web to use triangles works well? What do we need to consider when using the triangles there?

(thanks @Prtksxna for recreating the examples I mentioned above)

I hear you. My view is that if we have a reason to keep both, we can for the sake of two compelling different purposes. Consistency, after all, has a purpose of a clean, familiar, and understandable interface.

In other applications like accordion and gallery, chevron would work better. We can define when to use these icons. Volker and I spoke and he came up with a pretty good idea what that could sound like. He'll comment more on that.

Accordion & expand card

I'm sure we all agree that design should be invisible, comparing the both of these images below, one is more invisible than the other.

Chevron has plenty more usages, I would of course vote for chevron because of its versatility if we must stick with one with a strong reason.

However, when we had chevrons in place of triangle, there is an association issue as well. Because of its wider width, it's easily mistakable as its own menu unassociated with labels around it.

If I pulled them even closer:

It gets better, but still looks like an icon missing its label

When we reduce the size considerably, the association gets better, but the extra details doesn't make it "invisible."

What's even better is using a triangle icon that has enough mass to work in even smaller sizes and has smaller width. I think this is more invisible than a chevron. Gets the idea across with less noise, width and space - areas a toolbar with many controls is short of.

This is an example from Phabricator. In the toolbar is a chevron next to an icon. I think that works. But it also doesn't have a label and more buttons around it. I don't think we should use chevron and triangle on a toolbar for a dropdown menu, I think in this case, it should be one standard icon. Even in the case where it's just an icon and no more buttons around it. Side note: Phabricator uses chevron in toolbar and triangle for dropdown menu. Not sure why they're doing that though.

okay without reading a lot of stuff in this thread i am gonna say "why can't we have both?" I really want to avoid having chevrons in VE toolbar (it affects the toolbar significantly) and i shouldn't have to make compromise in VE toolbar because chevrons work better in some cases in flow. *context over consistency.*

Having both is definitely an option. I just want to make sure we define when is preferred to use one or the other (and I'm happy to hear that May and Volker are working on it). Otherwise we would end up using different solutions for closely-related components that can easily appear next to each other when used on a UI.

Change 236518 abandoned by Prtksxna:
MediaWiki Theme: Replace triangle arrow indicators with chevrons

Reason:
Waiting for resolution at T111550

https://gerrit.wikimedia.org/r/236518

Change 336745 had a related patch set uploaded (by VolkerE):
MediaWiki theme: Replace arrows with chevrons and increase contrast

https://gerrit.wikimedia.org/r/336745

This is still in limbo and is diverted implementation from M101, which is bad.
I fully agree with @Pginer-WMF that we should have consistency across products and pledge for chevrons.
Also the problem of the crowded interface in toolbars gets better tamed with chevrons, especially as currently (as of v0.20.1) the tool dropdowns in toolbars have opacity: 0.3 which is everywhere else an indicator for disabled state.
Also I've never agreed with @violetto's argument about “outlined icons are always have extra information” here, as the chevron is used widely on the net and in operating system GUIs and it'd be more than interesting to challenge if it's not clearly identified as one object from psychology of perception.
Also the icon is better pronounced with a lighter dropdown indicator and that might help faster orientation, the problem of the indicator being misunderstand as icon (also brought up by @violetto above) is solved.

Before:

After:

Did the design peers and myself discuss this at our last offsite comprehensively?
Yes.
Is this the agreed-upon outcome?
Yes, as I understood it.
Will the proposed change work for our users?
Yes, I'm fully convinced.
Is the proposal better than the status quo?
Yes.

The chevron still looks a bit separate from the element to which it is meant to relate, perhaps also due to the fact that the element is a darker color now. Suggest we can move the chevron closer to the element, and/or make it ~2px smaller (see screenshots below).

Chevron shifted left 2px:

Chevron smaller and shifted left 2px:

Thanks @RHo. I agree basically with both, the position unification that also helps with specific position of indicators is currently tackled in T161177. The indicator size we need to see in context of all widgets, where I'd want to understand if you see the size just an issue in toolbars or for the other widgets as well as proposed in the screens above/the patch?

hey @Volker_E – think size would be an issue for other widgets as well as toolbars. Higher up in this ticket's thread there is the example of chevrons to toggle accordions, where I would expect them to be larger since they are the key action element rather than a signal that something is a dropdown.

Change 336745 merged by jenkins-bot:
[oojs/ui@master] MediaWiki theme: Replace arrows with chevrons and increase contrast

https://gerrit.wikimedia.org/r/336745