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.
2
-
1Could you post a screenshot, so we can better understand how this woks?– StefanoDec 9, 2017 at 16:49
-
yeah, I'll do that.– Sebastien PaquetDec 12, 2017 at 15:43
Add a comment
|
3 Answers
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.
answered Dec 11, 2017 at 9:57
-
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, 2017 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. Dec 11, 2017 at 11:37
-
what do you mean by "let that choice set the content for a second select list?". Dec 12, 2017 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. Dec 12, 2017 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. Dec 12, 2017 at 16:33
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. Dec 12, 2017 at 16:36
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.
