13

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
  • 2
    If you need a reference, Material design uses the line one for accordions; and the filled one for dropdowns.
    – Alvaro
    Commented Feb 20, 2017 at 10:15

4 Answers 4

7

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.

4

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

1

A "caret" is a handwritten or typed (shift 6) shape used by proofreaders to communicate to writers where new words should be inserted. It's always paired with something else already visible; the words to be inserted. Carets aren't clickable. They're typically pointing up so would hardly ever be confused with a "v".

A "chevron" is a graphic element used by interface designers and front-end developers to communicate to end-users that they can change the interface themselves. Chevrons are flexible, can point in any direction, and need the rest of the interface for their function to be specifically understood. Typically the page defaults with some content intentionally hidden for the user to optionally reveal. Once clicked, there are several ways the new content can be displayed, including a drop-down menu (point down, then up to collapse), a nested vertical nav (point right, then down to collapse), the next panel on mobile (point right, then left to go back), etc.

  • Chevrons can function the same a triangle, but are visually easier to see which direction it's pointing. Chevrons and triangles are often displayed on the same page, perhaps even doing similar things, but their visual difference helps communicate a different level of information.
2
1

I was having an issue between which icon signifiers to use for specifi interaction. I came across an NNGroup studies. I believe that can give you more insights i hope https://www.nngroup.com/articles/accordion-icons/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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