0

I have a long list of items a user should select from, and need a good ui for that selection. Here is some info:

  • The list contains currently 300 items, but may grow to 1000 items or more.
  • The items are categorized, an item may appear in multiple categories, but may only be chosen once.
  • The user can choose an arbitrary number of items, but I doubt it'll be more than 30-40 for each choosing interaction.
  • A user may have to choose from the same set of items multiple times in different places, and if she does, she'll probably reuse many items.
  • The users (most of them) have a non-technical background, and the user interface should be touch-friendly.

I have read the questions about this topic, notably these:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • Is it really needed that all items are selected in the same page? 30-40 possible interactions seems like a lot for 1 page, unless the content is "flat" like images. What are those categories about? – Alejandro Veltri Nov 30 '14 at 18:58
  • The items are products, and the categories are just product categories. The products will probably be chosen by filter the first time, and then by a mix of "recently used" and filter at later times. But I'd like to have the categorized view there, just in case someone wants to look through all the products. It would probably not be a problem if the categorized view would be completely hidden initially. – Jost Nov 30 '14 at 21:31
2

My suggestion for this problem is to have a modal window triggered instead of a complex dropdown menu open up. The modal window should 2 two boxes, left box should contain categorized products (accordion style) that a user can tap with her/his finger and that item would automatically get transfered to the right-side box. The tapped item is then grayed-out and a green icon checkmark is added at the end of its row to indicate that it was added successfully. Also, if the same item appears in any other category, the same thing happens to that item as well. Right side items can be removed by clicking on the red "X" button next to them.

The mockup below should explain my idea very well. I hope it helps you solve your problem.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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.