Making address forms more attractive

One of the main activities of our company is cleaning and standardization of customer data. Our software can put in order any database with customer information: correct errors and typos, fill in the missing information, enrich the data with additional information, eliminate duplicates.

Unfortunately, a one-time cleanup is often not enough: you need to prevent bad and incomplete data from entering the database in the future. To solve this problem, a hint service was developed, which we wrote about earlier . Initially, the prompts were intended for operators who have to enter a large number of addresses, and were designed to speed up their work and reduce the number of errors.
')
However, we later realized that the service could be useful to anyone who somehow works with client data. Below I will try to show what tips can, and how to use them to make entering addresses on your site a convenient and very simple process.



Everyone knows what an address filling form is: a lot of fields and time spent on filling them. But the real problems begin when the webmaster adds validation to the form. One of the popular options is a list for 100,500+ items and a hard check for data matching the directory.

For example, last week, when we wanted to order pizza at a well-known site, the process of entering an address suddenly turned into an amazing quest. First, we saw a field for entering the street, indicated "Turchaninov Lane" and, without expecting a trick, clicked "Continue":



Futile attempts to introduce "Turchaninov", "Turchaninov lane", "lane Turchaninov", "TURCHANINOV" also failed. To be honest, I already wanted to order in another place. But the interest to finish the job outweighed the indignation, and, as a result, we entered the name of a large street not far from the office and clicked "OK".



Yes, this is a modal window with the name of the street. Click "Continue" and we can enter the house.



There are no other houses on this street, of course. We chose the one closest to us, indicated the correct address in the comments to the order and went to celebrate, spending 5 minutes to enter the address.

A great example of how to do is not necessary.

And how to make a form that will be convenient? Let's take, for example, the page for contacting the Moscow Government’s Internet reception desk:



In principle, it is a good form to fill in (if there is free time): there are a lot of different fields, you are not confused about where to enter, and there is no annoying validation. True, on the tablet and the phone is not very convenient to jump through the fields. And a little scary.

You can split the form into several pages: so it will become less loaded. But this does not reduce the total filling time, so we will go the other way.

Transfer the page to the prototype to make it easier to design:



Immediately the question arises: can you squeeze the address information into one field? Or is splitting into several elements required?

Most likely, different instances are responsible for different addresses, plus for subsequent analytics, it would be nice to save the address breakdown by component. However, no one forbids us to enter information into one field, and then distribute it into components. Add the main field for entering the address and connect the hints to it:




Now we will remove the extra information, and we will divide the necessary information into two lines - the region with the city and the street with the house. At the same time highlight the characters entered by the user to simplify the perception of the list:




First of all hints return information on cities and regions, then on the streets, then on the houses. Moscow and St. Petersburg in priority. We are making a form for the government of Moscow, so we will limit the search to Moscow alone:




To prevent the scrolling from appearing, we’ll show the first 7 of 10 prompts (they are sorted by relevance, so the quality of the search will not be affected):




When the user selects a specific option from the list, we place the selected value in the “Address”, and in the other fields of the form we substitute the granular address fields:




Once all the fields are now filled in automatically, we can make the address part of the form more concise:



By analogy, we make the name and we get the following feedback form:



Live can be viewed on the demo page (+ source code on github ).

The resulting form requires a minimum cost from the webmaster, is user-friendly, suitable for entering both on a computer and on a tablet or phone.

Can you imagine if every website: when buying a ticket, placing an order in an online store or when filling out a registration form, would there be such a simple data entry procedure? If filling out the form from any device was the most convenient and it took only 5-10 seconds?

We offer to start making the world better now! Connect to the service and try, look at the reaction of users, conduct a / b testing. And good luck with your customers!

via AlexGechis