1

I'm designing for a mobile app.

I have a particular field within a form in which the users can fill out.

One such field has multiple choices and the user can select more than one. In this particular case the users can add which musical instruments they play into the form. There is also limited screen space for viewing all selectable options. My question is: What is the recommended interaction pattern for this kind of data selection input?

For example: The user plays guitar, piano and the bass. How can they intuitively select these choices, which are just 3 selections out of potentially hundreds of options.?

I have considered a dropdown with check boxes, something like this:

enter image description here

However it just seems too clunky for mobile.

Any suggestions would be appreciated.

1 Answer 1

2

With that large a range of candidate selections, the simple drop-down you show would, I think, be "clunky" even on a desktop.

In this case, especially on a mobile, I think you need to somewhat separate the functions of "showing the currently selected items" from the "selection picker" to add new items. Probably a good starting point is how the StackExchange sites handles picking of tags when asking questions.

On a desktop, there is less separation: the tags are accumulated in the same box where you can begin typing the name of a new tag. At that point, a panel appears with partial matches which you can select from (or type more to refine the search). On a mobile, the input box where type tag's name is separated from the display of current tags.

As an alternative (or in addition) to typing, you could have a "New Item" button/icon that brings up a categorised list (e.g. "Woodwind", "Brass", etc.) that the user can use to "drill-down" to the instrument of choice.


As implemented by SO, users can't "browse" tags (although they can start typing and see the "top six" of a narrowing selection of tags that contain that text). However, it should be possible to allow a more comprehensive browse/search facility in the "tag window" should you desire, e.g. show more/all matches and allow the user to scroll through them.

I think my key point is that trying to provide "browsing through a list" in a "traditional" drop-down is doomed to failure/clunkiness... like SO, the tag picker/browser/search box should be a separate entity of some kind:

  • On a desktop, like like SO, it could be a "pop-up" window. Given the nature of pop-ups (particularly the ease of them "popping-off") you probably wouldn't want to use this option if you added much more complexity.

  • If you wanted more complex functions on a desktop you could make the "tag selector" part of the main page (that either is always there, or pops into existence on demand). You could then, for instance, add scroll-bars to allow browsing of all (matching) tags.

  • On a mobile, if you want more than the current SO implementation offers, you probably want to switch to a "full screen" selector that at least acts as a standalone page (potentially allowing scrolling through matching tags etc.). Whether this is implemented as a separate page, or a full-screen pop-up is more of a technicality.

So: what SO does is an example of how to provide better way of selecting from hundreds or more options. However, you can extend that idea and make a more complex selector if you wish.

3
  • It's a good example, but the only thing I see that's failing here is the fact that your options are hidden. Users can't browse through the tags. That's my biggest problem with this. Mar 5, 2018 at 12:08
  • 1
    @RobE Added some more thoughts emphasising how what SO does is an example of what can be done, but could be built-on to provide the browsing you desire.
    – TripeHound
    Mar 5, 2018 at 12:49
  • Thanks! A full screen selector seems like a good alternative for this kind of action. Mar 5, 2018 at 13:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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