I have a scenario, where there are class and section. The user will choose the "class" first and based on the selection, will then choose the "section".

After this the user will search the result whose name starts with "San". For this there is a UI already developed (see below).

enter image description here

I wanted to simplify this with less clicks.

Is there a better approach to do this?

I did like this, please let me know if you have any suggestions.

enter image description here

  • Can you just have the search? Or, depending on how many Class/Section combinations there are, combine them into a single dropdown? What do your users tend to want to find? Mar 17, 2016 at 9:33
  • Is that really a search or rather another filter?
    – Crissov
    Mar 17, 2016 at 15:10

3 Answers 3


I think there's a lot one could take from E-Commerce websites.

Use Filtering

Present the user with only the Searchbar and let the results include all classes and sections as well. Post displaying results present an option to filter results to the left. Something like this

enter image description here

This way

  1. There are chances users will see the required info even before filtering.

  2. They are not distracted by two separate fields (One for class another for section)

  3. It will take a max of 3 clicks to find the data needed

Additionally if the number of classes and sections are not a lot, you could include "Class" and "Sections" in the search suggestions itself. Amazon for example shows something like this I typed in "San"

enter image description here

My second suggestion would be recommended only if the total number of classes and sections are low.


Oh yes there exists whole lot of options to further optimize the dropdown primarily by including search,checkbox etc. You can refer to the below link for various methods and choose whatever you feel most suits your experience : http://www.jqueryrain.com/demo/jquery-multiselect-plugin/

  • How does that make the UI simpler?
    – octern
    Mar 17, 2016 at 9:16
  • What I was thinking here is to make the process of selecting a value in the dropdown more easier.As an example consider a scenario in this design where you want to select Class X and Section Y,the user would have to scroll all the way to get those in the dropdown where as if you use another technique wherein you could just type what you want and the dropdown shrinks for you and you have your chocie right there. Mar 17, 2016 at 10:01
  • Consider another scenario where you want to add multiple selections in the same dropdown,this could be achieved via checkboxes. Mar 17, 2016 at 10:02
  • Consider an approach where we selected a few tags in a dropdown(item) and you want to remove couple of them,you can use the approach where you have a simple cross sign with each item and just remove that instead of going through the selection and deselcting those all together. Mar 17, 2016 at 10:03
  • It’s recommended to paraphrase or quote the main contents of links as they tend to die sooner or later which makes link-only answer useless for future readers.
    – Crissov
    Mar 17, 2016 at 15:09

If they are going to search anyways, why not let them do that first and put class/section in the results?

Unless they know every person in every class/section it will require that they hunt around if they are not sure.

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.