9 ms·

This is a very good example of UI optimization: http://cdn.kylerush.org/kr/images/contribute-before-after-screenshot.jpg http://cdn.kylerush.org/kr/images/contr

This is a very good example of UI optimization: http://cdn.kylerush.org/kr/images/contribute-before-after-screenshot.jpg http://cdn.kylerush.org/kr/images/contribute-before-after-sc...

justjimmy 14y ago
Would love to know more about the reasoning and discussion behind going from a 1 page process to 4 steps. (ie: The typical purchasing mindset vs. donation mind set)
- kylerush 14y ago
  Thanks for the interest! I am planning to write another blog post on all the UI optimization soon.
  - justjimmy 14y ago
    Cheers! After looking at it more (I don't have experience donating to political parties), I realized (I may be wrong) that alot of information are actually mandatory and affect your taxes(?) down the road. Was confused why all necessary info required, like addresses and employment information. (When I was think of 1 page, I was think just donation amount + CC # and CVV) But I look forward to reading any numbers of before and after you share!
    - kylerush 14y ago
      Address is pretty standard for anyone accepting payments. As for employer and occupation, we are legally required by the Federal Election Commission to do our best effort to gather the donor's employer and occupation. Doesn't have anything to do with taxes.
      - justjimmy 14y ago
        Ahh I see. I know some processor now forgo the requirement of addresses, eliminating alot of fields and barriers even more. It may take quite a while to get used (and feels scary too).
- kevinconroy 14y ago
  If it's anything like the non-profit space, the multipage checkout, if done right, can allow you to psychologically hook the donor in and yield higher completion rates. (Clicking a donation option is much lower commitment than typing your name and address as a starting point.) It also allows you vary the checkout steps based on what the donor selects. You can then treat a $10 differently than a $500 donor to optimize conversion rates for each cohort.
- ericcholis 14y ago
  I've approached this problem myself for an ecommerce platform. In certain use-cases, less pages/steps doesn't always mean more conversions. For this instance, the large photo background of Obama in action evokes more emotion than the formal portrait. Also, it's a very simple and clear call to action. In this case, the donation amounts are their add to cart. It's also very important to understand how users got to the donation page. From the article, it would appear that most of the "sell" was done via other media (social, email, traditional links). After their A/B tests, I could assume that they are leaving the sell of "why" up to the users. This allows the designers to focus on conversions. Lastly, the four steps aren't traditional "checkout" steps. Each step focuses on very specific information, eliminating clutter and keeping the user's attention. Too many elements on one page can be a bad thing.
- untog 14y ago
  The rationale I've heard before is that people are put off my large forms because they see the amount of information they're going to have to input. If you split it up it looks like less, and by the time the user realises that step 3 has 10 fields they've already progressed through two pages and feel "invested".
  - Tyrant505 14y ago
    This is absolutely correct. Plus the focus on the action: donate, then the user already feels committed! Oh, Brains.
- ihodes 14y ago
  Four steps is better for all sorts of purchases. Each bit of informations entered is a bit of effort invested in the process, making each additional step more difficult to quit (sunk costs). Making the first steps easier (and, especially, putting the payment info at the end) means the user is eased into the process. People also like seeing progress, hence the 1-2-3-4 thing (though that can also be daunting; seeing that there are many more steps to go: test this). Of course, while I think this is solid general advice, test/whatever for your own situation. Big forms are scary. No one likes forms.
  - buddhaofdoubt 14y ago
    That's exactly what we did with voteforchange in 08. Scott Thomas and Chris Hughes were the brilliant team behind that. Then they went back to a one page form, like the only thing good about voteforchange was that you could make it cutesy and brand it really easily for lots of different demographic groups and not the shit tons of UI research and optimization that went into creating the shortest possible path for the registrant, collecting partial data, saving application state, etc.
    - buddhaofdoubt 14y ago
      That's what I hate about rails. You spend so much time filling out YAML and reading documentation and making sure you've got the right gems for the job and that you didn't accidentally go down a rabbit hole that by the time you're ready to build something it looks like the same bucket of sand everyone else is waiting for the tide to come and collect.
    - buddhaofdoubt 14y ago
      Know this. I will be somewhere in the world doing cool shit when the DNC shits in SVP's EC2 bucket. I won't know exactly when his heart dies, but I'll feel it. Like thousands of voices screaming out and being silenced. I might be in the bathroom taking a piss, looking in the mirror as the camera slowly pans in on my face and I will breath in slowly, and out like darth vader, but I'll know.
    - buddhaofdoubt 14y ago
- ccarpenterg 14y ago
  In the first UI the users are overwhelmed with all the information they have to fill out in order to make the donation. In the final UI the process has 4 steps.
- webbruce 14y ago
  It's all about heavily reducing a users options and guiding them
- vbl 14y ago
  I can't speak for them, but we do know that big forms are intimidating and tend to induce the feeling of, "Ugh, I don't have time for this now." Even though there are technically more steps, they are unambiguous, digestible and feature a clear sense of progression. User usually don't mind multiple steps as long as they make sense within the context of the goal at hand.

This is a very good example of UI optimization: http://cdn.kylerush.org/kr/images/contribute-before-after-screenshot.jpg http://cdn.kylerush.org/kr/images/contribute-before-after-sc...

justjimmy 14y ago

Would love to know more about the reasoning and discussion behind going from a 1 page process to 4 steps. (ie: The typical purchasing mindset vs. donation mind set)

kylerush 14y ago
Thanks for the interest! I am planning to write another blog post on all the UI optimization soon.
- justjimmy 14y ago
  Cheers! After looking at it more (I don't have experience donating to political parties), I realized (I may be wrong) that alot of information are actually mandatory and affect your taxes(?) down the road. Was confused why all necessary info required, like addresses and employment information. (When I was think of 1 page, I was think just donation amount + CC # and CVV) But I look forward to reading any numbers of before and after you share!
  - kylerush 14y ago
    Address is pretty standard for anyone accepting payments. As for employer and occupation, we are legally required by the Federal Election Commission to do our best effort to gather the donor's employer and occupation. Doesn't have anything to do with taxes.
    - justjimmy 14y ago
      Ahh I see. I know some processor now forgo the requirement of addresses, eliminating alot of fields and barriers even more. It may take quite a while to get used (and feels scary too).
kevinconroy 14y ago
If it's anything like the non-profit space, the multipage checkout, if done right, can allow you to psychologically hook the donor in and yield higher completion rates. (Clicking a donation option is much lower commitment than typing your name and address as a starting point.) It also allows you vary the checkout steps based on what the donor selects. You can then treat a $10 differently than a $500 donor to optimize conversion rates for each cohort.
ericcholis 14y ago
I've approached this problem myself for an ecommerce platform. In certain use-cases, less pages/steps doesn't always mean more conversions. For this instance, the large photo background of Obama in action evokes more emotion than the formal portrait. Also, it's a very simple and clear call to action. In this case, the donation amounts are their add to cart. It's also very important to understand how users got to the donation page. From the article, it would appear that most of the "sell" was done via other media (social, email, traditional links). After their A/B tests, I could assume that they are leaving the sell of "why" up to the users. This allows the designers to focus on conversions. Lastly, the four steps aren't traditional "checkout" steps. Each step focuses on very specific information, eliminating clutter and keeping the user's attention. Too many elements on one page can be a bad thing.
untog 14y ago
The rationale I've heard before is that people are put off my large forms because they see the amount of information they're going to have to input. If you split it up it looks like less, and by the time the user realises that step 3 has 10 fields they've already progressed through two pages and feel "invested".
- Tyrant505 14y ago
  This is absolutely correct. Plus the focus on the action: donate, then the user already feels committed! Oh, Brains.
ihodes 14y ago
Four steps is better for all sorts of purchases. Each bit of informations entered is a bit of effort invested in the process, making each additional step more difficult to quit (sunk costs). Making the first steps easier (and, especially, putting the payment info at the end) means the user is eased into the process. People also like seeing progress, hence the 1-2-3-4 thing (though that can also be daunting; seeing that there are many more steps to go: test this). Of course, while I think this is solid general advice, test/whatever for your own situation. Big forms are scary. No one likes forms.
- buddhaofdoubt 14y ago
  That's exactly what we did with voteforchange in 08. Scott Thomas and Chris Hughes were the brilliant team behind that. Then they went back to a one page form, like the only thing good about voteforchange was that you could make it cutesy and brand it really easily for lots of different demographic groups and not the shit tons of UI research and optimization that went into creating the shortest possible path for the registrant, collecting partial data, saving application state, etc.
  - buddhaofdoubt 14y ago
    That's what I hate about rails. You spend so much time filling out YAML and reading documentation and making sure you've got the right gems for the job and that you didn't accidentally go down a rabbit hole that by the time you're ready to build something it looks like the same bucket of sand everyone else is waiting for the tide to come and collect.
  - buddhaofdoubt 14y ago
    Know this. I will be somewhere in the world doing cool shit when the DNC shits in SVP's EC2 bucket. I won't know exactly when his heart dies, but I'll feel it. Like thousands of voices screaming out and being silenced. I might be in the bathroom taking a piss, looking in the mirror as the camera slowly pans in on my face and I will breath in slowly, and out like darth vader, but I'll know.
  - buddhaofdoubt 14y ago
ccarpenterg 14y ago
In the first UI the users are overwhelmed with all the information they have to fill out in order to make the donation. In the final UI the process has 4 steps.
webbruce 14y ago
It's all about heavily reducing a users options and guiding them
vbl 14y ago
I can't speak for them, but we do know that big forms are intimidating and tend to induce the feeling of, "Ugh, I don't have time for this now." Even though there are technically more steps, they are unambiguous, digestible and feature a clear sense of progression. User usually don't mind multiple steps as long as they make sense within the context of the goal at hand.