Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm trying to design a widget which is a dropdown single selection containing a very large set of data. Because there could be 2000 records in the dropdown. Loading them at once will make the system very slow. So below is my first path. This widget is used to select an option in the database.

By default, it looks just like a dropdown. When users click in the field, the dropdown list will open and a cursor will appear in the field. The 2000 options are divided into pages and that's why you see the pagination at the bottom.

enter image description here

When people type in the field, it will filter/auto-suggest matching results. The total number will reduce to 1000. If people also use the filter on the search result, it will reduce to 50. enter image description here

However, I'm not sure if the pagination is really helpful to people who want to pick an option. I don't think they'll ever use pagination when there are 1000 of them. The reason I keep it here is because sometimes people might not know what to type in the field...

Here is another option: Add a "More" button at the bottom and get rid of pagination. Any thoughts, comments or suggestion?

enter image description here

share|improve this question
    
Since it's been a long time you asked this question, if you have implemented the widget discussed herein, would you like to share it with all of us? It would be nice to see how it eventually got implemented. In fact you can post it as an answer, if you think you should. –  Mohit Apr 15 '13 at 5:17
    
@Mohit We are on hold for this widget now due to time and resources we have. I'll share the results once we have a decision later. Thanks for following :) –  wcdomy Apr 18 '13 at 23:49
add comment

5 Answers

I think that quick filter together with more button will help. You may also add specific filtering to narrow the search results to a smaller subset.

Here is an example from some IDE. It has a specific filtering (filter icon on the right) which will allow user to select a specific set (kind, location, etc) to search through. It also has a quick filter (text field) and a "more" button:

enter image description here

share|improve this answer
add comment

I would avoid pagination - I don't believe this is a right place to have it.

Quick suggestion is to split the process into two phases - first selecting a group and then you could use Ajax to load just data for this part (in case of alphabetical elements it leaves you with about 4% of the data necessary to load initially).

Visually, you could split it into two lists (first you choose the group , and then the actual element) or come up with a more sophisticated interface for it, e.g. a custom dropdown with a tree inside. Or, a double state dropdown:

  1. When there is nothing written in the combo field, the dropdown shows only a list of groups.
  2. When user selects the group (in case of alphabetical list: types in the first letter), it is shown the combo field (in a form similar to a breadcrumb), and user is presented with new dropdown content (at child level, matching the group) allowing for further selection.

Also, look for the optimizations on the serverside. Proper data agregation is a key and may speed up the process of feeding the interface with content.

share|improve this answer
add comment

I agree with you: pagination in mobile is not convenient. Instead, as you suggest, you can offer a 'View more results' button, or load more results automatically through lazy loading.

But what I think you should think of is the step before the results are displayed: the search interface. It should strike a balance between the number of fields and the number of relevant results.

As I know that this piece of advice is too generic, I recommend taking a look to this page of mobile patterns: Search, Sort & Filter patters. It contains some examples that can inspire you. Good luck!

share|improve this answer
    
That page is very helpful. Thanks! –  wcdomy Feb 13 '13 at 21:13
add comment

Instead of writing "More" in the last one, you could very well write different letters of Alphabet such that if user clicks on "M", the page with entries of "M" will open up. And then, the bottom navigation will again change and show links like, "Ma", "Mo", etc and let user again decide where he wants to go.

Again, the pages shown for "Ma", "Mo", etc could very well sync with the ones which open up when user enters "Ma", "Mo" etc in the top search field.

So, this would basically imply that the bottom links would be dynamic and change according to where the user is in his search.

Something like this: enter image description here

Edit 1 - Now that I have given it a thought, it seems more appropriate to have that list of dynamic links towards the top rather than at bottom. It will save constant shift of eye movement from the user perspective and would let him focus on the task at hand. It could be implemented something like this: enter image description here

And as I have said in the comments below, text field and the list of dynamic links (I don't know what else to call it, any good suggestion? ) are supposed to work in tandem and not individual of each other. And that would make both of those interactive elements dynamic in nature.

For ex - It can be of great help if user doesn't remember a word like "maserati" and type in just "mas" or navigate using the provided links by clicking "m", "ma", and then "mas" to find "maserati" eventually. He may not remember the word absolutely, but when he sees a limited list showing him the only available options, he will be sure of where he is going.

share|improve this answer
    
Wouldn't that be easier to just type in the field and search if users know what it starts with or they know it starts with "Ma"? –  wcdomy Feb 13 '13 at 21:11
    
@wcdomy - They are supposed to work in tandem. It can be of great help if user doesn't remember a word like "maserati" and type in just "mas" or navigate using the bottom provided links by clicking "m", "ma", and then "mas" to find "maserati" eventually. He may not remember the word absolutely, but when he sees a limited list showing him the only available options, he will be sure of where he is going. –  Mohit Feb 14 '13 at 4:15
add comment

Is it possible to classify your options using additional to 'location' categories? In this case you can download options after all filter categories are set. E.g. user need to specify categories: Country, State/Province, etc. which limits options list to reasonable size and you can use standard drop-down list with auto-complete for them.

share|improve this answer
    
We definitely don't want to have too many filters. The list is cluttered already. –  wcdomy Feb 13 '13 at 21:12
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.