Huge Dropdowns

We let our client upload documents and select them from a dropdown menu. They added 302 documents, then complained it was hard to find the one they needed.

Our client was attempting to select, from a drop-down menu, one of the 302 documents they had uploaded. We needed an easier way to select a document, and it couldn't use any extra screen estate.

It was suggested that perhaps we offer them a way to search the documents. This seemed like overkill. The seed of the solution was in that suggestion, but rolling out a search field? Time for some research.

As it turned out, lots of the documents had very similar names:

Even if we could add a search field that presented a dropdown selection control, such as an autocomplete, the odds were high that there would be toomany options to comfortably scroll through.

This was my solution:

select from 300 items

Firstly, this is an unstyled prototype built in Axure RP 7. It's not supposed to be pretty, just to show a developer what they need to build. The part you're looking for is the label 'Document Requirement'. That link in blue next to the label is where the dropdown menu was located. So what happens when that link is clicked on?

select from 300 items

We get two select lists, and the rest of the screen is pushed down to make space. I had played around with various other, more 'clever' ideas, but we really needed something simple. I had been thinking about the pattern used when selecting fonts in OS X: Select a typeface and the variants are listed to the right. They update according to the weights and styles available in the font family you select.

We were already categorising document types (not in the categories shown here - I made those up for the demo) so listing categories would be simple. It was also important to have an 'All' category as the default. There are always users who have become experts and know the first few letters of the document they want. Rather than take away their ability to type a couple of letters and get the result they want, let them continue in the manner they've become accustomed.

For the others, though, this is what they'd see after selecting a category from the left:

select from 300 items

Much easier. And once they click the document they want:

select from 300 items

The link title has updated to show the name of the document, and it's still obviously a link. Meantime, those giant select lists have disappeared from view and the user is free to work their way through the rest of the form. Clicking the link brings you back to the 'open' state:

select from 300 items

The solution worked for the client, and was rolled out to all our clients. It's important to remember that some great minds have been creating GUI interfaces for 30+ years, and have encountered and solved similar problems. It's tempting to recreate the wheel in a flashy, modern manner, but sometimes, a better, simpler solution is best, even of it's not going to innovate.

Contact Me

Ask me a question via one of the following social networks: