Recorded at General Assembly 2014 Event 260

Is your congregation’s website effective, attractive, and accurate? Learn how to run simple tests to assess and improve your usability, accessibility, and search engine placement. Be sure you are successfully communicating your congregation’s message and engaging your visitors by using good design principles.

Workshop Outline

15 years ago we gave a workshop every year to encourage congregations to make websites. Now 1,007 out of 1,044 congregations have one! But are they timely, fresh, and effective?

It’s worth checking whether people can do what they need to do on your site—and that they’re getting the message you hope you’re sending!

There are two bodies of tasks that are important to this goal, and we’ll explore the elements of each in this workshop:

• Make sure that your site follows best practices for content, accessibility, usability, search engine optimization (SEO), and responsive, mobile-ready design.
• Evaluate your site. Identify your goals and find out whether or not your site succeeds at those with analytics and user testing.

Download the workshop slides (PDF, 50 pages).

Best Practices for Website Design

Best practices are general principles that, when followed, make it much harder to “mess up.” Most of them are systemic principles, meaning that once you’ve established a style guide, a code base, and general rules about how to do things, they’ll mostly take care of themselves (though vigilance is still necessary, especially when it comes to writing).

Many in-depth guides to these areas are available for free online, including some guides for beginners on UUA.org/websites, so we’ll only skim over some of the biggest points today. Thankfully the core principles are pretty straightforward, so it’s not too hard to keep them in mind as you work on each new page or project.

Most web best practices boil down to this: use most of your time and energy to focus on making really clear, really good, really helpful content. And then don’t put roadblocks to that content in your designs or navigation.

Website Content

Your content, or message—the information & inspiration that you have to share—is the core of your website. Every other aspect—design, navigation, image choice—must support your content—not the other way around.

Be sure your content:

• supports your mission,
• helps your users find what they need, and
• encourages web visitors to engage.

You have one chance to make a first impression—on every page of your website.

Useful checklists for congregational sites:

• Information to Include (Or Leave Out)

Writing for the Web

Think about what your visitors want to accomplish or learn. Keep your content very task-oriented.

• Use action words, omit fluff. Avoid anything that detracts from getting to the point.
• Avoid “insider” language. Assume that your visitors know nothing about you or how you operate. Consider what your words mean to a person with no context. Spell out acronyms the first time you use them on any page.
• Don’t over-emphasize. Words that are bold, italicized, or linked will stand out when the page is scanned, so use that to your advantage—but don’t overdo it: bolding and linking large chunks of text reduces reading comprehension.
• Avoid instructions. Delete phrases like, “To use this site,” “Fill in the form,” “Click the link,” “The links below will give you more information,” and so forth. Make the user’s task clear and obvious.

Everyone Scans: No One Reads

Make your content easy to scan. A web page has a ridiculously short period of time to convince a reader that what they’re looking for can be found there. Scannability helps accomplish that goal.

• Put the most important ideas first. Get to the point.
• Include lots of white space: bulleted lists and short paragraphs help people quickly get an idea for the content of a page.
• Use headings to separate the page into topical sections. Headers help people jump from one area to another.
• Links catch the eye (or ear) while scanning a page; don’t just repeat “click here,” “click here,” “click here.” Links should be brief (shoot for fewer than 8 words) but meaningful: each should accurately describe—by itself—what a person could expect to find behind it.

Accessibility

Once you’ve got good content and you start working on your design, make sure you’re not creating frustration or introducing impediments.

Accessibility is not just about making sure that people with disabilities can use your site. It’s about allowing a wide variety of users and devices to have access to everything you offer.

In spite of our best intentions and our commitment to justice, it can be easy to overlook accessibility practices—especially when you personally know every person in your current audience and you know that none of them are blind or deaf or have dyslexia or mobility impairments or whatever.

But even if you do know every member of your current audience, you probably don’t know their extended circles—the people with whom they may wish to share your content. And you definitely don’t know what the future holds, and how people’s abilities may change over time.

Besides that, an accessible site helps every person who uses your site, not just the ones with specific disabilities or special needs.

Why Use Transcripts?

For example, transcripts for audio or video files...

• help users who can’t play sound (perhaps due to their location: at work, or on a commuter train),
• are good for people who absorb information better by reading than by listening,
• help information to be unambiguous, and easily quoted or shared,
• allow content to be included in search results,
• are useful to people who wish to scan the content before deciding to invest the time to watch or listen, and
• are good for users who can’t or don’t want to install the software or allow the security settings required to use multimedia files.
• And, of course, transcripts are critical for the deaf, who would otherwise be excluded entirely from participating.

Accessibility Specifics

The easiest way to check the broad strokes of accessibility on your site is to turn off all styles and images, and use your keyboard to navigate the page. If your content is still complete and sensibly arranged, and you can get to and use all of it without touching your mouse, you’re probably in pretty good shape.

Though hardly comprehensive, this list covers most of the big stuff.

• Don’t use images to make text, and use alt tags to describe the content of images to someone who can’t see or download them.
• Provide alternate methods of participation for anything that relies on sound or sight. Caption audio and describe video.
• Make sure keyboard controls work for everything, so that hand-eye coordination (using a mouse) isn’t required.
• Appropriate color contrast helps not only people with poor eyesight, color-blindness, or dyslexia, but also those trying to read a screen in bright sunlight. Test your text and background colors with a Color Contrast Checker to make sure you’ve got the right brightness and color contrast.
• Use complete and correct markup for forms and tables—identify table head cells, include summaries, and make use of the <label> tag to associate form fields with their labels.

Cynthia Says is a free website tool designed to identify accessibility errors on your site.

Usability

Usability principles have a lot of crossover with accessibility principles, but from a slightly different perspective.

Usability refers to the ease with which people can use a website in order to achieve their goal. Mostly it boils down to making sure people don’t have to learn anything in order to use your site. If you find yourself including instructional text, you’re probably doing it wrong.

We’ll get into doing usability testing later, but since there’s nothing more humbling than watching someone try—and fail—to use your site, here are some best practices that should help you avoid too much embarrassment.

