In this article, I’ll look at the UX elements that go into a better mobile experience on travel sites, and some mistakes to avoid.

As with other sectors, mobile traffic to travel sites has been growing rapidly, and mobile now accounts for more than 41% of visits (according to Salecycle research). However, in contrast to retail, travel sites have been less successful in converting that traffic into bookings. Just 18.3% of sales come from mobile users.

share of traffic and sales by device - travel

This disparity can in part be explained by the length of the research phase for travel, as well as a booking process which is typically larger and more complex than the average ecommerce site.

These are challenges for travel sites, but they can be minimised with better user experience.

Speed matters

Let’s start with speed. Of course, Google has been pushing the importance of page speed for some time now, and it is now a ranking factor for mobile search.

This should be an incentive for travel sites to work on speeding up their pages, but more important is its role in the user experience.

Travel sites do face a challenges thanks to page size. With lots of options for users, and the tendency to use high quality imagery to appeal to visitors, travel sites can become slow.

Much can be about the perception of speed to users. For example, waiting for search results to appear can seem to be a slow process but sites can deal with it in different ways.

For example, last minute.com’s results can seem to take time to appear, even if users are entertained with facts about flamingos:

lastminute.com loading

Skyscanner takes a different approach, which seems faster for users. It loads the results page, and adds more results as they load.

This means that, rather than spending time looking at a load screen, users can start to view results. While they’re doing this, they’re not noticing the load time.

skyscanner load screen

Place site search front and centre

Mobile websites are often accessed while users are on the move, and with limited time to spare. They’re looking to complete a task quickly and easily, so travel sites need to focus on the search box.

This is the most common task users will carry out on a travel site, and a prominent search box with nice big fields makes it easier for users to get started (see the Booking.com homepage below).

booking.com homepage

Usable site search results

Search results pages on travel sites can be long and detailed, and searchers will need some help to digest the information in front of them, particularly on a smaller mobile screen.

Filters help here, allowing customers to narrow down their search, and see results that most closely match their needs around budget, location, review scores and other features.

priceline filters

Using maps also helps users to make a more informed decision about the results in front of them. They can see if their hotel is close to the beach, or in stumbling distance from the city’s best bars and restaurants.

priceline maps

Visual cues and different display formats for search results can also help users. For example, easyJet shows the available flights around the dates selected, so that travellers can pick the combination of flight time, date and price that best suits them.

It also highlights the cheapest options for the price-conscious shopper.

easy jet search results

Design for big thumbs

Accidental clicks waste time and lead to frustrated users, so it’s important to minimise the risk.

This means form fields, CTAs, and any clickable elements need to be the right size, and given enough space so that fields and links aren’t too close together.

One common issue with travel sites is the calendar tool, which can be a source of frustration.

Good calendar tools should be large enough for users’ thumbs. Thomas Cook (below) makes it easy to select dates without error. They should also default to a return date which is later than the departure date selected. I still see a few sites which fail to do this.

thomas cook calendar

Put function before design

Travel sites like to use imagery and design to catch the visitor’s eye, but for mobile users it’s important to prioritise speed and functionality.

Take Booking.com. It’s not the most beautifully designed site, but it’s focused on its main purpose, finding hotels and making it easy to book.

It’s particularly good at using screen space to convey every piece of information the customer might need to make a decision.

Search results manage to convey lots of information, such as availability, average rating, and distance from the city centre.

booking.com listings

The reservation page works in the same way, offering information which can reassure customers just as they’re about to book.

The information is presented without cluttering the page, and  reminds users of some of the key selling points, and makes it clear that users can press reserve without being charged there and then.

booking.com listing

Provide shortcuts to reduce the workload

The travel booking process can be long, and anything which can reduce the amount of effort required from users can help to keep customers on-site.

Even small touches can make a difference, such as using the phone’s features to reduce effort.

For example, lastminute.com presents users with the smartphone’s numerical keyboard for appropriate form fields like birth dates and credit card numbers. It saves the user a little time and effort and thus reduces friction.

lastminute keyboard

Address entry tools can also be used to speed up the booking process, as well as reducing the chance that customers will make a mistake.

hotel address field

Payment is a key point of friction in the booking process, and alternative payment options can help here (as can saved details for repeat customers).

Rather than entering address and payment card details, users just need to enter a username and password, meaning the effort required to checkout on mobile is much reduced.

lastminute visa checkout

Focus on forms

Booking requires lots of form filling, which can be a pain anywhere, but is especially difficult on a smaller mobile screen.

Anything which can reduce user effort here can help to reduce drop outs, such as the address and payment shortcuts I’ve already mentioned.

There are other ways to improve forms, including:

  • Larger form fields to minimise errors.
  • Removing unnecessary form fields. Simply reducing form fields doesn’t necessarily work in every context but it does pay to review forms and see if user effort can be minimised.
  • Provide a progress indicator. This helps to show the user where they are in the process and how much is left to do. It can reduce frustration and help persuade customers to persevere.
  • Break up forms to make them more manageable. Breaking the process up into smaller phases can seem like less work than placing forms in one long page.
  • Use in-line validation and feedback. Rather than wait until customers submit the form, or a section of it before they’re informed of errors made, in-line validation can provide instant feedback as users complete form fields.

booking.com microcopy

Econsultancy runs usability training and subscribers can download our Mobile User Design Best Practice Guide.

The Festival of Marketing 2018, London 10-11 October, will feature speakers from Lastminute.com and Expedia.