For years, businesses have been using a number of techniques in their stores and online to influence their customers and encourage them to respond to their products and services. I’m sure most of you are familiar with the grocery store example. The bread, milk, and eggs are in the back of the store to force the customer to walk past the Little Debbie cakes on their way to pick up the necessities. That's persuasive design or marketing.
In the field of web design for non-profit organizations, purchasing a tangible object isn't always the goal. However, there are a number of cases where action is required. Examples include: donating to support a cause, subscribing to an organization’s RSS feed, or spreading the word about a specific initiative. How are users persuaded to take action? Placing Donate or Join Now buttons on your site isn't enough. This is where persuasive architecture comes into play.
Persuasive architecture goes a step beyond trying to produce a usable and intuitive information architecture. Information architecture is about effectively structuring a site in order to help users find the information they seek. This is accomplished through a number of strategies: categorization, labeling, designing page layouts, grouping, etc. Good information architecture will make it easy for the users to find what they’re looking for, but the experience shouldn’t stop there. Persuasive architecture will deliver a useful and intuitive interface, while putting an emphasis on informing, enticing, and persuading users into action.
Persuasive architecture in the non-profit arena is not dissimilar from persuasive architecture in the for-profit arena. While you might not be selling your users handbags or new shoes, what you could be selling is an idea. You want people to support your cause. You want people to join your organization so you can create a larger network of people who are collaborating with you. To successfully accomplish this on your site, you must persuade your users. You must persuade them to click again, to discover more, and ultimately to engage.
Enough talk. Let’s look at an example. A site that sports a nice persuasive architecture is the Nothing But Nets campaign.
Nothing But Nets is a grassroots campaign to save lives by preventing malaria, a leading killer of children in Africa. If you peruse through the Nothing But Nets site, you’ll notice that they’ve done a good job of communicating their cause in addition to encouraging action. They’ve done this through persuasive navigation, persuasive content, and persuasive design. What I like the most about this site is that the navigation forms a concise, active, and persuasive statement. They broke out of the "Who We Are ... What We Do" mold with a very compelling site structure: Malaria kills, Nets Save Lives, and It's Easy to Help.
Persuasive Navigation
Malaria Kills
Within this section, information is provided for those who may not even realize that Malaria is killing millions of people. The site provides compelling content that informs the user of Malaria and encourages them to understand that this is an issue that needs support.
Nets Save Lives
Providing the background information is the first step. But now, users might be thinking "This seems out of control. What can be done about this?" The site answers that question with the Nets Save Lives section. The section provides statistics on how bed nets save lives, and provides an overview of the process of getting the nets to Africa.
It's Easy to Help
At this point, you are hoping that the user is convinced. They understand what Malaria is and they realize the importance of supporting the efforts to put a stop to the deaths resulting from it. They also realize that buying bed nets is an easy way to stop Malaria infections. The next logical step is encouraging the user to support your cause by donating. The content supports this - everything from the title of the section to the number of ways to support.
Persuasive Content
Net-O-Meter
Users like to know that other people are invested and have taken action. The Net-o-Meter is a perfect way to say, “Look! Other people are helping too!”
Interactive Net Distribution Map
Users also like to see the results of contributions. This map is a great way to visually see the results of current donations. It will also keep people coming back to the site to check the progress of the campaign.
Compelling Video
I don't think that I have to be the one to tell you that online video is a great way to spruce up your persuasive content. The videos on the site really help bring the issues to the surface. Not only do they make the issues seem more real than they would by simply reading text, they engage the user with a more emotional approach.
It might not make sense for you to structure your site in the way Nothing But Nets did, but when you want your users to do something, take the time to think about how you are encouraging them to act. Think carefully about your content. Is it supporting and encouraging your users? If you want them to donate, are you explaining to them why donating is a good idea? Are you giving them enough information to encourage them to act? The technology to make the site and transactions usable isn't always enough. Just because they can find the information, doesn't mean they will act when you want them to. The architecture, design, and supporting content needs to help your users make the choices you want them to make.
Additional Information
I had the privilege to hear Shannon Raybold, campaign director for Nothing But Nets, talk about the process behind building the site I've talked about in this blog post. You can watch and listen to her presentation from Forum One's Web Executive Seminar on Global Health.
I’ve been hearing people misuse a common UCD term, saying User Testing when they mean Usability Testing. Semantics, you say? Not so.
The term User Testing would imply that the user is being tested, when in fact, it’s the prototype and its usability that is being tested. One of the first things explained to participants during usability testing is that the goal is to determine how usable the proposed solution is. Not how well the user has performed. Because it's the 'Usability' of the prototype that is being assessed, the correct term is 'Usability Testing'.
Conversely, the term User Research (a study often done at the earlier stages of a redesign) suggests that users are being researched: who they are, what information they seek, how they interact with the existing site. This takes on many forms – surveys, focus groups, contextual inquiries, interviews, stats analysis, etc. The focus is on the ‘User’, and thus the approach is called ‘User Research’ or ‘Audience Research’.
To summarize:
User Research – the focus is on the user and their needs
Usability Testing – the focus is on the usability of the solution or prototype
User Testing – is a misnomer
Search our blog for additional posts on usability testing.
(Thank you to MH and Todd Zazelenchuk for his UCD stencils)
In 2003, Jakob Nielsen reported that, on average, a usability redesign could increase desired metrics by 135% (based on a study of 42 site redesigns). Fast forward to 2008, Jakob reports in a similar study that gains have dropped to 83%. Why? Usability has become a standard online, making the possible impact smaller than 5 years ago. And it seems that usability budgets have not increased.
As someone working in the User Experience field, there's no doubt that there's been a surge in UX people and work in the last decade. Entire career paths have been dedicated to the practice of user-centered design: Information Architects, Interactive Designers, Usability Analysts, and many others. Non-profits and government agencies alike have taken the lead from their commercial peers and invested in audience research and usability improvements.
This is a vast improvement from earlier generations websites. Ten to fifteen years ago, websites were growing organically and usability was hardly a factor in design. Today, usability has become part of our standard rhetoric.
Looking forward to what the next decade brings in the UX field.
The Culprit
Fly-out menu: a navigational solution.
When a user puts their mouse over a navigation item, a menu automatically appears or "flies out". Items in that menu are clickable. Often used with intentions of de-cluttering the space and enhancing the user experience.
Search engines may not be able to index your site (if fly-out is working with Javascript)
Not accessible to international users (who might need to look up words in a dictionary) or users with motor skills impairments (who have difficulty catching things that move).
Hides navigation in a menu. Users must go to fly-out navigation to get from one sub-section to another, even if they're in the same section.
Covers important content on the page
The Evidence UIE did some usability testing on sites with fly-out menus and found the following:
Users decide what they're going to click on, before the move their mouse.
"In our studies, we observed that once users realized there was more information available to them, they stopped and re-evaluated the screen. Users seemed disoriented by this disruption in activity and they lost confidence that they were clicking in the right places. The users now questioned a choice that seemed to be a good one earlier."
"...fly out implementations required our users to use awkward movements to make simple choices."
"Users became frustrated because they couldn't see the content in advance of choosing a category and some had problems with the menus going away when they used natural movements. Users expended so much effort to select a menu choice that they often missed stories that might otherwise have attracted their attention."
Questions to ask yourself before you act
How will my audience respond? Do they have the mouse control? Will they be annoyed?
Do I want a fly-out nav because 'it looks cool'? Is it a personal preference?
Are my sub-section titles long (over 15 characters) or will they grow in the future?
What happens when users increase or decrease text size?
How does this work with my CMS? Can I add sub-sections easily to the fly-out nav?
How will I handle sub-page navigation? Will the user have to go to fly-out menu to navigate between sub-sections?
Best Practices - if you're going to do it
Make the selection area wider that it appears so that it doesn't disappear if you are moving the mouse just a couple of pixels outside of the menu
Make it clear that it is a menu, for example by adding a down-pointing triangle next to the label. Crate and Barrel does a nice job of this. Note that all items in the fly-out menus are actions.
Work without Javascript
Use a delay before hiding the fly-out menu again, e.g. 250ms
Only use horizontal menus with vertical fly-out menus. The vertical area in which the mouse-pointer needs to be move is too small, i.e. typically 12-14px, and causes the menu to be hidden unwantedly.
The User Experience & Design Blog covers issues that affect the web user's experience, which include information architecture, usability, accessibility, web development and latest trends. It is authored by the User Experience & Design Team at Forum One Communications, a web strategy/technology firm in the Washington DC area.
James Dowsett about Primary Navigation Image Replacement Tue, 03.06.2008 05:13 Hi,
Regarding Method #3: You can
get rid of the long dashed
focus border that shows in
Firefox by adding 'overflow:
[...]
Dave Yuknat about It's Called Usability Testing, not User Testing Mon, 31.03.2008 09:38 Ditto what Anna said.
Each time a Project Mgr or a
biz owner asks me, "when are
we doing user testing"? They
are [...]
Anna Marshall about It's Called Usability Testing, not User Testing Thu, 27.03.2008 16:35 Your points on the idea that
you're testing a site, not the
user, are well taken. But I
think "user testing" can be
[...]
Michael Julson about Scaled Visio Wireframe Templates & Stencils Thu, 27.03.2008 13:18 Thanks for the great stencil.
Could I talk you into applying
a license to the stencil like
from Creative Commons or [...]
Matt Humphrey about Fly-out Menus are Evil Tue, 25.03.2008 22:08 Dave, you actually raise a
good point that I think gets
overlooked very often.
Laptop/touch pad users tend to
get [...]
Matt Humphrey about It's Called Usability Testing, not User Testing Tue, 25.03.2008 14:58 To add to the semantic
mix-ups, there's also User
Acceptance Testing (UAT) which
usually consists of testing
the site or [...]
Comments
Sat, 21.06.2008 14:10
very nice
Tue, 03.06.2008 05:13
Hi, Regarding Method #3: You can get rid of the long dashed focus border that shows in Firefox by adding 'overflow: [...]
Tue, 29.04.2008 17:45
Thank you for the assistance. It worked perfectly.
Mon, 31.03.2008 09:38
Ditto what Anna said. Each time a Project Mgr or a biz owner asks me, "when are we doing user testing"? They are [...]
Thu, 27.03.2008 16:35
Your points on the idea that you're testing a site, not the user, are well taken. But I think "user testing" can be [...]
Thu, 27.03.2008 13:18
Thanks for the great stencil. Could I talk you into applying a license to the stencil like from Creative Commons or [...]
Tue, 25.03.2008 22:08
Dave, you actually raise a good point that I think gets overlooked very often. Laptop/touch pad users tend to get [...]
Tue, 25.03.2008 14:58
To add to the semantic mix-ups, there's also User Acceptance Testing (UAT) which usually consists of testing the site or [...]