1

Has anyone seen a ux/ui pattern like the one below? (Examples?)

It is two left-hand listboxes that feed into one right-hand listbox.

Any suggestions for improvement? User experience concerns? Is there any other ui/ux pattern that you would suggest?

Notes:

  • Lists can be very large, up to ~1000.
  • Actual list items are more complex than "songs", but I need to be generic.
  • We discussed having one left-hand listbox and combining the items, denoting "my songs" with an indicator icon, but it caused confusion about what was supposed to be cleared when the user selects the search's clear button. Though - it is still an option if this design does not pan out.

enter image description here

  • What are you trying to achieve? Create a playlist? – Midas Mar 7 '16 at 11:33
  • 1
    Hi @Jake - unfortunately I can't exactly say what it will be used for. It's more "business" than something fun like a playlist. I used songs to keep things generic. Essentially I have a very large (>1000) list of items that can fall under two categories - one is search results and the other is synonymous with "my songs". I then need a way of picking from both lists to make a sub-list of items. – oranges Mar 8 '16 at 14:59
  • Makes sense, and is it just desktop app, or mobile as well? – Midas Mar 8 '16 at 15:43
1

I think you should work with checkbox elements because they where designed for multi select fields.

On each container (serach / my) you should add the option to select all as a small checkbox near the title of the container.

Also i think you should add a button to remove options from each container as well to remove all selected songs from the merged container.

You can see more info about a related issue: ux review word for select all

(Read the comment:

help the user "visually identify" this special checkbox via styling (ie. a border surrounding the checkbox & its label), see how google mail does it )

enter image description here

Here is my take on your example

mockup

download bmml source – Wireframes created with Balsamiq Mockups

So to sum all up:

When a user checks a song on one of the containers (Search / My) it will be added to the "selected songs" list.

When the user unchecked a song in the merged "selected songs" list it will be unchecked it in the corresponding list.

He will have the option to check / uncheck all the songs in both (Search / My) and also in the merged list.

0

You Can Either Use A List Box 1.In Which You Can Add Check (Select) Functionality or Check (Select) on Long Press Functionality 2. Add Provide Floating Action Buttons For Add and Remove Functionality in your app i guess that would be a better option

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.