Structure Your Web Content: Designing Large Documents
A resource which looks as intimidating as it is difficult to read is a large document. Obviously, while minimalism and only saying what you need to is a potential solution, it’s certainly possible for our enthusiasm to leap into the page or our need to convey information to such an extent that a page count rises into double or even triple figures! Large documents aren’t a bad thing of course, but with reader’s time precious and file size an issue, we need to handle their implementation with care.
Image credit: Nik_Doof
This article aims to highlight a few of the problems that having large documents can cause, why it’s important to either drill down the level of content (or structure them into easier to manage pieces) and a few best practices as to how those long winded documents we can’t otherwise avoid can be transformed from a confusing computer manual-esque mess into a format which the end-reader is more likely to enjoy. Documentation doesn’t have to be boring, and it certainly needs to change!
To Infinity and Beyond!
When people state that content is king, I’m not sure they intended that lots of it stuffed into a single location was a great idea. So many sites these days misappropriate content in a way that often goes overstated. By flooding their pages with material, it soon becomes an unreadable mess which as a result finding what you’re looking for requires spending much longer scanning the page than they intended. Keeping visitors on a site may seem like a good idea, but not at the expense of readability.
Let's get one thing straight, the impression a large amount of content tends to impart to a reader is "oh no!" How many times have you visited a site that either has a never ending amount of scrolling involved or lists page numbers totalling into the tens or hundreds. Certainly it’s something that will make you lose interest in having to scan through all that content, it’s a tiring thing to attempt. It’s important that we give the impression that our content is catered to their needs... not a novel!
Figure 1: The W3C specifications scare most of us out of reading them due to their size.
Beyond the impression long documents give, the file size issue can be seriously frustrating. Back in the days of 56K modem you could end up waiting hours just to get a huge website to load properly, and this hasn’t been resolved to this day. While 56K modem is not as relevant as it used to be with the advancement of broadband, it still exists and is used by people and mobile devices often have limits imposed on the speed of their connection. You really don’t want people waiting for a 5MB file to download.
While we consider the effects of this situation, we should also reiterate the problem of large pages on mobile devices. With handheld displays, small screens are inevitable in many cases, if you have a whole books worth of content packed into a single page, imagine how much scrolling the end user may be required to make in order to reach the bottom of the page. Not only will they be frustrated at the state of things, they may well end up straining their fingers due to constant “flicking”.
Structuring Content Better
One of the principle methods we can use to ensure that our content and lengthy documents are readable is as simple as redefining the way in which we structure our documents. Now saying this I’m not proclaiming that you should start hacking away at the word count (though it may help) and it wouldn’t be a good plan to start funnelling your content over 1,000 different pages. But changing the way information is visualised on the page can make identifying key points a simpler affair.
Even though this piece of advice may seem counter-productive to reducing the amount of scrolling, giving your content enough breathing space is important for readability purposes. If you have a huge block of content with no separation, no real spacing and if that content just fills every square inch of the screen, you can’t expect your visitors to read it. Content requires a certain amount of spacing in order to draw a balance between information overload and a clean, attention grabbing interface.
Image credit: mplemmon
Figure 2: Images, graphs and charts can increase the texture of content.
A simple way to better structure your content is through the use of highlights. In this instance we’re talking about the use of color to boost some content’s visual appeal or by providing extracts of the important passages of text or giving overviews to the document in order to give people the insight they require to decide if the content is correct for their needs. When providing a long document, an abstract or paragraph simply describing the content’s details can really help demystify the subject.
If there’s one thing which breaks down the problems of huge blocks of text, it’s formatting content by making use of graphics, graphs, charts, code samples and conventions like tables and / or lists. If you have a long document and need to portray information easily for the end user, you can break past the barrier imposed by headings and paragraphs alone by giving a more textured array of data display methods. A graph for example can showcase a lot of information in a visually useful format.
Beyond altering the structure of the content, we can of course break the content down into several pages to help deal with the information overload. Now while it may seem contradictory to mention multi-page formatting as I spent some time critiquing it earlier, there are methods which can really give the impression of multi pages or implement them in a way which doesn’t violate the reader’s experience. It’s actually quite amazing how many sites fail to implement them in a usable manner.
One of the easiest principles which many people fail to implement within separating content is the concept of logical breaks. One of the most frustrating things you can uncover within a site is that a potentially useful document has been broken down into multiple pages based on the length of the content rather than the way in which headings are used. Breaks in the reading flow should only ever happen (digitally) at the end of a chapter or a segment, not mid-way through a sentence or concept.
Figure 3: Too many page numbers can make readers feel like they have no chance of catching up.
If you read books, one of the most simple navigation aids you will recognise as a convention is the idea of contents pages and indexes. A similar method of presentation within long documents needs to be followed as referencing or finding specific parts of a piece may even if it’s on a single page be quite a tricky task. Fragment anchor links are a perfect way of directing the user towards a specific section of the page and a properly thought through contents page can really make all the difference.
Arguably if your content is going to span several hundred pages, you may perhaps be better off using a format like PDF to retain a document in a location where people can easily navigate or search. The PDF format’s major advantages in very large documents are that the content will be self-contained and therefore the issue of information architecture can be avoided to some extent. There is also the primary advantage of being able to read the document in your own time – offline or even printed!
Readability for Accessibility
One of the main reasons why we should pay more attention to the size of our documents is that ever controversial subject accessibility. Explaining things properly is a great thing, but over elaboration in a particular document can lead to a form of content creep which has implications for the less able of readers. Conveying your information correctly is critical to a website’s success, and you don’t want to waste the energy you have put into your work by doing something silly that can be easily avoided.
The primary method used by individuals to find the information they require within a page is known commonly as “scanning”. Effectively as your eyes track across the page they focus in on potential points of interest. When designing your content it therefore stands to reason that you take the time to make scanning as easy as possible, this includes removing junk text that isn’t needed, complex wording (that can be shortened) and you break up the text into easy to digest and read segments.
Figure 4: A printer friendly document makes things easier if people require hard copies of pages.
If there’s one thing which can be affected by complex or lengthy documents, it’s screen readers. It might seem funny when you think about it but the last thing a speech browser needs is a 5,000 word document that has no discernable navigation, order or navigability! Even with the speed some users can tolerate a screen reader at or their ability to jump between page sections, having huge lumps of text which will result in lengthy read-out’s by the software makes life difficult for those users.
One of the primary ways in which a lengthy document can be made easier to read is by breaking it into small sections which show on demand through AJAX, target selectors or something else. It may seem rather quaint that a long document sitting on a page is immediately visible for all to see, but if you can allow visitors to browse sections of the text without being distracted by the full amount, you will find that the content readability improves. It’s all a matter of emphasis in information design.
The Neverending Story
As the web increases in infrastructure, the number of large documents being portrayed on the web will also boost in size (the digital production of books is a classic example). While we cannot simply purge content into smaller pieces to avoid the complexity in every case, the risk of turning a website into a Neverending story which absorbs more time than the visitor has can be an obvious turn-off which may have them seek a website that gives them what they want with fewer barriers to entry.
Take the time to examine any overly complex documents you serve on your website and determine the best route forward to ensure that your visitors get the experience they deserve. No-one likes spending an entire day foraging the web for information, and we certainly don’t visit websites to be overwhelmed with waffle. Improving the readability of your information and optimizing the way your content is displayed may both help your visitors and give your site added depth and context.
- Reductionism in Design
- Return of the Mobile Stylesheet
- Importance of whitespace
- Distinction in Design
- Web Page Readability
- Contents page
- Scanning and eye tracking
- jQuery Accordion (for content)
How do you make content easier to read on the page? Do you use any neat tools to break content down into sections? What do you think about readability? Let us know in the comments!