Wikipedia recently launched their annual appeal for donations. This involves the familiar "A personal appeal from Wikipedia founder, Jimmy Wales" banner being shown some of the time at the top of the articles on the site. On clicking this, the potential donor is sent to a landing page at wikimediafoundation.org:
Form Usability Issues
A couple of nights ago I visited this page and actually considered making a donation (after reading Jimmy's well-written appeal), but something put me off when I moved my attention to the donation form. Shortly afterwards, I wondered what this was and went back to the page for a more objective look. I picked up on several things which had contributed to the bad impression, and it struck me that the form could very easily be improved. Using the web developer toolbar for Firefox to edit the HTML of the page, I spent a few minutes making what I feel is an improved version (using the same styling) that would have made a better impression.
Below is a side by side comparison of the form, before and after modifications (scaled down to fit this blog).
Notes on Changes:
1. Labels For Checkboxes start with the active verb of the operation that the checkbox field applies to - "send" and "list". Starting these labels with "please" or "I agree" is something that is reminiscent of the type of form where the action of the checkbox will perform better if it's function is not immediately obvious at a glance, such as signing your e-mail up to be spammed, sharing personal data with third parties or agreeing to questionable terms and conditions. Many users would not make these connections, but regardless of this, the change promotes clearer English; with no redundant language it is much easier to see the function of the checkboxes and the overall function of the form at a glance.
2. Supplemental Information that functions as a guide or explanation to filling out a form field is visually differentiated by being rendered in a smaller font size than the label. A different text colour could also be used to accomplish this. Carrying out this change visually simplifies the form, and reduces the apparent length and complexity of field labels further.
1. Misplaced Call to Action: Should a user follow the most obvious path to conversion, of reading Jimmy Wales' text, and then moving their attention to the form in order to make a donation, the introductory text encouraging people to "donate now" is redundant, and could conceivably cause a bad impression. Redundant calls to action (given after a typical user will already have effectively converted) bring to mind a nagging parent or spouse. For me, this immediately started the form off with a bad impression.
2. Consistency of Language: The word 'gift' is mentioned nowhere else on the page I landed on, in all other cases the donation being called, unsurprisingly, a donation. This inconsistency would be unlikely to actually confuse a potential donor, however things like this can contribute to give an overall bad impression of a form, particularly since 'gift' and 'donation' are not exact synonyms. This label is also written in the second person, where as every other label is written in the first.
I may have included the "tax deductible" point in the new version, however Wikipedia are working on the form at the moment, having added this text since I produced the mock-up.
3. Visual association of connected fields: The donor list/public comment options are not sensibly structured. As both fields are optional and closely (but not directly) related, this is not straightforward to present in a coherent manner. I have chosen what I feel is a good compromise in terms of how the information is presented. The original version did not make clear at a glance the connection between these fields, or that leaving a public comment is optional (some people may not wish to leave a comment - this was one of the main things that may have put me off the form). Adding an indent to the "optional comment" field visually associates it with the public donors list checkbox, further simplifying the appearance of the form.
4. Privacy Information: As it is supplemental information to the checkbox above it, this has been moved to a new line, and visually differentiated as supplemental information to the form field. It's previous presentation made the form label for this field very long and rather clunky. I also believe that separate presentation of a privacy disclaimer could be something that surfers have come to expect to see when scanning forms.
5. Information Unrelated to the Form: The "Other ways to give" section is not part of the form and this has been identified as such by use of a visual separator. The problem with not breaking up form and non-form following text elements is that, at a very brief glance, this information could appear to be terms and conditions or disclaimers relating to the form - presence of such things are likely to make the form appear more involved and complicated, thus making a poor impression
I restricted myself in the kind of changes made on the form to rearranging order of elements, changing text content and changing font-size and margins in CSS only. There is more that could be done with the form, for example the display of the "I would like to donate" fields could be made significantly more attractive to the eye with some simple CSS rules.
Test Possible Usability Issues before Tweaking Content and Styling.
Wikipedia have been doing A/B testing of donation pages with at the time of writing twenty variants under test. However the test appears to currently be limited to changing the Jimmy Wales text to different versions. You can see the different versions here under "A".
This testing will reveal to Wikipedia what works best in terms of the Jimmy Wales text, as they would expect. However, what they are missing is that they may well see a greater increase in donations from fixing up (and testing) their form usability than by tweaking the spiel by Jimmy Wales. I do not believe that this is an uncommon situation - usability issues are often overlooked in favour of tweaking graphics, styling and content. When there are usability issues with conversion steps, any observed changes to conversion rates seen by changing other aspects of the page or site are likely to be smaller.
Wikipedia, to give them credit, are working on and trying to improve this form - today I've seen a wider version that puts the donation amount fields onto one line. However, making the whole form significantly wider to improve one aspect seems rather unnecessary. I believe some decent CSS at the level of the form fields would likely make a larger difference to presentation.
Wikipedia should be A/B or multi-variant testing these changes in the same way that they are testing different content (hopefully they are). Usability and conversion rate optimisation (CRO) can be very unintuitive, in parts about affecting subconscious reactions - I would be confident that the improved version of their form would perform better than the original, but times in the past I have felt like this and found that the result is the opposite when tested - this can be especially true when making several changes at once. That's why it's always important to test quantitatively with software such as Google Website Optimiser. This way a solid foundation of improvement is established. Unintended, negative changes are avoided, and a specific value of improvement to conversion rate for changes can be attributed with a large degree of accuracy (depending on sample size).