A good user interface is like an attentive guide: it anticipates where I want to go and is half a step ahead of me when taking me there.

I had this image in mind when thinking of how to improve the user experience of a minute interaction that we encounter on every website: filling in the postal code field of a form.

This is what we came up with:

postal_code_visualization_380

enter a 4-digit postal code, e.g. 8000

To make it happen, we first developed a Map Widget that allows the mapping of geographical coordinates (latitude/longitude coordinates) on an image file. The image can show any country or geographical area.

The rest is easy:

  • when the user enters 8 as the first digit, move the marker to the average geographical position of all cities with a postal code that starts with 8
  • when the users enters 0 as the second digit, move the marker to the average geographical position of all cities with a postal code that starts with 80
  • and so on, step by step, until the marker zeroes in on the actual city.

 

Would you like to see this implemented for your country / website?
Contact us!

Download: Postal Codes Switzerland (detail and average)

Credits

Eternit (Schweiz) AG, Christine Dietrich – client
/DEPARTMENT, Toma Perret – CD and layout of swisspearl.ch
Freelancers:
nitelfreelance – Map Widget
danskyhigh – CSS wizard, motion design