Categories
Learn

Donation Usability: Increasing Online Giving to Non-Profits and Charities

Non-profits would collect much more from their websites if only they’d clearly state what they are about and how they use donations. Our new usability studies revealed considerable frustration as potential donors visited sites and tried to discern various organizations’ missions and goals — which are key factors in their decisions about whether to give money.

In 2008, non-profits got about 10% of their donations online, according to a survey by Target Analytics. Given the high growth rate for Internet donations, we estimate that they’ll constitute the majority of donations by 2020. If non-profit organizations get their sites into shape, that is.

Well-designed non-profit websites are particularly suited for attracting new donors and efficiently supporting small-scale impulse giving. Websites are less effective at sustaining long-term donor relationships. For encouraging customer (or donor) loyalty, e-mail newsletters remain the Internet tool of choice.

User Research

To discover how to design non-profit websites to encourage donations, we took our usual approach: we empirically observed actual user behavior as potential donors used a wide range of sites. In total, we tested 23 non-profit websites, chosen to cover a range of categories:

Type of Non-Profit Websites Tested

Animal Rights & Welfare

National Education for Assistance Dog Services (NEADS)

Paws with a Cause

Diseases & Disorders

Accelerated Cure Project for Multiple Sclerosis

Nancy Davis Foundation for Multiple Sclerosis

Environmental Conservation

Environmental Defense Fund

The Conservation Fund

Food Banks & Food Distribution

New Hampshire Food Bank

Seacoast Family Food Pantry of NH

Human Services

American Red Cross

Habitat for Humanity

International Development

Action Against Hunger

Bread for the World Institute

Heifer International

Museums

Corcoran Gallery of Art

National Gallery of Art

Religion

Mission America Coalition

The Interfaith Foundation

Wildlife Conservation

Defenders of Wildlife

Wildlife Alliance

Youth Development

Big Brothers Big Sisters of America

Boys & Girls Club of America

Youth Education Programs

Children’s Scholarship Fund

“I Have A Dream” Foundation

Most of the sites represented major national non-profits, but we also tested some smaller, local charities.

We tested two tasks:

  • Choosing a recipient: Participants used two non-profit sites within a given category and decided which of the organizations — which had roughly similar missions — was most deserving of a donation.
  • Making a donation: Using their own credit cards, participants made an online donation to the chosen charity. We reimbursed users for this expense after the study.

We recruited a broad sample of test participants, ranging in age from 20–61, with a roughly equal number of men and women. We included users with relatively little Internet experience (at least 1 year), as well as those with more experience (at least 3 years). Job titles spanned the alphabet, from attorney and bank assistant vice president to microbiologist, police office, small business owner, and teacher.

We screened out users who hadn’t made at least one donation to a non-profit or charity during the preceding year. While there’s a first time for everything, we wanted to test people who actually exhibit the behavior we were studying.

What Donors Want

We asked participants what information they want to see on non-profit websites before they decide whether to donate. Their answers fell into 4 broad categories, 2 of which were the most heavily requested:

  • The organization’s mission, goals, objectives, and work.
  • How it uses donations and contributions.

That is: What are you trying to achieve, and how will you spend my money?

Sadly, only 43% of the sites we studied answered the first question on their homepage. Further, only a ridiculously low 4% answered the second question on the homepage. Although organizations typically provided these answers somewhere within the site, users often had problems finding this crucial information.

As we’ve long known, what people say they want is one thing. How they actually behave when they’re on websites is another. Of the two, we put more credence in the latter. We therefore analyzed users’ decision-making processes as they decided which organizations to support.

In choosing between 2 charities, people referred to 5 categories of information. However, an organization’s mission, goals, objectives, and work was by far the most important. Indeed, it was 3.6 times as important as the runner-up issue, which was the organization’s presence in the user’s own community.

(Information about how organizations used donations did impact decision-making, but it was far down the list relative to its second-place ranking among things that people claimed that they’d be looking for.)

People want to know what a non-profit stands for, because they want to contribute to causes that share their ideals and values. Most people probably agree that, for example, it’s good to help impoverished residents of developing countries or patients suffering from nasty diseases. Many organizations claim to do these very things. The question in a potential donor’s mind is how the organization proposes to help. Often, sites we studied failed to answer this question clearly — and lost out on donations as a result.

