Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
Either find a JS script that allows changing the design of drop-down or let users enter freeform text & then put the string through a parser. –  dnbrv Mar 20 '12 at 15:00
add comment

5 Answers

up vote 3 down vote accepted

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

mockup

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:

mockup

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).

share|improve this answer
1  
If you do choose to make a custom menu (as in both of these examples), be sure to factor in users who prefer the keyboard! –  Kit Grose Mar 20 '12 at 22:38
add comment

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.

share|improve this answer
    
Thanks. For some reason it didn't have any effect on jsFiddle that I sent. I am using latest version Chrome. –  Tx3 Mar 21 '12 at 8:52
add comment

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.

share|improve this answer
    
The mock up was very simple compared to the actual implementation, but you have a valid point. The number they type is between 1-7 characters depending on the field and normally the field is more narrow (scaling according to the resolution thou). –  Tx3 Mar 21 '12 at 8:42
add comment

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).

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.