User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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?
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.
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
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.
+/- 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.
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.)
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.
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 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).