Websites these days mostly come in a few familiar layouts, and you can use that to your advantage. If your web elements look and behave like what folks are used to on other sites, they don’t have to spend time making new mental maps in order to use your site.

Innovation can all-too-easily be the enemy of usability. Be sure to test every flash of brilliance against what actually works for people.

As boring as it may seem, the single most-looked-at portion of any page is the central content area, and plain ol’ text catches the eye better than buttons, better than fancy colors, better than large formatting, and definitely better than anything that looks like an ad.

Don’t Make Me Think by Steve Krug is a great introductory book about usability principles.

Navigation and Organization

A key element of usability is sensible navigation, or information architecture (IA)—menus that make it easy for people to find what’s on the site.

Use language and groupings that are obvious to as many people as possible—and test it! We all tend to believe that our way of thinking is universal, but letting a whole lot of people show you how they think about your content will clarify the best home for each of your pages.

Menu Pitfalls

Each time we run tests on our navigation, we encounter surprises that lead to changes.

For example, we learned that the word “Accessibility” was an “evil attractor” or “dirty magnet”—an ambiguous term that means too many things to too many people. Lots of people clicked on it looking for information that wasn’t there. In this case, we meant people to find information about things like wheelchair access and braille hymnals, but people clicked on “Accessibility” to look for the Welcoming Congregation program, newcomer hospitality tips, building rentals, financial aid, and more. Changing the menu item to “Disability & Accessibility” cleared up all that confusion and enabled people to successfully find what was in that section—and avoid wasting time (and building frustration) looking for things that weren’t there.

Classic dirty magnets include meaningless words like “Resources,” “Tools,” and “FAQ.” Try to be specific about what people can expect behind each link. Topic- or task-based labels usually work better. For example, instead of “Resources,” describe what those resources will help people do. Though it certainly lacks for flair, we found—through testing—that “Congregational Management” was a much more helpful and accurate label than either “Resources” or its predecessor on UUA.org, “Leaders Library.”

In general it’s better to avoid “insider” language like “GA,” “OWL,” or “Tapestry,” but run some tests to confirm what works and what doesn’t. Sometimes a longer label which includes both branding and generally-known terms will work, like “Our Whole Lives Sexuality Education.”

Don’t make menu items for content you don’t have. Often, during conversations about building your menus, people will say, “We should have a section on ____.” That may be true, but resist the urge to include it in your navigation until someone’s actually created the pages that will live behind the label.

Organizing Pages into Menus

In most cases, a topic-based or a task-based organization will serve people best, as that’s most closely aligned with the way they are thinking about their goals.

An audience-based organization usually only works if the groups in question are totally distinct from one another, and if their tasks are totally different. We used to organize UUA.org by Visitors, Members, and Leaders, but many of us act in all three of these roles at different times, and the result was that no one knew where to start.

Format is also usually not helpful, at least not at the first level of navigation: usually people don’t want to choose “books” or “videos” before they’ve narrowed in on the topic.

Sometimes an alphabetical organization can work, if the items you’re listing have universally agreed-upon names and spellings (like U.S. states).

Organizing by date can be helpful for the recent past (recently added/updated), or for highly date-reliant items (like news or events). It’s less helpful for materials that people will want to search for later, when the content of the article is probably better-remembered.

Listing by importance can also be handy: people will pay more attention to the top of your text area than anyplace else on the page, so putting your most popular or most important resources there is rarely a losing proposition.

You can have more than one kind of organization—you might use your sidebar to organize things topically, and your page area to organize by task.

Often data from your site’s analytics will support one approach or another.

Redesigning Your Menus

If you’re considering an overhaul of your information architecture, you’ll want to start with some card sorting exercises, followed by some tree tests to confirm your groupings.

The website Getting The Website Information Architecture Right: How to Structure Your Site for Optimal User Experiences is an excellent walk-through of the process and some of the available tools.

Card Sorting Places Like with Like

The first thing to do (after performing an audit of your content) is to run some card-sorting tests with sample pages. Let people sort those samples (cards) into piles and offer labels for each grouping. This can be done in person with actual index cards, or online.

On slide 15 (PDF, 50 pages) you can see a screenshot of the OptimalSort tool that lets people drag items into groups and then label them.

You can start with “open sorts” like this, where people make up their own group labels, and then refine the process by trying some “closed sorts,” where you offer some group labels and ask people to sort cards into them. You can also try a “Modified Delphi” approach, where each tester adjusts the card sort the person before them left behind.

For more label ideas—and to make sure you’re including all your website’s visitors and not just “insiders,” check your analytics to see what people search for on your site.

You will get an idea about the relative frequency of one term over another (for example, we learned that people say “email list” more often than “listserv”).

You’ll also get a clue about what things are searched for most; those should probably move up in your site’s hierarchy so that they require fewer clicks to get to.

Card Sorting Similarity Matrix

OptimalSort offers some impressive card-sort results analysis tools that help aggregate different people’s ideas.

For example, the similarity matrix on slide 16 (PDF, 50 pages) shows the percentage of participants who agree with each card pairing. The dark blue color shows where more people agreed that certain items belong near each other. For example, people tend to agree that youth, young adults, parenting, and singles, are related concepts, at least in relation to the rest of the resources on our site.

Users Agree on Major Groupings

A dendrogram like the one on slide 17 (PDF, 50 pages) can be used to illustrate how much people agree with certain groupings. The score (across the top) tells you “X% of participants agree with parts of this grouping.” For example, this vertical line indicates that two-thirds of people more or less agree with grouping these resources into these seven topic areas. You’ll get 100% agreement when each resource has its own category, and 0% agreement when they are all lumped together. The dendrogram can help you find a happy medium.

Testing Your Menus: Tree Testing

Once you have an IA that seems plausible, test it! Make sure that your target audience(s) can use your menus to find what they’re looking for. Your website is probably for both members and for people who haven’t decided yet whether to participate in your community, so be sure to test your menu against both groups.

Ask non-leading questions—don’t use the same words in your questions and in your navigation.

Also, don’t ask questions that don’t have answers in your tree. Be sure that there’s at least one reasonable choice where people can say, “I’d find it here.”

