Linking on Nonprofit Websites

The video transcription is below. You can get the best practices and gist of the learning even without the images in the video…

So here I have the American Red Cross website, and I'm looking at a page about the blood donation process. Let's look at the links on this page. So here we have one that jumps out to me right away "basic eligibility." I love how when I hover over it, there is an underline. 

Longer Links May Have Better Information Scent

One thing that's interesting, though, is "basic eligibility" doesn't have a lot of meaning for me. If I click in here, it says, OK, so we're talking about "requirements by donation type." So I'm talking about basic eligibility requirements. I think even...Oops, there's a pop-up, sometimes that's great. Sometimes not so great, right? 

Sometimes even just saying "basic eligibility requirements" would have better information scent than saying "basic eligibility." 

A lot of the other links on this page work pretty well. Here's one on the blood donor app. I would actually even include "download the" in the link itself. I think that whole thing would then pop out, and I think that would be really great. 

Don't Make the Links Too Long

Here is the Surfrider Foundation. They do really interesting work. This is another non-profit organization. And you can see their links do a really nice job of popping out. I think they're dark enough to be accessible. You always have to double-check that in some kind of color contrast checker. This is a free website color checker I use. 

You can see, though, that this link is really long. It starts to lose its effectiveness when most of the sentence is the link. This is a great length link here in the middle. 

Avoid Saying "Here"— Bad Information Scent 

Here's a link that just says "here." Instead of saying "More on specific goals" and just highlighting "here," I would actually make the entire item a link. 

Don't Forget Accessibility 

I also really wish when I hovered that something happened here to show that these are links. Otherwise, if it's color alone, it's typically not accessible. 

I like this link here, it says "actively encouraging new members." It looks like there must be some new members of this California by the Biodiversity Network, and I could learn more about it. Surfrider has some things they could change about their links to make them even better. 

Make Sure Links Stand Out

Our last example is from the Shed Aquarium. I believe it is located in Chicago and wow, it clearly has some very cute animals like this otter. And you can see their links here. 

They have an underline which I think is really important because they're going with a navy color for their links. They could definitely be a little bit missed with the black regular text. So I like how they have this underlined, and I also would love it if the color would change when I was over it. But I have to say at least the underline really makes it clear what is a link. 

They also seem to be doing a pretty good job of making sure it's not just like one word. These seem to be meaningful information-rich links and that we know will help your users.

Better Information Scent Leads to More Clicks

So just keep in mind that you want to have information-rich links. You want them to be very clear so that the user can make a good decision about whether that is a good link for them to click on or not. We don't want them to be guessing. We know that uncertainty tends to lead people not to click on things. So we want to be very clear on what you will get should you click on this link.

Keep Learning!

Want to learn more UX best practices? Here are 3 free UX lessons you can watch immediately after signing up. These classes are created for busy, non-tech people who need to make better apps and websites.

Online Content Writing for Mobile for Nonprofits

If you prefer to or need to read, the video transcription is here:

We want to make sure that we are being very user-friendly with our writing on mobile. More and more people are using mobile to access information.

Careful with Conclusions from Analytics

Now, you may hear people say, well, we only get 15 percent of our traffic on mobile, so it's not that important. But that's really a limited view of the analytics. We don't actually know from analytics why people are doing what they do or the context around it.

Those 15 percent of website traffic visitors might be coming to the mobile site having a bad experience. Maybe that's why they end up on desktop. Or they might start their journey on mobile, move to desktop, and then back to mobile. We don't really know. For this reason, we want to plan for people on all different kinds of devices.

It is a very typical journey for somebody to hear about an organization that a business or nonprofit and start looking for it on mobile. Maybe they have a few moments to themselves. Maybe they're waiting for a friend or they are waiting in line. They move to desktop later to delve in deeper with the information. They might to do a transaction or whatever it happens to be. They might end up going back on mobile at some other point, looking at the organization again, we just don't know. But we do know people use a lot of different devices for a lot of different reasons. We want to make sure our writing works well on all of them.

Treasure Your Space on Mobile

So here are some things to keep in mind. First off, treasure the space. It is extremely valuable on mobile, especially the area above the fold. So here I have a screenshot of the Wikipedia mobile website. And you can see they are welcoming everyone to Wikipedia. We're in 2021 and we don't need to be welcoming anybody to our websites anymore.

