6

I need the user to select the suburb that they live in. It's no good just entering any old text, it has to match one of the suburbs in my database.

My current implementation is an auto-complete text box in a form, where the user must select one of the auto-complete options. This strikes me as a bit confusing - it is not obvious that you can't just enter your own text and submit the form, but must select one of the autocomplete options.

Obviously the database list of suburbs is quite large, and there is not much space on a mobile device to display autocomplete options.

What is the best way to do this?

Improve this question
4
  • Are you developing a mobile site or an app? – dnbrv Jan 31 '12 at 13:04
  • I didn't think that there was that much of a distinction between them. I'm using jQuery Mobile at the moment if that makes any difference... – Daniel Alexiuc Jan 31 '12 at 15:27
  • It doesn't make much of a difference for my proposed solution but it does matter overall: controls are displayed differently in web apps vs native apps. – dnbrv Jan 31 '12 at 17:12
  • If we've answered your question, you can select the best solution so that if anyone comes across the same problem in the future, they know the course of action. – dnbrv Feb 7 '12 at 18:48
4

I would take a leaf out of the Hipmunk android mobile app for finding flights (and hotels). Pictures below are taken from the video on the Android Market page for this app.

On the initial screen is a box for departure and destination points.

enter image description here

You tap the box and a screen appears where you can start typing the name. A few recent selections may appear below already, in the event that you have 'been here before'.

enter image description here

As you type, a list of options appears underneath in a scrollable list of good finger height buttons for you to choose one.

enter image description here

If you tap on an item in the list it is selected immediately - or if you swipe/scroll the list, the virtual keyboard is hidden, giving you more space to view the list of items.

enter image description here

When you select an option you are immediately returned to the form where your selection is entered into the box.

enter image description here

If instead of selecting one from the list, you simply select done from the virtual keyboard, then the first item in the list is taken.

Note that this involves a number of steps in in order to get to the final name, which you might initially think seems more involved than necessary - but actually, provided the experience is seamless and frictionless, and the user doesn't have to think about anything, then users are happy to make one or two extra simple steps in a process.

You don't have to try and reduce the complexity down to a single click experience - you just have to make it easy. This approach also significantly reduces the clutter around the form itself because you are not needing to provide in-place selection.

Although these screenshots are taken from an app rather than a mobile website, a very similar process can still be achieved.

As another consideration - you may have a hierarchy of information such that it may make sense to select an Area first and then a Suburb, at which point you only need to provide a list of the suburbs that are appropriate for the given area. This depends on what other information you are gathering at the same time. The method above is simple enough that it may actually still be significantly easier to select a suburb rather than an area and then a suburb even though there are less options at each point.

Improve this answer
5
  • Roger, the OP might be dealing with a mobile site rather than an app. In that case, this pattern might not work. – dnbrv Jan 31 '12 at 13:04
  • @dnbrv hence my line: 'Although these screenshots are taken from an app rather than a mobile website, a very similar process can still be achieved.' – Roger Attrill Jan 31 '12 at 14:48
  • Oops. Selective reading... =) – dnbrv Jan 31 '12 at 14:49
  • Nicely illustrated. It seems so obvious now that pulling the search box and results out of the form is a very clear way to do it. Got any links to a Javascript widget that might implement this already? – Daniel Alexiuc Jan 31 '12 at 15:29
  • I ended up using SimpleDialog2 to achieve this. – Daniel Alexiuc Mar 6 '12 at 0:12
1

Implement something like real-time searching, like Spotlight on the iPhone. Have a search box with a box below that shows all the results that match what the user searches, and have visual feedback when the user taps on one of the results. Kinda like your idea with the autocomplete text box, but showing that it's actually a search box will make it more understandable.

Improve this answer
1
  • That's a great idea. And pulling the search box out of the form into its own popup or page seems better than trying to embed it in the form. – Daniel Alexiuc Jan 31 '12 at 15:09
0

Boroughs in Australia are identified by either their names or postal codes. Names can misspelled but postal codes are just 4 digits. In addition, your app asks for where people live and most adults should know their entire address.

Thus, your simplest solution is to prompt for the postal code, use AJAX to fetch the borough name in the background, and then display it next to/under the field.

You can find the database of postal code-to-name mappings on GeoNames or something similar.

Improve this answer
3
  • Asking for a postcode could be an alternative, although it's not as user friendly as asking for the suburb or locality. Also, postcodes do not have a one-to-one relationship with suburb names (e.g. 2570 belongs to twenty-two towns and suburbs around Camden, New South Wales). – Daniel Alexiuc Feb 1 '12 at 2:55
  • 1
    You can see how AusPost do it at auspost.com.au/apps/postcode.html – Erics Feb 3 '12 at 10:11
  • @DanielAlexiuc: How important is the borough name to the overall experience? And, in situations like with 2570, how large is the area covered by the same postal code? – dnbrv Feb 3 '12 at 15:30

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.