Scrolling with Purpose: And When it Works for Charities

7 November 2016
Scrolling websites

The ascent of mobile browsing has encouraged a recent trend of relatively long pages and websites. Many well known apps and news websites take advantage of our propensity for scrolling to keep on serving content effectively eliminating the ‘bottom’ of the page.

Before following suit and creating a very long page, consider the pros and cons. In this post we will look at when long pages work well and how it can go wrong.

Moving ‘below the fold’

‘Above the fold’ is a traditional approach to website creation that stems from the printed newspaper. Getting everything above the fold however is not the objective. The objective is to make what is above the fold attention grabbing and enticing.

Scrolling is an easy, intuitive and low commitment way to continue browsing. It stands to reason therefore that content ‘below the fold’ is actually easier to get to than content on another page that requires a click.

The real questions to ask are:

‘How do I capture someone’s attention in the first impression’ and
‘How do I move people on to the next step?’

Four long page types that work well

1 Stories

As long as the narrative journey is compelling and visually interesting, a long page can be a very effective way to tell an informative and emotional story. This works equally well for stories about you, your projects, your beneficiaries etc.

Example: Charity Water

Charity-water

Charity Water recently moved all their stories over to Medium, a platform that’s perfect for the long form story. See how the design is simple and the focus is on the message and the narrative. There’s a simple call to action on each story to join their mailing list. This example has a huge attention grabbing message to start and a nice balance of text and images throughout the story. This is how you tell stories online.

2 Campaigns

Explaining a campaign is like telling a story, there is a narrative progression that you can control and a clear call to action at the end. Limited links, actions and exit points through the narrative help people stay on the right journey. You may choose to reiterate the same call to action at various points on the page, thus appealing to different levels of curiosity about campaign details.

Example: Invisible Children

Invisible-children-get-involved

We toyed with whether to include this example or not, and where to include it. This site has some great features and others we think could be improved. This particular page is a good example of what a campaign page should do. Here’s everything that’s right about this page:

  • The headline message could not be bolder
  • The call to action (Fundraise) is repeated throughout
  • The text has loads of space to breathe
  • There’s little to no distracting animation
  • The on-page option carousel selector (ideas / tips / downloads) works well for offering more without taking you away or making the page crazy long
  • The call to action colour is super clear

3 Reports

In our post on digital annual reports for charities we talk about how time spent on your annual reports can be maximised by using them in your marketing. An easy way to bring this content online is just to create a long page. You won’t need to invest in any new technology or complex design work. The key here is to cut out all descriptive language and unnecessary padding leaving just the key facts and figures.

Example: Charity Water

CharityWater

This is kind of a cross between a campaign and a report. We’ve listed it here because it perfectly demonstrates the point we’re making about reports. See how they manage to condense 10 years of impact into one page. There is a nice rhythm to the page, you can start to anticipate what’s coming next because everything follows the same format. The design is also very simple. There’s nothing to click or distract you from the narrative and there is one clear call to action at the bottom.

There’s no reason why you couldn’t create something similar on a normal page of your website right?

4 Related content

Our final suggestion for when to use a long page is when you want to serve up related content. This is the primary reason that news and social sites use long pages, they want to keep you interested by always showing you the next thing. And it works.

This is certainly a much less targeted approach than the first three options listed here. The first three are all very deliberate, curated, narrative pages where you know exactly what you want people to see next. Offering views of related content admits that you don’t really know what the best next step for your user is and you’re asking them to decide for themselves.

Example: Forum for the Future

Forum-For-the-Future

This is one of our sites. The staff, projects and blog posts of this site relate to one of four regions (UK, US, India, Asia Pacific). Each of these regions has a hub page that offers an introduction to their work in that area and then feeds of related items from those various content types. This then acts as a launch pad for anyone specifically interested in that region who wants to get an overview of the different things going on.

This might apply to someone looking to apply for a job, partner with the organisation or become a member. This is quite a common use case for lots of charities and the technology isn’t that complicated.

Our platform handles this kind of thing very easily.

Appealing to different audiences

A long page with relatively few links and options relies on you knowing that you have attracted someone from an appropriate audience who is going to be interested. Once they have started the narrative journey you want to be fairly sure they’re willing to complete it, otherwise they will simply leave because there are no other options for them.

This makes it hard to appeal to multiple audiences with a long page. Most of those audiences won’t have the patience for it. A better strategy is to first segment your audience groups on your homepage or landing page by asking questions about what they want to read. Offer teasers of long page content but let them make the decision to check it out.

For this reason, a long homepage is often not a good idea for a charity that needs to engage multiple audiences.

When long pages go wrong

Long pages can go badly wrong. Here are our top three big no-no’s for long pages.

Becoming too design-lead

Some campaigns are good candidates for a long page where linear scrolling is the main form of progression through the story. It’s easy however to get carried away with the design at the expense of the message. In our view Make your Money Matter suffers from this problem. The design is a bit overwhelming and actually detracts from the message.

MyMM

Losing context

In the same example above the main problem is the lack of context. There is no progress indicator and I found myself just scrolling and scrolling to get to the end and stopped reading the text about half way through. The humble scroll bar does a perfectly good job of showing people their context, please don’t suppress it for design reasons!

Offering too many links

Many long pages try to combat the ‘boredom’ factor by offering links at various points as you go down the page. This can lead to an overwhelming number of choices for the user and a lack of understanding of what the right thing to do is. Should I carry on scrolling or should I click one of these links?

As mentioned above. Either your page needs to clearly offer a range of options to segment your audience OR it’s a carefully curated narrative aimed and one specific audience. Try not to do both at once.

 

Subscribe to our newsletter to get the latest tips straight to your inbox.