5

Scenario

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

Problem

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

Question

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
5

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.

3

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 May 14 '15 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 May 14 '15 at 16:33
  • In your mobile concept, what action does the user take to move an item to "List B" or Assigned? – plainclothes May 14 '15 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 May 14 '15 at 18:40
1

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.

mockup

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 May 14 '15 at 15:03
  • Yes, address book mobile apps is actualy where I got the main idea from. – ecc May 14 '15 at 16:30
0

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, privacy policy and cookie policy

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