3

Not sure where everyone gets their pattern examples from, but I have an instance of a web-based application needing long lists which are equally important to each other. Some users have over 100+ lists that need to be sorted quickly or searchable. I have some floating concepts in my head but no solid examples of working in practice. Could use some links or guidance.

Problem: Users have multiple lists that are viewed depending on what they are creating. Lists are excessively built and curated by user. Usually lists are not used over and over, but there are possibilities of them being used again or recalled later.

Current Ideas

  • ABC ordered list
  • All viewable when dropdown expanded (also increases page length dynamically to height of list)

Proposed Idea

  • Show last 5 lists viewed
  • Expand button / show all button (max 15-20 displayed)
  • Search lists with dynamic mini inline searchbar

Current Problem

Improve this question
3
  • Can you provide an example of how the lists relate to each other, so we can understand what you mean by sorting them. Also, since you have multiple lists, it's unclear what you mean by "searchable" or "sortable". Are you sorting items inside a list? Or sorting the lists themselves? Are you searching list titles? List contents? If so, is the search constrained to a particular list? This is a case where adding a wireframe would be really helpful. Commented Apr 20, 2015 at 16:26
  • (sorry, I don't know how to use the formatting here lol) List Contains data input by users (tablature data) Organization Lists are organized by name input by user, the name is the top level Search Search list names found within the dropdown list Sorting Default sort is just ABC order, no current plans to have different types of sorting Commented Apr 20, 2015 at 17:08
  • @tohster I updated the main post with an example screenshot of how long the list shows, there's no auto scroll, it will show all elements by default. Commented Apr 20, 2015 at 17:26

1 Answer 1

Reset to default
6

You could try...

Typeahead

Allow the user free form text entry. As the user types a filtered list appears of items that match what the user is typing.

enter image description here

Pick a number of items to show that is reasonable. You can provide a scrolling list when more items are available, or just show a set number and require the user to continue to type in something more specific if they don't see what they are looking for.

If the user doesn't want something that is already in the list they can just type it in. You can treat that as a "New Entry".

The compact nature of this is useful, but it turns the selection into a recall task, vs. recognition. Generally, a recognition option is a better way to go.

Filtered Drop Downs

A drop down that can be filtered is a better route. Take Gmail's labeling functionality as an example:

enter image description here

You get a complete list of all labels (blurred out in this example), with the option to filter the list if you need. You get the best of both recall and recognition with this.

When you start to filter:

enter image description here

The list reduces to what you've typed. You also get an option to add a new item named with what you've typed in. If you type in something that doesn't exist in the list, you get only the option to create something new with that name.

This type of pattern takes up more space than a typeahead, but (as mentioned above) it retains the recognition quality of a drop down. It adds in recall for people who know what they're looking for, and allows them to grab it quickly.

Improve this answer
1
  • Thanks! I actually just thought about that as I drew a blank and remembered the free form list of Gmail. Managed to get some mocks around that. Thanks for the detailed info on this. Commented Apr 20, 2015 at 20:25

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.