After the success of Travel Technology Europe this month, we’ve been inspired to look into user experience on mobile travel sites.
As a frequent traveller, I’m a big fan of mobile sites for giving me quick access to information on the move. I rarely research on desktop; I prefer to use my commuting downtime to find deals. However, I’m also frequently disappointed by the complexity of retrieving the info I need.
I’ve focused on the mobile experience because this is crucial to travel ecommerce. In 2013, people booked nearly twice as much travel via tablets and smartphones than they did in the previous year and according to an eMarketer forecast, travel bookings via mobile comprised 10% of digital sales ($13.6bn).
According to HeBS Digital, more than 40% of online traffic related to travel queries comes from mobile devices (although this does include tablets) and a JiWire report claimed that 44% of travellers use their smartphone to research whilst traveling. In general, tablets are used for future booking and smartphones for on-the-go.
For this blog I’m focusing on five mobile sites that between them provide examples for good practice. Please note I’m talking about the features/functionality rather than the UI design implementation. It’s easy to find design faults with sites but for me the functionality is more important. If it works, great; if it doesn’t look so pretty, as long as the UI isn’t killing the interaction, I can live with it and I think most people do (though that’s no excuse not to improve the design).
The five sites are:
- Travel Republic
I had to strip it down to a handful because there are an incredible number and diversity of travel websites out there. I’m sure you could each give me more examples of good and bad UX experience from personal experience.
Please note I’m not saying these sites have mobile nailed. In fact some have some annoying elements that leave me rather surprised. For example, on Trivago when you expand the homepage deals to show hotel images, you can’t swipe on smartphones, you have to click the arrows. And if you click on ‘Show deal’ some of the partner sites aren’t mobile optimised landing pages – see below. Aagghh!!!
1. Simple, clean menu
The needs of mobile users are often quite distinct to desktop and tablet. On-the-go users generally have a sub-set of actions they want to complete and need (expect) a streamlined site that helps them achieve this with minimal effort.
Key to achieving this is a simple menu with clear options to choose from. Flybe is a good example of providing a basic but effective homepage with 4 primary CTAs. It immediately tells users what they can do and channels them to the most relevant function of the mobile site. I like the prominence of the Contact Us button – reassurance there is someone real there to help.
I’ve long argued the benefit of testing a similar approach for a generic desktop homepage – stop merchandising, start focusing people on the reason for their visit and what goals they want to achieve.
Travel Republic also has a simple slide-out menu for quick links to key areas of the mobile site. As this is contained in the site wide header, it’s always accessible.
2. Clear and efficient search
This is arguably the primary function for a mobile travel site – letting people search for the product they want quickly and using a simple UI design.
The search filters should enable users to refine their search based on essential criteria e.g. for hotels, ability to select location, star rating, price band, room type, check-in/out dates etc.
Hotels.com makes its mobile homepage all about the search with a clear CTA button (although it could be made full screen width). I did notice it has one of the UX problems that Chris Lake identified for travel sites in his Econsultancy blog “13 predictable UX problems on travel websites” – truncated dates. I’m not convinced it’s a major problem but it’s crazy not to use the full screen width to avoid this niggly visual error.
3. Clear value proposition and persuasion messaging
In his blog “Dark patterns and the travel industry”, David Jarvis of TUI gives examples of dark UX patterns used by travel companies to get greater wallet share from users, such as automatically adding travel insurance to every online transaction that you have to physically untick to avoid paying.
There is a healthy skepticism amongst consumers regarding hidden fees and inaccurate marketing of products online. So it’s important to nail your colours to the mast regarding price guarantees and service promises. Of the five sites, Travel Republic is by far the best with four key messages on the homepage that can be clicked to overlay more detail. This doesn’t obscure the primary CTA of “Book a Hotel”, although it does push down other CTAs making users scroll.
I think displaying the value proposition is a great persuasion technique but the UI design could be improved so the 3 primary CTAs aren’t obscured. For example, is that top image really necessary?
4. Country redirection & local content
For global brands, you need to be showing the most relevant content based on the current location of the user. The key benefit is that the user is shown relevant products, offers and promotions based on their current location. For example, consider a user visiting a website from London. The website could surface local content, such as latest deals on London hotels and flights from London to popular destinations.
Trivago does this well on the homepage using location to surface local hotels.
Of course you still need to ensure there is a generic search feature available to ensure you’re not restricting customer choice. Using the example above, the user in London may be travelling to Berlin for business and need to find a hotel in Berlin, so London centric content isn’t relevant in this case.
Hotels.com detects the user location and redirects to the most relevant local country subdomain e.g. UK visitor from London is taken to uk.hotels.com.
5. Promoting apps
Although the boundaries between native app and web app functionality are blurring, native apps still offer companies the opportunity to provide specific services quickly to on-the-go shoppers. The advantage of a native app is that it can still function even when a network connection isn’t available (with certain caveats e.g. you can’t access real-time content from the database without a connection).
On the mobile site, travel companies should make it obvious that an app is available and use device detection to ensure the most relevant version is linked e.g. only show the iOS app to iPhone users.
The example below is from Hotels.com. Interestingly, if you close your browser and then open a new session, you aren’t served the same app promotion. The website is clearly recognising that someone has seen the app banner and then not spamming them by continually showing it.
I’m not convinced the screen take-over is the best approach. There are examples from other mobile sites where a discreet banner is placed at the top of the mobile site. From a UX perspective, I think this is less intrusive and also serves as a stronger prompt. See the Flybe and Pinterest examples below.
Comments and questions
What do you think? Please drop by and share your comments, questions and experience. Please also share any relevant links you think readers would be interested in.
eMarketer article “Slow and steady continued gains for US digital travel sales”.
Mobile travel industry data from Blizzard Internet Marketing (US centric).
“Travel Marketing Statistics and Screens” blog by TrustYou.
UX travel blog by David Jarvis from TUI Travel, “Dark patterns and the travel industry”.
“The 25 best travel apps” featured in The Telegraph online.