Texas Gas Service Homepage

Another accessibility disaster. It’s great that people are finding creative ways to use JavaScript but it is not okay to ignore progressive enhancement techniques.

Your users should never see this instead of content:

Our site requires javascript, please enable javascript and refresh the browser window.

JS frameworks do a disservice to the Web after all the innovation and hard work that has gone into creating a separation model for content, presentation and client-side scripting.

drawing of a peanut M&M candy showing content as the peanut, presentation as the chocolate layer and client-side scripting as the candy shell
Layering content, presentation and client-side scripting – Drawing by Dave Stewart

The Texas Gas Service website gives us lots of examples. Let’s see how well we can use the site without a mouse, a.k.a tabbing through.

(Step 0: What is with this trend to play videos as background images? I thought we learned this lesson years ago. Having movement your users can’t disable is annoying and bad practice. Stop it.)

screenshot of the Texas Gas Service home page with user login form
Texas Gas Service homepage
  1. Links I can’t click; let me count the ways
    From the “I want to…” select menu to the hamburger menu to the footer, dozens of “links” are not marked up as <a href> and cannot be tabbed to, nor would they be read as links by a screen reader.

    screen shot of the expanded I want to... menu
    These aren’t links

    This is lazy and wrong. If something is a link, make it a link. Fake links achieved with JS only are a large accessibility barrier.

    <div click.delegate="goTo('home', true)" class="btn pill-btn white-fill-btn au-target" show.bind="!session.loggedIn" au-target-id="111">Pay my bill</div>

  2. Tabbing order fail
    The tabindex attribute can be a really useful tool. It can also completely screw up a user’s ability to access important information, like the “username” field. When I could not tab to the “username” field, I looked at the code and saw the field was set to tabindex=-1. I had to look this one up. Here’s a 2014 explanation from The Paciello Group:

    When tabindex is set to a negative integer like -1, it becomes programmatically focusable but it isn’t included in the tab order. In other words, it can’t be reached by someone using the tab key to navigate through content, but it can be focused on with scripting.

    From my perspective as a customer who visits this page, being able to log in is the number one user story but it isn’t possible using a keyboard.

  3. Form validation errors
    The only time the “username” field seems to get focus is if that field is empty when clicking the “Login” button. Plenty of client-side field validation solutions work without removing a field from the tabbing order.

    screen shot of the login form with validation errors for the empty username and password fields
    Login form validation errors with login button disabled

    If a user tries to login with bad data, a small modal window with a an unhelpful developer-style error message of “Login failed” appears at the top right of the page. There is no associated help text about the causes of the error, or which fields have errors, and focus is removed from the form making it that much harder to update the data.

    screenshot of the error message login failed in a modal window
    Login failed error modal window

    Adding to the confusion is the little green check in both fields indicating what would usually mean the field data is valid. But for this form, a green check merely indicates that a field isn’t blank. There isn’t any robust client-side validation occurring at all.

Pet peeve: What is the point of removing the browser scrollbar from the page? It provides a simple and useful way to indicate where I am on the page. This is something I really miss on mobile devices.

Bad Forms – WHY?

Forms.

So easy to get right, yet so often poorly constructed.

Today I came across this gem with a contrast ratio of 1.26:1, as in barely above 1:1 which is invisible. Gray on white should always have contrast checked.screen shot of a form fields with light gray text on white

Other form infractions include

  • Using placement text as labels. Once a user starts typing, it’s no longer clear what information was requested or what format the data should be in.
  • When tabbing through the form, there is no visual indicator when you’re on a select field or a button.
  • I just don’t see the point in trying to reinvent the form experience. In this case, they’ve chosen a skeuomorph design, attempting to recreate a paper form experience digitally.
  • I like the address suggestion but it’s not possible to tab to it and select anything.screen shot of the address field with a drop down of address suggestions
  • I could not tab through the t-shirt size options and select anything using the arrow keys, even though these were coded as radio buttons.
    screen shot of the t-shirt form field with circles for each sizeUsing the browser inspector, I unhid the radio buttons and then could tell that after I made a selection, I was tabbing through the radio buttons.
    screen shot of selected radio button for shirt size
  • It was really hard to tell if I could tab to the submit button without visual indication. Adding a button focus style with the inspector showed that it was getting focus.

So much has been written about the IA of good forms, the proper markup of form elements and form usability, it’s amazing to me designers don’t follow a known pattern for an account creation process. It’s not the time to get fancy.

5 Ways Buying Alamo Drafthouse Tickets Online Fails

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.

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.

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.

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.

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.

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.

screenshot of the Alamo Victory section

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.

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