1

ASK DN: Good examples of multi picklist UI?

8 years ago from , Designer @ Instabridge

I'm trying to find a good UI replacement for the multi picklist element in forms. A multi picklist is a list of choices where the user can select multiple objects at once.

Here's an example of the standard solution - which I believe could be improved a lot. http://res.cloudinary.com/hzxejch6p/image/upload/v1371104134/wrtdinxuizb6mgonbmuf.png

I want something thats fast, gives a good overview and that would fit on a device (320px width).

Have you guys seen any good examples of this?

1 comment

  • Marc EdwardsMarc Edwards, 8 years ago (edited 8 years ago )

    I’m not sure if you’d consider it good or not, but here’s the solution we ended up with for iStat Menus:

    iStat Menus 5

    Adding a city

    • Search for the city.
    • Click the + next to the city you’d like to add.

    The search field is cleared and selected again after a city is added, so you can start typing a new name immediately.

    Removing a city

    • Click the - next to the city you’d like to add.

    Reordering

    • Drag the item or items.

    It is worth noting that we have over 120,00 cities, so searching to add was a good solution. If you have a far smaller dataset, you may want to show a full list. Maybe the search field would be replaced with a + button that changes the list.

    Also, I would prefer the search field at the top, mostly due to mouse travel distance and Fitts’ Law, but that wasn’t the best option for this specific instance in iStat Menus.

    0 points