Constructive Group Created with Sketch.
Article

Designing for Density: Best Practices for Content-Heavy Nonprofit Website Design

For nonprofits, the content they produce is essential to helping people understand and address important issues in the world, particularly nonprofit policy and advocacy organizations and research institutes. Whether it’s nonprofit storytelling, research reports, or policy analysis, this content is also usually sophisticated, nuanced, and….long. Unfortunately, too often, the way this important content is presented online leaves a lot to be desired—leaving many audiences uninterested in engaging with it. What’s needed are accessible content design strategies that deepen engagement with, and understanding of, complex ideas and complicated issues. So, when a nonprofit’s content cannot be simplified without compromising it (which is often the case with research-driven organizations), how can we make sure people stay engaged and get educated on the issues?

Turns out, good design is a writer’s best friend. Because sometimes the best content simplification strategies aren’t about the words you use, it’s how you use them. In this article, I’ll take a look specifically at editorial design strategies for research-driven nonprofit content.

As someone who has dedicated my career to both content creation and design for nonprofits, it’s a core belief of mine that for any organization whose work is about providing perspective and thought leadership, if how content is designed and delivered isn’t on par with the quality of thinking it contains, then they’re selling themselves short. But don’t just take my word for it: research has proven that design has a significant impact on credibility. People come to quick conclusions about an organization while visiting their website—and (sorry designers) audiences ultimately come to website for the content. But design matters. A lot! Because for nonprofits whose missions are advanced by producing and sharing knowledge, the design quality of their content says a lot about what audiences can expect from it. With more content just a click away, if that design does not hold up; then audiences are likely to leave and find other places to get the content they want.

Whatever content your nonprofit publishes, content design and time-tested editorial design techniques hold the keys to success for engaging audiences online. Thoughtful, strategic design allows nonprofits with content-heavy websites to communicate clearly and effectively—encouraging audience to visit, engage with our ideas, become educated on issues, explore more, and most important, act. We’ve talked about the key principles for effective content-heavy website design before. Now let’s look at these strategies put into use through design execution, particularly for research-driven nonprofit content.

Different Types of Dense Content

Complex Academic Language and Text

Academic language and research can often contain complex words, sentence structure, and ideas. While keeping in mind our intended audience, we can still analyze the complexity of the content we are publishing. The Flesch-Kincaid Scale is a tool we can use to measure how difficult it is to understand written content in English; it gives our content a readability and grade level. For example, it seems appropriate that the New York Times is about a 10th grade (US) reading level, offering insight into how its editors tailor their content to reach a wide audience.

However, not all the content we put online is meant to be read at an easier reading level, especially in the world of research and policy where content is often quite academic and complex in nature. This can mean larger words, scientific context and charts, and other dense, scholarly material that expert audiences need to access. For example, this introductory text to a report preview on a website Constructive designed for ClimateWorks Foundation, comes out at a grade 17 on the readability scale.

ClimateWorks Report Readability Report

This means the content is most appropriate for people who read at a post-graduate level. That’s pretty heavy reading, especially for a single paragraph! But in speaking succinctly to the expectations and sensibilities of expert audiences, we establish an accurate, compelling preview of what the reader can expect as they explore further. This creates a better user experience that strengthens the brand.

Bibliographies and Linked References

Even when reports and research are specifically written for the web and published in smaller chunks, it’s still important to cite sources by including bibliographies and references. In historical reference sites, or research pages, we can see long sections of links and bibliographic text. While the more casual reader will skip over this, researchers, managers, and analysts not only need to access this material, they may also judge the credibility of the content they’re reading based on what they find here. They have their own papers and content to produce as well, after all! The bibliographic listings on the Qatar Digital Library do a great job with this.

Bibliography on content-heavy webistes

Open, Diverse Tagging and Grouping Systems

Often, the more complex digital content requires more complex tagging systems. Overly complicated tags can be difficult for any team to manage in a CMS, and fiendishly difficult for your audience as they browse your site.  In a paper about tagging and usability, HP stated tagging is fundamentally about sense-making, a process in which information is categorized, labeled and, critically, through which meaning emerges.

