0

I'm looking for some suggestions on how to inform and display additional data based on what has been selected from a dropdown.

Overview:
I'm working on a complex back-office application that allows for software contracts to be created. There's a screen to select the following: ship to, bill to, payer, etc. Each is a dropdown that pulls from a list of stored addresses. Similar to Amazon's "Ship to" dropdown, you are presented with a list. I need a way to display the full details which includes a name, phone and address.

As you can see below, I have limited space but need to give the option to display the selected info. Would it make sense to add an info icon or a "details" link once the selection is made? Would you display that info in a modal or something similar?

Note: Including outside libraries, like jQuery, is not an option within this environment so I need to get creative.

enter image description here

Improve this question
3
  • 1
    do you need to be able to see this extended information prior to a selection (in order to help make the selection), or only after a selection has been made? Also, is this information that should always be available, or will the user rarely need to see the additional information?
    – Daniel Brown
    Commented Feb 8, 2016 at 19:49
  • The user does not have to see this info prior to selecting. It's only necessary if they want to view it afterwards. Kind of a "nice to have".
    – Bill Punch
    Commented Feb 8, 2016 at 19:53
  • Please see my updated answer below
    – Daniel Brown
    Commented Feb 8, 2016 at 20:58

1 Answer 1

Reset to default
1

Vanilla dropdown components don't allow for much improvement. If you leverage a tool like Select2.js you can modify the template of your dropdown items. For example:

example select2.js dropdown

Note that that each dropdown item uses a template that allows you to deviate from the current "single line of text" that you are normally limited to.

In my opinion, this provides a much better user experience than using additional screen space or requiring clicks to open modals/dialogues. However, if the user will need to continually reference the selected options information (ie. it's used outside of making the initial selection), then it may be best to include information for the selected options on the screen (post-selection).

EDIT: Update to reflect constraints

You really have two options:

  1. Display the information on the screen post selection
  2. Allow for access to the information via clicking/hovering.

If you have the real estate, and there's not much info to display... Display it side-by-side in an attractive, easy to digest way. If there is a lot of information, you may want to invest in:

  • A slideout pane/panel
  • Updating/filling a specific "selected information" portion of the screen

Modals and modal dialogues can open you up to accessibility issues, and it sounds like there's not enough information to warrant a new web page.

Improve this answer
2
  • That's a great suggestion, though I forgot to mention that I'm working in a BPM environment and adding outside libraries is not an option. (I'll update the post).
    – Bill Punch
    Commented Feb 8, 2016 at 19:44
  • Number 2 has got me thinking about this differently. Thanks for the suggestions! I'm always hesitant in using modals so I think the hovering option might work well.
    – Bill Punch
    Commented Feb 9, 2016 at 1:25

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.