Is your site ready for take-off? Design insights from the travel industry

Is your site ready for takeoff? UX insights from the travel industry

We’ve been working a lot with airlines in the past year to improve the usability and accessibility of various airline websites. A critical part of these projects has involved transactional flows (e.g. booking, changing a flight, and checking in).

Our focus has been user research with people with disabilities, reviewing existing pages to provide guidance around UX and accessibility, and re-designing flows to improve clarity of information, access, and booking completion rates, while reducing call center load.

Here are some key UX insights we gained during these projects. While these insights may be specific to airline digital experiences, they can easily apply to most ecommerce and digital retail experiences.

Minimize distractions

We frequently hear in usability testing that booking travel is a stressful experience. This can be attributed to several factors: imposed time limits of online booking, ensuring form fields are filled in correctly, and the big costs associated with the purchase. While these factors are generally tied to business and industry requirements, minimizing distraction where possible can really ease stress and smooth the process.

Minimize distractions by…

  • Ensuring copy is short, succinct, and clear
  • Removing advertisements around deals, promotions, or loyalty programs while the user is completing a transactional flow
  • Providing clarifying information in context rather than taking the user out of the flow they are trying to complete
  • Removing time limits unless they are tied to the logistics of the flight (e.g. it is departing imminently)
Porter provides clarifying information while passengers fill out the form field

Porter provides clarifying information while passengers fill out the form field

Prioritize actions

Booking a flight or checking into a flight is a process. There is a beginning and end state and we aim to improve the experience for users by making it easier to reach that end state and reduce uncertainty along the way.

Having clearly labeled and visible calls to action (CTAs) to proceed to the next step or return to the previous step is vital to this success. We’ve heard research participants express uncertainty or dissatisfaction at vaguely labeled “continue” CTAs. People prefer to know exactly what to expect on the next page and want to proceed confidently. While more verbose, an explicit CTA like “Proceed to Seat Selection” is always regarded positively during usability testing.

Example of clear CTA

A primary CTA with a clear, exact label for what the user can expect on the next screen.

Be consistent

Consistency makes it easier to learn how to use a new interface, and will improve completion and conversion rates. Consistency does not mean making everything look and behave the same, however. It requires thought about the different elements on a page and the purpose they serve and organizing those elements with intent.

Here are some ways to meaningfully improve the consistency of ecommerce processes.

  • Always reserve the same space on the page for an element that does the same thing across pages – e.g. always put a progress bar in the same spot across pages, always put the continue or primary CTA in the same spot
Examples of a progress bar

The progress bar and flight information is always at the top of each page of the booking flow on Porter’s website

  • Give the same type of object a consistent visual treatment; e.g. do not change the colour, size, or shape of your primary CTA across pages, unless it is a meaningful change (you may want your primary CTA on the last page of the process to be slightly different from the primary CTA on preceding pages and that’s ok because it serves to visually signify to the user that they’ve completed the process)
  • Show that different elements have the same function using the same interaction – e.g. if you treat informational content (e.g. baggage information) by nesting it in a drop down, you can use the same interaction pattern for other informational content such as check in times or fare type differences
Example of a consistent interaction pattern

The different types of service requests all live in accordions with the same interaction pattern

Be transparent and clear with price breakdowns

Numbers and price breakdowns are intimidating to users. This is exacerbated when there are many fees associated with the cost of something. Changing an existing flight and dealing with negative numbers, credit shells, and extra fees is downright daunting.

Here are a few tips to make this a less daunting part of the process.

  • Ensure price breakdowns are always visible and in the same place throughout the entire flow – this ties back to consistency
  • Do not hide costs – serve all the fees up to the user and use visual hierarchy to indicate which fees are grouped together but do not use accordions or drop downs to hide fees
Example of a breakdown of all charges

Porter Airlines has a summary page before the payment page where the user can check all the fees and charges and make sure they understand the details of the transaction before making a payment. All charges are visible by default, although the user can minimize them if they choose.

  • If a user is completing a change/cancel flight flow, provide brief explanations of extra fees incurred or credit shells applied, in the context of the price breakdown
  • If using a symbol to denote a transaction (e.g. both -$80 and $80CR may indicate how much the user is being refunded) always provide a contextual explanation for that symbol – do not assume users will inherently understand it

Be accessible

Full web accessibility is now a Department of Transportation (DOT) legal mandate for all air carriers traveling into the United States. It is also an AODA legal requirement for any retailer or organization in Ontario with more than 50 employees.

Here are some tips to ensure transactional flows are accessible.

  • A user can extend any imposed time limit
  • Colour contrast for page content is meeting WCAG 2.0 Level AA contrast ratios
  • Page elements like headings, copy, images, tables, buttons, and form fields are semantically coded and nested to reflect the page hierarchy in the HTML code
  • Pages can be navigated by keyboard or screen reader without loss of information or difficulty
  • Accessible browser plug ins like “Dark Reader” or “High Contrast” render the website faithfully
  • Updates to information (e.g. the total cost going up after selecting insurance or picking a different flight) are perceivable to the user, regardless of assistive technology being used

We hope these UX insights will help you design a better digital service experience for your guests, shoppers, or clients.

Download the infographic