I'm sure they're trying to be friendly. But it actually takes up about half an inch of space. We would be better served by it directly telling us what Wikipedia is, or what I can do here, or almost anything else. So really treasure your space and make sure that all the words you're choosing to use are impactful.

Calls to Action

I also want you to keep in mind any kind of call to action where you're asking users to do something. In this case at Sesame Workshop (2:10 in the video), they're asking people to donate. There's a cute picture of Grover there.

You see the donate button is up high enough that it doesn't disappear on mobile. We know from research that people do pay more attention to items that are higher up on the page. Be careful, especially about what we put in that top third, top half of any page, and how it's going to play out on mobile. Make sure our CTA, any kind of call to action, is up high enough so it doesn't disappear below the fold.

"The Fold"(s)

We also need to keep in mind that now we've got various folds to consider. Here's the challenge - it's in one place on desktop, it's another one on a modern phone, and it might be even higher up for an older phone. And as people who work with websites, we tend to have more recent technology. So you need to be sure to think about questions like these:

• What is the right screen size to plan for?

• What are common screen sizes for people who are not like me?

• What if they only have a mobile phone?

• What if they have a laptop that's 4 years old or even 10 years old?

Be mindful of these different kinds of folds. Get the most important information up high so that it will be visible to everybody.

Words on Mobile

The number one way you can improve your writing on your website may be to use less words. Get rid of those words that are unnecessary.

No welcoming, no filler words, please. For titles, keep in mind that they're going to be on both desktop, laptop and mobile tablet. Try to use six words or less, that will mean they probably won't be truncated on mobile, which is good.

Titles and subtitles

I want you to front-load titles with meaningful words. It's important to make sure you've got good words in the first few words of any kind of sentence or title. This is because we read, in the West, left to right, and tend to not read the whole line sometimes.

You also need a title accurately on each page. When I click on an item, say, in navigation or a news story, when I land on that item, I need to have some kind of title. It should confirm that I did land at the right place.

There are many reasons for this. First, sometimes people click on things without actually reading them or looking at them with care. People need to orient where they are once they land on a different page.

Other times, especially on mobile, we get distracted as we're moving around. So it's easy to get distracted from a page. You pull back to the page and you need to be able to see, "Oh, oh yes, I'm on this page and this is what I'm doing. "

So looking at an example here (4:41 in the video), I have a website, the mobile site for the American Red Cross. If I clicked on the menu button up here on the right. I would then see these different options pop up. Eligibility requirements, let's click on that one. And when I click there, I do have a title right there that reminds me, look, this is where you are. "Requirements by Donation Type" gives me a little bit more information.

Now, there are some things that are kind of funky, even about this site. I couldn't get rid of this chatbot person that was saying, "Chat with me." I wanted to get rid of it so I could read the text, but I couldn't do I had to actually scroll. So, you know, even well-funded websites sometimes have challenges.

Links on Mobile

Let's look at the Mayo Clinic (5:26 in video). I want to talk to you about links. The links are really important on mobile because we can't do the hover with the hand on mobile like we can on desktop or laptop. We don't get a hover hand or a hover underline or anything like that. So that makes it really important for us to be sure to identify what is a link and what is NOT a link. And the Mayo Clinic has some variety on their site that I think makes it a little bit confusing.

On this page of their mobile website, this entire paragraph is a link. This is pretty unusual - to make the whole thing a link. And I almost totally missed it, except I accidentally hit it. So that was interesting.

On another area of the Mayo website, I can see these are pretty clearly links. I could visit these different parts of the website. But if I go over here, these links are different color slightly and they're underlined. Also this time I have a breadcrumb.

Big organizations sometimes are stitching together different websites kind of behind the scenes. To be a cohesive organization and to help people learn what is a link and what is not a link, you want to have consistency.

So I would say, Mayo Clinic, go with this great blue with an underline that should be good for all your sites. And we also know that we don't need to be underlining entire paragraphs. That is overkill and it's not what people expect us to do. So it would be easy for people to not understand, "Hey, that's the link." "Oh, I thought it was just paragraph."

In Summary

