Debenhams Payment Form - Design Gone Wrong
I just bought a gift for a friend who is getting married shortly, and navigated my way through the debenhams wedding site, which was fine. I finally got to the payment page though, and felt compelled to rant about it. This is basically the email I sent them...
There are so many issues with this form that I'm not sure where to start, so I'll begin at the top.
1) Horrible JPEG compression on card images and the text around them at the top. There's no ALT text for that image, so a screen reader for the blind wouldn't see that information.
2) "Notified terms and conditions apply" - What does this even mean? I haven't been notified of any T&C at this point. If this is supposed to count for the notification, where are the terms and conditions?
3) "Security Card Number" - What security card? Card Security Number might make more sense. If you're going to use a term that requires explanation, you may as well use one of the standard terms, such as Card Verification Value or Card Security Code. This field doesn't line up with the label text.
4) "Card holders name as it appears on the card:". This should be "Card holder's name". This text is too long, redundant, wraps on to the next line and is redundant. Surely most people understand that the name on the card should go here? Failing that, simply "Name as it appears on the card:", or even "Name on card:" - shorter, avoids the grammar pitfall, and reduces repetition.
5) Make the 'if other' title text box bigger, at least to line up with the right edge of the other fields. If you've got to type 'Brigadier General' into the box, it'd be nice if you can see an entire word at a time.
6) The Card number, expiry date, security card number, and address boxes don't line up.
7) Card number (omit spaces): There are no words for how much I hate this behaviour in payment forms. It is such a simple thing to automatically remove spaces when the user clicks 'confirm'. Why not let the user enter the number as they feel comfortable and sort it out for them? If for some inexplicable reason this can't be fixed, at least the wording could be improved; "omit spaces" is a horrible phrase. "Without spaces" would be much more friendly.
9) The gift card image and balance check thing - why is that there? Was it positioned using some sort of 'pin the tail on the donkey' game? At the top of the page before someone is already expected to have made a decision about which card to use would be much better.
10) I've already mentioned that the fields don't line up vertically, but have the 'expiry date' and 'switch issue' fields and labels been out for a heavy night on the beer, stumbled home and collapsed?
11) "The Debenhams Storecard does not require an expiry date. (Excluding Debenhams Mastercard)" -- Why say this? I assume the store card doesn't actually have an expiry date on it, so there's not one for people to enter? Even if they do manage to enter something, why not just ignore it if you don't need it?
12) Billing address - why have a big editable box with an explanation as to why you can't edit it? Why not put the 'find address' button (which clearly doesn't need all that explanatory text) where the textarea is, and make that not look like it's an editable field.
13) Why have 'confirm' button at top and bottom? I could understand having one after the 'select a card' bit, and another at the bottom of the 'new card' form, but the positioning at the top looks really odd. Why are the confirm buttons outside the form frame around the form?
14) It is impossible to operate this form by keyboard only - you can't trigger the 'find address' button or confirm order buttons without using a mouse.
I work for a large organisation, so I know how things like this evolve over time with the input of various people. When things change gradually over time, the decline in customer experience is often overlooked until someone points it out.
In this case, I think this form provides a pretty bad user experience, and that will not encourage people to shop online with Debenhams.