7

enter image description here

Is there any functional difference between a caret and a chevron? Our discussion is about what should we use for dropdowns and accordions and whether they should be different.

  • 1
    If you need a reference, Material design uses the line one for accordions; and the filled one for dropdowns. – Alvaro Feb 20 '17 at 10:15
3

I don't think there is a functional difference between the two. The difference lies in the aesthetics and visual impact. So based on that I can think of the following considerations before you make a decision,

1. Proximity

In the case of drop downs or accordions, when you have huge white space between the content and the shape, it is easy for the user to differentiate between the title of the accordion or the selected value of the dropdown and the shape which opens or closes the widget. A closed dropdown widget may have a chevron and if there is not enough white space it can be confused with the English letter V or W. That is why the proximity of white space makes a difference.

enter image description here

I hope this example helps a little. It is possible that the selected value of the dropdown list will be longer. If it goes very close to the chevron there will be a chance of confusion and while writing a design language, this needs to be thought so the design fits in most of the considerations.

2. Contrast

Contrast in this sense it the ability of the user to distinguish the shape from its background. Material Design recommends copious amounts of white spaces and that makes the tiny chevron easy to spot. At the same time, a triangle may appear as a blob and may have hard presence which is not needed.

But if you are designing for dark on dark because your color palate demands it, you have to create enough distinction and reduce the visual load on your user so as to understand the difference between the tiny shape and the background.

enter image description here

That is the Facebook's choice of a triangle. It is black and it sits on fairly dark shade of blue. To stand out and register quickly in user's eyes, it is imperative that they have sizable color variation to spot the difference. A chevron may not be as quickly identifiable there.

3. Part of a chain vs Terminator

This is more from the graphics and art side. A chevron is considered to be a part of a chain. A chevron indicates there is one before it. However, in case of drop-downs or accordions, it is just one which indicates a direction and not part of the chain.


I do not have backing data for these points, but they are more of a thought based on my experience so far. But it does boil down to the design standard and the user's mental model. In case of modern web UIs, the third point may not be relevant, as people have been seeing the chevron's as open close for a while now. So the bottomline remains that it depends on your requirement and the design choice you make based on at least the first two considerations stated above.

Hope I have helped.

3

In modern web I don't see any big distinguishable difference in between the two. But, thinking about users' mental model Chevron works best for dropdowns and caret for accordions.

Why someone will choose one over the another is totally based on the type of design, in order to maintain visual balance.

Airbnb uses chevron down for dropdown:

enter image description here

And so does PUMA:

enter image description here

But Facebook uses caret:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.