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

Megabus Vs National Express: Webform Teardown

Big Brand Teardown

In the last decade there’s been continuing decline in drivers and rise in the uptake of public transport.

With this in mind, we’re segueing over to a big brand teardown of two big coach operators, National Express and Megabus. What kind of customer journey can you expect to go on in the booking process?

Finding A Ticket For Your Journey

National Express

National Express do quite well here, displaying a nice short form to start the ticket-finding process. Additional fields are added in as you complete your From and To selections.

National Express search form

The dynamic form relies on JavaScript and as such may clash with accessibility software. Happily there is an accessible view and the form defaults to an ordinary form if you have JavaScript disabled. This means providing a link to the accessible form might be overkill but I’m glad to see they’re considering all types of users.

Megabus

Megabus, on the other hand, show the whole form but only allow you to make certain selections if you’ve completed the preceding part.

Megabus search form

I became frustrated when I failed to specify the number of passengers- not a great start. I also struggled to complete my selections using the keyboard, which tells me this site is less accessible than nationalexpress.com.

Good Intentions Badly Executed

National Express

National Express use information icons that link out to explanations of certain elements without cluttering the form- very useful.

National Express information icons highlighted

However, the same pop-up box is used for information on ticket types (or ‘Passenger descriptions’ as they’ve called it- there’re some holes in the copy too unfortunately) and Coachcards. Coachcard information isn’t immediately obvious to see when the pop up appears.

Pop-up box containing passenger descriptions

Search Results

Megabus and Radio Buttons

Megabus’s results page is pretty straightforward; it shows dates, times, addresses and cost of each possible journey for your criteria.

Megabus search results

This page is an interesting case study with which to discuss radio buttons. Kara Pernice, of Nielsen Norman Group, recommends pre-selecting one of the options. She provides three good reasons for doing this:

  1. user control
  2. expediting tasks
  3. the power of suggestion

I agree that in many cases there are advantages to pre-selecting an option, both for you and your users. I think the first, user control, is the universal. It “communicates to the user from the start that he is required to choose one in the set.”

I’m less sure that the other two reasons are valid in this instance since there are so many possible options. I can’t see how to predict the most desirable option to the user so that the task of selecting it is already done.

Perhaps the option with the shortest journey time could be pre-selected. However, if that option is below the page fold then any benefits of pre-selection are lost. Following best practice for the sake of it is rarely a good idea so I’d like to see the variations A/B tested. Pre-selecting the first option in the list would ensure the selected radio button would be visible.

National Express

National Express list the options for my search criteria slightly more elegantly. The fares act as buttons to select that journey and the fastest option for my chosen day of travel is highlighted.

National Express_search results

I made my selection, reviewed it in the right hand panel and clicked ‘Continue’. This is a fairly safe call to action, I know if I follow it I’ll be continuing my purchase. However, the next page severely disrupts my flow. National Express use what I refer to as a Ryan Air-esque approach to sales, bombarding you with extras.

Travel insurance ad pop up box

That’s when I noticed I was only on step 3 of a 7-step process.

Progress indicator

Progress bars are a good idea in theory but this made me wince. What looked short and simple before now looked never ending. This isn’t to say get rid of the progress bar but I would consider condensing the sections.

Megabus

Over on Megabus.com the process doesn’t appear lengthy but is rather cluttered. For example, the Search & Buy box remains on the page at the basket stage, taking up over a third of the width.

Megabus.com shopping basket

There’s also a lot of text on this page, most it unnecessary, pushing the order summary almost out of sight.

Pay The Price

On to payments; both sites have their own problems and neither impress me as a user.

National Express

The booking form is lengthy, with no apparent effort made to reduce the number of form fields the user has to fill in. Introducing postcode lookup to the address form would make it much quicker to complete and can reduce errors.

Booking form

The number of required fields and the inclusion of optional fields is rather interesting. This form is asking the users to do unnecessary work. Payment validation could be done with just the first line of the user’s address and their postcode. The rest is superfluous.

That ‘Title’ is required information boggles the mind.

Before I can complete the form I must agree to the Terms and Conditions, nothing unusual there. Except that I’m presented with policy documents for insurance and assisted travel and something called ‘Funfare’.

Terms and Conditions agreement

I didn’t add these at the Extras stage but this has me second guessing if I did? There’s a big lesson to be learned here, don’t make your buyer nervous.

Megabus

Megabus is no better than National Express when it comes to the number of form fields. My biggest issue with this page though is the alignment of form labels and the final call to action. Instructions are set very far apart.

Megabus booking form

Though subtle, the increased effort of checking the form label and then form field will make this form slower to complete. When ready the user will have to look far to the right to find where to submit the form.

Megabus also does nothing to warn to me that I’ve filled in a field incorrectly when I enter half a card number:

Card details form

By that stage I had started to expect the worst. Sure enough when I submitted the form all the errors were given in a list at the top of the page. Presenting errors this way means there’s no correlation to the problem fields, creating more work for users who have to figure it out.

List of form errors

National Express have sense enough to validate form fields as you go along but, again, fall just short of a getting it right.

card payment form with error warning

There’s only a warning icon and red field to express an error. These visual indicators may not be clear, or even visible, to everybody. There should be a proper error message here.

All in all I can’t say that either provide a fantastic booking experience. I can see on National Express where some design and usability work has been applied but sadly it never seems to follow through. Megabus, who operate in America and Europe, are falling way behind current web standards. Savvy travelers expect more when booking their travel online.