So just to sum up, use less words, value the space, because, you know, on mobile, there's not very much. Keep your CTAs up high. Title accurately with mobile in mind, don't have a super long title. I know it's hard. And make your links consistent and obvious. We know that three to seven words is a good link length and that is a good thing to aim for. Don't just go with one word and certainly don't do an entire sentence as a link. Just make it three to seven words with really clear, good information. Send a very clear message about what somebody will get if they click on that link. Then they can make an informed decision. So these are things to keep in mind for a while. I hope you will go make your website look awesome on mobile now.

Learn More

Get more practical tips to improve your nonprofit homepage by grabbing 3 Free UX Lessons to Drastically Improve Your Nonprofit Website here.

What is User Experience (for Nonprofit Organizations?)

Defining UX

User experience (UX) refers to the holistic experience that someone has with your nonprofit organization. It’s already happening - people are having SOME kind of experience with your nonprofit. What kind of experience do you want them to have? How do you want them to feel?

User experience includes all interactions an individual has with an organization.

This is everything from first learning about an organization to being in a relationship with it. This relationship could be as a participant, donor, applicant, student, etc. 

Explaining UX Designers

UX designers tend to focus on your tech, for example, your website, app, or other digital tool. But service design is also part of UX. It includes both non-tech interactions and whatever processes are happening "behind the scenes." 

A UX designer helps craft experiences to be positive ones. Marketing, operations, and other parts of a nonprofit organization all affect UX too. In that sense, UX is a part of everyone’s job. (I know, did you really need one more thing on your plate to do?)

Before you think this is beyond you or overwhelming, know that most of us have done UX work in the past. Have you ever thrown any type of party? A birthday party for a friend or family member? A housewarming? Then you were a UX designer for that event. You might have:

• Chosen the tasty refreshments and set them up on tables

• Organized furniture so people could have comfortable seats

• Helped people find the bathrooms or trash/recycle bins

• Made introductions of people and topics that you thought would be appreciated

• Watched whether people were having a good time

• Moved around items during the party to make them easier to find 

UX designers do the same sorts of things for your website and beyond. Great UX is about including everyone in the party and helping people to…

do what they want to do

while using your tech successfully 

and having a good time!

Sometimes, that can be a challenging order. That’s why there’s a field focused on UX. Thinking about a website, a UX designer might do things like:

• Choose the content to resonate with the target audiences

• Organize the site structure and search so people can find items quickly

• Help with wayfinding through crosslinking and great navigation

• Introduce related content that might add value

• Watch various people use the website to see how easy it is

• Make design changes based on observations, analytics, and other research

UX design vs website design

What distinguishes UX designers from traditional web designers? UX designers conduct research with real users. This is the distinguishing factor with UX people. It’s not UX design without research involved. You have to see what people do on a website and adjust. Just like at a party, if someone was having trouble finding the drinks, you wouldn't tell them, "Good luck with that." Would you? No way. I know you would be helpful. Too often we let people suffer online though. We need to treat visitors kindly, just like we would in person.

Research is REALLY important to make informed design decisions. It’s easy to make assumptions because we are biased and self-focused. But there is lots of public research available to help us. There are free and low-cost tools out there to see how people use our website. With some mindfulness, we can affect people’s experience positively. Small changes, for example, making text-user friendly, do make a difference. There’s no excuse for bad user experience on nonprofit websites anymore. 

UX Design for Nonprofits

Nonprofits need to really focus on particular areas of user experience that might be less important for a traditional company selling widgets. For example,

Trust is #1 for nonprofits. Nonprofits need a trustworthy and professional presence for people to engage with them and/or give them money. We can design for trust - there’s research available on this and more coming out all the time.

Transparency is also critical for nonprofit organizations. Some people may be ok purchasing products without exactly knowing who or how they are made. But when it comes to giving money or receiving services, most people want more information. Being as transparent as possible builds trust, familiarity, and comfort with people. This means “About” pages and access to information are critical.

How Do I Get Started?

What kind of experience do YOU want people who visit your nonprofit website to have? One approach is to, pick one website area that you know is problematic and start there. It’s ok to start small. For example, fix your broken links.

If you haven’t already, get your 3 FREE UX Lessons to Dramatically Improve Your Nonprofit Website.

Next, join our Facebook learning community, UX for Nonprofits, to keep learning. It’s a worthwhile effort to improve the UX of your nonprofit organization. If you have any questions, don’t hesitate to contact me.

Join others like you at our learning community, the Facebook Group called UX for Nonprofits!