2

I want users to be able to choose to run a simulation that uses either the historical return on a stock or one where they select the numerical average return across the simulations. One way to do this is to have a checkbox with "Use historical" and if it is not checked have a text box where they can type the numerical value they want to use (perhaps appearing and disappearing when the checkbox is set and cleared). But this seems clunky. Is there something cleaner and more elegant / modern?

Improve this question
2
  • What does the numerical input mean? It's unclear how it relates to the numerical average.
    – tohster
    Mar 18, 2015 at 19:19
  • The numerical input is the average stock price return they'd like to use in the simulation, to override what actually happened. If Apple rose from 100 to 120, running with the word "Historical" would use actual prices from 100 going up to 120. Choosing the number 5 instead would use random numbers that went from 100 to 105 instead. The actual fact I'm using stock prices here is not what's relevant, it's that they are choosing first from a choice of two enumerated answers: "Historical" or "Number" and then if "Number" is selected they aditionally supply me with the the value of the number.
    – Rich Tanenbaum
    Mar 18, 2015 at 22:04

1 Answer 1

Reset to default
1

Observations:

  • I agree it's awkward when controls just appear suddenly.
  • You have two modes: historical and average, so checkboxes aren't a good solution because they are better at on/off interactions.
  • Radio buttons or dropdown selects are not great options because they aren't mobile friendly.

Given this situation, a button bar is a reasonable way to do this:

enter image description here

  • This shows the names of both modes clearly. It defaults to historical.
  • Selecting average provides a slide-down input box for you to enter percentage. That way, it's hidden when it's not needed.
  • The use of the gray background groups the button and the input box into the same visual 'island', providing a clear grouping of the controls.
  • The slide-down of the input box below the button provides visual flow indicating what the user should do next (you pressed the button, now fill in the field)
Improve this answer
4
  • I am choosing this as the answer, though i implemented it by having the extra input box appear instantly instead of sliding in. Partly out of laziness at learning animation, but mostly because it slow things down slightly for no particular reason. It doesn't save screen real estate to slide, since in the example the area below the stock chart needs to be empty to avoid being obscured later.
    – Rich Tanenbaum
    Mar 27, 2015 at 15:15
  • Glad it was helpful. For expert apps you don't need the animation :-)
    – tohster
    Mar 27, 2015 at 15:41
  • 1
    This is slightly off topic, but the animation can help if done properly: It must be quick enough to be just barely noticeable (so no slow-down). Then, it will help to establish the connection. The field doesn't just pop up, it slides in from where the user interacted. Think of the delete animation into the bin, which gives a hint where to search the deleted item in case I need to recover it.
    – virtualnobi
    Jun 17, 2015 at 6:26
  • @virtualnobi i find that entirely on-topic...great suggestion!
    – tohster
    Jun 17, 2015 at 6:34

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.