Does anyone know if moving selected choices to the top of the multiple-choice dropdown is a good design pattern? This would prevent users to scroll through a lot of content to preview active fields.
Below quick example - before and after:
Add a comment
|
3 Answers
You can also add a separator between selected and unselected items.
-
Thanks, I just wonder if this is a good approach? or maybe within the dropdown idicate labels? is it ok that items change their alphabetical order? Commented Mar 31, 2022 at 13:54
-
This is actually a good idea. It gives an overview of what has been selected before which can be handy also to review the new selection to what is currently saved. But only do this when the list has been saved before and is loaded again. Don't put items on top when the user is actually interacting with the list. When items move/disappear when selecting something is confusing and annoying as users can make a mistake or want to select multiple items quickly.– jazZRoCommented Apr 1, 2022 at 12:53
-
@LoreleiHeckmann Treat the list as two separate ones: above and below the line. Sort both lists separately as needed.– jazZRoCommented Apr 1, 2022 at 12:58
It depends on the context, personally, I don't think it's a good alternative. Multiple-choice options with text are usually arranged in an order to facilitate searching, usually alphabetically. I easily find Spanish avoiding all the content by going to the "S".
If it's a filter, there are alternatives to display the selected options in a long multiple-choice by nesting them at the top:
Example via myfonts
answered Mar 31, 2022 at 10:18
-
Thank you Daniellillo. I considered labels, however, if the user has multiple filters and would like to delete 1 item from 1 filter then this can be tricky. Each filter would require a separate label and in my use case sometimes it can be 30-40 active filters (ie. user names, departments, countries). Commented Mar 31, 2022 at 10:22
-
Well, this totally transforms the question, you may need to add the full context for someone to answer correctly. The half-questions expanded in subsequent comments are not very helpful on SE. Commented Mar 31, 2022 at 10:30
I would not recommend dynamically moving the position of selected items in a dropdown menu. When the user selects the item, one of two things would have to happen:
- The user stays with their selected item, which means that every time they check an item, they jump to the top of the menu. They'd have to find their place in the list again after every selection.
- The item potentially disappears from the list, as it's moved to the top, out-of-sight. Selecting something that immediately disappears is not good user experience.
Based on your comment to Danielillo that there might be 30-40 potential criteria in your filter, you might want to explore showing your filter or facet in a panel vs. having it be contained in a dropdown menu. You could add headings to group criteria if needed.
answered Mar 31, 2022 at 14:20
