Too often I encounter a website that either isn't clear, isn't helpful, or isn't working properly. Occasionally I get frustrated enough to try to understand why.
Reel Cinema have a reasonably good website, but for a few quite important problems.
Cookie banner
The first and most jarring is the cookie banner. Cookie banners are meant to give users control over what cookies are stored on their device, which should limit what websites are allowed to do in terms of tracking and data storage.
Reel Cinema's cookie banner has three buttons - 'accept all', 'manage' and 'reject all'. Any other interaction on the page is prevented until one of these options is chosen. That is annoying, but it's not the problem I want to highlight.
'Reject all' should prevent the site from setting all but the most essential cookies and then hide the cookie banner. What it actually does is act like the browser 'back' button. So if you've come from Google and immediately click this button, it takes you back to Google.
I thought this might be a bug, but it's deliberate. Here's the JavaScript function called when that button is pressed.
function rejectAllCookie() {
if (window.history.length > 1) {
window.history.back();
} else {
window.location.reload();
}
}
If there is no page to go back to (for example if the site has been opened from a bookmark) the code will attempt to reload the page. Both outcomes (going back and reloading) are confusing responses to clicking on this button and I suspect violate more than one WCAG rule.
To make all this worse when you go to book a film you are taken to a different website (specific to your chosen cinema) that looks exactly the same with the same cookie banner and the same problem. From looking at the code I don't think this should be difficult to fix - in fact, it should take fewer lines of code than the function I listed above.
The booking form
Once you select a movie and pick a seat there's a form for inputting your personal details, such as name and email. There are a few problems with this form.
Required fields (minor)
All of the fields are marked 'required' apart from phone number. But phone number is required - if you complete all the other fields and continue, the page reloads with an error at the top and everything you've entered is lost.
It's easy to dismiss this problem as 'you should have just put your phone number in' but I don't like giving personal information when it isn't needed. Realistically, the cinema only needs two things to book a ticket - my credit card details, and a way of sending my ticket (either email or phone number, but not both).
Error message (minor)
The error message on the form isn't immediately obvious as it's the same colour as the site header and other elements (like buttons). I might be in the minority, but I didn't spot it the first few times it appeared.
Address fields (serious)
Address details consist of six fields - address 1, address 2, city, county, post code, country. My address has one line (number of house, name of road) but both address 1 and address 2 are required fields.
I was a bit stumped by that. I tried putting my house number in address 1 and my road name in address 2, but I got the error 'Address Line 1 cannot be fully numeric'. Eventually I wrote my house number in address 1 as a word rather than a number, and the form seemed satisfied.
I'm reminded of falsehoods that programmers believe about addresses, which is required reading for anyone building these kinds of forms.
There's actually no need for this problem at all because I shouldn't have to tell the cinema where I live. If I buy a ticket at the cinema they don't ask for my address, so why should I need to give it when I book online?
Continue button (trivial)
At the bottom of the form there's a button with the text 'Credit/Debit card'. This is a small thing, but the purpose of this button could be clearer - the text could be 'Continue' or 'Continue to payment' or something similar. It also looks almost identical to another button in the footer close by, so it doesn't stand out as the obvious thing you need to press to continue.
Overall
As I said at the start, the Reel Cinema website isn't bad, and a lot of effort has clearly gone into making it work well. Unfortunately small problems like the ones I've outlined can cause unnecessary confusion and frustration for users, and they're often really easy to fix.
This was a very quick summary of the problems I encountered when trying to book a film, so I've not done a full audit of the rest of the site, but I suspect there's more that could be improved - the seat selection screen is unusable with a keyboard, for one.