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

Improve this question
2
  • 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, 2015 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, 2015 at 21:54

2 Answers 2

Reset to default
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

Improve this answer
1
  • 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, 2015 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.

Improve this answer
1
  • 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, 2015 at 21:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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