Website Archives - Page 10 of 12

5 Ways Buying Alamo Drafthouse Tickets Online Fails

Rachele DiTullio24 May 201628 August 2022Desktop, Websiteecommerce, forms

The Austin-based Alamo Drafthouse movie theater chain has moved to assigned seating and the ability to reserve tickets through online ordering. I went through this process for the first time over the weekend and ran into several usability problems.

1) Field types are not marked

screenshot of an online form for reserving movie tickets — Screenshot of the Alamo Drafthouse online ticket form

This one is so basic. I’ve done enough online ordering that I assumed the payment fields are all required, but that’s not a given for every user.

In the “Email Confirmation” section it’s unclear that an email address is required for making a purchase. It looks like an optional choice as I have no reason to believe I won’t get access to my tickets immediately after paying, but failing to enter a valid email address in two different fields results in an error after submitting the form.

Recent e-commerce research suggests that marking all fields, required or optional, improves the customer experience.

2) Poor error messaging

There is no immediate feedback when a user enters invalid data. I typed in my credit card number incorrectly and only after trying to complete the purchase did an error message display. However, the error was located at the top of the form, out of sight, as I sat there frustrated and wondering what was taking so long.

screenshot of a form error message reading credit card number is not valid or is not an accepted card type — Screenshot of form error message

Eventually I scrolled up the page and saw the error message, but it didn’t indicate which field was in error by either putting the error in context of the field or by making the text of the error specific to the data issue.

After entering a valid credit card number, I tried submitting the form without entering anything into the other fields as a test. This took me to a new page, devoid of any branding information for the site, displaying a laundry list of what I did wrong.

screenshot of an error message page indicating all the fields that are required — *Screenshot of the error message page*

Taking a user to a page like this immediately throws up a red flag. Am I still on the right site? What’s going on? Did my credit card number just get stolen?

If an entered value contains an error, ideally do inline validation or at least display that error message in-context of the form, next to the field with the error.

Further testing showed that if the form is submitted with a valid credit card number but invalid security code, expiration date, zip code, etc., the form returns a blank page with a “card declined” error message and no way to return to the form and fix the issues. The transaction is simply cancelled without even a link back to the page where the transaction started.

There was an error with your order. Your card was declined. Your order has been cancelled and you will not be charged.

Hitting the back button provides yet another frustrating error and no way to continue with a purchase.

Error. A cinema and session must be selected.

3) Confusing payment button

The way the form submission button functions also contributed to failure. It reads “Complete Purchase” before clicking it, but after clicking it, it changes to “Completing…”

Field buttons labeled cancel, change tickets, change seats, completing... — *Screenshot of form buttons*

Because I had entered an invalid credit card number, my purchase wasn’t completing at all, but I sat there waiting… This button should probably be a “Review Order” button that completes all field validation. Then, the user can “Complete Purchase” from a verification screen.

4) No way to continue after timeout

If you take longer than five minutes to complete your purchase, it times out and you see another useless error message.

Your order has expired. Sorry but your order has timed out and has been cancelled. You will need to restart the process. Return to Home page.

I don’t know who or how they decided to set the timer at five minutes, but I timed out because of the credit card number error message issues. Maybe they did some usability testing and five minutes is enough for most users, but for those of us who timeout, this experience should be friendly and helpful.

The goal is to sell tickets, yet this message gives the impression that the Alamo Drafthouse doesn’t care if you had trouble with the process of online ticket buying, or about helping you try again.

At the bare minimum, this message needs to be smart enough to display the theater, movie and show time you were trying to purchase tickets for and provide a link back to the start of the purchase process.

5) Optional checkbox already checked

The last section titled “Alamo Victory” takes up about 25% of the page real estate with a boring marketing blurb and an almost hidden pre-checked option for ‘Join Alamo Victory’. My favorite part is the disclaimer after it:

By checking “Join Alamo Victory” you agree to the Alamo Drafthouse Cinema’s terms & conditions and privacy policy.

