0

I'm designing a control to allow users to quickly adjust two variables using a pre-defined list (in this case a toggle button group).

Users want to be able to set and use these "quick-selections", as well as override and manually enter values for ABC and XYZ (it's a trading system so I'm simplifying some terms here).

I've ended up with a combination of controls - text boxes, and a toggle button group which can control the values in the text boxes.

Has anyone seen a control like this before? Is there a better standard I could be following?


Basic control (with "LOW" quick-selection selected) and ability to choose your quick-selection values:

enter image description here

Override with manual values (no quick-selections selected):

enter image description here

  • The hierarchy is not clear to me - does the single group of "preset" options apply to both values (ABC and XYZ)? The horizontal alignment of the radio buttons with the ABC text box and label implies that those choices only affect ABC. – TMiller Oct 19 '15 at 18:41
  • The presets apply to both values (ABC and XYZ). Based on your feedback, perhaps it's not clear enough. Looking at @Julia's answer below seems to be a good option to clarify this. – CRichardsDesign Oct 19 '15 at 21:54
1

I feel I wouldn't lay it out the way you did as it wasn't clear to me that the values have any relationship with the presets (low, medium and high). It's also counterintuitive because people read from left to right and here people choose from right and see the values on left.

I would change the layout to be something like this.

enter image description here

  • This layout definitely seems to work much better. I had played around with the idea of "manual" as another button but wasn't sure if it was adding clicks to the user's workflow. What are your thoughts on the clarity of having "manual" as an explicit option vs. the speed of being able to just type straight into the text boxes? – CRichardsDesign Oct 19 '15 at 22:04
0

Try a slider instead:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This is a more standard method for doing this, allows finer-grained control of the values, and leads to less clutter on the UI. You could add tick marks for low/medium/high (along with values) in order to facilitate a use case closer to what you describe above.

  • I like the idea of adding the low/medium/high as points along a slider - I think it would be a great visualisation. Unfortunately the requirements here are to very quickly toggle between pre-set (or known) values, and so the precision required for a slider probably couldn't work. – CRichardsDesign Oct 19 '15 at 21:56

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.