"Adding and Subtracting a Value" is Horizontally aligning the controls less effective than Aligning Vertically?

I am working on a project, where we are trying to squeeze a user interface equivalent to the complexity of a NASA command centre into a 14" touch screen, and we are running out of horizontal spaces trying to squeeze vertical "+" and "-" control while trying to keep the whole category in one horizontal plane.

so we are experimenting with horizontal placements of "+" and "-" has anyone had experience with this layout? is vertical placement better affordance than horizontal? enter image description here

  • Make the buttons bigger then the numbers please! – Barfieldmv Jun 22 '12 at 6:54

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

rather than

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 + and -:

I'd suggest using + and - 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 and .

Keeping all that in mind, here's what I'd go with:

How I would go about it

Alternative approaches:

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.
| improve this answer | |

What about putting the increment button above the number and the decrement button below? That's also how many smartphone apps do it. This way, you keep the association of up/down for plus/minus, but can use more vertical space. However, this uses more vertical space than the left / right buttons below the number.

| improve this answer | |
  • A good option, if the vertical space is not also at a premium. However, I suspect that ALL space is actually quite critical. – Schroedingers Cat Jun 21 '12 at 14:25
  • 1
    <---- That's also how it works over there ;) (+1) – msanford Jun 21 '12 at 20:19
  • @benjamin klost . It is a option we explored, but it failed the ergonomics test, because the user found it impossible to track the change in value when incrementing up the value because their hands get in the way. – Jack.ak.Hsu Jun 23 '12 at 4:30

Think entirely different, it's touch :)

A great way of implementing dials is found in the Figure iPhone app (watch the video) by Propellerhead. It has a great UI in general but experience of changing the values is really nice. Look at how they do the circular controls at the top that are changed by sliding up and down. This might be closer to what you need to save space and make it more intuitive/appropriate.

enter image description here

The only problem with their interface would be if you need a very precise number in a large set. For instance 345 in a range between 1-500, this is hard to do on a slider, but even more tedious with your +-1 increment.

And actually that is my main problem with the increment pattern you are currently using, you can only step +1 or -1 at a time, is that a good experience when going from 0 to 29?

| improve this answer | |
  • Thank you for the reference on the dial options! You are right in stating that it's hard to hit precise values when dealing with a large range of numbers. In our case we need to hit extract numbers in the 0-500 range so we've set 'press and hold' to increment +10, and it'll auto increment if the user continues to hold. It's certainly not as fasts as the dial but in our case accuracy is very important. – Jack.ak.Hsu Jun 23 '12 at 4:39

Contra to @Yallow, these are people whose expertise will probably be in other areas, and, I suspect, they will not want to learn new interfaces. The horizontal ones do not work as well for me as the vertical ones ( because the vertical ones indicate changing the values "up" and "down", I guess ), so these would be preferred. What is more, the horizontal ones take a moment longer for me to work out which is which - that may just be me.

But I would also expect that the target audience can learn how to use the horizontal controls, if there is a need to take this route. The downside is probably less than for a general population. If you have - as it seems you have - good reason for making them different, then do it. In this case, I think the benefit of being able to fit the controls horizontally may be more significant than the change buttons being slightly different.

| improve this answer | |
  • That's a valid point. I guess I more understood the question as this being something that the operators would have to know inside and out. – PL3X Jun 21 '12 at 13:09
  • 1
    @Yallow We actually don't have enough information to decide, so I wanted to put another view, to allow Jack to know the questions he needs to ask, and the implications of the answers. It may be that you are correct, and my conclusions actually concur with yours. – Schroedingers Cat Jun 21 '12 at 14:24

How about going for a totally radical solution and not having any controls at all?

When users click on the cell and slide sideways the cursor changes and sliding the cursor right and left makes the value goes up and down.

Bret Victor does this in his visual explanations: http://worrydream.com/TenBrighterIdeas/

So for example here as the user moves over the interactive numerical value the cursor changes to a selector cursor and the user can slide left or right. I can see this working well in a touch environment:

shows cursor on a number which can be slid to increase a value

He also uses sliders that pop up on hover: enter image description here

You can increment sliders or allow fine tuning by lots of different methods. For instance you could give users control over the increments via a single setting in a menu or tool at the top of the window or short cuts.

There are a couple of issues with applying this technique to touch - all of which I think could be overcome with careful desigh:

  1. Clearly you would have to adapt the feedback provided to a touch environment because the users fingers would obscure the change in cursor. You could perhaps highlight the whole cell and bring up a control on click .

  2. There is an issue of discoverability ... would be important to indicate everything on the page that is interactable ... perhaps with a color shade or a dotted line like Bret has used. Another idea is to quickly flash up all the hidden controls on entering a page... as discussed here.

  3. Hover doesn't work on touch ... so it would have to be click based.

This solution would certainly save you considerable space and "visual clutter". I think it would be very learnable especially if used in an expert environment.

Another resource I would highly recommend for designing layouts sorts of displays is Stephen Few's excellent website: http://www.perceptualedge.com/

There is lots of advice on dashboard design there and a great discussion forum.

| improve this answer | |

NASA command centre

One of the first steps that I take when designing a user interface is getting to know the user. From what you indicated with this project being for NASA, that is a good indicator that you are designing this for a rather trained set of users where the use of vertical vs horizontal won't make much of a difference.

All four of these options are relatively intuitive and do not take much thought to figure out as long as you adhere to Gestalt's Principle of Proximity. That is the main principle that you have to keep in mind when designing something with lots of functionality.

| improve this answer | |
  • The OP meant that they're trying to fit too many controls into a limited space. It has nothing to do with the actual NASA & its employees. – dnbrv Jun 21 '12 at 16:59
  • Aha I understand now. I guess the principle of proximity still applies anyways. – PL3X Jun 21 '12 at 17:58

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.