8

We're having a discussion in the studio as to the position of the plus & minus buttons in this UI element. I feel that you naturally look to the right to 'increase' or 'move forward', although I have seen plus positioned to the left in other instances.

What are your thoughts on this?

Plus/Minus UI

5

In this context, the '+' on the right is more natural, because of the direction we write. However, if the '-' and '+' were presented vertically, intuition would have the '+' on top, contrary to writing direction.

  • 2
    Vertical might be more natural. Worth testing. – PhillipW Sep 14 '16 at 20:11
  • 1
    Having + & - be stacked vertically is the standard way handled by html number input fields. I would think that is fairly well understood by most users. – nightning Sep 15 '16 at 16:08
3

The answer is: it doesn't matter.

The NNGroup did a study on the OK-Cancel or Cancel-OK.

They found that the most important thing is consistency in how the design is presented (so which ever you do decide, you should keep it that way throughout the site).

EDIT ---

Let me create a far more realistic scenario. Sites that I've worked on that have this sort of functionality have had to be designed catered to a larger, more global audience. Consistency is far more important than the arrangement because what if you catered to a language that wasn't only english? Arabic is from right to left as opposed to left to right in english. If that were the case, then how would you arrange the buttons in that case if you were catering to both? Therefore: consistency is more important than the arrangement of buttons. If you create a visual language, make sure to follow through or else that's what causes confusion.

3

the [+] feels more natural on the right. My guess is that it could be due to number lines in math class. That could be the basis of our mental model.

<--------------------------------->
 -2     -1     0     1     2     3
  • I agree with Adam. Number line is a good benchmark to base this on. At the expense of sounding ignorant, I dont know if Arabic read the number line right to left. If your audience does not include arabic readers, I think have the + on the right makes more sense. The vertical +/- dont might work better when you have 1-3 fields, but with more fields I would prefer horizontal buttons – JustAnotherPM Nov 18 '16 at 12:16
2

+/- buttons are preferred only if max number of passengers allowed are small, say 3. Any number more than this I would go with a drop down list of 1 - 10 numbers. For any value greater than 10 would be an editable text.

Coming to the point where the + button can be placed, I feel (personally prefer) Right is the ideal position.

2

I'd prefer putting them both on the same side, [+] on top. That way, they're right next to each other so when I click [+] too many times I can quickly fix my mistake within just a few pixels.

(This is a Fitts' Law question, not an OK/Cancel question.)

1

I use them, but I have the number in a text field, so the user can enter the number as well if they wish. So if someone has 1 or 2, they just click once.

But this is for my shopping cart, so so the occasional visitor might order 5, 10 or even 20 of one product, but most of the time its just one or two.

1

I would say the "Cancel-OK vs "OK-Cancel" study as some answers mention does not relate to this at all. "Cancel" and "OK" are actions that do not correspond to a linear adjustment of a value, whereas "-" and "+" do.

To illustrate this point, think of a number line. The arrangement taught in schools and most commonly visualized is:

... 0 1 2 3 4 5 6 7 8 9 ...

Therefore, it is most natural that minus moves left and plus moves right.

Note: to address implementation of this element, I would allow the user to use the plus and minus to adjust their value, but also allow the user to type the input. I would avoid drop downs, as they are clumsy to use on a mobile device.

  • I don't completely agree with this, but it's definitely good insight none the less. – Majo0od Sep 15 '16 at 12:45
  • The reason why I don't necessarily agree with this is because what if you're working on a site that has to have a global audience (as in Arabic and English). One progresses from right to left while the other progresses left to right. In that case, how would you arrange the buttons? Consistency is far more important than the arrangement of buttons. – Majo0od Sep 15 '16 at 12:46
  • Also Ok, cancel does progress linearly: One moves you forward, while one keeps you where you are. How is that not linear? – Majo0od Sep 15 '16 at 12:51
  • @Majo0od sorry, the example provided was in English, so I was assuming English-speakers were the target audience. And that's fair to think of the OK-Cancel buttons like that--I guess I hadn't visualized them that way. – maxathousand Sep 15 '16 at 13:22
0

I agree with the other answers, Plus looks correct in the right. If it's alright, I wanted to give some thoughts on the design you posted and the positioning of elements.

In my opinion as the Fields (Adult, Infant, etc.) are quite close to each other there might be a minimum "confusion" with the plus minus signs. I suggest to center the text with the number input to reinforce its relation (as it's already being done with the white color).

Also if the button is disabled I would display the sign with less opacity, the same way it's done with the background color.

Just a last comment, I guess the distribution of the inputs follow some order, if not I might expect it to be from less to more age which might help to understand quickly, before looking at the ages, the difference between infant and children (I am not english native and it is not as obvious to me).

flight

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.