Treejack is an online tool with comprehensive results reporting (including where people went awry, and how quickly—or directly—they make it through the menu), and it’s free for small samples.

This pie chart on slide 18 (PDF, 50 pages) shows that 80% of our testers went directly to the right answer; 17% took at least one wrong turn before finding it; and 3% never found the answer we wanted them to.

We aim to achieve success for a minimum of 80% of our testers. When we can’t make that work, we simply do the best we can. Usually that means cross-referencing an item in a couple places, and revisiting the question during a future round of tests.

Maintaining Your Menus

Re-test your navigation as you add or remove content, and as language evolves over time. Small tests, where you only check a level or two, will help you stay on top of the issue.

Usability tests can also provide clues about where your menus could use adjustments, and that kind of test will do a better job of distinguishing whether a change in labels is needed, or a change in design. UsabilityHub allows navigation-flow testing, which adds design elements to the test.

Search Engine Optimization

Another area of web best practices and good usability to keep in mind is Search Engine Optimization (SEO), which is about making sure your pages are well-formed:

• for the search engines like Google which “index” your site, and
• for the human beings who will see a page full of search results.

Be sure to offer a search box for your site on all your pages. SEO is just as good for your custom search as it is for sites like Google or Bing!

SEO: Titles

Accurate, precise page titles (the <title> and <h1> tags) are critical to SEO. When people scan a page of search results (or any page), they’ll tend to scan across the top and down the left-hand side of the page (in an “F” shape). Therefore, the first 11 characters of your page title—likely all that will be noticed during this scanning pattern—ought to give a clue about what will be on the page.

Including keywords in your titles help search engines know when your page is relevant to a person’s search, and front-loading those words helps people home in on the pages they think are most likely to answer their question.

While creative titling might be great for Facebook posts or blog articles (where you’re trying to interest people in something they didn’t know they needed), informational pages shouldn’t obscure their purpose behind titles that require time to figure out. The title “History of the 1st UU Church in Mytown” is much more informative than “The Long Journey of Our Beloved Community.”

SEO: Using Keywords

On commercial sites, “keywords” usually means “product features.” For our purposes, keywords refer to the words and phrases that people are likely to search for. You can look in your analytics to find out what people search for when they arrive at your site.

Even if a commonly-used term isn’t “correct” you’ll want to at least include it in the page text. For example, while we may know that, “Rather than holding Christian-style baptisms, most UU congregations have child dedication ceremonies,” newcomers to our faith wouldn’t have the first idea that we might not use the word “baptism,” so that’s what they’ll search for. You’ll want to be sure that a page on child dedications uses that word so that folks get to the right place anyway. In this particular example, the preponderance of searches on UUA.org for “baptism” led us to front-load our page title with that word: we want to immediately confirm that searchers will find the answer they’re looking for on that page (“Baptism/Child Dedication in Unitarian Universalism”).

It’s also helpful to use variations of your keywords (synonyms or related terms) within the text of the page, especially in sub-headings (<h2>, <h3> tags).

SEO: Readable URLs

The URL structure of your site helps both people and search engines understand the hierarchy of your content.

It’s helpful if your URLs use human-friendly language that could be “deconstructed” to get more information. For example, each piece of the URL UUA.org/careers/ministers/becoming (“careers”, “ministers”, “becoming”) offers a clue about the content. It’s easy to remember and easy to say, so you could share the URL over the phone and expect someone to type it in without difficulty.

It also suggests that, while you might be in the “becoming” section, you could delete part of the URL and find a “ministers” section, or a “careers” section. Search engines can also accurately read that structure, and use it to add context and understanding to whether a page might be relevant to a particular query. A URL like UUA.org/?node=366, on the other hand, helps no one.

SEO: Links

In order for search engines to find your page, it must have at least one link to it—from a site map, if nothing else. In general, all your pages ought to be included in your regular navigation tools—either through your site menus and/or through the use of categories, tags, or publication dates (as you’ll see on blogs).

The number of links to your page is one of the contributing factors to its rank in search results, so if you hope to see one of your pages rise up, you’ll want more links to it.

Don’t do anything hinky, like hiding links in the background of other pages. Instead, promote the page on your home page, on your Facebook page, in your newsletter or RSS feed. Encourage other sites to link to your page (for example, a local event calendar might let you post a link to your Sunday services).

The best way to get more links is by having awesome content that inspires people to share it.

Mobile-Ready Page Designs

Arguably the most important design and usability consideration these days is to be mobile-ready.

The number of people using mobile devices (smartphones, tablets) is growing. Last month, 29% of visitors to UUA.org came on a mobile device. That’s about twice was it was only two years ago. This trend is so evident that search engines are starting to favor mobile-ready sites over desktop-only sites.

Make sure your site works on mobile devices. Even if you don’t have a smartphone or tablet, you can test whether your design is “responsive” by making your browser window wider or narrower: the page elements should grow, shrink, or relocate as the available space changes.

Make sure all the controls work on touchscreens (you can test this on a desktop by using your keyboard and not your mouse)—and remember that your site’s functionality can’t rely on “hover” effects (an event that only happens when you put a mouse cursor over something without clicking).

Offer all the same content to all devices—don’t assume that just because someone isn’t at a desk, that they don’t want full access. Offer people your entire site no matter where they are.

Responsive Design at Desktop Size

Responsive design means that you also take advantage of today’s larger screens and retina displays when people are at a desk or TV.

Responsive Design vs. Not

Slide 27 (PDF, 50 pages) shows their home page on a mobile device: the text is large enough to read, and the menu is easy to use with a fingertip. The impact of the site is just as strong, with an emphasis on their tag line, “Come as you are; become who you are inspired to be.” and their Sunday service time.

By contrast, you can see what a turn-off the non-responsive IRS site is—it’s just a mini version of the desktop site. It’s totally unreadable, and the links are too small to touch.

A person on the go will likely give up on a site like that, and they may or may not bother to check it again when they have access to a larger screen.

Choose a Responsive Design

Lots of content management systems (like WordPress, Drupal, or Joomla) or hosted website options (like Weebly or Google Sites) have free, responsive themes.

