Control for mathematical operator

Question

I am not a designer, just regular programmer so my terminology might not be correct.

What I am trying to solve is that I have a quite narrow area where I should have n amount of input fields and an operator next to it.

Here is an example

My problem is that because of the limited space horizontally I need to have very compact control for operator, but it should be obvious that you can change it. As you can see the default select list has a huge arrow on the right-side of the select box and it is consuming space us much as the information itself (the operator).

What kind of control would be ideal for this kind three state selection?

Answer 1

If you have enough vertical space, perhaps a spinner like control would work for you?

^{download bmml source – Wireframes created with Balsamiq Mockups}

Looks quite ugly though, and very non-standard, of course. Still, painfully obvious that you can change it, and not wider than it needs to be.

Alternatively, perhaps a push button with a dropdown indicator:

^{download bmml source}

Such menu-showing buttons are quite common. This option takes way less vertical space, but it takes more clicks to use. Perhaps you should allow typing as well, to make it easier for advanced users: they would not have to switch back and forth between keyboard (entering a number), mouse (selecting an operator) and back to keyboard (next number).

Answer 2

If there are only a few operators you could implement a selectable list.

For example:

          <

        _____
1 + 2   | = |   3
        -----

          >

Obviously, this is non-standard, but it does take all the horizontal space and move it vertically. Even more space could be saved by changing the selection style. A selected element could have a different colour background instead of a box around it.

Answer 3

You can make it a little narrower using CSS:

option { width: 0.4em; padding: 0; }

Trying to squeeze even more is risky.

I can’t imagine a different control that would be comparable to a dropdown in intuitiveness.

Answer 4

I'm not sure if this was just a very basic mockup for the example but it seems like, depending on the anticipated values to to be used, the input text boxes might be the best place to cut down on horizontal space. I think the drop-down is a good choice for the operator, but I was able to type a 17 characters in your value field. If you anticipate your users will putting numbers in those fields and those numbers will be smaller than 10 quadrillion you could save horizontal space that way.

Answer 5

I think you're exacerbating the effect by using small fields.

If you make the text bigger across all the form elements, the effect is lessened.

I'm generally of the opinion that using the default form elements is a much better idea than customising it (since every UA styles these things differently, and you can't always emulate those behaviours properly in a custom control).