Usability

STREET NAME DETEC-
TION

How to make the address section easier to fill in?

The address is a crucial part of the checkout form - it is used for the order delivery, billing purposes and further correspondence. It contains several elements needed such as country, city, ZIP code, street name, building and flat number, so it usually takes some time to be filled in by the user. In order to reduce this time and also, minimize the number of possible mistakes, several improvements can be implemented:

- country autodetection (read>>)
- city autodetection based on ZIP code (read >>)
- street name autodetection (described below)

Responsive Checkout - Street name detection

In order to detect an address of the user in Responsive Checkout the library ‘Places’ shared by Google was implemented.

The library is attached with the use of the script:


script type="text/javascript" src ="http://maps.googleapis.com/maps/api/js?libraries=places" /script

At first, the object should be created:

var autocompleteService = new google.maps.places.AutocompleteService();

and then the request stated:

// get place predictions
autocompleteService.getPlacePredictions(
	{
		input: value, // Search query
		types: ['geocode'], // Only address search
 componentRestrictions: { country: countryValue // Limited to specified country } }, callbackPlacePredictions );

The function callback is also given as a parameter, which receives the results of the request. Moreover, the important element that improves the accuracy of the results is country. The library allows to narrow search field to the indicated country (componentRestrictions: country), however it does not allow to indicate particular city, where we intend to find the wanted street or address.

This can be solved by adding to the text of request city filled in earlier by the user or automatically detected based on the ZIP code, eg. for the filled in by the user text ‘Gro’ (first three characters of the street name) without the chosen city (the search results limited to Poland) we will receive:

Grochowska, Warszawa, Polska
Grochowska, Kraków, Polska
Grochowa, Sosnowiec, Polska
Grochowa, Kraków, Polska

However, when the city was earlier filled in or detected, the following request can be transferred:

‘Gro, Warszawa’

in this case, the results are much more accurate to the user’s intentions:

Grochowska, Warszawa, Polska
Grocholicka, Warszawa, Polska
Stanisława Grochowiaka, Warszawa, Polska

Additionally, the results are verified - only the results containing three elements: street name, city, country are presented to the user.

List of articles