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.
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,
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.
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.
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.
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.
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:
And so does PUMA:
But Facebook uses caret: