0

I am trying to design a selection pop-up for a medical website I'm working on. The idea of the pop-up is that the user should be able to specify (for a specific medical sample) the following three values: organism, antibiotic and susceptibility.

In the same sample you can have the same organism tested against different antibiotic. The design I came up with in the first instance was a dropdown with the organism that when selected will present a list of all antibiotics with a radiogroup... The problem was that with multiple organisms the resulting list would be too large (imagine there are around 45 of them). So the new design is something similar:

dropdown stage 1

The top dropdown, when enabled, shows the other two:

dropdown stage 2

After selection the + button adds the values to the table below and clicking Save will save the sample (and reset the dropdowns).

Now this design seems quite right but here are my problems:

  1. organisms and antibiotics are in the region of 40-50 values... If this is not too much for a dropdown is probably near the limit
  2. The susceptibility list on the contrary only has 3 values, so it seems better suited for a radiogroup
  3. It is not clear enough that you can add the same organism multiple times with a different antibiotic (and this is probably the most important bit)

Does anyone have any idea on how to improve this? This "editing" box is already a modal dialog so I would like to avoid opening another modal.

1
  • Seems like if you have to associate an antibiotic and susceptibility with an organism then you should use a search input field to add the organism into a table, then use inline action to select the antibiotic and susceptibility for each row item for the table.
    – Michael Lai
    Commented Jul 28, 2014 at 23:58

1 Answer 1

2

To tackle your problems each in turn:

organisms and antibiotics are in the region of 40-50 values... If this is not too much for a dropdown is probably near the limit

The most direct, simple solution is to switch from a dropdown to a combobox with autocomplete. I assume this form is at least relatively important and users likely go through selecting things pretty often, so you get to kill two birds with one stone using a combobox:

  1. Power-users no longer have to rely on autocomplete through their browsers implementation of dropdowns, and can now either just type the organism/antibiotic they want, or type a few characters and complete automatically.

  2. While your naked dropdown will still be around 40-50 values, the second a user inputs any character into the box they will be presented with a much smaller subset of suggestions, effectively cutting down the selection space by a large margin (which you can tweak by configuring autocomplete settings accordingly).

The susceptibility list on the contrary only has 3 values, so it seems better suited for a radiogroup

Do you foresee the susceptibility list growing to more than 3 values in the future? If not, it may indeed be better suited for a radiogroup.

However, it looks like you're using Bootstrap, which provides a more user-friendly buttongroup class, which would provide toggleable buttons that better conform to the rest of your form than radios would. You could easily in-place replace the susceptibility dropdown with a three-button button group. Bonus: it's one less click (and far less eye-scanning) than clicking a dropdown and a value within it!

It is not clear enough that you can add the same organism multiple times with a different antibiotic (and this is probably the most important bit)

You can take lots of approaches here to make this more visible, but each of them boil down to structure in the form. If your goal is to let users know they can add the same organism multiple times with different antibiotics, here's some example actions you can take (and probably use to come up with your own idea):

  1. Reorganizing the form to indent the antibiotic field or otherwise imply it is some sub-field of a parent organism value would let users know that an organism can react with an antibiotic in many ways.

  2. Redesigning the form into some all-parent structure (think: a view of [organism] + [antibiotic] = [susceptibility], rather than [organism],[antibiotic],[susceptibility]) would let the user know the options are combinations to some means, rather than just properties of an organism.

  3. If users frequently (or should frequently) add multiple rows of the same organism with varied antibiotics, you could let them know it's okay by pre-filling the organism field with its previous value. If this is not immediately obvious, you can make it even more obvious by marking fields correct (opposite of the usual invalid class you see on forms) as you give each a value, and applying that "correct" class to the pre-filled organism field, even when it shares a value with existing rows.

  4. Rather than having a form, you could allow in-place editing of fields on click in the actual table, allowing users to click in an empty row to create one, or click in the values of existing rows to edit them. Doing this would put the content entered in a more tabular form mentally, which might be the necessary bump to make users realize these are all combinations that don't have to be unique on a single column (like organism).

  5. You have lots of whitespace left of the form Cancel/Save buttons which, if you wanted to just be blunt, could be used for helpful banner hints, such as "Hey, you can add the same organism multiple times with a different antibiotic!"

1
  • Thanks! :) Autocomplete seems definitely the way to go, with radio or buttongroups for susceptibility. Regarding the other suggestions, I went with number "3", basically when completing a "row" the susceptibility hides and the antibiotic resets but the organism remains pre-selected.
    – Tallmaris
    Commented Jul 29, 2014 at 9:20

Your Answer

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

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