If you do your own code, projects like Twitter’s Bootstrap offer free scripts and styles that you can plug in to your own designs.

You may not be ready to take on a design overhaul just yet, but the next time you do, be sure that “responsive” is your first criterion when selecting a new look.

Evaluate Your Website Against Your Goals

Following these best practices will do a lot to ensure your site’s success, but you’ll want to make sure that what you think your site is doing matches how it’s actually working for people.

There are probably some goals that you have for your site as a whole, and those are likely tied to your organization’s mission and vision.

Your site might need to:

• provide information to members,
• organize tools for leaders,
• welcome newcomers,
• serve the community, or…
• you decide!

You’ll want to make sure every page supports those goals—or at least doesn’t get in the way of them.

Questions Your Home Page Should Answer

Not every visit to your site will start on your home page; many won’t include it at all! Still, it probably gets more traffic than any other page on your site, and it’s likely the first place newcomers will look to get more information, so it deserves some special attention.

• Who are you? What is your site about? How obvious is your core message?
• What do you do? Do you appear trustworthy? Does the design make me feel comfortable?
• Why does it matter? Do I care? Am I interested? Does it speak to me?
• How does that involve me? How do I participate? What am I supposed to do first? Is the primary call to action presented in a clear manner? (Your service times, perhaps?)
• What do you offer? Will I to want to share this experience? Is sharing made easy?
• How can I find what I’m looking for? Does the navigation provide clear paths?

(Questions adapted from The 5 Second Rule: Critiquing the Best Websites of 2009.)

When testing your site, be sure to assess your home page as well as a variety of interior pages.

Defining Success or Failure

You’ll need to have some ideas about what constitutes a “success” or a “failure.” These will help you choose the metrics you’ll measure, and the tools you’ll use to do so.

Especially in the context of “Congregations and Beyond,” some signs of success are going to be hard to measure. How do you know if one of your pages left someone with a positive feeling, if they don’t make contact or take an action that lets you know?

Nevertheless, there are lots of indicators we can look at, and tests we can run to find out whether all our hard work is having the desired effect.

• What defines success?
  • How many different people visit a page?
  • How long people stay on the page, or on the site?
  • Clicks on a particular “call to action” link?
  • Page shares?
  • Donations made?
• What constitutes failure?
  • A search for a question you thought you’d answered?
  • Leaving the site?

You’ll want to look a number of these metrics as they relate to each other over time in order to build a “big picture” of how people are using your site.

In some cases, a visitor or new member survey with questions like “how did you hear of us?” may help fill in some of the gaps left by online tools.

To get started, choose one page, and name one or two major goals for that page: what do you want people to be able to do? Then formulate some questions that you can answer by reviewing data or running some tests.

Analytics and Reports

There are a lot of services that will record anonymous information about who visits your site and what they do while they’re there.

You can discover things about:

• Traffic data:
  • How many visitors?
  • Where did they come from?
  • Where did they go?
  • How long did they stay?
  • What browser or device did they use?
• Search data:
  • What searches brought people to your site?
  • What searches did people do on your site?

Google Analytics

Google Analytics is probably the most widely used analytics program; it’s free, easy to install on most sites (though not always on sites hosted by third parties, like WordPress.com—something to consider when you choose your hosting), and there are lots of online guides to its use, including A UUA Introduction to Google Analytics.

Google Analytics is, obviously, what we use, though we haven’t upgraded yet to their “Universal Analytics” (we’ll make that swap at the same time we switch over to Drupal and have to re-do our code anyway). The concepts we’ll discuss today, though, ought to be pretty similar across any analytics service.

If you don’t already have analytics installed on your site, we recommend that you do that as soon as possible. Even if you don’t get around to reviewing the reports for some time, you’ll appreciate the history of data that you’ll start building upon installation.

Google Analytics Reporting

Learning to read analytics reports can seem pretty daunting, but start with the UUA guide and poke around a bit. It’s actually pretty cool what you can learn about how people use your site.

Pages with the Most Views

On slide 35 (PDF, 50 pages) you can see UUA.org’s most-viewed pages over the past month, with information about how many total views they’ve gotten (pageviews) how long people stayed on them (time on page), how often they serve as the first page of a visit (entrances), and how often people leave the site immediately after seeing them (bounce rate).

Goals

You can set up “Goals” to measure specific behaviors across the site. For example, the UUA measures visits which:

• include the congregational search results page,
• include a click on one of our “Donate” links, and
• last longer than 5 minutes, or involve views of more than 5 pages.

Sets of Users

“Segments” can let you view reports according to a number of pre-made or custom variables. For example, we can choose to see website activity only for first-time visits which also included a view of the Tapestry of Faith pages and which arrived at UUA.org via a major search engine.

Where People Click

In addition to knowing which pages people visit, it’s useful to learn where they click. A heatmap uses warmer colors to show where more people click, and cooler colors for fewer clicks.

Google’s “In-Page Analytics” option will show you which links on any given page are getting the most clicks.

It used to be true that Google couldn’t tell the difference between two links to the same location, so we’ve been using Crazy Egg to get fine-tuned reporting. I think Google has upgraded their service to be more refined, but we haven’t tested it yet.

Crazy Egg’s default heat map shows clicks on all the visible elements on a page. Slide 38 (PDF, 50 pages) shows an example from an older design, in which I took Crazy Egg’s data to create a heat map which also includes clicks on non-visible elements (like dropdown menu items). I consolidated those to show overall clicks on different regions of the page. You can see that our site navigation and site search collect almost half of all the clicks on our home page. Newcomer information and congregational search are our next most-used areas.

Content Experiments

Google’s content experiments let you compare two or more versions of a page. Each visitor to your site will randomly see only one of your versions, and their behavior will be recorded. If you’re wondering whether one layout or design will work better than another, you can find out!

Before we added a “Donate Now” button to UUA.org, we ran a content experiment. The folks from Stewardship & Development presented compelling evidence that including an “ask” on non-profit sites makes a big difference to the bottom line. And of course it’s reasonable to make it ridiculously easy for the people who already want to give you money to do so. Still, we were worried about what effect any perception of “greed” might have on newcomers. So we tested every metric we could think of.

