Why I would prefer the vertical alignment:
In my personal opinion (which I cannot back up by any research), the vertical variant would be just a tad more intuitive:
We're used to thinking
5 is higher/greater" than 2
5 is further right than 2.
"Higher" implies a vertical orientation.
If laying out the numbers on a horizontal vector though, further right could make sense.
With that being said, I would assume that the actual real-world difference between vertical and horizontal layout is negligible.
What matters much more than alignment:
No matter if you decide to use the horizontal or vertical variant, keep grouping in mind, as in "what button modifies what number".
Particularly if dealing with a crammed panel full of different indicators and buttons this becomes vitally important (and is often overlooked).
The labels – my case for
I'd suggest using
- for the labels, as long as the value that is being modified is a number. Frankly, this is as intuitive as it gets.
If and when dealing with lists of arbitrary values (such as "45°", "90°", "180°" or "Apples" or "Oranges") on the other hand, I would definitely advocate the use of
Keeping all that in mind, here's what I'd go with:
Another option worth considering would be to show only the number by default. On touch/long touch, you could then do either of the following:
The viability of these methods of course depends on:
- whether the additional step of touching/long touching is acceptable for the users (if numbers have to be changed every other second, this could prove quite cumbersome);
- whether it is acceptable that other controls are being obscured during input.