Constructive Group Created with Sketch.

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

Everything is moving online quickly—if it isn’t there already! Every day, the web holds more and more content—much of it very complex and rich with important information, like online reports, research papers, and reference material. With this volume of content also come all the tags, authors, and other metadata that make it easier for people to find it. And when you think about it for even a second, it truly is unbelievable how quickly we are able to access and explore the world of ideas.

Unfortunately, while we have an embarrassment of riches when it comes to accessing all this valuable content online, too often, the way it’s often presented leaves a lot to be desired. And for organizations whose work revolves around providing perspective and thought leadership, if how content is designed and delivered isn’t on par with the quality of thinking it contains, they’re selling themselves short—and undermining the very ideas they seek to advance.

For organizations whose missions are advanced by publishing and sharing knowledge, the design of that content says a lot about what audiences can expect from it. And research has proven that design has a significant impact on credibility, and that people come to some very quick conclusions about an organization while visiting their website. With an embarrassment of content riches 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.

As with all things on the web, usability research and design strategy provide us with ways forward. With well-thought-out design, we can find ways to present content-heavy websites clearly and effectively, encouraging our audience to visit, download, and read what we have to offer. 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 that presents complex content so that it’s clear, compelling, and accessible.

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 it’s 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  around the world need to access.

For example, this introductory text to this report on ClimateWorks, a site Constructive created last year, 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.

Large 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 and 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

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

Content-Heavy Websites Conclusion

Design can serve a key role in the reach and readability of content online. When creating or updating sites that contain a lot of text and dense content like reports and bibliographies, we have established user-friendly ways of designing for them. Whether it is grouping like items clearly, designing open, accessible tagging systems, or even navigation and wayfinding systems that promote easy exploration, we can make these information-dense sites welcoming and engaging.

Yes, it’s unbelievable how much content is moving online. But we can rely on years of usability research and design strategy to show us how to accommodate it all. Carefully-thought-out 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.

About the Author

Private: Senongo Akpem

Private: Senongo Akpem

Senongo is the leader of Constructive’s design team, bringing over a decade of experience in digital design and visual storytelling. The author of Cross-Cultural Design, he is passionate about creating diverse, inclusive communications and thrives working at the intersection of culture, design, and social impact. Senongo’s main focus is setting and implementing design strategy to help teams communicate their mission, values, and narrative with emotion and impact. A native of Nigeria who spent a decade in Japan and now calls New York home, Senongo brings a global perspective to Constructive’s work. His work has been featured in The New York Times, Slate, and NPR. Prior to Constructive, Senongo was Art Director at Cambridge University Press, where he led the creation of a global design team. Senongo earned his B.F.A. from the University of Michigan, with a concentration in Digital Printmaking.

More about Private: Senongo Akpem
Copied to clipboard http://...