---
title: Approaches to a text heavy page
date: 2025-11-11T07:44:00-08:00
author: Zaida Jocson
canonical_url: "https://designsystem.umd.edu/resources/approaches-to-a-text-heavy-page"
section: Resources Pages
---
![2 pages side by side with the same content. The left page has dense text. The right has an image and more space](https://umd-design.transforms.svdcdn.com/production/images/comparison-mockup-innovation.webp?w=1919&h=1305&auto=compress%2Cformat&fit=crop&dm=1762875733&s=759be284e02b3b677db9dd5a3bce42de) Content Design

##  [Approaches to a text heavy page](https://designsystem.umd.edu/resources/approaches-to-a-text-heavy-page) 

A look at user-centered design and decision making when choosing components for your website.

 

 ##  November 11, 2025 

 

  ##  Use components to add variety 

  

Choosing components can feel arbitrary and overwhelming, especially with numerous options available. In some cases, decisions can be opinionated, and without targeted user research, it's challenging to confidently determine what's right or wrong. This article aims to provide insights on approaching content decisions based on best practices.

The page used for this discussion focuses on the Office of Innovation and its functions.

The original design is text-heavy. In the UX design world, this is often referred to as a "wall of text," particularly at the top. While text-heavy pages aren't problematic for certain types of content such as articles, a page like this—structured with sections and linking to many other pages—requires a reconsideration of its layout. It can be difficult for users to find what they're looking for in a wall of text.

 

 

 ![2 examples of pages](https://umd-design.transforms.svdcdn.com/production/umdimages/innovation1.webp?w=1765&h=762&auto=compress%2Cformat&fit=crop&dm=1762875585&s=6162bfbc9333c5c1bba4d7abac0a0d12) 

 

 

The original design takes up much less vertical space, while the newer design uses imagery and space to create room for the content. For example, **section 1** has information about the person heading the Office of Innovation. The original design simply links to their bio, while the updated design pulls in his image and gives more weight to the link. This helps to break up the space and create user interest.

**Section 2** talks about the purpose of the office. The original design uses plain text with numbers in the content, while the update uses an ordered list style. This helps "chunk" the content and make it stand out.

 

 

 Users appreciate chunked text content. It helps avoid walls of text, which can appear intimidating or time-consuming. Chunking enables easy skimming — users’ preferred method of reading online."

From Nielsen Norman Group

  

 

The updated page is a longer scroll, but still easier to find information. The variety, text treatments, and imagery allow users to jump around the page without trying to read every word – facilitating skimming.

 

 

 ![Text content displayed in 2 different ways: free flowing text and 3 columns with headlines](https://umd-design.transforms.svdcdn.com/production/umdimages/innovation2.webp?w=1021&h=809&auto=compress%2Cformat&fit=crop&dm=1762876026&s=f0a7a8aa79843536271b8661c0fb691a) 

 

 

 ##  Label your users 

  

The above example of audience-focused content encourages users to self-select into a category, making it easier to find content relevant to them on the page. By dividing this content, and using headlines to clearly delineate the audience groups, users can easily find what they need.

 

 

   ![2 sets of the same content. One with cards, the other in a horizontal list format with images](https://umd-design.transforms.svdcdn.com/production/umdimages/innovation3.webp?w=1715&h=842&auto=compress%2Cformat&fit=crop&dm=1762876288&s=7315a4a742eeb837b1ef8bdcac37122b) 

 

 

The use of images and a heavy section headers in the above section adds some variety on this page. The list component allows us to mix content with available images with content with no images.

 

 

  ---

**Disclaimer:** *User testing is highly recommended to validate choices. The examples above are for instructional use only.*