https://designnotes.blog.gov.uk/2017/04/20/were-building-an-autocomplete/

We’re building an autocomplete

We’re building an autocomplete. These are sometimes called typeaheads. They can help users answer questions, and help services get more consistent data.

We’ve started with one that will work really well for users providing country information – we’re calling it a country and territory picker. We will also look at other uses for autocompletes – things like picking a medical condition, or finding a document you have.

Our new country and territory picker looks like this:

A screenshot of the new country and territory picker

Existing autocompletes

There are already quite a few different autocompletes out there – so why are we building our own?

We looked through quite a few and found that the majority had issues with accessibility. Many didn’t even consider it. Those that concentrated on accessibility often had usability issues or were lacking in features.

We want our picker to have up to date data, so we also need it to work well with registers.

Our new picker does three things well:

  • makes it easy to pick a country
  • is accessible to all
  • uses accurate and up to date data

Making it easy to pick a country

We’ve designed our picker to make it really easy to pick a country (or territory). We let users type in the name they know, and we’ll try to correct typos too. Based on the principle of ‘Do the hard work to make it simple’ - if we have an idea what the user means, we can suggest an answer.

There are lots of different ways of saying you’re from the UK or one of its territories. Often, users will tell us they’re from Great Britain or England – where the service would like to know the country. We’ve made sure a whole range of aliases will work – for example: if the user types in UK, U.K, United, GB or Great, we can answer ‘United Kingdom’.

A screenshot showing UK synonyms on the country and territory picker

Services will be able to decide whether they’d like countries like Scotland or Wales to map to their parent country, or whether they should appear as separate countries. Similarly we support local names for countries (endonyms) – so if a user enters ‘Deutschland’ we can answer with ‘Germany’.

We’ve done 4 rounds of usability testing of our new picker and are really happy with how it’s working.

Making it accessible to all

Most existing autocompletes are not very accessible. The Home Office and DWP have done some great work to improve things in this area, and we’ve learned a lot of lessons from their autocomplete.

Our picker being tested with ZoomText at 12x magnification and with colour inversion
Our picker being tested with ZoomText at 12x magnification and with colour inversion

We’ve tested our picker in a range of assistive technologies and have built it from the ground up to work well for them. It’s been reviewed by the Digital Accessibility Centre, and we’re planning further usability testing with users with access needs to make sure it works for them. Once we’ve finished building it, we will book another accessibility test.

Using accurate and up to date data

Our picker uses the country register and territory register so has an accurate list of countries. It adds its own data about synonyms, endonyms and common typos. We’re looking at a way a way to keep this data up to date so that services can stay current with updates.

A screenshot of the country register

Next steps for us

We’re already well on our way with developing our picker.

It will be released in two forms:

  • A country-and-territory-specific autocomplete that links with registers (prototype code here)
  • A generic accessible autocomplete (code here)

We’ll be blogging shortly about our accessibility testing of the new picker, and some of the things we learned whilst designing and building it.

Try the picker

You can try a demo of the new picker here. (warning: hacky prototype code!)

We’re looking for services to trial the picker so we can see how it works for them - both for countries and as a generic autocomplete. If this sounds like you, get in touch with registerteam@digital.cabinet-office.gov.uk.

Follow Ed on Twitter and don't forget to sign up for email alerts.