We’re here! we’re here!
It is until Jo-jo make the final addtion of his voice to save “Whoville” city on a tiny planet, as small as a dusk. If you have not watched this movie, check this out.
This credit card payment page was taken from a famous online hotel booking website. I wish to collect 100 suggestion of improvements about this page (Yes, only this page!). I will send this post to the CEO of this website when the challenge met! I will compile your suggestion and come out with one page mock and included here.
1. The ‘Valid From’ field only confuses users
2. ‘Valid To’ doesn’t indicate which is Day and Month.
3. Next, Back and Cancel buttons are same size. Why? Cancel button more important than Next?
4. I didn’t fill in ‘Valid From’ and the system allow me to go through. But why it didn’t say (if any)?
5. What is Locality? Sounds confusing too, English test?
6. The form is way too compact! Where is separator?
7. Too small font size, my dad is 60 years old…
8. The Next, Back and Cancel doesn’t look like buttons, more like Icons.
9. there didn’t provide the card number length information for each bank.
10. Field “Locality” is ambigous…
11. What is the “Issue (if any)” field suppose to mean?
12. One-line address is generally not good. Always go for Text Area rather than Text Field.
13. The “Use Same Address as Account” should be on the same page together with this page. Otherwise, I might need to click back to check what my account’s address is, and I might just lose the data I’ve keyed in here. Not very considerate.
14. There’s a better and more intuitive way to arrange the Next, Back and Cancel button. Arranging it like the picture above introduces frustration to users who might accidentally clicked on the wrong button, since it’s so near. Not everyone’s a Counter Strike player.
15. If there is Postal Town, why not Postal Street?
16. Presenting the card type in graphical format. Well, I dislike dropdown because it creates one additional step to click on the small arrow button. It also becomes a pain when users (my dad) use the mouse’s scroll button. The selection in a dropdown moves as well. Drop down is not intuitive too!
17. I don’t think the ‘Cancel’ button is needed in the first place. For those who are not keen to buy, but just tested out the system?
18. Is Address and Street the same? Would be much unconfused if there is no text field for Address. Address is the whole thing, isn’t it.
19. Not sure whether i need to include the ‘-’ for the credit card number.
20. Don’t need the 3 digit security code (CCW)? Better not pump petrol with credit card, anyone can use my card in this website.
21. this form doesn’t have an “anti-spam” feature? Stuff like image captcha test or a simple question and answer test just to prevent bots from spamming greatly on this form is missing here! Very very important!
22. Change the word ‘Card detail’ to ‘Payment detail’. Card is not just the only option of payment! Card can be confusing to translator too.
23. Dominica Republic was shown by default. Why?
24. The input field is way too small and crowded!
25. I bet how many people understand ‘Use same address as account’? Why not fill in by default without asking or any better way of presentation for this feature!
26. The submit-like button of ‘Use same address as account’ can be replaced with a checkbox. To me, the Next button deserve more the use of this button!
27. Common sense, Name On Card should be at on top of Expiry Date.
28. If the word Hong Leong is in small letter, why Dominican Republic is in capital? No standarization?
29. The width of Credit Number looks like I can enter more than 16 digits. Width of Credit Number field can indicate number of digits accepted at first look, subtle but useful method of making your form easy.
30. What if my card issuer is not in the list? What should I do?
31. Locality = State?
32. Next = Submit Payment?
33. Most of the fields have same length.. It shouldn’t be that way.. It could be misleading and people might think that that field has to be that long when it’s just a few characters
1. Name first
2. Most credit only have Valid Thru (Valid To)…
3. Card billing address is a MUST!
4. Separate details into 3 sections: – Card details, billing address and shipped/other address (eg: use FIELD – LEGEND tag)
5. Use check box for if Second address = Billing Address
6. Address Line should divide into 2 at least.
7. Terms use in address labels should be refined to standard address labels (whole world are using it)
8. No issue with country capitalization letters (much better if use GeoIP technique to select user country)
8. Next, Back, Cancel = buttons
9. Cancel ?? Redundant. No use at all. Same goes with Reset.
10. More meaningful navigation terms such as ‘Proceed to payment’ or ‘Proceed to checkout’.
11. If using image to symbolize as buttons, use meaningful icons like left/right arrows.
12. At least put (*) for compulsory fields. (DHTML much better)
13. Valid To/Valid From fields should give little info which is Month/Year.
14. Make sure fonts comform with the rest of page. Put some spacing between fields.
47 comment collected now. Thanks Armanisyam, are you a web designier? Mind sharing with us more about you?
Welcome Pin. Yes, I’m one. Not a guru yet hehe. Still learning lotsa stuff about web programming/designing. My workplace is in Dataran Sunway so everyday I get to see your company at Aman Suria there. My company is still young compared to yours btw. hehe..
Let’s go for a drink Monday afternoon at 3pm, near Sedap?