Not just an input box
by Josh Wigmore, Chief Product Officer at what3words
You might not have ever associated HTML input boxes with being complicated. Yes — they’re functional for getting user input into a form, and yes — they vary from free text to suggested drop-down lists as you type, but generally, they’re just an input field.
The what3words AutoSuggest component proved different.
But first, what exactly is what3words Autosuggest?
It’s an API function that our customers use to return a set of intelligent results when a user partially or fully types in a what3words address.
Our component wraps this into:
- An input field to allow entry of a what3words address in an application search box
- An input field in a checkout page
- Any scenario where a what3words address needs to be captured
We built this very field into the what3words app and it powers our e-commerce plugins to make it easy for businesses to add a what3words field to their checkout page. However, to define its behavior from a UX perspective, we had to consider many more details about input fields than we initially thought.
We only want clean data
The purpose of a what3words input box is to capture not just any what3words address, but the what3words address the user intended. There are 57 trillion what3words addresses and our AutoSuggest displays information to the user to help them validate the right one.
Our standard AutoSuggest component displays three results based on different factors to show the nearest matches possible. We also show ‘nearest place information’ and a country flag to give a what3words address context. This is to help users quickly differentiate between what3words addresses that look similar but are indeed very different once you realise they are on different continents. ///index.home.raft and ///index.homes.raft is one example of this — the former is in London, UK, while the latter is in North Carolina, USA.
In certain situations, like an e-commerce checkout, we increase the likelihood of an accurate match by clipping the area of results to the shipping country. So if we clip to the UK, the results would look like this:
These features increase the chances of the correct what3words address appearing in the top three results, in particular when a typing error is made. For example, a slip of the finger could easily hit R instead of F when typing raft on a QWERTY keyboard, but thanks to AutoSuggest, you can see that ///index.home.raft still appears as the top result, which is likely what the user meant.
To validate or not to validate?
Once the user has entered a full or partial address, there are a few actions they may take:
- Hit Enter/Return
- Click out of the input box if using a mouse
- Use the arrow keys to select a result and hit Enter to select
For each of these scenarios, we had to decide whether or not to validate the user’s entry, depending on if it’s a partial match or an exact match for a result. This is where our box differs from many input boxes. For example, in a shipping country select box like below, once the user has typed the first few letters, it’s likely that the possible results will be fairly limited — there is a relatively small number of countries that share the same first few letters. In this case, the box would likely auto-complete the entered value to match the nearest result, and accept that as the validated value.
With 57 trillion what3words addresses, the potential for error is too high for us to assume that a partial address matches one of the three suggestions listed, so we blank out the input on any of the above actions. If an incorrect match was passed, that could mean a lot of time going to waste if the location was passed to a courier. We would much rather be safe than sorry: no what3words address is better than an inaccurate one.
The only exception to this rule for validation is with an exact match. If the entered value exactly matches one of the three results displayed, we validate it on any of the listed actions above. Again, this is based on its likelihood of being correct. Given the number of possible combinations and the fact that similar what3words addresses are placed as far apart as possible across the world, we can be pretty certain this is correct — so validating it makes sense.
What’s next?
The AutoSuggest component works well and now we would like integrating it to be even easier for our customers. For example, in some checkout pages, adding a what3words input field isn’t possible, due to the length of the existing form on certain screens or a desire to avoid user fatigue with additional fields.
We’re looking forward to applying our learnings from creating this component and building a plugin to overlay on any form input field. This means that if the regex detects a certain what3words pattern, the same input helpers would appear. It would ensure clean what3words data is entered without users having to add a field to their form.
Try it out
To check out how what3words AutoSuggest works and give it a go, check out our developer playground. We’d love to hear your feedback and how you’re using this component!
