I recently spoke with a non-profit organization in North Carolina that needed an increase in charitable donations. During an assessment of their current site, I noticed that their online giving process needed some simplification and testing. Your goal should be to simplify the process of making an online donation. This article will briefly guide you to some of the major things to look for. Getting people to open their wallets online is a very difficult thing to do, so I hope some of what you learn here can be used with your clients.

Donation Button

Ensure that the donate button is clear and distinct from the background and other elements on the page. User’s number one complaint is not knowing how to donate. Make this the easiest element to find on the page. Another important thing to remember is to change button text so they say what they do, instead of having a button labeled “submit”. This will help users navigate your site more efficiently.

Content has the Lead Role

This article won’t be covering content, but it is important to point out that content is the number one factor in increasing your conversions. Users love seeing uncluttered content that is easily scannable and consistent. Use language and offer content that is crafted specifically for the audience. Ask yourself if visitors can connect with the organization on any page of the site? If so, you are on your way to improved results.

Distinguish between one-time and monthly donations

There are two basic forms of donations that most charitable organizations accept: recurring payments and single donations. Make sure you allow users to select one or the other from the beginning of the process. Also, if the organization accepts any other forms of payment, include them as a third option as shown in the example below.

I designed a mockup of recurring payments and a single donation button. This is the first step after a user clicks on the donate button.

A/B Testing

One of the most important things you will need to do to see increased donation conversions is through A/B Testing. Ensure that you are regularly benchmarking and testing the design, imagery, copy, usability and page speed. Some changes work well with certain audiences, but not others, so know your users and their behaviors.

Donation Form Best Practices

1. Put the easier field groups first to lower the engagement barrier
2. Make the form look short and easy to complete
3. Remove any unnecessary form fields
4. Eliminate body copy
5. Allow the ability to change details like donation amount
6. Indicate that the user’s information is secure (Note: I’m simply using a lock icon in the example below)
Example mockup of the payment details form

Lastly, get creative and try out new things. For example, you could create a ‘donate via text messaging’ option for your mobile users. Again, test it out with tools like Optimizely and Google Analytics, then monitor the results.

For further reading, I recommend a book on persuasive design patterns called Evil By Design by Chris Nodder. It is an excellent read on how to leverage human habits in our designs.

When designing user interfaces, you must keep things like proper readability, appropriate spacing, line heights, and users with low vision in mind. Accessible typography is one of the most crucial components of design to understand and implement correctly. Designers should be implementing style guides containing typography details, best practices, and standards for components to help bring accessible interfaces to organizations.

Choosing a Typeface

A well-chosen font can give your organization credibility, users increased reading pleasure, and trigger different emotions.

Aesthetics

Make sure the typeface is well suited for the audience it is intended. Think about what each font says to you and make sure it aligns with the goal, organization, or overall mood of the application.

Experiment

Try out the typeface on your design, so you can see it in the context of the structure of your application. Either use software like Sketch to see the changes or if you are working in the browser, create a SASS variable to easily swap out the fonts globally. I find that this is the best way for me to choose fonts.

Read Them

While you are experimenting with different fonts, it is important to read them. Actually read them by spending time reading large amounts of text. You will be able to quickly eliminate fonts that don’t fit by simply doing this one thing.

Trust Your Gut

Sometimes the choice of fonts doesn’t have to be a mostly technical ordeal. Many times you will just see the perfect font for your design when you see it.

Lastly, I suggest using sites like Typ.io to help you find nice font combinations that others are using.

Color & Contrast

Some users with low vision will adjust the contrast levels of their screens. To accommodate for this, designers should ensure that their applications meet WCAG 2.0 level AA requirements at a minimum. This requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (14 point and bold or larger, or 18 point or larger).

This can easily be verified by using a WebAIM’s Contrast Checker. I also recommend that designers begin the design process by using accessible color palettes.

Most typefaces were designed to be printed with black ink on a light background, so you need to be careful when choosing a typeface reversed out of a dark background. Keep in mind font weight, style, and overall readability when your background is dark.

Line Length

Body Text

The optimal line length for your body text is considered to be 50-60 characters(Baymard). I use the Word & Character Count chrome extension to see how long lines are. Personally, I prefer the characters per line to be between 60 and 80 characters when I am reading.

Short Lines

For short lines, the optimal line length is considered to be about 15-30 characters

Text Styles

Designers should limit the number of text sizes and styles to keep a clean and readable feel to their applications. Frameworks like Bootstrap, Materialize, and Material Design Lite will have base typographic scales already built in for developers. Google recommends having a basic set of styles that are based on a typographic scale of 12, 14, 16, 20, and 34.

