Predictive text or dropdown. Which is better?

Which is best, predictive text (aka type-ahead), or a pre-populated dropdown? As ever the answer is ‘it depends’. However, I do sense that predictive text has become the default, even when it might not be the right thing to do. Which approach to take on the British Airways booking panel was the single longest running argument I had with colleagues at BA.

British Airways old booking panel

To choose where you wanted to fly from there was one dropdown for country and one for city which was populated according to the selected country. However, to choose where you wanted to fly to, it was predictive text. When the user started typing matches would show up for city, airport, or country names.

The funny thing was that time after time colleagues at BA asked why we didn’t change the dropdowns to predictive text. My boss, my team, colleagues in the business would all argue passionately for predictive text in the ‘From’ field. The reason that was odd was that on a number of occasions in usability labs customers would ask why we didn’t change the predictive text to dropdowns in the ‘To’ field. Not one customer ever asked for what my colleagues wanted. Yet when I explained this internally people found it very difficult to accept as it was so counter-intuitive to them.

So why was the panel designed that way? Good question. I’m not sure I can clearly articulate the original thinking, but here’s the post-rationalisation. If you are flying from somewhere the likelihood is that you know where you want to go from – or at least which country. It’s also likely that many customer don’t know which airports BA flies from, but by selecting the country they get a definitive list. It also means that you don’t have to be able to spell the name of an airport or city to get a hit, and if your favoured city isn’t in the list then you know for sure BA don’t go there. Those factors aren’t catered for in predictive text.

If you are flying to somewhere there’s more of chance that you’re not so familiar with the destination. If you know you want to go to Sofia you may not know which country it’s in. You might not even know what continent it’s on. So the predictive text is less constraining where a search might be more diverse.

In the usability labs customers liked the fact that didn’t have to think – so long as they knew their departure country.

By contrast, let’s take a look at what Ryanair do.

Ryanair booking panel

Both the ‘from’ and ‘to’ fields have a consistent design which in principle is good. You can pick the country, and then you pick the airport. But you can also just type something in. If you didn’t know which country Dusseldorf was in, and typed ‘Dus’, then Dusseldorf would show up. The customer gets the choice of which method to use.

I do recall a time when Ryanair had all destinations in a single dropdown which covered the entire page of a desktop screen. It was a bit much.

There is a sense in which pre-population merges into a hierarchical navigation. Amazon couldn’t have a single dropdown with all their products in it, but you can drill down through the product listings to get a relevant (more or less) set of results. It’s the same principle as the BA and Ryanair menus, just presented in a different context.

A simple rule of thumb is that if there is a ‘small’ set of possible choices, then use a pre-populated dropdown. If you use predictive text then a key issue is how you handle errors. You could disable progress unless a valid choice is made from the options displayed. This eliminates the possibility of the user getting an error from the search, but doesn’t help if they don’t know what the choices are or what the spelling is.

If you don’t force a valid choice then if the user enters an invalid search term it’s typical to see ‘did you mean’, as exemplified here by Amazon. I searched for ‘beetles red album’, and the system guessed that I wanted the ‘Beatles’ red album, but still allowed me to insist on ‘beetles’ if I really wanted to. This is useful.

Amazon response to search for ‘beetles red album’

It can also be useful, even if the user enters a valid search term, to show alternatives.

There is a Sydney in Australia and also one in Canada. There have been occasional stories in the press of travellers flying to the wrong one. Perhaps if their search engines had been clearer that there were other ‘Sydney’s the error might have been avoided.

There is a Grenada in the Caribbean and a Granada in Spain. Just because someone types in, or selects, a valid search term doesn’t necessarily mean that it’s the one they want.

The booking panel on ba.com now has predictive text

BA predictive text

This approach doesn’t wait until the user has hit the ‘enter’ button to let them know their search term isn’t recognised, and it makes helpful suggestions.

Summary

As is often the case with design there are some useful patterns out there, but which one you choose will depend on context.

