I'm designing a web app where the user adds predefined items from List A to a custom List B.
List A is over 100 items sorted alphabetically.
List B can be customized according to user needs.

I designed a drag-and-drop solution for the web app. The user can jump to List A items alphabetically by clicking a letter.

drag and drop feature


This drag-and-drop feature doesn't work on tablets very well and is impossible for smartphones. So I designed a select form for mobile devices: When the user taps on a list item in List B, a picker/flipper populated with List A items is triggered.

mobile view select


Is there a way to implement alphabetical filtering in a web app's mobile interface?

How can the mobile interface for this feature solve the following requirements?

  1. Allow user filter List A
  2. Add items from List A to List B
  • Please have a look at Material Design for reference. link
    – Jawad
    Commented Nov 27, 2019 at 19:16

4 Answers 4


For very long lists, it's better to use a different UX for mobile

  • Multi-select is a complex operation, so it's difficult to use the same interface for both web and mobile. You already recognize this because you've outlined two different layouts.

  • Your mobile design is problematic because:

    • It requires users to tap once to add an item, and then select items from a very long dropdown box.
      Dropdowns are difficult to use for mobile apps because placement and scrolling are very awkward.
    • Adding an item requires a tap to create a new row, tap to drop down, scroll to find an item, tap to select. That is a lot of UX friction just to add an item, so creating a list will be very laborious.
  • Here are some alternatives which provide lower friction for multiple selection with varying levels of specificity, organization and user knowledge:

(click image to enlarge) 1. Scrollable multi-select listwith (optional) filter; 2. Carousel sections with vertical scrolling; 3. Token input list

As you can see, the design of the widget will depend on the shape and organization of your items, as well as the user's familiarity with the items.

  • How do you actually implement the version on the left? I've tried a bunch of different things, I can't figure it out. Commented May 22, 2021 at 17:32

First of all - not ABCD... but autocomplete in search (consider Cyrillic, Greek or other alphabets).

Drag-n-drop is a beautiful feauter, but consider dragging aprox. 50 elements. I will be extremely time consuming. Clicking on item on the left to assign it to group will be much easier.

For mobile my proposition is to switch view between Available <-> Assigned by single-tap or drag up/down dark gray bar.

Certainly if your list of Assigned elements will be long it will be alse good to add autocomplete for it also. Autocomplete means limiting list of available elements to only these that contains entered string.

I've tested solution with dropdowns - it is hard to implement it, because every new dropdown has to exclude elements already assigned. And still - it is hard to navigate 100+ rows in dropdown.

enter image description here

  • Thankfully the app is English only :) Your answer is very helpful, thanks!
    – Amelia K
    Commented May 14, 2015 at 15:06
  • Autocomplete is nice if the keyboard is the main input, but I think the original "ABC..Z" would work better in a touch environment. Why not both?
    – ecc
    Commented May 14, 2015 at 16:33
  • In your mobile concept, what action does the user take to move an item to "List B" or Assigned? Commented May 14, 2015 at 17:38
  • Tap on item or drag it to the bottom bar. I assume, that user entered this screen by selecting an option associated with "selecting".
    – Karpiu
    Commented May 14, 2015 at 18:40
  • I like the mobile approach you have. How would you set this up in HTML/CSS using responsive design? I tried expansion panel / accordion, but they are not easy to get the content to overflow and the 2nd collapsed header ("Assigned users") does not float bottom Commented May 21, 2021 at 2:35

If we're talking about mobile, maybe override the default web scroll element and implement a scroll with a native-like behaviour and then show a tag list above it. To add something to list B from list A, click on a row in list A. To remove from list B, click on the tag on list B or click again on the row in list A.


download bmml source – Wireframes created with Balsamiq Mockups

  • This is very similar to how address/contact books work that have an alphabet list instead of the default scrollbar. Definitely going to research & test ways of overriding scrollbars. Thanks!
    – Amelia K
    Commented May 14, 2015 at 15:03
  • Yes, address book mobile apps is actualy where I got the main idea from.
    – ecc
    Commented May 14, 2015 at 16:30

I'd suggest using something similar to the iOS "Select" functionality in Camera Roll.

User taps a button to activate a "selection" state. User selects all the items List A items they want to move to List B. User taps a button to move items to List B.

I'd also pair this with a search box that allows the user to easily filter out the names they want. That supports two use cases: specific search and non-specific discovery.

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.