For further reading, I would recommend going through Google’s Design Spec and IBM’s Design Language.

Providing students, employees, and the general public with the necessary tools to learn and do their jobs is a moral and legal obligation to every organization. Technology that accommodates all users benefits everyone and makes for a better world.

The principle of universal design states that any document, tool, website, or application should be accessible to users regardless of the instrument (visual browser, screen reader, mobile device, slow internet connection, keyboard-only users, etc.).

Organizations benefit from integrating accessibility practices into their business processes and software development. For example, a digitizer at a library may use an OCR to scan newspapers and then a software developer can provide a searchable document then can be read by a screen reader or create a text transcript of the item. Blind users can then hear information that was once only visual. Users with low reading abilities, poor vision, and language barriers would also benefit from this implementation.

Making systems accessible not only ensures equal access to information but as the above example showed, also benefits users without disabilities by allowing them to customize their experiences.

Today, I have highlighted 12 steps towards Universal Design that can be implemented in your organization today. Enjoy!

Webpage Should Be Keyboard Navigable

The default keyboard navigation order must be logical and intuitive. This generally means that it follows the visual flow of the page – left to right, top to bottom (i.e., header first, then main navigation, then maybe page navigation, and finally the footer).

Create Accessible Forms

Instructions, cues, required form fields, field formatting requirements, etc. should be clearly identified. Many users can only use a keyboard to navigate the web. You must ensure that the forms on your website can be completed using only the keyboard. If either client-side or server-side validation detects errors on forms, then the focus should go to the error elements, alerting a screen reader that there are problems with submission, ensuring usable and accessible error recovery

Don’t Use Color Alone to Convey Information

Web pages should be designed so that all information conveyed with color is also available without color. To test this requirement, there are some browser plugins that remove color from web pages.

Validate Your WebPages

The topics listed here cover the majority of web accessibility issues. However, to ensure that your pages comply with ADA/Section 508 Standards, check them with a free web accessibility checker.
• http://wave.webaim.org/
• http://cynthiasays.com/
• Compliance Sheriff

Avoid Using Frames

Frames are not inaccessible to modern screen readers, but they can be disorienting. If you use frames, give each frame a descriptive title attribute value. Keyboard shortcuts allow the
reader to jump quickly between frames, so brief and descriptive titles are a necessity

Make Scanned Content Accessible Using Full-text Search and OCR

Scanned items such as newspapers should have text transcripts available. OCR technology directly converts scanned paper documents that are laser-printed or typewritten files into editable text.

Caption all Videos

Captions are the text versions of the spoken word presented within multimedia. Although captioning is primarily intended for those who cannot hear audio content, it has also been found to help those who can hear the audio content. For example, non-native language speakers can benefit from captions. Captions should be synchronized with the audio in the multimedia.

Provide Text Transcripts

Transcripts allow anyone who cannot access content from web audio or video to read text instead. Transcripts do not have to be verbatim but should contain additional descriptions, explanations, or comments that may be beneficial, such as indications of laughter or an
explosion. Transcripts also allow the content of multimedia to be searchable.

Ensure Javascript is Accessible

Some event handlers are dependent upon the use of a mouse or keyboard. These are called device-dependent event handlers. Other event handlers are device independent and are triggered by
both the mouse and keyboard or by other means. To ensure accessibility, use a device independent event handler (one that works with both the mouse and the keyboard).

Documents Should be Accessible

PDFs and other office application documents should be accessible. Authors
of accessible PDF documents add descriptive alternate text to page elements that are typically presented not as text but only as visual elements, such as graphics, figures, form fields, and links. When screen readers encounter alternate text, they can interpret the element and read its alternate text description aloud.

Alternate Descriptions Should Be Provided for all Photos and Graphics

When you add images (photos, graphics, logos) to your web page, you must also provide “alternative language tag” (ALT) descriptions for each one. Alt tags for space or design images and images that do not provide content should be empty (alt=” “). Screen readers, Braille displays, and other assistive technologies will relay your alternative text to visitors who use such adaptive devices, providing them with a “comparable experience” to that of sighted visitors. Some browsers will display your ALT descriptions when users run their cursors over the image.

Presentation and Structure Need to Be Separate

Some users input their own custom CSS stylesheets to improve readability. To make this possible, the structure (HTML) of our web pages needs to be separate from our styles (CSS). Users should be able to select fonts, color, margins, and size.

Further Information on Accessibility

I encourage everyone, especially web developers to read and reference the following sources.

• Guide to Web Accessibility
• Mobile Web Best Practices