We've created Zuko, our next-generation form analytics platform. Explore Zuko

5 User Experience Mistakes Travel Sites Make

Big Brand Teardown

How Are User Experience Mistakes Affecting Travel Websites?

A study sponsored by Amadeus, a travel software provider, revealed a high degree of frustration among travellers regarding their online experience. Online activities included researching, booking and checking in.

Travellers going online in Brazil, Russia and India have the worst online experiences, with between 73% and 78% getting frustrated dealing with travel sites. However, frustrations in the US and UK are also rife.

42% of UK and 48% of US travellers experience frustration with online travel sites.

A separate study showed that cart abandonment is highest on travel sites, averaging 82.7% compared to 66.8% on fashion sites. Designing a better user experience (UX) is the key to increasing your conversions.

Here are 5 UX mistakes travel sites make that damage conversions:

  1. Creating Information Overload

  2. Sifting through “too much information” is the most frustrating part of performing travel related tasks online.

    Take a look at Travelodge’s homepage; an image takes up the main part of the page, a form with many options is set to the left hand side and there are three rows of links at the top of the page. It appears cluttered and doesn’t entice travellers to start their search.

    Travelodge homepage

    The result of my search shows me all the details of the hotel first and I have to scroll down to find out if a room is available and how much it costs. Just as they did on the homepage, Travelodge are failing to put the main call to action in front of the user.

    This continues as I select a room and start the checkout process. Travelodge ask you to customise your stay, pre-selecting the first option for you and thus forcing you to check each option. There are seven options, each with detailed explanations that push the final call to action, ‘Complete booking’, further down the page.

    Travelodge Customise your stay page

    Travelodge’s checkout is laborious too, particularly as it puts the onus on the user to scrutinise the booking details, rather than feeding it back to them in a way that doesn’t break their flow.

    TRavelodge checkout message 'Check your details'
    Travel Ecommerce Tip #1
    Keep users happy by removing clutter from your site and making key information more easily digestible.

    Fix with simple navigation and search

    Sites with better browsing options and navigation become consumer favourites. The Hotel Guru puts the search form front and centre on the homepage and clears away most distractions.

    Homepage of The Hotel Guru

    The form is simple, just start typing a destination and hit enter, you don’t even have to specify dates.

    The Hotel Guru bills itself as a guide to great hotels. The site shows a select number of hotels, having filtered out hotels that didn’t meet its standards already, reducing the amount of information its users have to compare.

    Fix with reassuring language

    Consumers are aware of dark patterns online, so are increasingly wary of dense or complicated text and pre-selected check-boxes. Dark patterns try to push users toward a particular action, such as paying extra or signing up to a mailing list, without the user noticing.

    Booking.com use simple, reassuring messages that stand out, such as the one below, “Don’t worry Book now but make changes later if something comes up”.

    Hotels.com message 'Don't worry, you can change details later.'

    Fix with skippable extras

    Interestingly, travellers also said they want to know what extras they could have. You need to find the balance between information overload, clutter and offering extras that travellers consider to be higher value.

    Placing options in a concertina that can be expanded keeps the page from looking too cluttered and daunting. Don’t pre-select any of the options, unless they’re already included in the price of the room. Lastly, allow users to continue to the checkout without having to scroll through the list.

  3. Not Adapting the Site to the User

  4. If visitors to your site can’t understand your pricing or have to perform tasks to make the site relevant to them it’s not serving them properly.

    53% of respondents to Triptease’s survey said they felt “frustrated by being shown prices in currencies other than theirs.

    It’s not enough to just let travellers change the currency themselves. They might not notice the feature so make it as easy as possible.

    Booking a room at The Plaza in New York is a constant battle to keep the site showing your currency. Moving on to the next step in the checkout causes it to default back into dollars.

    Great user experience should always seek to alleviate tasks for users and travel is all about location and the traveller’s physical environs.

    Travel Ecommerce Tip #2
    Help travellers out by detecting their location then delivering the most relevant options. Your site will instantly be more usable without any effort on the part of the user.

    Fix with local currency detection

    Make sure the prices are displayed in the currency the traveller is most familiar with. You can safely assume that for most that’s the currency of the country they’re searching from. Set the default currency using the visitor’s IP address.

    Hotels.com detect what country you’re in and select your currency but also allows you to the currency independently of the country.

    Hotels.com country and currency selector

    Fix with options by proximity

    The easyJet app detects where you are and suggests airports closest to you at the top of the ‘Fly from’ list.

    List of airports with local ones at the top
  5. Unintuitive Date Pickers

  6. Picking the date for your trip or stay is a major part of the booking process. It’s unfortunate then that many travel sites don’t get it right. However, lots of sites get this wrong.

    Although Booking.com has been touted as one of the most persuasive sites on the internet their date picker isn’t immediately that appealing.

    Booking.com's date picker

    It looks like a set of dropdowns for day or date and month. Making a selection in this format is more difficult because it lacks context. However, to the left of the dropdowns there’s a calendar icon. You can click on this to expand a calendar. The calendar appears to be secondary to the dropdowns and so could easily be missed.

    Travel Ecommerce Tip #3
    Don’t isolate dates i.e. a calendar shouldn’t only show June if June ends mid week. You should be able to see the first dates in July too.

    Triptease’s survey showed that travellers like to be shown dates around the ones that they’ve specified.

    71% of people agreed that being shown prices on dates either side of the ones they’ve selected is useful to them.”

    Booking.com have tried to avoid isolating dates by showing two months at once. Unfortunately, they commit another UX by not moving the dates on after I selected my Check-in date. See the screenshot below where Wednesday 8th of July is selected to check-in but the calendar for check-out shows June and July. All of June is redundant.

    Booking.com's date picker calendar showing June and July

    Fix with smart calendars

    Skyscanner allows flexible searching with week, month or cheapest-month-in-the-year views. It also greys out dates that have passed and shows up to two weeks of the next month. If I move the Depart calendar on the Return calendar automatically moves on.

    Skycanner date picker expanded

    Alternatively test calendars that allow travellers to specify the number of nights they need rather than using dates.

    Further reading

    Date Filters: Successful Calendar Design Patterns

    When and why should date pickers be used?

  7. Discount Code Positioning

  8. Although discount codes may seem like an enticement they very often work against you. If you place a field for discount codes prominently in the booking process it acts as a prompt for travellers to look for a code to enter.

    Dollar car rental put a field for discount codes in the initial search form. The text in the field sounds like a call to action, ‘Enter promo code’.

    Dollar cars' search form

    This is a major blow to the flow of the checkout, adding extra time and stress on the traveller who is now anxious to avail of the discount. Time spent away from your site means a greater chance they’ll get interrupted, distracted, find a better deal elsewhere or view your offer as worse value for money if they think they could get it cheaper.

    You could get rid of discount code offer altogether but you can also try a few alterations:

    Travel Ecommerce Tip #4
    Consider where you place discount code fields in your booking process, the language you use and who it’s displayed to e.g. only displaying a discount option to users who come through an affiliate page.

    Further reading

    The Perils of Voucher Codes

  9. Ignoring Mobile Devices

