Checkout User Experience

[pippinsplugins]

I would like to start a discussion on the overall user experience for the EDD checkout system.

I know that it's not perfect, I know that there are others that do it well, and I know that I personally want to make the checkout experience as user friendly as possible.

This is going to be an open ended question and call for ideas / suggestions.

If you have ideas for how to make it better, please put them here, no matter how extreme or simple.

The goal is to not only provide a simple checkout experience, but also one that converts really well.

[adampickering]

First suggestion.

• add the option to auto select the payment method

[pippinsplugins]

+100 to that. Already have an issue for that: #855. It is mile stoned for v1.5.

[elliott-stocks]

Allow customers to click on a product in their cart (not sure if possible).

Use ajax (if enabled) to delete a product from the cart (maybe a fade out affect).

Look into using multiply items in PayPal instead of concatenating each item together with a comma (see here - https://easydigitaldownloads.com/support/topic/items-listed-together-and-cutoff-on-paypal-checkout/)

[pmgarman]

I'll be upfront I have no suggestions for this :) but I feel like the checkout could use some help design wise, feels like just any other form.

Not a huge fan of the dropdown for the gateway options, kind of hard to have icons and stuff on a per gateway basis.

[brichards]

1. Retain all user-entered fields, especially on submission failure, but also if they accidentally navigate away (http://simsalabim.github.com/sisyphus/)
2. Automatically validate fields where applicable (e.g. email is a valid email, http://parsleyjs.org/index.html, and that a credit card is indeed a credit card, https://stripe.com/blog/jquery-payment)
3. Sane error messages that are specific to which data was incorrect (Stripe's jquery-payment.js will help with isolating the incorrect CC vars, regardless of payment gateway)

+1 to @pmgarman's suggestion for using radio input instead of dropdown select for gateway selection

[pippinsplugins]

When it comes to checkout design, I'm very, very reluctant to do too much here, simply because of the kind of affect that can have on current user's implementation. I also believe very strongly that plugins should not be imposing their own drastic CSS styles. There is definitely some design improvements we can make, however.

@brichards

1. Checkout fields are already retained if using ajax.
2. This is already done on the email field and credit card fields. We're using this library: https://github.com/pippinsplugins/Easy-Digital-Downloads/commit/5d9554e1e66486a6c78c912aa681fe8c5dda825c

[adampickering]

:+1: for the radio boxes for payment options.

• Examples:

1 Example 2 Example

If the checkout design could look anything like this I think you'd be on to a winner :) http://dl.dropbox.com/u/1657501/Screenshots/q4ki.png

Seriously though I think the following needs to be changed.

• Do the easy stuff first! place the name information and address info before anything else in the checkout, credit card info should be last, it gives the user lots of momentum and then they have filled out half on the page already and have less chance of abandoning the checkout.
• Move the coupon box closer to the top where the Total Price is shown so they can instantly see if the coupon code has worked on the page, without having to scroll to the top of the page.
• Add simple CSS styling to section off the different sections of the checkout, i.e. (Coupon) (Name, Address) (Payment Information) perhaps with simple lines, example: http://dl.dropbox.com/u/1657501/Screenshots/hm~_.png

[pippinsplugins]

Love the suggestions Adam. Keep it coming! Once we have lots to go off of, I will begin making actual tweaks,

[chriscct7]

I absolutely love this one by Adam: http://dl.dropbox.com/u/1657501/Screenshots/q4ki.png However, I do think the payment gateways should be lined up line

(radio) Name (radio) Name

With that new option to select a default payment gateway

On Tue, Feb 19, 2013 at 5:41 PM, Pippin Williamson <notifications@github.com

wrote:

Love the suggestions Adam. Keep it coming! Once we have lots to go off of, I will begin making actual tweaks,

— Reply to this email directly or view it on GitHubhttps://github.com/pippinsplugins/Easy-Digital-Downloads/issues/911#issuecomment-13804596.

[jmilone]

I agree with most of the suggestions above. Thanks for opening this discussion, Pippin.

We've tweaked our checkout form: http://d.pr/i/Lvz4 but are still seeing quite a bit of abandonment. It's hard to know exactly why, but we are looking at conversions relative to our previous solution, which was e-junkie/PayPal. The process (dead simple) consisted of a Buy button, then a modal box with two payment choices PayPal or Google Checkout, then the customer was thrown into their choice of offline payment process where the actual checkout happened.

Because conversion was higher with that e-junkie/PayPal solution, it leads me to believe that some combination of more simplicity and trust were to blame for the higher ratio. My guess is that people trusted the PayPal process more than what is being perceived as a random checkout form on a random site.

I suppose my hypothesis is based on my assumption of the theme buyers psychology. Despite being around for 3+ years, people do not trust Organic Themes like they would Amazon. It makes me wonder if fighting for trust on the checkout form is a battle we can win vs surrendering to third party payment processors. With those theories in mind, I think trust and simplicity may be improved via two possible approaches:

On-site

• All the suggestions above.
• Consolidate/condense forms (possibly two columns, like http://d.pr/i/ITuA).
• Maybe some random security info available on the form (ie: your IP [displayed] is being logged, this page is SSL secured, etc). A little silly, but might make customers feel better.

Off-site

• A simple "kick out" product link, which kicks the user to a trusted payment processor (perhaps similar to obox: http://www.obox-design.com/purchase.cfm?product=165010).
• Tighter integration with off-site payment solutions.

I also think having built in ways of testing our assumptions would be very helpful. A built in A/B testing option for checkout forms and/or landing pages might be useful.

Anyway, I will certainly admit relative ignorance when it comes to the nuances of checkout page design and development; but I'd love to keep this discussion going.

[sunnyratilal]

Here's a quick mockup of what I think the Payment Selection should look like: http://codepen.io/sunnyratilal/full/Dnayq

There's still some more to come; I'll post some other mockups soon.

Thoughts?

[sunnyratilal]

The errors also need to be improved in my opinion. I believe something like this would be more user friendly? http://codepen.io/sunnyratilal/pen/hdfaq

[robaggior]

In some European countries we need to place the purchase button close to the total purchase price of the checkout cart. Otherwise the site owner is in jeopardy to get sued - I know stupid regulations in the EU / Germany. There need to be an option to move the checkout cart below the personal and payment info and above the purchase button.

[pippinsplugins]

I really dig what @jmilone is saying about the option to have a direct purchase link. We've talked about doing this a little with PayPal in #608.

I also really like the two column checkout screen as it helps condense the longer forms down to a shorter version. This would have to be done carefully, obviously, because we risk breaking current users checkout. Luckily, we already have a nice fallback method in place with how the edd.css can be copied to the templates folder.

@sunnyratilal For your error improvement, are you thinking that the error messages should be removed and just have the fields highlighted, or are you saying that we should add the highlighting along with the current error messages?

@robaggior EU laws are something I'm pretty ignorant of, so thank you for the feedback. Making the checkout easier to modify is also something I'm very interested in doing.

@chriscct7 I'm pretty reluctant to change the checkout form so drastically as to match @adampickering (I built that custom version for him). While it looks great, we have the issue of screwing up current user's checkouts. We need to make subtle changes before making drastic ones.

[sunnyratilal]

@pippinsplugins I suggest that we add the highlighting along with the current error messages. If you think that becomes too much then add the error message (i.e. Enter your name) where the current exclamation mark is on the demo.

[pippinsplugins]

@sunnyratilal I agree with the highlighting.

[sunnyratilal]

@pippinsplugins Great! Glad you liked it! :)

[pippinsplugins]

Moving to a 2 column is definitely something we should look into, though we must be very careful doing so to not break user's who have added customer checkout fields.

BTW: payment method is now autoloaded via #855

[adampickering]

We should all read this study on checkout form UX design testing

http://uxdesign.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/

[pippinsplugins]

Interesting. That completely nixes the 2 column idea.

[pippinsplugins]

I love the comments about making the sensitive data (credit card) parts of the form more visually secure. This screenshot shows a great example:

[pippinsplugins]

This quote really stuck with me and validates the recent updates we made to the discounts section:

If you really need to update a value before moving on to the next step, then auto-update the value using AJAX or the like, without showing an “Apply” button.

[adampickering]

Yeah, we did that on our checkout page design, notice the "Padlock" to make if feel more "Secure"

[pmgarman]

@pippinsplugins i really like the secure credit card section could easily do that with is_ssl() so it only shows on secure sites. And then have an option or action to add a SSL seal on the right side if the site has one.

[pippinsplugins]

@pmgarman That's exactly what I was thinking. We can go ahead and make it stand out, but then also add the "this site is secure, blah, blah" if the page is on SSL.

[adampickering]

Some more great studies:

• Which Site SSL/Secure Seal do People Trust the Most? (2013 Survey Results) http://baymard.com/blog/site-seal-trust
• 6 Ways to Get More Out of Your Order Confirmation Page http://baymard.com/blog/order-confirmation-page
• A Holistic View on the Current State of Checkout Usability http://baymard.com/blog/holistic-view-on-checkout-usability

And theres a ton more here: http://baymard.com/blog/archive

[pippinsplugins]

How's this for an improved, default checkout?

[pippinsplugins]

Or, with an icon font:

[elliott-stocks]

I think the icon font looks better.

[sunnyratilal]

I agree with @elliott-stocks.

I think the Credit Card Info text should appear fully inside the box not half in half out. Also, there seems to be some sort of margin/padding under the Expiration field.

[elliott-stocks]

I think it might be useful to add an option which adds check-boxes next to each item in the cart and a "delete all selected" button. Could be useful if the store sells lot's of products.

[sunnyratilal]

+1 to @elliott-stocks's idea

[pippinsplugins]

I don't think I agree with the checkbox idea actually, mostly based on the case study linked above. I wonder if the checkboxes might get confused for something else, or users wouldn't understand the relation between the checkboxes and the Delete All link.

[pippinsplugins]

I think we should go ahead and add the descriptions below the labels of each field as well, but possibly add an option to disable them.

[sunnyratilal]

@pippinsplugins Agreed.

[michael-cannon]

I really like seeing these collaborations going on.

I've been experiencing abandoned checkouts as well and even some bad feelings from folks not able to get the purchase completed.

An end user provided feedback on their thoughts to improvement.

The position of the PayPal logo over the account log in makes it look like it's asking for a PayPal user name and password.

Remove the PayPal logo or use it as the payment button at the bottom of the form.

Add instructions to http://aihr.us/checkout/ where you currently have the PayPal logo. "Complete the customer information form below, then click Complete Purchase to go to PayPal, or 'Log in' to your Aihrus account."

Swap the required fields with the optional fields - move required fields under these instructions.

[Email] [First Name] [Last Name] [Discount]

Then add another instruction right under the required fields:

"'Create an account' to save your information here (optional)."

[User Name] [Password] [Password again]

[Agree to TOS]

[Complete Purchase] or use a Pay with PayPal button here

Full thread

[pippinsplugins]

@michael-cannon Thank you so much for posting this feedback! I would never have expected that about the PayPal logo, but it makes perfect sense, especially when there is only one logo displayed instead of multiple (for each of the credit cards).

I do really like what you're saying about pushing the username / password info to the bottom.

[thomasgriffin]

So I've just implemented a big change to how the Soliloquy checkout process works, customizing completely the flow of from adding a product to the cart to the final checkout. Buyers can either pay with credit card or PayPal. Here are some of my findings with the current setup (http://i.imgur.com/r2jd9uC.jpg). Note that my stats are based on a small period of time (~2 weeks) so things will fluctuate as data begins to normalize.

• Checkout abandonment has dropped from 62% to 37%, which is excellent!
• In the short time I had the default dropdown for CC vs. PayPal, PayPal was chosen 83% of the time. With the new setup, credit card is chosen 86% of the time, which I find quite interesting. Who knows how many sales I lost previously because users preferred credit card over PayPal!!
• The number of developer license purchases has increased 23% vs. single license purchases, so I don't know if that is just an anomaly, but I'm interested in tracking that. Maybe since the checkout process is easier to understand and appears more secure, users are more willing to trust in what they are purchasing.
• Consequently, total sales have increased around 34% compared to a month ago.
• I've incentivized the checkout process by offering a free 5% off coupon just for getting that far. I've noticed it has been used quite a fair amount and may be a reason why checkout abandonment has decreased.
• Upgrades have significantly increased because there is no information required from a user to upgrade minus checking a box agreeing to the Terms and Conditions (and optionally a discount code). Everything else is handled out of their view so as to not distract them from upgrading.

Here are some things I think are helping:

• Clear descriptions on each of the fields. My wife and the other people I talked with really appreciated the field descriptions. Apparently we take for granted what fields are actually used for, and it helps ease consumer anxiety when they know what and why particular information is needed.
• The credit card fields are denoted with lots of secure types of things, such as the SSL seal and lock background images for CC fields.

Possible action steps for EDD:

• I believe field labels should be above instead of below the fields. Especially for users who are not using modern browsers that take advantage of the placeholder attribute, it is especially important to reduce any sense of unknowns when entering the checkout process. Labeling fields first can reduce this.

I'm not going to offer design advice since that could seriously mess up some people's current implementations, but I believe having labels above fields can help increase conversions and reduce checkout abandonment.

[pippinsplugins]

This is EXCELLENT @thomasgriffin and exactly the kind of things I wanted to see.

I'm voting that we go ahead and add the field descriptions for v1.5. Issue: #947

[jmilone]

That is really good information, wow. It definitely confirms a lot of my suspicions. @thomasgriffin thanks for reporting all that! If you don't mind sharing, what are you using to track sales stats like abandonment, etc?

[thomasgriffin]

@jmilone I'm using Google Analytics Goals to track abandonment. You can target specific endpoint URLs and then determine what a user does from there. You can also enable ecommerce tracking to track product sales, stats, time it takes for a user to complete the checkout, etc. As for credit card vs. PayPal, just some simple math on the number of purchases vs. the type of payments used.

[pippinsplugins]

@thomasgriffin Would you be willing to do a quick overview of how to set that up? I know it's something I don't know much about but it would be immensely help for us all.

[thomasgriffin]

@pippinsplugins sure! I'll work on writing up a post about it on my blog (since I need to do that anyways) and try to outline my transition from a developer to a marketer and how that effects things like cart usability. Then I'll describe how I went about customizing EDD and giving some reason why I did what I did, etc.

[thomasgriffin]

Also, just as another note, I've not had any payments get stuck in the Pending column, which means that I haven't lost any people who go to pay with PayPal and then decide not to purchase Soliloquy since the new checkout system has been implemented. Previously I had some 90+ transactions stuck in pending costing me nearly $5k. One-click purchases are very powerful (which is what the credit card field does for Soliloquy) and keep you lots of money. :-)

[adampickering]

I have a better idea.

Build a checkout like this http://www.adampickering.com/works/MintThemes/Checkout-Proposal-MintThemes/

Looks a lot more like what Stripe are doing and gets to the point, there would be a way to add more fields, checkboxes etc, to the form.

I think the traditional checkout forms are looking a bit tired in my opinion; studies have been done on this type of checkout design and conversions are much higher than the traditional checkout design.

Lets build it :)

[jmilone]

@thomasgriffin @pippinsplugins Awesome. Thank you both. I look forward to the post and form changes in v1.5!

[pippinsplugins]

@adampickering I love that checkout but there is no way it could be the default checkout style. It's beautiful and all but it would result in so many support tickets. Forms like that are 1000x more likely to break due to bad themes and plugins.

[adampickering]

Maybe we could create an EDD Addon that would basically do this, then its optional, just need to create the filters/hooks..

[pippinsplugins]

Yes of course. I love the idea of having it, just not as the default checkout.

[pippinsplugins]

Take a look at the field descriptions and updated labels I've been working on in #949 http://screencloud.net/v/gf2U

Feedback?