To our surprise, the presence of the “Donate Now” link had no statistically significant impact on our site at all. People were just as likely to, for example, stay on the site, explore our pages, or look for a congregation. In the surveys we ran, only a very small percentage of people even mentioned the button, and most of those were only commenting on the color of it.

The chart on slide 39 (PDF, 50 pages) is the result of another change we tested, this time to the images and text of our home page carousel. There was also little difference to our outcome in that test.

Beware Being Misled by Analytics

A few cautions on diving into the data: you’ll want to check your conclusions before turning them into action items.

• Averages can confuse the answers: are lots of people doing a little, or a few doing a lot?
• Be aware of context: take note of changes to the site that might affect the data, other campaigns, world events, etc.
• Trends can affect your data; take seasonal traffic and the day of the week into account. On slide 35 (PDF, 50 pages) you may have noticed several General Assembly pages in our “most-viewed” list from last month, but that wouldn’t be true if we looked at our most-viewed pages over the course of a whole year.
• Remember that the numbers collected are estimates: expired cookies and variances in user behavior can affect the totals.
• Analytics can tell us what happened, but we have to figure out the “Why?”

Usability testing and surveys can flesh out what you learn from analytics, answering some of those “why?” questions.

Running Usability Tests

There’s nothing like watching someone try to accomplish a task on your site—it’s often a humbling moment of truth. Thankfully, the reward of identifying and removing roadblocks makes it very worthwhile.

Usability professionals have the benefit of training and experience—they know the tricks of:

• setting up the right scenarios,
• writing clear directions,
• recruiting the right kind of testers,
• avoiding judgmental feedback or leading questions, and
• drawing the right conclusions.

If you can afford to hire a professional, that’s an excellent option.

For those of us with tighter budgets, it’s definitely worth getting past the mentality that you have to have—or become—a professional in order to benefit from some user testing. The paybacks for even a little bit of do-it-yourself testing can be tremendous. Rocket Surgery Made Easy : The Do-It-Yourself Guide to Finding and Fixing Usability Problems, by Steve Krug, will help you perform useful tests and avoid some of the major pitfalls.

Krug recommends frequent usability tests which lead to incremental changes. In fact, he says, “Focus ruthlessly on a small number of the most important problems,” and, “When fixing problems, always do the least you can do.” By adjusting your goal from “have the perfect website right away” to “make sure we’re not making things harder than they need to be—one thing at a time,” the whole process becomes more approachable.

In-person testing provides the kind of hands-on, eye-opening feedback that really solidifies the importance of checking your work. Online testing can support qualitative responses by letting the masses speak.

In-person Usability Testing

In-person testing looks like this:

• Recruit 3 people to come sit with you, one after the other.
• Coach them to think out loud as they use your site, and be clear that they can’t make mistakes—you’re testing the site, not them.
• Give them 3-6 realistic tasks related to your goals.
• Avoid giving your testers any hints or feedback: your site has to work without a tutor.
• Capture the screen and audio for later review, and so that you can share the results with other stakeholders.

Develop a thick skin before asking for feedback: you’ve made mistakes on your site. We all have. Take pride in the fact that you’re willing to discover and fix those errors.

Watch People Use Your Site

In this clip of a usability test of UUA.org from two years ago, we’ll watch someone try to use our site, confirming some best practices and showing us how we didn’t get ‘em all quite right:

• Faces catch the eye. Plain text, faces, and “private” body parts are most effective at attracting eyeballs. In this case, that worked against us, since there was no obvious reason for this person’s face to be on the page. We wasted our tester’s time by making her look at something which didn’t contribute to her understanding of the page.
• Fly-out menus can get in the way. (And hover effects don’t work on mobile browsers anyway.)
• People scan pages in an “F” pattern, but most look at the page body first. Our testers usually checked the left-hand navigation column, but often not until they couldn’t find what they were looking for in the page. We can save people time by putting links in both places.
• “Obvious” things aren’t. We thought “everyone knows that the logo is a link to the home page,” but this person wasn’t the only one who struggled to find a link back “Home.”

Transcript: Video Playback

MARGY LEVINE YOUNG: Not the home page. This is one of the pages within it. So here's the first task. Find some information about how to handle a relay operator call for a person with a hearing impairment.

TESTER: Interesting. Who is this picture here. Is this— this is a, I don't know. There's a picture of a person that doesn't say anything about who it is or what they're doing there or anything.

MARGY: Really good point.

TESTER: Let's see. Hearing impairment. OK, there's— we go down, visual hearing mobility. So I would think hearing. Deafness. Hearing impairment. Ground rules. Listing. Hearing Loss Association. So am I supposed to be able to find something... Oh. Well, actually, you know it's pretty obvious that if you click on the Hearing there are the three choices here. And I went right to the page rather than looking at what was there.

MARGY: Not a problem.

TESTER: So now here is a nice description.

MARGY: You feel like you've accomplished the task.

TESTER: Yes.

MARGY: Yeah. All right. Cool. That's one out of seven.

TESTER: OK.

MARGY: So go to the home page.

TESTER: Go to the home page. Well, I'm not seeing Home. About Us. The Directory. But I know when I usually— there's usually a button to get home someplace.

Follow Up with Fixes and More Tests

Remember that 3 people is hardly a representative number, but if they have trouble completing tasks that are important to your site’s goals, it’s worth making a change to ease that frustration.

Sometimes the testing will raise flags that are worth exploring further before taking action. For example, if your testers comment negatively on the color of your site, set up an online survey or a content experiment to get a larger number of impressions. Aesthetic questions are always tricky, but if you discover that most people are responding negatively, it’s probably worth an attempt to improve those results.

You’ll want to run tests with different types of people: some with people who are already members of your community, and others with people who are not members (...yet).

Online Usability Testing

Depending on the complexity of what you’re testing and the type of feedback you need, there are a variety of useful online tests you can run.

For online testing, you’ll often choose a single page or screenshot to share, and you’ll want to keep your tasks and questions relatively simple. Since people will have to take time to perform your tasks, and then remember what they did or thought and then self-report on their impressions, it’s easy to go astray with complexity. Tools that record what people did help a lot, but you’re still imposing on your testers’ time, so you’ll want to keep things quick.