Mobile devices are driving increases in hotel and travel bookings.

Holiday bookings on mobile increased 20% in the first half of 2014.

The UK site of car rental company, Dollar, doesn’t have a mobile friendly option. It’s difficult to interact with the booking form and doesn’t tell my device to display a numeric keyboard for the field ‘Driver’s Age’.

Dollar cars UK mobile search form

Accommodation takes the largest share of mobile bookings and trends show that mobile facilitates last minute booking.

65% of same-day hotel bookings were made on mobile.

Travelodge show no comprehension of the device you’re currently browsing on, displaying a link for the mobile site and a call to action to download the app when I visited via desktop.

Travelodge top navigation
Travel Ecommerce Tip #5
Consider the context of travellers on the move and adapt your content for smaller screen sizes.

Fix with responsive content

Hipmunk are clever, they don’t send you to an app store from their desktop site. Instead, they’ve considered the context you’re browsing in and allow you to enter your phone number to get a link to the app sent to your mobile device – nifty!

Hipmunk enter phone number field

Fix with thumb-friendly design

eBookers’s mobile site is sparse, just what’s needed with large enough fields and tabs to be able to easily interact with the page using your fingers.

eBookers mobile site homepage

Further reading

How to Optimize Your Checkout for Mobile Devices

Success Stories

The best travel websites are continuously testing and optimising. By doing so many have achieved huge increases in their conversions rates. Check out some of the big optimisation successes these travel sites experienced: