I need to create a mobile web page which will prompt the user to select a village name from a huge list of names (around 30000 villages). The desktop site renders properly, and is quick enough. The user can quickly find his village by selecting the dropdown and typing few characters in the keyboard.

When I'm creating the same site for mobile, the dropdown becomes unusable, since the user will need to scroll the whole list. Autocomplete is also becoming extremely slow. Also, on mobile phones, the website becomes very 'heavy' and causes device touch response to become slow.

Please suggest what would be the best design pattern for handling selection from such large datasets for a mobile website.

I am using ASP.NET for creating the website.


Provide functionality to let the user drill down the number of items to choose from. Do this by using properties of the item the user knows about.

In your case you could ask in which state the village is in or what the first two postal code digits of the village are.

  • good suggestion, however, it would be a little difficult to implement for my company, since data is not organized in such a way to enable drill down, or tagged with postal codes. Postal codes would be ideal. I'll try to get the required data and implement a postal code lookup. Thanks. – rDroid Mar 24 '14 at 10:17

Since it is a web based application, i would suggest to display small number of data to the user and provide proper filters or search options to the user to find desired data (in your case village name). you can try couple of options here.

Option 1: You can provide a text field for village name with search option. user should be able to type 3-4 letters and click on search to get the list. enter image description here

Options 2: You can provide browse option to the user with proper grouping. enter image description here

  • How does option 1 go with "Autocomplete is also becoming extremely slow"? – uxfelix Mar 24 '14 at 14:27
  • 1
    @uxfelix it looks like it does it in two stages. The autocomplete step actually happens on the server, not on the device. Which should sidestep any responsiveness issues caused by the device trying to run the autocomplete step itself. – Racheet Mar 24 '14 at 16:16
  • @uxfelix as said by Racheet, it works in 2 steps. on first screen user would need to enter 3 character and hit search button. 2nd screes would display the results based on the entered query. – Awesh Mar 25 '14 at 4:52

Surely the users already group these buildings in their mind by something else - by city, by company, by department(within the company). I would suggest that you have an expanding tree or grid that lists the divisions and let the user either check each option, or expand it to check the options within.

So for example, if they think of the buildings by state and city, have a grid that shows the states. They can either check one or more states, or expand any one or more of them. On the ones that they expand, then they would see the cities and they could choose to check or expand any of those cities. On the ones they expand, you'd show the buildings, and here they could check any of the buildings.

Your report would then show everything that was checked. If they checked a state, your report would show every building for that state. If they checked a city, then every building for that city. If they checked a state, and two cities within a different state and three buildings in yet another state and city, then you would show that in your report.

You can use a tree control with checkboxes for this. You can use a TreeView or build a tree like or expanding grid control with a table and buttons. Building your query for the report will take some doing, but once you have done this work, this type of interface will be very intuitive to the user. Do not shy away from something that looks hard to do, if it is the most intuitive solution for the user.

if the user wants to print the report for a single building, then they probably know what state and city (or whatever division they normally think of) and can drill quickly in to find what they want. But you will probably also want to provide a search option that will let them type in a string and you would expand the tree to the matching options and highlight them so they can check them if it/they are what they were looking for. Again, quite a bit of work, but don't shy away from it. The name of the game in providing a user interface is making it INTUITIVE, so the user does not even have to be shown how to use it, but will know exactly what to do as soon as they see the screen.

So yes, what you are thinking of a grid, is good, but give the user some groupings - make it an expandable grid, with rows that are group headers that the user can take advantage of to select everything within that group or expand to drill into that group. The query would then just be a matter of looping through your tree and saying something like "where state is in (...insert state groups that were checked...) or city is in (insert city groups that were checked) or building is in (insert buildings that were checked individually)". So actually the query should not be hard to build. If you need to pass the collection of what the user chose to other parts of your application, from the code behind of this page, you can build a collection of the selected items and put it in a session variable.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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