Yesterday, I went to a website to make a donation for a friend who is running in the NYC Marathon. As I was finishing entering all my information and was on my last step I saw the following call to action:
What’s wrong with this picture? How would you fix it?
P.S. Extra credit if you can get this non-profit site (I won’t tell you who it is) to fix it since it must be costing them in money raised for a good cause.
*Update: to read the follow up post read:
#leo Conversion Optimization 101: Could You Help? http://t.co/5tzU5K1k
New @TheGrok Conversion Optimization 101: Could You Help? http://t.co/3cFZ9Mdt
There is no call to action. The process button, avoiding if it’s the best name for the button, should have a different colour. I will also remove the cancel button, because if the user wants to leave, he simply closes the tab.
Agreed. But that is still not a complete answer on how to fix it.
I agree with Elías. The three buttons: Previous, Process and Cancel all have the same colour and visual weight. I would change the Cancel & Previous buttons to mere text links.
Since this is the last step it would be good to also indicate this to the user. Instead of the Process label, something like Complete donation would be more fitting.
True. Your main call to action should have the most dominant visual weight. I believe at the top of the page it did say it was a last step but they could have a reminder here as well. Still more to go to fix this completely.
Conversion Optimization 101: Could You Help?: Yesterday, I went to a website to make a… http://t.co/s5VJHEd8
Do you know #CRO? Can you fix this call to action? http://t.co/sLGKDWnC
Do you know #CRO? Can you fix this call to action? http://t.co/tNkC3xna #cs12
The same with @Dennis Moons – it’s not any call to action… the buttons are the same, colour, size..
Wow, so many things you could do with one simple button. The call to action does not stand out here. As a result the other available options “previous” and “cancel” are also becoming CTA’s.
The CTA needs to stand out so should therefore be a different colour and size to the others.
I would look to split test the positioning of the button. I would try it to the right of the credit card details, and would also try it where the “previous ” button is. In addition to this I would also test having the other two buttons underneath.
I would also look at split testing the wording maybe “Make Your Donation Now”, “Donate Now” or “Make Your Donation”. My thoughts are that the first would convert better as you are giving a direct instruction and relaying what will happen as a result of clicking the CTA, but we cannot assume anything.
haha, you and I submitted our comment at the same time w/ some of the same advice:)
All good points. Remember CRO is a process and if this is broken this bad, the organization is going to need to take baby steps to fix it.
I would get rid of the cancel button (if you got this far, why would you cancel?) and change “Process” into “Donate” and make the button more inviting to click on.
The biggest missing piece on this form (if this is all there is on the page) is the amount you were donating.
That was above these buttons Bill. Sorry, didn’t feel like revealing all my information.
@xavier_colomes @rtayar FUN! RT @thegrok: Do you know #CRO? Can you fix this call to action? http://t.co/GohbJgVN
Conversion Optimization 101: Could You Help? http://t.co/7Jy8MEIZ
Conversion Optimization 101: Could You Help? http://t.co/uE6ERc07 #cro
I agree with Dennis Moons that the “Cancel” should just be removed, and that the “Previous” should be “downgraded” to a link or something less prominent. I think the wording “Process” should be something more like “Complete Donation” of “Finish Donation”. Not sure what else was actually on that page, but the details of their transaction–certainly the amount that will be donated and any other info about the gift should be echoed on the page for verification. Finally, I might add that a confirmation receipt would be emailed to you the giver.
All good stuff. I’ll share later exactly how Jeffrey and I would approach this.
There is a cancel button right there when you are asking for the commitment.
That’s bad, huh?
1. Remove the “Cancel” and “Previous” buttons. Having one Cancel button on the last page of a checkout form is silly. Having two is beyond bad.
2. Make the button larger and change the wording to something more action oriented, like “Donate Now” or better yet “Donate to {Friend’s Name}.”
3. Make sure the submit button is above the fold.
4. Have an arrow pointing to it… possibly with subtle movement to draw the eye (and mouse pointer).
5. If they don’t have one, there should be a visual representation of where the person is in the process… and it should NOT be at the finish line yet… They should be a half step away from the finish.
6. They could add some security seals (McAfee etc) and short security notice near the payment button.
Not sure about #4. I don’t think in this case you would need any movement. They do show the progress this is just a screenshot from below that. Security seals couldn’t hurt as well.
Conversion Optimization 101: Could You Help? http://t.co/sLGKDWnC – #CRO
RT @TheGrok Conversion Optimization 101: Could You Help? http://t.co/6DRPpKsR – #CRO
@TheGrok Do you need to confirm it like that? maybe just remove the whole step. http://t.co/dkOhxqx8 – #CRO
My two cents:
1. Agreed with all who spoke of the terminology for the buttons. Colors, size etc.
2. I would add the following “Share Options” – “Invite Friends” and “Show your support” (post that you donated to your social media accounts)
As it is a charity looking for outreach, a clear call to action would be to share and create awareness of the cause.
The danger of doing that here is that they may get distracted from completed the transaction by the social media icons. GTC first. Get the cash! Then they could offer a share on the thank you. Which of course they didn’t do either.
I can see the error of my thoughts. My jump to “Commitment conversion conversation” was in haste. I do agree with the comments the others have posted. Design flaws aside I am trying to formulate what CTA would be beneficial to a charity website. I would surmise that a company match selection be made. I can’t see why that wouldn’t help increase funds. Lose the previous and cancel buttons all together.
The order of the buttons isn’t in a logical flow. The “process” button should be the right most button if the left most button is “previous.” Another easy fix would be to change the button text to “donate now.” Organizationally, these are probably the two biggest changes that could be implemented and result in immediate gains – because there will be someone that says that all the buttons must exist – they have been there since we started this website.
Dylan bless you. Someone finally mentioned the most important issue here. “Organizationally, these are probably the two biggest changes that could be implemented and result in immediate gains – because there will be someone that says that all the buttons must exist – they have been there since we started this website.” CRO must begin with an understanding of the organization and culture.
1. Black on orange, not a good combination. Could be hard to see if a person is visually impaired.
2. Process should be renamed to “confirm” or “Send donation”.
3. Remove cancel at this point. Why should you let a person opt out of the funnel, when they first entered it.
4. Previous, why is it there? Validation should take care of that on the previous page.
5. One button would suffice here, “Donate/confirm”.
All good points.
Conversion Optimization 101: Could You Help? http://t.co/gTclhOr8 via @TheGrok
Conversion Optimization 101: Could You Help? http://t.co/uSLhm61c – via @TheGrok
Conversion Optimization 101: Could You Help? http://t.co/tAotugHO – via @TheGrok #CRO #help
Conversion Optimization 101: Could You Help?: http://t.co/A54MphR4
Conversion Optimization Error by @TheGrok http://t.co/BC1jZF3W
Seems like an unnecessary step all-together, but also the call to action sucks.
Also, I don’t see any trust-based logos (e.g: Visa/MasterCard/VeriSign).
Another point: one of our tests in the past revealed that having a slight yellow tint background behind the credit card details section improved conversions.
James
Great interactive piece, thoroughly enjoyed forming my own opinions and then scanning through the comments and replies. The only other thought I had was to ‘show’ the benefit of donating, eg. some visual showing the positive affect that a donation has on the recipient, it serves as reminder as to why they’re there and confirms that the person who’s making the donation is taking a worthwhile step, worth split-testing with a visual.
Good idea.
I just posted my follow up at http://bryaneisenberg.com/conversion-optimization-101-culture-trumps-strategy-and-tactics/
any time i am asked to hit the final “button” to process a payment for something, i want to see ON THE SAME PAGE an itemized list and amount of what i will be charged for. i don’t care where the buttons are, i just want to be able to screen capture the transaction in case anything goes wrong with the charge. if i don’t see this information, I’m much more likely to choose previous to go back and screen capture the previous page or cancel. obviously, neither of these options are optimal for getting me to complete the transaction.