If you have a limited number of defined choices use a dropdown. There’s no hard rule on how many is too many. That again can depend on context and how users react. Once you get to too many then you need to start categorising into a menu structure.

If you use predictive text consider whether you want to force a valid choice. Let the user know that their text is not recognised (where appropriate), and offer alternatives. You still often see a simple ‘no results’ as a consequence of a simple spelling error. Consider whether it’s better to alert the user to the issue before or after the search button is pressed.

The two approaches aren’t necessarily mutually exclusive, as the Ryanair example shows.

A little thought and consideration of the issues could make a significant difference to experience on many sites.

Here’s a comment from an ex-colleague, Allan Dade.

Predictive text can pip drop downs to the post if they are built correctly for screen readers. Drop-downs are a tad easier to build to standards as long as the number of ‘results’ are announced so that the visually impaired customer doesn’t have to. Longer dropdowns can cause display issues on mobile, while assistive choice can be disrupted by the way a user uses their device.

Booking cottages – lessons for ecommerce

Help your customer

Small things can make a difference as to whether a customer ends up spending money with you. Sometimes a small missing item of information that the site owner doesn’t think is important would have made the difference. Sometimes it’s just making the search function a bit more easy to use.

I have a dog. Sometimes, we go to pubs. Some pubs don’t allow dogs at all, some allow them outside, some inside. Some pub web sites state whether dogs are allowed or not, but many don’t. Whether they are or aren’t I’m not the only one who will have that question. Help your customer.

Searching for cottages

I want to book at cottage for about a week in the UK. I have the following requirements.

  • 4 adults
  • 1 dog
  • 2 bathrooms
  • near a pub
  • start on Sunday, return on Saturday

I went to Best of Suffolk.

Best of Suffolk search bar

The initial search on Best of Suffolk has limited parameters, which is ok if there is some good post-search filtering. There’s always a tension between making a search form really easy to start with but you then have to filter, versus more questions but more relevant results. One simple thing that the site doesn’t do is cookie the search parameters. This means that if you come back to the home page to start a new search you have to enter everything again from scratch. Best practice with just about any search is to pre-populate the last search so that people can just adjust what they need, and to use a persistent cookie so you can come back another time and pick up from where you left off.

Sykes Cottages has a few more parameters, which I find useful, and it’s not so many that it’s off-putting.  Being able to state the flexibility of your search date is especially useful. However, they don’t cookie the parameters either.

Sykes Cottages booking panel

Filtering results

Back at Best of Suffolk the initial display of search results is quite good. There are large pictures of each property, and some of the key features are displayed as icons and text allowing you to quickly identify those you might be interested in.

Best of Suffolk search result detail

However, there’s no mention of proximity to pubs, and I want a tailored list. There’s a slide-open filter section at the top of the results. They are nice big icons, again with text. Pubs and pets are included, and one of the options is a swimming pool. It’s not a requirement, but why not have a look? So I include that too.

Best of Suffolk filters

However, when I set these filters there are no results (although it doesn’t actually say that). The obvious thing to do is to de-select the swimming pool filter. Yet when I go to the filter panel, all of the filters have apparently already been de-selected. Users will often try different combinations of filters and sometimes won’t recall what the last combination was that they tried, so this just makes it a lot more work. This is basic stuff. I also can’t filter on the number of bathrooms, which most other cottage sites do allow.

It gets worse. Here is what the filters look like after an unsuccessful search. The original search parameters are there, and no filters are selected. I want to get the original set of results back so just click ‘search’. No results. What I suspect is happening is that the filters actually are selected, but not shown as selected. It’s desperately poor work. Doesn’t anyone check this stuff?

Best of Suffolk filters

Sykes have a more traditional filter panel to the left of the cottage listings. You can always see what options are selected. Each time you add a filter the page refreshes. Many sites do this, but there are two factors that make it awkward here. Firstly it’s slow, and secondly the page reloads to the top each time, forcing you to scroll down and re-locate the filters again.  It’s quite laborious to set a number of filters. Functionally at least it works but the experience could be better.

