Design Problem

Whilst creating a design solution for a document update manager for Fidelity, I struggled to find a design pattern that would satisfy the need to select a large list from a larger default list. A shopping cart mechanism doesn’t manage large list very well and when you try to introduce overflow management techniques such as pagination it starts to break. The multi select box shown above was the right pattern apart from it is very inefficient in its use of space. So what to do.

Design Solution

I opted for a tab solution that shared the same list management/ overflow mechanisms and selection space as the default view.

Because the selection is hidden behind a default tab, the trick to making this work was to create a direct visual association with the selection method by feeding it back as obviously as possible.