The journey for an accessible booking form (Part 1)
Working in UX has ruined me.
Like a weathered chef that can no longer enjoy a meal at his neighbourhood’s local diner. He can tell if the fish is fresh, how he would get the potatoes crispier or how much oregano he would use on the chicken. Meanwhile, everyone around him is munching away in joy and drinking their milkshakes.
In a similar way I can no longer enjoy browsing. My mind immediately sees things the average user wouldn’t even care about. Contrast, typography, accessibility. Visiting a website is no longer a subconscious task for me. I can no longer put my mind in cruise control and browse mindlessly. Working in UX has ruined me.
But, unlike the chef, that can restrict his visits to Michelin level restaurants and constantly enjoy good food, I cannot restrict my visits when I use the web. Even if I tried to stick to my favourite apps and websites. The nature of our everyday life (and work) brings me, every-now and then, across an app or a website that looks ever so… “off”.
We all have our weak moments. Oftentimes, things like user testing and, *gasp*, accessibility take a backseat to managerial or business decisions. Tight deadlines, budgets and the human factor often become an obstacle to what should be a tactic early on into the design & development stages.
So, working in UX has taught me a couple of things and it has led me to many questions. One of them — and indeed my favourite one — is “How would an older person use this?”. Someone that cannot read tiny text or have pinpoint accuracy with a mouse. Someone without thin, nimble fingers or the ability to use quick gestures on a tiny screen.
Old people are people too
There’s an argument out there that the web is catering for millennials, anyone between 18 to mid 30’s. The web dedicates itself to young eyes, nimble fingers and an aptitude for technology. The majority of the websites and apps out there are trying to attract the young, the hip and the cool.
But despite all this, there’s another demographic that doesn’t get much attention. Seniors and people with disabilities. Which is quite surprising since up to 73% of people aged 45 to 65+ are now using the internet daily or almost daily. Not to mention that only 25% of disabled adults has never used the internet in 2016. Still a big number of course but it’s diminishing yearly.
So where are the websites that cater to that audience as well? No. I didn’t say designed for that audience. Where’s the alternative controls or options? Where’s the easy to read text and the intuitive forms?
We are under the impression that an accessible website needs to look like a fisher price toy or a .gov website. There’s no reason to limit ourselves. We can have beautifully designed interfaces that cater to all audiences. Unifying age, background and motor skills.
Finally, the case for airlines
Online travel booking is big business. At least 46% of travellers now do their travel booking directly with the service provider. Let’s take as an example Airline websites. It is unthinkable nowadays to find one without a booking form. Yet, how many of these websites have actual — easy-to-use — forms and interfaces?
I am going to nitpick on a few airline websites and see what they are doing wrong or right.
Disclaimer: The below comments are used to draw examples on how a UI could be better and they are not related to the quality and level of service of the airlines depicted here.
Visibility of elements
Do you suffer from presbyopia? Do you have a hard time reading small print or you often suffer from eyestrain and headaches? Here at Airplanes & Luggage Ltd. we prefer our booking forms to be extra tiny. In fact, if it doesn’t feel like an eye test, we are not doing it right.
Examples
British Airways
At a whooping 12px font-size BA’s desktop is tiny by everyone’s standards.
Which is a bit sad, considering the space the form could occupy if they utilised some of the space available. This of course is mainly due to the fact that all the main content is restricted to a 960px grid (blast from the past?).
Delta
There’s a stereotype that says “Everything is bigger in the USA”. Seems like whoever makes the forms over at Delta has missed the memo.
Delta’s main content area restricts itself to a minimalistic 930px grid. With the booking form occupying less than half of that space.
It features a robust skeuomorphic design, tiny form fields and an incredible 11px font-size. That “Advanced Search” below the main button? Ten whole pixels. You need pinpoint accuracy to click on that, which stresses even more how “advanced” of a user you must be.
The fun continues on the date picker. Where the font-size remains the same. Only this time the contrast is lower, with some lovely thin numbers and a weird text-shadow thing inducing flashbacks from 2003.
Easyjet
Easyjet is a weird case. They, too, have fallen for the tiny font-size trap. Yet their booking process indicates an effort of trying to make things better, at least on some level.
I always find it weird when I see font-size values in odd numbers. Easyjet’s choice of 13px is an odd one (in my eyes) and it feels that they went shy off 14px because something was breaking somewhere.
Easyjet takes it one step further and they display their own deals in that same tiny font-size.
It does some things right though. In an effort that looks a lot like retrofitting, the stepper controls look big and easy to click on.
But the real surprise comes when it’s time to input the date.
As soon as you click in the “Departing” or “Returning” field you a huge calendar form comes in from the right.
It has high contrast on the available dates and an easy layout showing at least 3 months (depending on browser window size). It also has a very noticeable orange highlight making the process much easier than usual.
But, the font-size remains the same. Not to mention those top two eye-straining options.
Some more examples
Tiny font-size seems to be an industry favourite at the moment. Which is disappointing. Especially considering how much free space most of these forms have.
You would expect these companies would want users to find flights in the easiest way possible. Yet “hero” images occupy that space, to remind us how great “x-country” is to visit or to overload the user with a large array of deals plastered all over.
If you are going to occupy the page with a big image, the least you can do is show me how great your airplanes are and how comfy my 24-hour flight is going to be.
It feels like a missed opportunity.
Who does it well
Southwest Airlines
Oh. My. God. Look at that form. Have you seen a more visible and pleasant to look at form? Southwest is absolutely nailing its booking process by making all the main elements of the form super visible and clickable.
Still restricted in a 960px grid, but cleverly aligned. The form is using an incredible 28px font-size (almost an overkill but I ain’t complaining). It is really hard to miss.
It is a genuine effort to ensure everyone can select the main options easy and accurately without any issues.
Of course, as far as forms go, it is not perfect. The form is using abbreviations to an extreme and does expect users to immediately recognise the airport IATA codes. Dates can be confusing for those without a familiarity to the American system and there are some options that could be helpful if they were bigger (Round trip / One way options are tiny radio buttons at 13px).
Still, a great step in the right direction. Which makes me think that with a little more polishing this could be a top booking form. Leading by example on how things can be beautifully designed and highly accessible at the same time.
Ryanair
I hear you groan. But yes. Europe’s most hated budget airline actually has a very good booking form. A two field form is presented to the visitor with a big “Continue” button at the end of it. The logic is simple. Start slow and get into it progressively.
The fonts are bold and big (18px) and the options are immediately available when you click on the two fields.
As you select destinations the form gets bigger and it almost guides your hand in selecting the dates of your choosing.
If you select a destination that does not match the departure airport it cleverly suggests which airport you need to choose. Clever, though I am thinking that a simple option like “London(All)” as a departure option could have also fixed this.
The form is fully responsive and utilises the full available space on smaller screens. That which to us seems like common sense yet is so uncommon to encounter.
Of course Ryanair has its own skeletons in the proverbial closet. What with their questionable charges and some “dark UX” patterns being done in the past. A “first appearances matter” friendly look and an easy to book process is necessary to surpass all that.
Screen readers and keyboard navigation
A big part of accessible websites and web apps is how well they work with screen readers or that plain ol’ “Tab” button on the keyboard. Users that face difficulties with using a mouse or have low vision tend to rely on tools like that in order to browse through a website’s available options. But how do airline websites fare on that front? Let’s have a look at the most glaring errors.
British Airways
I am starting with BA again because it impressed me. In a confusing way.
BA rightly offers a “Skip to main content” option. This immediately takes you to the form as soon as you press enter and you can tab around the form just fine.
“Skip to content” options are a suggested practice and they highly favour accessibility.
However, if you need a dropdown option or just want to peruse on the available options before the form… things get tricky.
Let’s say you want to check what is under the “Information” option. You will have to tab through every available dropdown at the top of the page (seriously guys, role=”menubar” try it — more on that later).
And if you want to continue Tabbing towards the form? After 60+ (lost count) tab presses you can navigate through all the fields with ease and get to where you want. I don’t need to describe what happens once you turn on Voice Over on the Mac. (“linklinklinklinklinklinklinklinklinklinklink”)
BA had some further issues beyond that. For example, if you don’t select a date with the mouse and decide to type a month with a zero (04) and instead type the number (4) you would end up in an error page. The site would not recognise the date you put in.
But surely, that must be a rare occurrence right? Well, think again.
Pegasus airlines
Oh boy. First of all there seems to be no focus at all on the page. Tabbing through I could not see what was selected and I could get a vague idea only by looking at the url every time I pressed TAB. Form elements did not show any selection status and even if they did the behaviour changed on things like Dropdowns etc.
Quite weird, considering the whole website is responsive so it has been touched within the last 3 years surely.
The problem seemed to get a bit better whilst using Voice Over since the software outlines any links on the page. But then something weird happened. The Voice Over started reading back all the options and dates in the dropdowns without them being open.
As a result, in order to reach that “Search cheap flights” button I had to tab through every available option and date inside the weird mess of spans and table cells.
Ouch.
Wizz Air
A wonderfully clean and legible form. A horrible Tab-able experience.
When you come across a UI that looks old and doesn’t work you sorta think “Ok, well it’s not working because it is old. I’ll probably not use it and move on with my life”. But when you come across a UI that is aesthetically pleasing and it works… half-assedly, you rage.
Well Wizz has made a wonderful achievement of the latter.
The form looks good. It’s the first thing you focus when you press Tab on the page. It has solid contrast, big fields and legible text.
Not too shabby in general.
This whole smoke-and-mirrors image dissipates as soon as you start tabbing.
Oh boy, where to begin:
- When you start typing in the fields you see your available options as you type on the right (good). However you can not use the keyboard in any way, that I’ve found, to navigate through these options and select the airport.
2. Choosing a date is impossible. Again, you see the available dates but you cannot navigate throughout them. Worst of all, you cannot even type your date as an alternative, the field is not editable.
3. You guessed it, none of the options for passengers are available to navigate with a keyboard.
Consensus: If you’re booking with Wizz you better have a mouse and full control of your limbs.
A special mention: Turkish Airlines
Turkish Airlines’ actual booking page is not bad at all. If anything, it jumps you straight into the form and gets you started on the right foot with the first press of the TAB button.
However, there is a behaviour, right before you reach that form which is counter intuitive. When you first visit Turkish Airlines, at least from the UK, you land in an “International” page that lets you choose which version of the website you want to go onto. This page is highly non accessible.
You cannot browse the options with the keyboard and you do not see any active selections. Also albeit the options are numerous with all the countries Turkish Airlines serve, the majority of them lead you to the “International” version that has English. Which makes sense since there’s no chance they’ve localised their website for all 200+ languages.
Would it not be better, for first impressions and accessibility, to just detect where the user is visiting from and immediately land them on the version of your site they are most likely to use? That way they can use the booking form right away, potentially in a language that matches their locale as well.
Cool photo of a random girl looking at some birds though.
Who does it well
Lufthansa
Now, don’t get me wrong. Lufthansa falls for the “small font” trap (nobody’s perfect I guess) but they are doing some things very right.
The form is highly Tab-able, easy to navigate back and forth the options and choose what you want quite easily. It is really the behaviour you would expect from a properly designed and developed booking form.
1x Gold star for that.
They do, however, something extra that gives them at least an extra 4x Gold stars.
Allow me to demonstrate:
Yes, every section of the website (even the footer) is Tab-able and skippable. Just brilliant.
Kayak & Skyscanner
I am cheating a little bit since these two are not “technically” airline websites. Closer to travel booking if anything. But they offer the same exact functionality as those websites above so they are worth a mention.
Both Kayak & Skyscanner are nailing the usability on their forms.
Kayak
If I had to describe Kayak I would call it “Simple & Straightforward”. A logical form that occupies as much space as possible. Nice big text and fully keyboard accessible. It’s as straightforward as it gets and it works. Simple as that.
Could things still be improved? Sure, the options you focus on (including the “Search” button) could do with being more visible. Give us a subtle glow, an underline, something. Smaller options, as well, do tend to blend with the background. But at its core it does not break, it is quick, efficient, fully responsive and immediately accessible.
Skyscanner
Similar to Kayak it offers the same basic functionality. It too seems to suffer from the same points that Kayak suffers above. The form itself is gorgeous and easy to navigate. However there are dropdown options that could use some highlighting when you navigate through them.
Contrast is a bit better on Skyscanner, possibly because the background doesn’t change based on your chosen destination.
I also do like the “adventurous” option of setting “Everywhere” as your destination. Allowing you to just explore your options, especially if you’re looking for a quick way to leave the country.
It too suffers from some tiny text and radio buttons. But at least it’s easy to navigate, select your options and move forward with your search. Pretty straightforward stuff.
It is a bit disappointing that the two booking forms that tick most of the usability “checkboxes” belong to sites that might not be as well known to a less tech savvy crowd. While airline websites can probably do with a friendlier image and a very good first impression. Competition has caught up with them in the face of good deals and comparison tools that look good and work better.
The above is not an exhaustive list but it highlights a few of the issues that modern airline booking websites tend to have. Some companies have made a lot of effort to make their forms as user friendly as possible, even retroactively. It shows that some steps towards the right direction are being made. Others… not so much.
Of course we do have to consider the restraints and the difficulty of completely revamping a website with millions of visitors. But what does it take to make a form fully responsive and how hard is it really?
Could all these issues above just be solved with a few rounds of user testing or even just some comparative assessments?
I plan to find out in the next two parts of this journey. By making a short list on what does a form need to include to be covering all the bases. Doing a short round of Heuristics testing and what having a look at aesthetics and behaviour.
P.S This is my first ever article on medium and I’m by no means a prolific writer. If you encounter any mistakes, inaccuracies or you think the whole thing is plain outrageous please do leave a comment and I’ll try to rectify any issues where I can.