Oh really? Cuz I didn’t check that box, Alamo Drafthouse checked it for me. This is the same annoying tactic of pre-checking a “sign up for our spam emails” box on other purchases. Just don’t. Always allow me to decide if I want to join extra programs.

Design Recommendations

The online ticket purchase process needs a lot of help. I think Alamo Drafthouse decision makers would be surprised how much customers struggle with this website site if they would sit and watch some usability testing.

Mark all fields as either required or optional
Do inline form field validation/improve error messages
Change the “Complete Purchase” button to “Review Order” so that all field inputs are validated first
Provide users a way to retry a transaction that times out
Remove the check from the optional field

*Screenshot of recommended form updates*

Registering a Product Shouldn’t be this Hard

Rachele DiTullio19 April 201619 February 2024Desktop, Websiteforms

When I bought a new dishwasher recently, I went online to register it with Frigidaire in case I needed to use the warranty. My immediate reaction was, is this something I have to print out and mail in?

screenshot of a web form on the Frigidaire website — *Screenshot: Frigidaire product registration form*

This form suffers from a lot of problems including

Unclear form fields because they aren’t boxes, just underlines; where do I click?
Unnecessary fields (email confirmation, first and last name instead of full name)
Small text with poor contrast
Required fields that aren’t marked (address, city, state, zip)

My focus for this post, though, is the next part of the form where the user is asked to enter product information.

screenshot of form requiring the user to click a box to show the form's fields — *Screenshot: Add a product*

The whole reason I’m filling out this form is to add product information, yet those fields are obfuscated by an unnecessary ‘add product information’ link. When clicked, fields for model number, serial number, date of purchase and location of purchase display, and the wonky ‘add production information’ link remains.

screenshot of a web form with four fields model number, serial number, date and location with a disabled submit button — *Screenshot: Add product fields*

If you click the ‘add’ button without filling out these fields, you get error messages for three of the fields as it turns out model number, serial number and purchase date are required.

screenshot of error messages when leaving the add a product fields blank — *Screenshot: Add product form validation*

Design Recommendations

Don’t require the user to click the ‘add production information’ link to see the form fields and remove the unnecessary help text above the form: “Click below to add your product information”
Clearly indicate required fields
Make form fields look like form fields
Provide form labels and keep formattitng instructions visible instead of using placeholder text
Make it easier for users to understand what model number and serial number are and where to find them

I gave the form a streamlined, top-to-bottom flow with large text and obvious form fields. To the right is an example of a product tag that shows what the user is looking for to locate model and serial numbers; I also listed the links to the help pages that show the locations of these tags for each product type.

screenshot of the form with three fields model number, serial number, purchase date and links to find this information — *Redesigned add product form*

The form checks the field data as it is entered and alerts the user of errors inline. Once a field’s data validates, a check mark displays next to it. After the user enters his model number, an image of that product and the product’s name display below the field for visual verification.

screenshot of the redesigned add product form will the fields field out — *Redesigned form filled out*

Once all required fields are verified, the “Done” button becomes active. After clicking “Done”, the user can choose to add additional products—something the existing form handles well.

Kudos to Half Price Books for Guest Account Creation after Checkout

Rachele DiTullio5 April 201625 April 2024Desktop, Websiteaccounts, good

I’ve studied a lot of in-depth research on e-commerce and one of the more disruptive user experiences is requiring customers to create accounts before allowing them to give you money.

Of the top 100 sites evaluated by the Baymard Institute in a 2012 study, 76% allowed guest checkout.

graph: 35% of companies grossing over $1 billion and 21% of the rest require an account to make an online purchase — *Graphs: 76% don’t require an account to purchase, courtesy Baymard Institute*

But only one of these companies (ranked #1 of 100) allowed a guest user to create an account after checkout. The checkout process should be linear, so asking a customer to create an account at the end of the purchasing process makes sense and is a better user experience.

It’s difficult to find examples of sites doing this since it requires making a purchase, but I did come across one finally: Half Price Books, a Texas-based used books chain.

Screenshot: HPB.com page allowing a customer to create an account after checking out

Good job! Now just remove the password confirmation field 🙂