Sykes filter panel

Dates and pricing

I start again from the home page on Best of Suffolk and persist enough to find a property that I’m interested in, but there’s further frustration ahead. Although I’ve searched on specific dates for 4 people I have to enter the information again on the property page. The calendar defaults to the current month even though I entered dates in May. I don’t really see why anyone should have to persevere with this.

Best of Suffolk date picker

When I move the calendar to May I find that there are changeover days, and you can only stay for seven days. I don’t understand the business well enough to know why this is necessary – I get that it’s more efficient if you sell out, but it could unnecessarily constrain sales. What would make sense here would be a message that you could pick other dates, and they’d get back to you if the owner accepted (especially sensible if it’s close to the date and the property might remain empty). They could at least suggest that you phone if you want other dates. But they don’t.

Best of Suffolk date picker

Despite the good visual design, layout, and well-written content, the functional experience is enough to put customers off. I did try to reach out to someone who I think is a founder of Best of Suffolk on Twitter, to give feedback, but didn’t get a response.

By contrast, Sykes lets you specify your own dates. On the date picker, an ‘arrival date’ is still marked, and it’s not immediately clear what the meaning of this is. As shown in the image below I’m planning to arrive on the 3rd and leave on the 9th, and the 4th is a changeover day. After some playing around, I think if your stay spans two weeks with an ‘arrival date’ sometime during your stay then you pay for two weeks. The cottages are priced by the week, rather than by the day as hotels are. Given that that’s how the system operates at least Sykes lets me do what I want if I’m prepared to pay for it. An additional customer-friendly enhancement here would be a message saying ‘if you arrive one day later, you will save £x’.

Sykes date picker

Other issues

There are a number of sites selling cottage rentals, as you might expect. The likes of booking.com, Expedia, and Air BnB get in on the act, and they appear to have some of the same technical constraints imposed by the way the business works. Whether these are technical constraints or commercial process I don’t know.

There are pluses and minuses across sites.

A common frustration is being forced to choose one specific geographical area. This example is from cottages.com. If I want to choose Cornwall and Devon, I can’t. I have to do a search on each on individually. This can be solved by using tick boxes which would allow for multiple selections. Often when I’m using filters and there’s a long list I would rather be able to exclude one or two, rather than include lots, but I rarely find this function offered.

A nice touch on the Original Cottages site is the ability to filter by drive time from home to the cottage. However, it doesn’t work. When I first tried it I got a swirly thing indicating something was happening, and it didn’t go away. I had to refresh the page to make it stop. More recently it just results in no search results, whatever length of drive I enter.

Original Cottages distance filter

The wrap up

So there you have it. As with many usability issues the good and the bad aren’t specific to cottages. If you’re in the business think about how you can strike the right balance between initial search parameters and filters. Do you cookie the search parameters, and are you thinking about the dimensions most meaningful and relevant to your customers? Also, it’s not just about making sure that a customer can add something to a basket and press ‘buy now’ – you have to look at what happens if they want to change their mind in the process. And, quite simply, just make sure it works. How could anyone not do that?

Big ‘look at me’ messages don’t work if they are not under the relevant heading

I’ve been looking at the job sites of various companies. I searched for ‘UX’ on the Royal Mail site, and got the following result.

Royal Mail job search results

I looked at the list of results, and, as has happened on other sites, found myself wondering what these results had to do with ‘UX’. I then noticed the big message above the results, saying there was nothing to match my search criteria. I’ve seen this in user testing.

The user is focused on their task. My task is to look at search results, not to look at headings or other stuff on a page. If you really want to stand the best chance of getting someone to notice content that is not on their main path, use red.

Whether it’s a list of results for flights, shoes, mp3 players, or dead Roman emperors, the natural tendency is, not surprisingly, to look at the results. Use red, or position the content beneath the results heading if you want people to notice other content.