What Kills Donations

In addition to observing what “closed the sale” for charities that attracted user contributions, we also analyzed the turn-off factors that caused charities to lose out, even after users had spent considerable time on their websites.

The donation-killers:

  • 47% were usability problems relating to page and site design, including unintuitive information architecture, cluttered pages, and confusing workflow.
    • Amazingly, on 17% of the sites, users couldn’t find where to make a donation. You’d imagine that donation-dependent sites would at least get that one design element right, but banner-blindness or over-formatting caused people to overlook some donation buttons.
  • 53% were content issues related to writing for the Web, including unclear or missing information and confusing terms.

Integrating Local Chapters with the National/International Site

Missing or confusing information aside, the worst user experience erosion in this study was caused by heinous integration of local chapters with the higher-level organization.

As mentioned above, users wanted information about a non-profit’s activities in their communities, but the experience of actually visiting local chapter websites was stunning. Typically, such sites looked completely different than the master sites, even violating such elementary brand guidelines as using a consistent color scheme.

As for forging an integrated user experience across organization levels, forget it. Most non-profits could substantially improve their overall Web presence by creating a unified look-and-feel and supporting other improvements for local sites.

Donation Process: OK

Once people had decided to make a donation — and found the donation button on sites that made doing so difficult — it was fairly easy for them to proceed through the workflow and donate.

Our testing did identify some small usability problems, but the only big problem was caused by sites that used third-party payment services, which stumped some users.

Most of the donation processes had good usability because they are essentially a scaled-back version of e-commerce checkout, with fewer complications. Designers know how to build good e-commerce checkouts, and users know how to deal with the expected components.

That said, fixing a process with even minor usability problems might increase donations by 10%. For a non-profit with a $10M budget and an average share of online donations, such minor tweaks could mean an extra $100,000 per year.

While improvements are still possible for the donation process itself, our usability research clearly showed that this isn’t the main difficulty that’s inhibiting the potential of online donations to quintuple over the next decade. Rather, the big problem is bad content usability. To improve fundraising, speak plainly and answer donors’ main questions, and money will flow your way.

Learn More

124-page report on Donation Usability with 58 design guidelines and 111 screenshots of sites that worked well or poorly in user testing is available for download.

Categories
Learn

100% Easy-2-Read (100E2R)

Most websites are crammed with small text that’s a pain to read. Why? There is no reason for squeezing so much information onto the screen. It’s just a stupid collective mistake that dates back to a time when screens were really, really small. So… Type Size Comparison Screen vs. magazine: 100% is NOT big; image by Wilson Miner.

Don’t tell us to adjust the font size

We don’t want to change our browser settings every time we visit a website!

Don’t tell us busy pages look better

Crowded websites don’t look good: they look nasty. Filling pages with stuff has never helped usability. It’s laziness that makes you throw all kinds of information at us. We want you to think and pre-select what’s important. We don’t want to do your work.

Don’t tell us scrolling is bad

Because then all websites are bad. There is nothing wrong with scrolling. Nothing at all. Just as there is nothing wrong with flipping pages in books.

Don’t tell us text is not important

95% of what is commonly referred to as web design is typography.

Don’t tell us to get glasses

Rather, stop licking your screen, lean back (!) and continue reading in a relaxed position.

Five Simple Rules

1. Standard font size for long texts

The font size you are reading right now is not big. It’s the text size browsers display by default. It’s the text size browsers were intended to display.

We don’t want to click bigger or smaller buttons and we don’t want to change our preferences. We want to read right away. We want you to adjust to our settings, and not the other way around.

Initially it is more difficult to create a good layout with a big font size, but that difficulty will help you design a simpler, clearer site. Cramming a site with information isn’t difficult, but making it simple and easy-to-use is. At first, you’ll be shocked how big the default text is. But after a day, you won’t want to see anything smaller than 100% font-size for the main text. It looks big at first, but once you use it you quickly realize why all browser makers chose this as the default text size.

2. Active white space

Let your text breathe. Using white space is not a designer’s nerdy issue. It’s not about taste.

