6

Let's suppose this simple form:

enter image description here

So, the user is expected to enter the keywords of the meeting's full address.
While typing, suggestions are displayed (autocomplete feature).
Here's an example:

enter image description here

As the user only selects some keywords, in 99% of cases, the user would select the right address in the list.
That's fine, but what about other 1% that would just valid the form without selecting an item in the list, since they might have typed a complete address in one shot.

Why do I expect user to select the address even if he well typed it?
Because when selecting, I have a background process that associates the latitude/longitude with the chosen complete address.

I don't want user to bypass this mapping, otherwise the meeting couldn't be geolocalized.

How should I format the form so that the user understands that a selection is mandatory, in order to associate the latitude/longitude?

I could by default select the first selection (in case where the typed address matched), but there might be some cases where the typed address would not be fully complete, leading to few possible results.

UPDATE------ Actually, the real form is this: (on a mobile device since a native app)

enter image description here

What may you suggest to increase UX (despite the design, not made yet :))? I strictly don't want to let the user clicks on Next before selecting a valid address.

When clicking on the item "New York Times Plaza", the value is put in the input text, in background the latitude/longitude is set, and therefore the user should click on "Next":

enter image description here

  • 3
    What if you dont have the address they are looking for? – Mervin Johnsingh Oct 11 '14 at 19:47
  • It's connected to the Google Place API's : developers.google.com/places/documentation, so any 'valid' address should be selectable. – Mik378 Oct 11 '14 at 19:47
  • 3
    @Mik378: If that is the same database used when looking for addresses in Google Maps, support for "valid" addresses often gets somewhat shaky as soon as the address is not reachable by car (e.g. on a road reserved for pedestrians) or at a road outside of a town (e.g. in a forest, or on a mountain - roads there can have names, too) in my experience. – O. R. Mapper Oct 12 '14 at 18:01
11

I think the simplest solution in this case would be to take the address the user has entered and map it to the closest matching location and let them know so that they are aware of the mapping and can approve or reject the address.

Amazon does the same where if they dont find an address, they validate it and show the suggested address and let the user confirm it

enter image description here

If there are multiple mappings, list the addresses and ask the user to confirm the closest one like how google maps does it

enter image description here

  • 1
    Actually, my form is a multi-form whose one step is: Meeting Address. I have three elements in it: the input text (autocomplete) Previous and Next buttons. So if I well figured out, I should display the final suggestions (in case where the user didn't select) as soon as the user clicks on Next? – Mik378 Oct 11 '14 at 20:07
4

I will add my 2 cents that I think give a direct answer to your question (btw sorry about my english):

Be specific: If you want the user to do something, just tell them. So you could change "Meeting address" for "Search the meeting address and select an option below".

Divide and Conquer : Users like to be lazy. You could divide the search input in 3 fields (place, city, state, probably country is not necessary) because it is more laborious to the user to change and type between inputs than writing everything in the same one, they will be more likely to select some prediction.

Visual matching: The color of the order is the same and the action you want to get from them.

Gave them no other option: I'm not a mobile devoper, but I suppose you colud disable the Next button until they choose an option.

enter image description here

  • "You could divide the search input in 3 fields (place, city, state, probably country is not necessary) because it is more laborous to the user to change and type between inputs intead of writing everything in the same one" => isn't your sentence contradictory? – Mik378 Oct 12 '14 at 7:16
  • Why? Maybe my grammar is not helping. I meant that is more laborious to change to another input box for each parameter rather than just writing them in the same box separating them with spaces. – Alejandro Veltri Oct 12 '14 at 7:26
  • I don't experiment with it yet, but if google API let you differentiate each type of parameter (city, state,etc) to do the query (i.e. if it's not just a concatenated string) it will also throw better results. – Alejandro Veltri Oct 12 '14 at 7:32
3

I have designed a typeahead recently with UX in mind, which, I have to admit, was more challenging than I've expected. I couldn't find a single component out there that ticks all the boxes, although some only miss by a little.

Anyhow, if I understand the problem correctly, then you should really always have a match selected on the match list, like so:

An image showing an input field with some query entered, and one of the matches being highlighted

Whenever the user leaves the field (blur event), whether by pressing Enter, Tab or clicking outside the field, the selected match (and there must be one) becomes the field value. This type of behaviour is often described as force selection.

  • "the selected match (and there must be one)" => actually, it's for a mobile application, so there is no highlighting, since no mouse or keyboard. – Mik378 Oct 11 '14 at 21:22
  • I've just updated the OP with my real screen. – Mik378 Oct 11 '14 at 21:27
  • What I've done is to hide the next button until the latitude/longitude is set, forcing the user to select an item in the suggestions list. Of course, my label would say: "please select an item" – Mik378 Oct 12 '14 at 0:14
1

Don't make them 'select' it. If I'm asking you for directions to a meeting location and you tell me "It's on Washington St across from the Shell Station." And you tell me "Don't you mean it's on Washington St NEXT to the Shell Station!?", you're being rude. Think of your interactions with people like real conversations. If a waiter is asking you too many questions about what you want on your salad, for example, he's being rude. Try to be as polite as possible :)

So I think what you're saying is good. If he enters in half of an address and your suggestion pops below it, and he submits the query without selecting it, assume that was what he wanted. Maybe indicate on the next page the location you're suggesting. So if he searched '1337 Elite Ave NYC' on the next page, you write "1337 Elite Avenue, New York, NY 12345." Give him some indication what he's found.

And now a brief pause from our answer for a UX tip! Try to be as accommodating to people's answers as possible. In your question, you used New York as a location. Substitute the string NYC with New York in your queries. A lot of people are going to enter NYC when thinking of New York, for example. And now, back to your answer.

Try to get at what people are saying/meaning without quibbling over details. If they're looking at a map of Kansas instead of Idaho 1% of the time, hopefully that indicates that they need to change the address. And you do a good job of signaling that there COULD BE two addresses by offering your drop down suggestions. Just go with what people are TRYING to say... now with what they literally have to select, especially if you think it's a very rare error. Correct the unformatted query for them. Recognize colloquial terms in your areas of operation, such as 'NYC.'

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.