Ask no more than six questions, fewer if they’re time-consuming. Let people know how long the test will take.

Think about what kind of demographic data might be helpful as you sort your results. Is the person’s age important? Their religious background? Ask a few non-identifying questions that will help you put anonymous answers into context.

Online Testing Tools

• SurveyMonkey is a great (free) tool for posting a series of questions.
• UsabilityHub lets you run tests that are either private (by invitations you send out) or public (open to random people). You can run a “five second test,” where people see a screenshot for 5 seconds and then answer questions about what they saw, a “click test,” where you give people a simple instruction and see where they click, or a “nav flow test,” where people click through a series of screenshots to test how the design of your navigation is working.
• Optimal Workshop has card sorting, tree testing, and design impression tools with excellent results reporting.

Conclusions

Fixing or redoing your website can feel pretty daunting, but take it one thing at a time. Every fix you make is a frustration removed!

Best practices provide a lot of what we need to jump start into success. Thousands of people have already tested the principles you’ll find on sites like:

• Nielsen Norman Group: Evidence-Based User Experience Research, Training, and Consulting
• Usability.gov: Improving the User Experience

Familiarize yourself with the basic framework of best practices, customize your content based on your users’ needs, have some fun with your design, and then put it to the people and find out if it works!

Plenty of people are willing to tell you what they think is wrong, but before making changes, determine what the real problems are.

We’ve found information from user testing to be amazingly valuable as we make decisions about our sites. Specific tests—like card sorts and tree tests for menus—and general tests—where we ask people to use the site and see how they do—produce invaluable feedback and reduce the stress that comes from guesswork.

Test, improve, test, and improve! There’s no need to wait for a major redesign project in order to fix problems that people are having with your site—and in fact, substantial harm in failing to do so.

Transcript: Questions & Answers

KASEY KRUSER: Thank you so much for joining us today. You have any questions or comments?

[APPLAUSE]

KASEY KRUSER: Thank you. If you would, come up to the microphone with questions, please.

MARGY LEVINE YOUNG: We kept the presentation quite short because we were hoping that we'd get questions because we know that a wide variety of congregational and other organizational sites—

SPEAKER 1: I was just wondering if the slide stock is available.

MARGY LEVINE YOUNG: It'll be on the website. It'll be on UUA.org.

SPEAKER 2: It's on there now.

MARGY LEVINE YOUNG: Yep.

SPEAKER 2: I had a couple of questions. One was— well, first of all I want to say thank you very much for all this stuff. And thank you for having it on the website right now. I've already clicked through on some links.

You mentioned captioning early on. And we've kind of looked into that a little bit and it seems to be quite expensive if you try and get it done as a service. If you try and do it yourself, then the software is very expensive and there's a pretty steep learning curve. And given all the things that could be done I'm wondering how important you would stress that. That's sort of question one.

Question two is there's a huge amount of information here. There's a huge amount of resources. Most of our websites are not going to have 22,000 likes on them. And we're not going to have the IT staff that you guys have. And it's probably going to be a volunteer or a team of volunteers. And they're going to want... OK, this is great. And what should we work on first. How are we going to eat this elephant in bite size pieces. So for that kind of typical scenario I'd be interested in hearing your response.

MARGY LEVINE YOUNG: Start with captions. Well, for captions, let me just tell you what the UUA does and to confirm that it's fairly expensive. We try to caption as much of the video that we have as possible. Pretty much all of the GA video we send off to be captioned over the next week as we post it. But the outfit we use, it costs $2.45 a minute. So for little clips it's fine. But, you know, for this workshop, if we caption the entire thing, it's going to be more than an hour. It gets to be $120, $150. And so it can be expensive.

Now, there's YouTube captioning which can be pretty humorous. And so you gotta watch out for that. I have not yet tried, but I think some of our regional folks have tried having them do the captions. And then you can edit it and fix it. And I don't know whether you've tried that. But, so letting YouTube do a first pass and then editing the YouTube captions. So that might be an option.

What we've found is that it's been... for the service that gives our captions which is called 3Play... the digit three. 3play.com. It's really convenient. You just upload the video or they grab it from a URL. And they give you all kinds of stuff. We get both the captions and we get a transcript. And so, you know, you're going to be getting transcripts of all of the business sessions if you go to UUA.org/ga in a couple of weeks.

And for even folks who don't have any hearing issues at all, the transcripts are fantastic because you remember, wait a minute. Jim Key said something or other that was interesting. There was that right relationship thing. And, you know, you've got your Google search. You've got your control F on the page. And you can find it. Or you can even say, oh, I was like halfway through the video so I can just start halfway through.

Did you want to say anything else about captions?

KASEY KRUSER: Yeah. So you asked the question about the priority of captions. And what I would say is, is the material that you have that isn't captioned central to your message? And if so, then the priority should be high. So for a lot of us, or a lot of congregational websites, the things that I'm most aware of being posted online in podcast or video form without captions or transcripts are sermons. Worship services. And think about for a moment some of the content of your awesome, amazing services. And think about how they vary in topic. You know, around everything that you can think of in the world. And then think about having the topic of those sermons show up in search results for people who maybe don't even realize they're searching for Unitarian Universalism. But they search for a keyword or phrase that was mentioned in one of the sermons or worship services. And think about that and how that can reach out to people and attract people to your message. And, again, if that's the biggest piece of content that you offer on your site aside from your members' calendar and so on, then I would put a pretty high priority on it.

MARGY LEVINE YOUNG: In some cases, you may have a script like your minister may have written out the sermon. Just not the same as captions where the person can actually see the captions on the video. But at least they can read the content and that sort of depends upon whether the minister writes out their sermons.

KASEY KRUSER: Yes. And, in fact, that's what we did today so that everything up till our Q and A session is already on our website.

SPEAKER 2: Yeah. And you mentioned transcription. That's actually fairly inexpensive. You could send it off. They'll get it turned around in 48 hours. And you've got all the content. So then the other question was where should people get started with all this.