“The width of the column must be proportioned to the size of the type. Overlong columns are wearying to the eye and also have an adverse psychological effect. Overshort columns can also be disturbing because they interrupt the flow of reading and put the reader off by obliging the eye to change lines too rapidly.”
Josef Muller-Brockmann, Grid Systems

Having air around the text reduces the stress level, as it makes it much easier to focus on the essence. You don’t need to fill the whole window. White space looking nicer is not a side effect: it’s the logic consequence of functional design. Who said websites need to be crammed with stuff?

Muller-Brockmann: “The question of the column width is not merely one of design or format; the question of legibility is of equal importance.”

Please make sure that the line width (text column width, also called “measure”) is not too wide, and that you add room on the left and right to make it easy for the eye to jump. We don’t want to adjust either the font size or window size. When we open a website, we just want to read away. Column widths that scale are nice; never-ending text lines all across the screen are not.

Good Nielsen – bad Nielsen. The King of Usability recently added white space and a maximum width to his main article column (left). The old layout scaled 100% (right picture). A little bit more line space and you’re perfect.

The basic rule is: 10һ15 words per line. For liquid layouts, at 100% font size, 50% column width (in relation to window size) is a good benchmark for most screen resolutions.

3. Reader friendly line height

Here is what the reading specialist says:

Lines that are too narrowly set impair reading speed because the upper and lower line are both taken in by the eye at the same time The eye cannot focus on excessively close lines and … the reader expends energy in the wrong place and tires more easily. The same also holds true for lines that are too widely spaced.

The default HTML line height is too small. If you increase the line height, the text becomes more readable. 140% leading is a good benchmark.

4. Clear color contrast

This should not even be necessary to say. But if you still believe you can get away with one of the following combinations:

  1. light grey text on a lighter grey background
  2. “silver” colored text on a snow white background
  3. grey text on a yellow background
  4. yellow text on a red background
  5. green text on a red background, and so on…

…then you are not a web designer, but just a designer with an attitude. If you insist you are a web designer, then you have to be aware that no one will ever know, as no one will ever be able to read what you say. Stop this nonsense and let us see what you type. Note: for screen design, an overly strong contrast (full black and white) is not ideal either, as the text starts to flicker. Benchmark: #333 on #fff

5. No text in images

We want to be able to search text, copy text, save text, play with the cursor and mark text while we read. Text in images looks pretty, but pretty is not what the web is about. It’s about communication and information, and information needs to be readable and usable and scalable and citable and sendable.

If you can’t make your website look nice without text in images, I am afraid that you will have to start again from scratch.

Spread the word

If you want more websites to be readable, spread the word. Link back to this page, so people know what the 100% Easy-2-Read (100E2R) standard is all about.

Categories
Learn

Mega Drop-Down Navigation Menus Work Well

To prepare for our upcoming Navigation Design seminar, we’ve been running user studies of various navigation features. As always, some test poorly. Also as always, the more faddish features — such as tag clouds — exhibit major usability problems.

Luckily, other Web trends fare well in user testing because they have inherently good usability and match user behaviors and goals. Indeed, one particular navigation design — the mega drop-down menu — tested well enough that I want to encourage its wider use.

Given that regular drop-down menus are rife with usability problems, it takes a lot for me to recommend a new form of drop-down. But, as our testing videos show, mega drop-downs overcome the downsides of regular drop-downs. Thus, I can recommend one while warning against the other.

As the following screenshots show, mega drop-downs have the following characteristics:

  • Big, two-dimensional panels divided into groups of navigation options
  • Navigation choices structured through layout, typography, and (sometimes) icons
  • Everything visible at once — no scrolling
  • Vertical or horizontal form factors when activated from top navigation bars; when activated from left-hand navigation, they might appear as mega fly-outs (not shown).

Screenshot of navigation menu from the Food Network
Vertical mega drop-down from foodnetwork.com.

The Food Network’s mega drop-down has a close button (the “x” in the upper right corner), but this isn’t necessary. Mega drop-downs are inherently temporary and go away on their own when users move the pointer to another top-level option or to a “regular” part of the screen.

