Homepage Tips for Nonprofits

The video content transcription of “Homepage Tips for Nonprofits” is below.

You don't have much time to make a great first impression on your website visitors. In fact, 50 milliseconds is how long it takes somebody to decide what they think about your site. I didn't know how long that really was. I looked it up and blinking an eye is 300 to 400 milliseconds. 50 milliseconds is super fast. It's not a lot of time.

Numbers to Know About Homepages

Another number I think you should be aware of is five seconds. Generally, there's this idea that we should be able to understand what a website is about in about five seconds. So would your website pass the five-second test? For example, if you were an organization helping high school students with their studies? Could I get that after just five seconds of looking at your homepage? I hope so. That's a good test for your website. See how quickly what you do can be communicated. This is hard especially if you're a complex organization.

Also know that within about 10 seconds of viewing your home page, you should communicate your value. So you have to answer that question for people, “What's in it for me?” and also the question, “Why should I spend time here?” This is a tall order. These are a lot of things that are important for us to keep in mind around our home page. We don't have a lot of time. We have to get our message across straight away.

Does “The Fold” Still Exist?

We need to keep in mind is this idea about the fold. This idea of the fold comes from newspapers, which, of course, have an area that is above where it is folded. The area above the fold is the most viewed place. People have to flip over or open up the paper in order to look at the stories below the fold.

I hear much discussion online from non-profit professionals about whether “the fold” exists. Does it exist? Does it not exist? This is a debate even among designers themselves. But if we look at the research, I can assure you that the fold still exists. People look more closely at items that are above the fold.

The thing that is tricky is that the fold moves around since we have all these different devices of various sizes. So we have various folds we need to think about! And you can see here's a fold perhaps for a laptop in the middle is one for a modern phone, and on the right is where the fold might appear on an older phone. Just keep in mind that there are various folds. When you're planning your home page content, be it an image or a call to action, a news story, whatever it happens to be, make sure that it's above the fold for as many people as possible. Yes, some people will scroll, but not everybody. That area, that first third of your page, will be viewed more than anything else.

Calls to Action (CTAs)

Another thing to keep in mind is to have one call to action, if at all possible. It could be, “Donate.” It could be, “Apply.” It could be, “See our next event” or “Sign up for our newsletter.” It’s whatever you decide is most important. Make that the one call to action. So you aren’t asking people to choose between multiple things. I have seen it sometimes work with two calls to action, but I would suggest trying to keep it to one if at all possible. Sometimes I go to a nonprofit website and there are eight different choices. That is too many. We want to guide our users and make it really simple.

Carousels, also called Sliders

One more thing to think about in homepage design are carousels. Sadly, I'm not talking about this kind of carousel that's really beautiful and fun. I'm talking about those auto-rotating sliders that happen on many homepages still. Since 2012, I've been asking people to stop using these things. We know from user research from a lot of different groups that not only do people have trouble finding items that are in the carousel, they tend to ignore them.

We also know from research that people are annoyed by carousels. So think about those types of carousels where the picture is whipping away every four seconds or five seconds or six seconds. It's really hard to time when somebody is going to be looking at the picture. Sometimes people scroll down and then scroll back up and then the picture zips away. For this reason, I would encourage you not to use them in an automatic way at all. If you have to use a carousel, you would definitely want it to be static.

This is so important that I'm putting it in red and saying, “No auto-rotating carousels, please.” They're very problematic. I would also ask you to think about whether a carousel or slider that is static, that can only be changed manually, is really best. Oftentimes, people don't use them. They don't notice the little dots at the bottom showing that there's more than one image there. And sometimes they miss the little arrows on the sides. You might be better off just rotating the picture on your homepage more frequently than putting it in a carousel or slider. These are critical things to think about on your nonprofit homepage.

Learn More

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

 
 

Resources for Trauma-Informed UX Design

Last updated March 2024

Introduction to trauma-informed design - 18-minute video

Trauma-Informed Design

On Trauma-informed Research

Here is some practical direction to be more trauma-informed in your research:

Trauma-Informed Organizations

Self Care

Trauma and ACES

These are great resources for getting a better foundational understanding of trauma:

Google Group for Trauma-Informed Design and Tech

  • Each month we have designers, academics, social workers and other professionals join together to learn and discuss trauma-informed design and technology. Join our Google group so you can get event information and access the group’s resources.