Over the weekend my wife and I decided to go see a movie at the Arclight. I like the Arclight because you can reserve your seats. It's a nice theater with good parking. Now I'm going start a rant and at the same time comment on how the user experience can be improved with a little effort. With that in mind, I was sitting on the couch and went to the Arclight Cinema website on my iPad. Tapped the movie, selected the date and then the time I wanted to purchase tickets and a small popup bubble displayed showing available seats, but there wasn't an option to select seats or purchase tickets.
After looking around the website I was not able to find a way to purchase movie tickets. So I thought, no problem, I'll just give them a call. I tapped the Contact Us link. The link opened a new tab with a contact form, but no phone number. I didn't want to send a message to be seen later, I wanted to buy tickets now. Then I went looking for a phone number on the website and while there was a phone number for parking information, there wasn't a contact phone number to be found for help or purchasing tickets. Hot tip, make it easy for the user to get help or tell the user up front what to expect. Not able to find a contact phone number, I went back to Google which displayed the phone number and made a call to get help. They were busy so there was a wait, which I can understand that since it was Thanksgiving weekend. When I got a person on the phone, they told me that their website doesn't work on an iPad and to use a phone or computer. There really isn't a whole lot of difference other than screen size between the desktop and tablet browser experience. With very little work the desktop website can be made to work on a tablet. Better yet, make the design responsive from the start.
No problem, I have a iPhone in my pocket and I know how to use it. I filled out all the information, got the the credit card page, filled out my credit card information and got my first error. Not just any error, not even a friendly error, but a 500 error. For those that don't know, this means something went wrong on the server.
Are you kidding! Show a friendly error at minimum say something like, “I'm sorry we could not process your order at this time. Please try again later.” Hopefully the server has sent someone an alert so that the problem can be fixed.
Unable to purchase tickets, I called the Arclight again. The person on the phone told me that I put my credit card information in wrong. She blamed me. Because of the poor design I had already started to take screenshots. I looked at the screenshot of the credit card form and I could not see anything entered incorrectly. I triple checked the data and every field looked correct. I asked if I could purchase the tickets on the phone and she told me that they only allow ticket purchases from their website or the theater. I didn't want to purchase tickets at the theater since the reason I like this theater is that I can reserve my seats. I get the seats I want. I did not raise my voice, since I knew there was nothing she could do, but maybe it was the exasperated look on my face, my wife told me to calm down.
Unable to use my iPad or iPhone to purchase tickets, I then tried to purchase the tickets from a PC. I went through the process again and got a popup that said an “An unexpected error has occurred.” Now isn't that informative. Back to the phone again. A nice person told me that because I was having so many problems that he would take the order for me. Now why didn't the second person offer me that service? After getting my credit card information he told me that my credit card was denied. Now I had just transferred a payment to my credit card to pay it off 2 days ago and didn't see how my credit card could be denied, especially since the card company calls me and asks me to verify transactions if they suspect fraud a couple of times a month. I even checked my credit card balance online and it was less than 1 percent of my available credit.
Wondering why my credit card was denied, I called the fraud number on the back of the credit card. The person on the phone told me that there was no fraud detected on my card, there wasn't a hold, and that I had plenty of credit to purchase movie tickets.
If anything, I'm persistent, so back to the phone website and I was able to purchase tickets and reserve seats. I had taken a screen shot of the screen when I got the error and took a screenshot of the credit card page before I submitted my credit card information. The images were exactly the same as my previous screenshots. Tickets purchased, hurray!
Then I tried to upgrade my membership since they told me that my previous membership is no longer supported. Okay, I don't go to the movies that often, cut me some slack. Let's talk about some of the problems entering a credit card on the phone. I had these same problems when I purchased the tickets.
- Why do I have to select the type of credit card? The first few digits of the card number will tell them the type of card I want to use.
- Why is the Exp Month not a number and why is the Exp Year a 4 digit year? On every credit card I've had, the Exp Month and Exp Year are 2 digit numbers. Why make the user convert from a number to a abbreviated month? Why make the user add the century to the year?
- I'm sure most users know where the CVV number is located, but for those that don't the CVV field is wide enough, why not show a picture of the back of the credit card showing the location of the CVV number?
If an input field uses a font size that is less than 16 pixels the page will zoom when the user taps the field. Even if the user closes the keyboard by tapping Done, the page will stay zoomed. To get it back to its size the user has to pinch the screen. Why make it hard for the user? Use a font size that is 16 pixels or larger.
Please use the type attribute on the input element so that the user gets the appropriate keyboard for the type of data. In this case I have to tap the 123 key to get the numeric keyboard. It's not that hard to add an appropriate type attribute.
Finally put the error message where the user can see it. I tapped the year field twice and on the second tap, it changed the year to 2020 even though I did not tap 2020. Because the year is incorrect, the page displays the credit card form after submitting the form and I don't know why it is re-displaying the credit card form. There is no indication that there is an error. Scrolling the form to the bottom of the page revealed the error. At least it was in red, though if I were color blind that wouldn't have helped. Good thing it displayed “Error:”. The other thing the page did was set some of the checkboxes to settings I did not select. Like the Auto-renew option. I had unchecked that before submitting the form. I had also selected the agree to Terms & and Conditions option.
I was finally able to purchase my tickets and upgrade my membership. I would not have continued but for the previous good service I had received from Arclight and my belief that because I'm a programmer I could get it to work (what hubris on my part). There are a few simple things they could do to improve the user experience on their credit card form.
- Use a font size of at least 16 pixels for input fields so that the page does not auto-zoom.
- Use the correct input type on input elements so that a context appropriate keyboard is displayed.
- Make it obvious what the user is supposed to do next.
- Simplify the form with fewer fields. Make it easier for the user to complete the task.
- Friendly error messages. The average user is not going to know what a 500 error means.
- If you are going to refresh the page when validating the credit card information, put the error near the top of the form so the user knows that there is a problem. If you can, highlight the field that caused the error.
- Make your website responsive. Your users will appreciate the effort.
While you're at it, even if it is the user's fault, don't blame the user!
Okay, I'm done with my rant. I hope you received good advice for your own credit card forms. If you need credit card validation and automatic type selection, check out my creditcard.js module. You can also view a demo credit card information form.