How to ensure error-free user input of one value from a large population?

Question

User interface

Faced with the following problem.

There is a certain form, in one of the fields of which you need to enter a metro station. The entered value needs to be processed, the result of the handler's work directly depends on which metro station is entered.
Task: to eliminate the possibility of errors when entering a metro station and minimize the damage to the convenience of the interface.

The usual input field and the dropdown list disappear (high probability of error / too long list - there are almost 200 metro stations in Moscow).

For the full version of the site, two solutions are suitable: autocomplete with jQuery or a widget (like Yandex.Real Estate ).

The question is what to do with the mobile version of the site?

I really don’t want to leave the possibility of an error, the extra page load by gprs is not at all equal to the desktop one, I know from myself. A list of 200 positions on mobile is even worse.

Do you fill out the form according to the logic of “forwar thinking devices” and split it into several pages, where on the first one, for example, you need to select a metro line, and on the second one show already 10-15 stations? Make an application for each platform? Or is there still a way to create functionality that would provide convenience for at least 80% of mobile devices (OperaMini, iOS, Android)?

Answer 1

jQuey mobile to help you!
Here , for example, something similar is being considered.

Answer 2

In my opinion, a two-page approach is the best option, provided that there is also a search bar with auto-selection of options for the entered part. Those. in fact, there will be three pages: a search (an input field and an auto-selection list below) and a two-page selection of a specific station.

Answer 3

If the application can be implemented as a mobile site, then this is better than making a separate application for each type of device.
In my opinion, this can be done.
On the form - an input field for the name of the station. When you enter the first one or two letters, a list of suitable metro stations is loaded from the server. For radial/circular, the type of station is indicated in brackets. For example "Taganskaya (ring)"
The list of suitable metro stations is displayed in a popup window as a list. Where the user is already and selects the station. Even when entering just one letter, the number of loaded stations will not exceed a couple of dozen. Use LZW
to compress the data being sent and decompress it when it is received using JavaScript
Selecting the line first, then the station, in my opinion, will not be user-friendly.
He will have to remember, make mistakes, curse, choose again, and so on.
The selection of options for the first one or two letters of the station name will be the most convenient, I think.

Answer 4

And why don't you make a button next to the input field in the mobile version: "Find". A person enters a piece of the station, presses "Find" and he is given a list of matching stations. Now all mobile browsers support JS to some extent. Output a list of matches and let him choose from them. Enter nothing in the field, display all the stations, enter some letters, there will be fewer stations.

Answer 5

Alphabetical list by the first letters of the metro names (1 or for those letters where there are many stations, 2-3 each). Almost the same as a branch, but the branch can not always be remembered, the first letter is easier.

Answer 6

For the full version - subway map
For mobile - apparently autocomplete with hints.
I don't like the option of choosing a branch, then a station. I don't remember what the branches are called, I'm guided by the colors :)