Text input field with multiple options

Question

I have a medical app showing 3 input fields for drug dosage calculation. The middle field has 2 options, either to input the number of drug's ampules (as shown in the image), or to input thenumber of drug's milligrams. My current approach is to make the user click on the word "Ampules" to change it to "Milligrams", however the small arrow doesn't seem to be an enough indicator that this is possible. Besides, I'm considering to add a tooltip at the first run of the app as a tutorial for such behaviour. Can any one recommend me a better approach ?

Answer 1

When you're dealing with Critical information like Drug doses, it's much better to be absolutely clear about the input. Generally, offscreen choices in a dropdown aren't great Luke W | Dropdowns Should be the UI of Last Resort.

Your current design with the subtle treatment of the Ampules/Milligrams is frankly, a little scary. I would HATE to have someone mis-dosed due to confusion. What you have here is MODALITY of the input entry, where altering a value somewhere else changes how the control works.

A simple example of modality is with an "Accelerator pedal". Most of the time, the accelerator pedal makes you go forwards, but when in "Reverse mode" you can go backwards. Since this modality could lead to accidents, vehicles try to make sure that the Reverse modality is SUPER clear - by having an indicator light on the dash.

In your example, assuming that the user can CHOOSE to populate any of the 3 inputs and then end up with the other 2 inputs populated by the entry, I would place the modality in a much more prominent area and make the user make a much earlier decision about the modality.

I'd also recommend pushing the "search" tool to a different screen - you're on Android, so use the back button to break up your app and make it easier to see only the necessary information on the screen.

Answer 2

You need to show two options (ampules vs. milligrams) and you need the user to pause and make a choice (not overlook either, because as another user said, the wrong setting could have serious consequences).

This is a better use case for radio buttons, especially those that are fortified with extra visual indicators. Here's an example.