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:
- Best way to select a subset of items in a long list - I could add grouping for the categories on the left side, but I'm not sure how to use the filter with the categories. Also probably not touch-friendly.
- Alternatives to a dual list for selecting a bunch of items from a long list? - I don't see how to make use of the categories here.
- What are some creative patterns for viewing and selecting individual items in a large non-hierarchical list? - This one looks nice, especially for touch screens. I could add categorization with accordions or similar, and just gray out chosen elements (in all their occurrences). Filtering could also work, just remove all accordions with non-matching items and the non-matching items themself. But I still don't know how to use the "used elsewhere" info. Maybe as an additional pseudo-category? And how to display what is already chosen? I've added a mockup of this:
download bmml source – Wireframes created with Balsamiq Mockups