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:
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