MARGY LEVINE YOUNG: Yeah. I'm going to express an opinion and Kasey may have a different opinion. If I were going to start with one thing, I would do that in-person usability testing. I mean, that was me talking to my friend Jean who couldn't find the Home link. And I was absolutely hornswaggled. I couldn't believe she didn't know to click the logo. I could've off of my chair. And I thought, well, OK. That's one. And then the next day my friend Molly came and I did three testers. Molly didn't know either. And they're both intelligent. They're both UUs. They didn't know. And so now we have a Home link just because, clearly, they're not the only two who don't know.

It was pretty easy to do. I mean, I just had my laptop, my kitchen table. I invited a couple of friends. And we decided to try it. In this case, it was a test with UUs. I could have been testing with my teenage kids' friends if that was a demographic. I could have gone for neighbors if I was looking for non-UUs. Pretty easy.

I installed— I have a— that was on a Windows machine. There's a free program called CamStudio. And you could see it took the picture from off of my screen but the audio from the mic. And I don't know if you noticed, but you could see where her cursor was because it was like a big yellow dot. And that made it easier to follow. CamStudio is free. There's a similar thing for Macs. And I think it's probably on our site. If not, we'll find one. And so there was no expense. It was just, do it.

And I think there's a lot of anecdotal— it's not lore, but we look at our website and people say, oh, I couldn't find anything. I couldn't find your map. Or it just looks old. Or I don't know. The guys— the other town down the road's website looks better. And this is all so impressionistic. It's really worth saying, well, let's sit three people down and see if they can find when our Sunday service is. And see if they can find the map. And then you find out, all right, maybe our website isn't perfect. But, actually, if we just fix these two things, it's doing the basics. And that would be what I would do first because it's pretty easy and it can be really eye-opening.

KASEY KRUSER: I don't disagree, but I might, well— my first answer would be, anything. Pick anything. Pick anything that speaks to you in any way, shape, or form and just do one thing at a time. Like any other change that you want to make your life, like eating better or exercising a little more or getting plastic out of your life. Just pick anything and start there. And then pick the next thing whenever you have time.

I probably agree with the point about usability testing. I probably would place perhaps a higher emphasis on seeing what tools are out there that are free or cheap and would, in one fell swoop, accomplish a lot of goals. For example, I was mentioning WordPress and Joomla and Drupal. And each of those has pros and cons and requires different levels of startup. But if you pick a responsive, accessible theme to start with, you've already accomplished two of the major-est pieces. So pick something.

SPEAKER 3: Can you talk about metrics related to whether or not you're achieving goals related to website— the example for me is in using Constant Contact. I know that we are consistently 15% above the industry standard. But the industry standard is so broad. I'm wondering if you know of resources where we can relate to metrics that are specifically Unitarian Universalist website metrics or metrics related to religious organizations. And so when we— how are we determining when we are successful related to website development.

KASEY KRUSER: Yeah. That's a tricky one. We don't have a collection of data from UU congregation websites. It's a cool idea to think about. Google used to have something called Benchmarking where it would let you say, how do we compare with other non-profits who have similar sized websites. I haven't checked that out in a while.

There are on the UUA.org analytics guide, UUA.org/websites/analytics— I walked through some of our staff members— I asked some of our staff groups to give me some questions and answers for specific pages. Like, are we accomplishing goal X with this page. And I walked them through some of the samples of things you might look at and consider. Unfortunately, it's tricky just because the amount of data that you can get is overwhelming. And trying to narrow down and figure out how a number is meaningful to your context can be a challenge.

For example, Sarah Gibb Millspaugh and I were talking recently about a few pages on UUA.org that get like five visits a year. And we were talking about should we keep these pages. They only get five visits a year. But if they're pages that are specific to a particular, I don't know, credentialing something— starting seminarian student and we only get about five of those starting students every year, but those pages are critically important to them, then how do you— then those pages may have more value than the plain number would indicate.

MARGY LEVINE YOUNG: I have an answer that's not an answer.

KASEY KRUSER: That's what I gave.

MARGY LEVINE YOUNG: Right. Exactly. For one thing, I just want to rewind for a minute to say that Constant Contact is an email newsletter tool that I imagine probably a lot of congregations use— Constant Contact— or maybe MailChimp to send out their newsletters. Because they allow you to actually track to see how many people open the email and how many people click and then what happens with the clicks. So I wanted to make sure that people know about that.

We don't actually do the newsletters. I'm looking at Rachel Walden who is sitting there who is in the Information and Public Witness area at UUA.org. And they do send out some newsletters. And I don't know whether we have click-through numbers on those. What I'm thinking you might want to do is to subscribe to the Webster's— actually, this is the answer to a lot of questions. Subscribe to the Webster's mailing list, which is hosted on UUA.org. If you go to lists.UUA.org, scroll all the way down to the Ws. You'll find information about the Webster's mailing list. It's a mailing list specifically for people who maintain websites for UU congregations and other UU organizations. And it might be interesting to ask that question on the Webster's list to say, hey, you guys that use Constant Contact or MailChimp or whatever, what kind of rates are you getting? So you could at least get comparative numbers with other congregations.

Another community of people who maintain UU websites is on Facebook. There's a group— there are a bunch of groups on Facebook that are called UU Labs. And there's a UU Website Lab and there's a UU Communications Lab. And it might be interesting to join that Website Lab and ask the same thing or the Communications Lab if it's about email to find out. Because that's an answer that we don't have.

Other questions? Can you use the mic? That'd be great.

SPEAKER 4: You mentioned modifying the web page for mobile devices. How difficult is that? We've been struggling with that concept where people say, oh well, I can't read it on my mobile device. Technically, what kinds of things can be done to do it easily.

KASEY KRUSER: Yeah. It depends on the site and it depends on your platform. So, for example, if you're already using something like WordPress it might mean picking a different theme.

SPEAKER 4: Yeah. We are using WordPress.

