So I'm building an edit profile page this page consists of a few fields. One field in particular requires the user to enter their location i.e the postcode.

Inside my cloud database (Firebase) I have a list of 16k+ postcodes, now I'm trying to figure out from a UX point of view what would be the best way to display the location that matches the postcode the user enters.

Here's the two options I've come up with so far.

1) Either use Typehead example when the user types their postcode, make a call to the database and retrieve the location that matches, this could potentially return more then one location due to street names etc.

2) When the user has entered their postcode and clicked save, I then query the database return the locations and display them on popup modal allowing the user to further choose their location.

I like option 1 the most, however the query to the cloud database (Firebase) is roughly 1.5 seconds obviously this will be dependent on the users internet connection, I've also enabled the index on this given table, to make read request faster.

From a UX point of view, what would you recommend?

  • just a thought - is it possible that when user enters the city, street name, the pin code gets automatically populated? – Shruti Jog Feb 28 '17 at 5:10
  • Well they enter a postcode and once selected we keep track of the unique key associated with that postcode, we don't populate any other fields once they've selected their location. When they save their edits we then refer to this unique key and save it with their profile. – Code Ratchet Feb 28 '17 at 5:18
  • The n/w call seems like a bottleneck here. We cannot really rely on the user's connection speed. Also, the user can type pretty fast and even delete characters similarly, which may give you multiple snapshots to search against simultaneously. Moreover, their results may arrive asynchronously. I'll hate that as a user. – Shaishav Feb 28 '17 at 8:34
  • @Shaishav exactly my point, so I think maybe option would be a better solution.... from your experience would you be frustrated with seeing a modal expecting you to choose your location after you hit save or would you be ok with that? – Code Ratchet Feb 28 '17 at 9:51
  • @Shaishav option 2* – Code Ratchet Feb 28 '17 at 10:08

Allow users to enter postcode in a standard text field (don't use autocomplete). When postcode is entered show a map highlighting that area inside a callout (don't use modal dialog). Make sure the map has zoom-in & zoom-out options.

enter image description here

And then ask the user to select nearby location by clicking on the map - it will give you the accuracy of street names. When user clicks on the location, in the backend you can store the latitude & longitude locations.

enter image description here

| improve this answer | |

I might be misunderstanding you here but, you can have regex based verification on the input field for post codes. As soon as a possible valid post code is entered you can do your n/w call. On valid searches, show the location next to label or below the input field (in a different color so the user know its a success) and in case of error show a red warning text next to label (not a modal).

We also have the option of triggering the n/w call when the user switches to a different input field (i.e. the location input field loses focus).

| improve this answer | |

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.