2

So, in my case, I have a list of boroughs and connected cities. The way it works here in Montreal is we have boroughs and connected cities(like Westmount; geographically-speaking, it's still on the island and an outsider would think it's a regular borough, but it's not..). So, it wouldn't make sense to use 2 dropdowns since they're pretty much the same, but I was wondering if it's bad practice to use dividers or subtitles inside a dropdown. And yeah,I watched that video called "F*ck dropdowns!" and I decided that a dropdown would be a good solution for this.

  • 1
    Could you post a screenshot, so we can better understand how this woks? – Stefano Dec 9 '17 at 16:49
  • yeah, I'll do that. – Sebastien Paquet Dec 12 '17 at 15:43
2

I don't think it's necessarily 'bad practice' to have subdivided selects (dropdowns). After all, there are specific HTML tags for select list subgroups so it's accessible too.

However, it is bad practice to have long select lists - they make things difficult to find and are physically difficult to use.

Almost any list that requires subgrouping is likely to be too long and that's where the problem lies. Yes, you can subgroup your list to make things easier to find but, in doing so, you might be ignoring the fact that your list is too long in the first place.

The solution that most people use is to put their 'heading' list into one select and let that choice set the content for a second select list.

  • I often see long select lists used for Country selection. Sometimes those lists will be given subheadings for Continent as a way of breaking up the content. I've not seen any test data to say whether users have issue with such fields, but for country selection it isn't an uncommon pattern. – JonW Dec 11 '17 at 10:33
  • @JonW I did suggest that 'almost any list that requires subgrouping is likely to be too long' - There are always edge cases and exceptions. However, an article from the Baymard Institute (baymard.com/blog/drop-down-usability) lists a study where at least one user got confused and started scrolling the wrong way. They also recommend that select lists should be no longer than 15 options. – Andrew Martin Dec 11 '17 at 11:37
  • what do you mean by "let that choice set the content for a second select list?". – Sebastien Paquet Dec 12 '17 at 15:39
  • @SebastienPaquet let's say that the first dropdown contained a list of US states. After the user has selected a state from that list, the second dropdown then contains all the cities in that state. If the user had selected a different sates they would have been given a different list of cities - the first dropdown works on a large scale and the second on a fine scale with it's range governed by the selection in the first dropdown. – Andrew Martin Dec 12 '17 at 15:44
  • The thing is geographically-speaking, the connected cities are like regular boroughs. Look at this map, for example(should've done that from the start!). All the areas are either boroughs or connected cities. My point is, do these so-called connected cities have enough "weight" to deserve their own dropdown(!)? Like on the map, the green part in the middle of the island is Westmount, it looks like a regular borough, it's surrounded by other boroughs, but it's a city(!) of its own. – Sebastien Paquet Dec 12 '17 at 16:33
0

You can use fancy dropdown widgets like Shield UI's DropDown, which allow you to render anything, from distinctive images to indents and paddings for each item.

  • I've been using Vuetify with Vue.js. It's getting pretty good. – Sebastien Paquet Dec 12 '17 at 16:36
0

I would suggest to use grouping within the drop-down menu. The groups can be collapsible so that user can go towards the required option easily. Also, don't forget to provide search feature (in the form of auto-complete) when user enters some text to find a country.

If it is a mobile interface, then providing two level list would be a good idea. First level will display boroughs and selecting an option will display the list of countries in that borough.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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