KASEY KRUSER: OK. So it might be easier, perhaps, than we imagined. It might be as simple as doing a search for WordPress themes that are already responsive and flopping those in. And now's probably a good time to mention Dan Flippo, our special guest celebrity, recently revamped a UU congregation specific WordPress theme, which is not only responsive but just achieved a rare distinction of being one of the very few themes that has been approved by WordPress as being accessible.

[APPLAUSE]

SPEAKER 4: So I guess I was sitting in the right row then when I had the question.

MARGY LEVINE YOUNG: And is it called— if they just search for UU2014?

DAN FLIPPO: Yeah. UU and 2, 0, 1, 4 on Google and it'll come up as one of the early responses.

MARGY LEVINE YOUNG: So WordPress people probably know as one of a number of content management systems, which are programs that make it easy to not only make a website but to maintain it. So that you can make edits to your website right through a web browser. You don't need to have a special web editing program. So these content management systems, or CMSs, there are a whole bunch of them. And many of them are free and an open source.

And the three that are the most widely used are WordPress, Joomla, and Drupal. And I list them in that order because WordPress is the easiest to use. Probably the least powerful but way, way more powerful than a UU congregation would normally need. So it's a really excellent choice. Joomla— a little bit more powerful. Drupal— top of the line. It's what we're using for UUA.org. But, again, we've got, what, 15,000/16,000 pages. We also have UUworld.org, the magazine. So we need something that slices and dices and makes juice, which a congregation might not need.

SPEAKER 5: I wish to clarify. We're not using it yet.

MARGY LEVINE YOUNG: We're not using it yet. So our point's at where— Kasey and I are, as soon as GA is over, we're heads down into this thing because we are in the midst of converting the UUA.org website and then the UUworld.org website from the current system to Drupal. Which is the sort of top of the line, pretty complicated but pretty amazing content management system. So you all would probably be more likely to be interested in WordPress. A lot of congregations use it. On the Webster's Lists there are a lot of people that use both WordPress and Joomla, I'd say. So you can get advice.

KASEY KRUSER: Just one other note for people who aren't using content management systems, again, UUA.org/websites, there's a section on design. And there's a page on responsive design there. And it includes relatively simple script that you can include and some browser detection scripts. I say relatively simple because you still have to write all the style sheets that go with it. But if you're not already— Yeah. I personally would recommend going with WordPress or something more out of the box.

SPEAKER 6: We have a rather old website. It dates from 2002. And it's entirely in HTML. So I have two questions. And the first one is, how much longer is HTML going to be good, or do we need to worry about turning it into SHMTL or some other thing? And the second question is, is that useful at all for people who are using mobile devices?

KASEY KRUSER: Yes. In fact, plain, straight-up HTML is probably— assuming that you haven't done weird, tabling things and funky things with your design and, yeah— straight-up, plain text is the most accessible, most responsive you can possibly get. Web browsers by themselves already do everything right. If you just put a bunch of text on a page, you have made no mistakes as far as accessibility or usability have occurred yet. Virtually, every problem that people encounter with websites are ones that we make because we're trying to get fancy.

MARGY LEVINE YOUNG: Now, HTML, which was of course invented by a Unitarian Universalist. You all know that. Tim Berners-Lee. It's totally not going away. I mean, we keep having new versions. But all these other tools that we talk about— Drupal, Joomla, whatever— it all comes down in the end to HTML. So not going away. The issue, I would say, is if you have a site that is just in HTML, that probably means to me that somebody has to use an HTML editor to edit those pages. And so whoever it is making the pages, they're making the edits and then they're uploading them to the site.

[INAUDIBLE]

MARGY LEVINE YOUNG: OK. So if that's not true, and they're going right onto the site, which is what she's saying and making edits, then I think you're probably good. But the alternative to HTML are fancy things like Flash. And those are things where you really run into trouble. So—

KASEY KRUSER: Good news is that if and when you are thinking about transferring from a hand-coded site to a content management system so that nontechnical people can more easily contribute to your content, there are a lot of tools that will scrape your website. They'll scrape the content and plug it in automatically.

SPEAKER 7: Yeah, I guess you would call me an HTML dinosaur. I had to redo our church website about 10 years ago. And I hated the idea of Microsoft front page which somebody had done it in. Which all kinds of redundant code and it was very slow. So I came up with a cascading style sheet in PHP. Assembles the pages on the fly. It bang, bang, bang— it's very fast. Four commands. Assemble the page. You can edit the— and it's very simple just—

[INAUDIBLE]

MARGY LEVINE YOUNG: The question is, can your minister change the page?

SPEAKER 7: Yeah. One of the pages is like the index page. Index, text, HTML. That one you just change the content, post it, and you're good because you don't have to mess with anything else. It works.

MARGY LEVINE YOUNG: So the method you're using is actually what we were using, what, two versions ago? PHP and— but the problem is that you really have to come up with sort of methods or gimmicks to allow your minister or whoever to be able to edit specific pieces. A content management system like— I mean, Drupal, Joomla, and WordPress are all actually also written in PHP. Which is a dynamic— it's a programming language that allows your web pages to change on the fly. But they are written to make it easy for a non-technical person to edit almost any page. So it's like you're writing your own content management system. Which is cool except if you feel like not doing it anymore. Then it's going to be—

SPEAKER 7: Yeah. I'm getting to that point.

MARGY LEVINE YOUNG: Yeah. Well, at that point you're probably going to want to say, let's look at this WordPress thing. And you'll be very comfortable with that because it's already PHP. It's a technology you're familiar with.

SPEAKER 7: Good. Thank you.

KASEY KRUSER: All right. Not seeing any more pending questions. I'll take this opportunity to not show you the slide that I had prepared, which somehow got completely messed up. But I will mention that this workshop is part of a series, UUs Get Social, designed to help UUs share insights and bolster our online outreach. Please consider attending the next two. This is the second and so two have already happened. Reaching “Nones,” Activists, and Spiritual Seekers will take place in this room on Friday at 10:15 a.m. And Digging Into Facebook, Twitter, and Video Making and Sharing will also be here on Saturday at 10:15 a.m.

All of our workshop materials will be published online at UUA.org/communications/ga/social. Be sure to grab a UUs Get Social sticker to let people know that you're getting social. Thank you so much.

[APPLAUSE]