Screenshot of navigation menu from a site to order custom-made envelopes
Horizontal mega drop-down from actionenvelope.com.

Stylistically, mega drop-downs are similar to the gallery menus in the “Ribbon” GUI component introduced with Office 2007 (and also becoming popular in other recent application UIs).

Screenshot of Microsoft Office 2007's Ribbon
Gallery menu from Word 2007’s Ribbon.

As this ribbon-gallery example shows, mega drop-downs offer yet another benefit over regular drop-downs: they let you display tooltips when the user hovers over choices. For simple navigation menus, you’d typically use link titles instead of true tooltips.

Mega Drop-Downs Beat Regular Drop-Downs

We know from user testing that mega drop-downs work. Here are some arguments to support this empirical fact:

  • For bigger sites with many features, regular drop-down menus typically hide most of the user’s options. Yes, you can scroll, but (a) it’s a pain and (b) scrolling down hides the initial options. As a result, you can’t visually compare all your choices; you have to rely on short-term memory. People have enough on their minds, and messing with short-term memory reduces their ability to accomplish their tasks on your site. Mega drop-downs show everything at a glance, so users can see rather than try to remember.
  • Regular drop-downs don’t support grouping unless you use kludges, such as prefixing secondary choices with a “-” to indent them. Mega-drop-downs let you visually emphasize relationships among items. This again helps users understand their choices.
  • While plain text can be wonderful, illustrations can indeed be worth a mouthful of words, as the Word 2007 example shows. Mega drop-downs make it easy to use icons and pictures when appropriate. And, even if you stick to text alone, you have richer typography at your disposal (letting you differentiate link sizes according to their importance, for example).

Speed

Speed is essential to making any user interface feel responsive. Interface elements must render within 0.1 seconds to suggest physicality and make users feel like a display’s changes are a direct result of their actions. Slow-rendering GUI elements seem sluggish and make users feel like the computer is making things happen, not them.

You should test your mega drop-down implementation’s response time on a variety of computers and browsers. Include the best-selling platform from 5 years ago, because a good number of your customers will still be using it.

Don’t make response time too fast, though: the mouse should remain stationary for 0.5 seconds before you display anything that’s hover-dependent, such as a mega drop-down or a tooltip. Violating this guideline will make the screen flicker insufferably when users move the mouse. Only after 0.5 seconds of resting the pointer on a navbar item can you assume that a user actually wants to see its associated drop-down.

Thus, the timing should be:

  1. Wait 0.5 seconds.
  2. If the pointer is still hovering over a navbar item, display its mega drop-down within 0.1 seconds.
  3. Keep showing it until the pointer has been outside both the navbar item and the drop-down for 0.5 seconds. Then, remove it in less than 0.1 seconds.

One exception to item 3: The very best implementations can sense when a user is moving the pointer from the navbar item to a destination within the drop-down. When the pointer is on such a path, the drop-down should remain visible. This supplementary guideline addresses the diagonal problem, which happens when the path temporarily takes the pointer outside the active area. The drop-down shouldn’t disappear when the user is on the way to point to something within it.

Visualization of mouse pointer being moved from the top-level menu across the drop-down area and passing over another menu,
The diagonal problem:
The pointer path goes outside the area that keeps the drop-down active.

In the above example, the user first pointed to the “Holidays & Parties” navbar item and now wants to select “Appetizers.” Moving the pointer between these two spots makes it cross the “In Season Now” navbar item. Many users will move so fast that the pointer will exit the active area for less than 0.5 seconds. However, older or leisurely users might move the mouse so slowly that the drop-down would disappear while they’re still aiming for a menu item. Very annoying.

Grouping the Options within a Mega Drop-Down