There are a few ways to bring this meaning to the surface clearly on content-heavy websites, by using proven interaction design patterns, and applying them to a broader UX design strategy. For example, our search features can intelligently display suggested results as users type, letting those complex tagging systems work their magic in the background. Typographic fundamentals of spacing, proximity, and rhythm can create visual relationships between tags and key text. When we arrange tags near content, we make the entire site more easily scannable and heighten reading comprehension. Most importantly, open and clearly designed tagging systems help the audience get a good idea of the types of content on the site, and then select a topic or category to read more about.

Typographic Hierarchy Example

Visually Grouping and Reusing Text

In content-heavy websites it’s crucial to establish context and help audiences find and explore content related to their interests. As a designer, it’s my job to create greater meaning from separate or discrete pieces of content by stringing a connective thread across a user’s experience at a website; we do this by grouping those pieces together in a process called “chunking.” In the higher parts of the site, such as the homepage or section hubs, this means designing elements like “teaser” blocks and planning to add short titles and intros to pages with longer titles and more dense content.

It’s important to standardize what these teasers look like, creating a small design system for them. This gives our audience a very good idea of what they will find when they tap one of the teaser blocks and navigate to a page. In order to do this, I reference my design system and typographic choices, unifying similar content and text styles. I keep elements like dates, tags, and author names very similar across the entire site. I want to make sure the audience has a visual pattern to understand – once this has been established, the content becomes more visually aligned with the knowledge it contains.

Visually grouping example for content heavy websites

Provide Breathing Room

With the amount of text and links on these content-heavy websites, the human eye needs a place to rest. Too much content on a page overwhelms the user and means that nothing is readable, a sure way to force your audience to click away. This is where open or white space becomes important to the site experience. By interspersing the content groups we looked at above with open spaces, we increase retention, clarify relationships, and make sure they are visually eye-catching. This is especially true for complicated or technical subject matter, like in this example from academia.edu.

White space example

Design-Linked WayFinding Systems

Even after visually grouping content and designing effective white space, we are still left with sites that have a lot of pages and content. Working with knowledge-driven organizations, that is a common challenge. One of our key goals is to design a meaningful path for audiences to follow as they navigate around these sites. These paths, often called wayfinding systems, are the same as what you might find in a large museum or tourist-friendly city. They operate the same way, too.

Digital wayfinding patterns focus on the main menu, breadcrumbs, faceted navigation, search bars, and clear site links in the footer. Dennis Kardys calls this network of available pathways the circulation system. If there is a chance your audience will get overwhelmed in content-heavy website, designing a clear wayfinding system saves them time and energy. It’s an extra layer of context that we deliberately design for, giving your audience a memorable experience as they navigate and read through dense content. Careful design choices in the main menus and navigation of a site elevates the brand in the eyes of your audience, making the site a credible place to revisit and learn from.

Acadia Center WayFinding example

In Conclusion

Design plays an essential role in the readability, and therefore the reach of a nonprofit’s content online—especially when it’s dense research or policy. So, when designing nonprofit websites that are filled with lots of text and dense content like policy reports, issue briefs, and toolkits, be mindful of how much information a person’s eyes can take in and make the experience effortless. Thoughtful visual and UX design enable us to discover ways to present dense content clearly and effectively, encouraging our audience to visit, download, and read what we have to offer.Simple best practices like clearly grouping items, designing open, accessible tagging systems, and making sure that navigation and wayfinding promote easy exploration will make your nonprofit’s website—and therefore its ideas—more welcoming and engaging.

About the Author

Matthew Schwartz

Matthew Schwartz

For the last 24 years, Matt has specialized in brand strategy, design, and user experience, focusing his passion for social and environmental issues to help organizations achieve greater impact. As Constructive’s leader, Matt plays an active role in collaborating with clients and our teams to develop strategies and design brand experiences that increase mission focus and deepen audience engagement. A frequent writer and speaker, Matt is a regular contributor to The Foundation Center, Communications Network, and other organizations. He is also a member of the Leadership Team for The COmmunications Network’s New York chapter. Matt’s work has been recognized for excellence by numerous organizations such as The Webbys, Communication Arts, Print Magazine, The Case Awards, Graphic Design USA, The W3 Awards, The Communicator Awards, and others. Matt earned his Bachelor’s Degree from Sarah Lawrence College in Writing & Visual Arts. He then conducted post-graduate design studies at the School of Visual Arts, Rhode Island School of Design, and Parsons.

More about Matthew Schwartz
Check
Copied to clipboard http://...