6

I have to implement an accordion control in a system I'm building.

Looking around, most people are suggesting using arrows for the control. However, to me a plus and a minus seems far more intuitive. There are so many more things that a arrow can mean than controlling the accordion.

I've even seen some claims that a plus and a minus are outright bad...

So I'm wondering...why is this?

Why is a plus and a minus so much worse than chevrons/arrows?

I'm looking for some solid evidence to change my mind here.

1
  • 1
    Try to stick to the platform's default style. The default in html5's <details> Tag is also an arrow.
    – Lovis
    Oct 25, 2014 at 9:00

3 Answers 3

16

From Wikipedia:

The plus and minus signs (+ and −) are mathematical symbols used to represent the notions of positive and negative as well as the operations of addition and subtraction. Their use has been extended to many other meanings, more or less analogous. Plus and minus are Latin terms meaning "more" and "less", respectively.

There is the possibility of confusing the user if you use + / -. "I don't want to add another thing here..."

In addition, you may be using the + and - symbols elsewhere in your UI - as a means of adding new line items, or new users for instance - so if you start using them for opening/closing containers then you're risking having the same symbol being used for two different purposes in the application. And that's a bad thing. And even if you're not currently using them, if you take those symbols for this purpose now that restricts you being able to use them differently in future.

Although really, it's not wrong to use Plus and Minus (again as Wikipedia states they are latin terms for More and Less, which could be said to apply to a 'show more' option), it's just that there are possibly better alternatives. But providing the visual design is clear, and usability testing doesn't throw up any confusion then it's probably not worth getting too concerned with.

10

This question is more about What is the established paradigm? than Which one is better? in an absolute sense. Really we are just talking about which symbol to use for the same functionality. The only issue is what expectations the users have about each symbol; it is rather silly for someone to claim that + and - are inherently bad.

+ and - were a longtime convention for opening and closing tree-like navigation--particularly on Windows. I think they are still quite widely known.

However, there does seem to be a trend toward a small arrow instead. Even Windows has used this for things like folder trees since Windows 7. So, I would prefer the arrow. I think it is clear, as long as the style is familiar.

2
  • As for the arrow in newer treeviews, it should be noted that the closed state usually has the arrow point horizontally. While that somehow "feels" right (as if the arrow were a knob that can be turned by 90° do expand/retract the next level), I am not convinced that the symbolic meaning of the arrow in that state makes any sense at all. Oct 24, 2014 at 22:04
  • 3
    Also of note is that + and - are still used for tree-like navigation in text-based systems. Depending on your target audience, they may find the + and - more clear, because it relates to the systems they already use.
    – apnorton
    Oct 25, 2014 at 3:34
1

True, plus/minus can mean many things, such as append, combine, zoom, etc., and arrows can mean move, or other directional meaning. Affordance of an icon is limited without a larger context. So the best way to go would be to make sure the symbol is unique to the context, so no +/- if it shows up someplace else in the experience.

The actual animation of the collapse/open panel will instruct the user as to the behavior - they will have to learn this. But it's a fairly common pattern and likely they will have seen the behavior.

Mock it up and run it past 4-6 users. They will also tell you about target size and placement issues. Which is all something to consider as well. Be consistent with your user-centered design and you will have solved the problem like a professional.

Your Answer

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

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