The main grouping guidelines are:

  • Chunk options into related sets, such as those you discover after doing a card sorting study of users’ mental model of the features.
  • Keep a medium level of granularity. Don’t offer huge groups with numerous options that require extensive time to scan. Conversely, don’t make the individual groups so small that the drop-down has an overabundance of groups that users have to spend time understanding.
  • Use concise, yet descriptive labels for each group. Remember the standard rules for writing for the Web: enhance scannability by starting with the most information-carrying word and avoid made-up terms.
    • To keep words short and direct, the base form of verbs (“shop”) is usually better than gerunds (“shopping”).
    • Differentiate labels. Action Envelope’s “Ways to Shop” and “Shops,” for example, don’t work well together.
  • Order the groups. You can do this using an inherent order among the features (as for a workflow) or according to importance, putting the most important and/or frequently used group on top (in a vertical design) or to the left (in a horizontal layout, assuming a left-to-right language like English).
  • Show each choice only once. Duplicating options makes users wonder whether the two occurrences are the same or different. Also, redundancy makes the entire interface bigger and more cumbersome.

Keep Megas Simple

The standard usability guideline to “keep it simple” also applies to mega drop-downs. Just because you can put anything into them doesn’t mean that you should.

In particular, avoid GUI widgets and other interface elements that involve more advanced interaction than simply click-to-go. Mega drop-downs are a fleeting screen presence and shouldn’t replace dialog boxes, which are the natural home for more complex interactions and can support them better. Among other benefits, dialog boxes have a standard dismissal method (the OK/Cancel buttons), stay on the screen until they’re dismissed, and can be moved around if users need to see something that the box obscures.

Action Envelope offers a complete login mini-screen within the navbar’s “My Account” drop-down. It would be better to simply have a one-click “My Account” link that takes users to a full-featured page that supports login for existing users. (Better still: put this link in the utility nav, which is where people actually look for it according to eyetracking research.)

Similarly — but worse still — Novell hides its search box within a mega drop-down of the site’s main navigation options. This is bad for two reasons:

  • The search box should be continuously visible on the page rather than displayed only when users activate the drop-down menu.
  • Having GUI widgets (a text field and a command button) makes the drop-down a heavyweight interaction area instead of a simple navigation menu.

A final point here: just because mega drop-downs are big and have room for many options doesn’t mean you should overload them. Simplicity applies to interaction semantics at least as much as it applies to the presentation layer. Fewer options mean less to scan, less to understand, and less to get wrong.

Accessibility

Because dynamic screen elements always have the potential to cause accessibility problems, it’s important to code them with screen readers and other assistive technology in mind.

Even if coded correctly, mega drop-downs can cause problems for low-vision users who use screen magnifiers to enlarge tiny portions of the screen. (The same issue impacts iPhone users and other users of zoom-capable mobile devices.) If the user is unlucky, the zoomed view might show only a portion of the mega drop-down, which will appear to be the complete menu.

For example, in the Action Envelope screenshot above, the screen magnifier might show the “Paper & More” and “Ways to Shop” groups but not the “Shops” group. The missing drop shadow, which appears on the full menu’s right edge, is too subtle a signal to help most users. Thus, the site could lose orders if it had many low-vision customers (a common situation for sites targeting older users). Having a strong visual signal for menu borders is one way to alleviate this problem.

In addition, having tiny selectable items hurts touchscreen users, and overly finicky show/hide behaviors hurt people with motor skills impairment.

There are two main approaches to improving the accessibility of mega drop-down menus:

  • Simple: Don’t bother making the drop-down itself accessible. Instead, make each top-level menu choice clickable, leading to a regular Web page where you present all drop-down options in plain, fully accessible HTML.
  • Advanced: Emulate the “keytips” approach designed to add accessibility to Microsoft’s ribbon controls. Keytips are an alternative to access keys and are easier to understand. The keytips interaction sequence is:
    1. Press “Alt” to enter keytip mode.
    2. Press a character to choose one of the top-level navbar items and display its mega drop-down. In the drop-down, show the access key next to each menu option.
    3. Within the drop-down, let users press one (or two) characters to choose options. Because the access key displays while the drop-down is in keytips mode, users who can see don’t have to rely on memory.

If you’re a rich site and/or especially concerned with accessibility, you should implement both the simple and advanced features. Most sites, however, will probably have to make do with the simple approach.

Try It

Mega drop-downs may improve the navigability of your site. (Of course, it’s always best to test.) By helping users find more, they’ll help you sell more (or meet other business goals, such as attracting donations or disseminating helpful information for non-profit or government sites).

http://www.useit.com/alertbox/mega-dropdown-menus.html