0

As part of a form field, I want to allow the user to specify 0 or more options. The user should be able to select multiple of the same option if desired.

This can be visualised in a typical multi-select (see image below). In this example, the mutli-select search results would only show one "70 seater" option but it could be selected multiple times:

enter image description here

I can see a few problems with this:

  • This isn't the typical way a multi-select works and could be confusing
  • It's hard to scan and see where duplicates of the same option exist
  • It's annoying to add another of the same option
  • It's annoying to remove a duplicate of the same option
  • The multi-select box could quickly become full and require overflow

I'd prefer to go with something that makes incrementing options easier and more clear (see image below). In this case, selecting an option from the multi-select search would add it to the list below (and subsequently remove it from the search list). Clearing of an option would be done by decrementing it to 0.

enter image description here

Is there a well-known pattern that already solves this? Is there a better way of doing this? Does this suggested approach make sense? Any help would be appreciated. Thanks!

6
  • Without knowing the context of the multiple options allowing multiples of each option selected, it's hard to devise a user interaction. From what's stated in the question the proposed solution sounds reasonable. Nov 23, 2022 at 15:26
  • @bloodyKnuckles what additional context are you after? If it helps, the expected number of options in the multi-select is 6 - 10.
    – Tom G
    Nov 23, 2022 at 15:53
  • For example, why would someone select 2 or more of any one particular option? I.e., what's the difference between selecting 1 "70 seater" and selecting 2, or more? Nov 23, 2022 at 16:10
  • 2
    "...you just need to know people do sometimes want to increment the option." Maybe it's just me, but "why" is at least as important as "what". Nov 23, 2022 at 16:15
  • 1
    understanding why your users want/need to perform an action tells you more about how you can help them achieve that goal. Nov 24, 2022 at 14:05

2 Answers 2

0

I don't know if there is a known pattern that solves this.

What you're doing now is understandable to me, I think the -/+ are easy to comprehend. I would also just suggest being able to double click the number to manually input the field as well.

I would suggest having a few users/potential users or even friends look at it and see if this makes sense to them. Even better if you can give them a specific task like select 4 '30 seaters' and 2 '70 seaters' make note of what is working and isn't working from there.

Hope this helps :)

1
  • Thanks for the feedback. Manual input for the number field is a good idea - in my particular case a user will rarely need to increment above 2 or 3 so I will keep it as uneditable for now.
    – Tom G
    Nov 28, 2022 at 17:40
2

In case it's helpful for others, the pattern I went for in the end was slightly different in that I added a select picker to each individual row.

An Add vehicle button adds additional rows:

enter image description here

Rows can be removed by decrementing (-) down from a count of 1.

enter image description here

In my case there were a few benefits to this approach over the original approach:

  • The pattern of using a typical form select picker to add new rows (but not fill the actual select input with a value) felt weird and unintuitive
  • Options can now be hot-swapped while maintaining the count for that row
  • The user will often not need to add any rows at all, so hiding this logic by default could be beneficial

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.