Revisit Your Design Ideas
Posted by jonchase
Sometimes (a lot of times) I’ll design a screen or some code and I think “not bad”. Since it’s not bad, it gets my approval and gets moved into production. Thankfully, I often realize that it’s not a bad idea to revisit those designs and see if there’s something I can improve upon. That just happened (Ricky Bobby, anyone?) with SendAlong’s upgrade confirmation page. The differences were drastic enough that I figured they merited mention, if only so that you can learn from my mistakes.
Here’s the original “confirm upgrade” screen:
I look at the above screen now and it’s painful – the design is horrible. Let’s think about the goals for this screen:
- Tell the user what to expect (how much do I have to pay?).
- Reassure the user that they’re going to get what they expect (clear information, no surprises).
- Encourage the user to complete the process (click the button).
I think the above screen does a pretty lousy job of achieving those goals. Here’s why:
- It’s crowded – there’s too much going on for the user to be able to easily focus – buttons, text, blah blah blah…
- It’s too general – I used an existing template for this page – but sometimes certain pages can benefit from a bit of extra attention.
If you’re a designer, I’m sure you see more problems that just those two. My poor naïve eyes only see the most surface level problems – but the good news is that surface level usually catches 80% of the problems, as seen in the new screen below…
I like this page a lot more. Can you see the difference? It just works better, it’s more focused, and it’s tailored specifically to the goal:
- There’s a lot less information – the user can focus on the task at hand.
- The user knows exactly what to expect – the prices are printed in big bold font, not in small print.
- All of the extra navigation has been removed – this helps direct (”funnel”) the user to the goal.
Not bad for a little bit of work. Here’s the same screen before and after, but in this scenario the user has already entered his payment information and all that is needed to complete the upgrade process is clicking the button. Which of the below screens do you think will result in more upgrades?
Do you have any other suggestions for improvements?
2 Responses to “Revisit Your Design Ideas”
Leave a Reply
Subscribe to Jon's Blog
March 25th, 2008 at 1:50 am
Here’s a freebie for you: you see that portion where you have to tell people what a credit card number looks like? Why, exactly?
gsub(/[^0-9]/,”",creditCardNumber)
There — you have now eliminated another class of errors which can frustrate the user. If you want to be particularly helpful, you can validate the number in semi-realtime (via AJAX or whatever). Also, is there any need to have folks tell you the card type? Why don’t you tell *THEM* the card type (which is predictable on the basis of the number):
Card Number: [input box]
Card Type: AJAXified read-only data (or, alternatively, AJAXified combo box)
Similarly, you can catch most of the typos before submission with :
http://en.wikipedia.org/wiki/Luhn_algorithm
March 25th, 2008 at 8:08 am
Patrick -
You’re right - it’s always helpful to have someone else point out the other 20% that I’m always going to miss!
I don’t know why I never thought of munging the CC# data myself on the server side - it’s not too hard to get rid of whitespace, after all:). I also like the idea of figuring out their CC type for them - maybe I’ll save that for 2.0.
Your comment exemplifies the point of this post perfectly - even if it looks ok (ever after a revision!), it’s important not to take for granted what could still be improved.