Is your Information Details page doing its best work?
Find strategies and sample pages that show how to get the most out of this flexible content type.
Note: You can read a general description of this content type or watch a video about how to create an Information Details page in the CMS.
In a user testing session once, we heard someone say about an Info Details page, “This page looks more like a reading page than a clickety page.” While reading looks different on the internet, it’s true that Information Details pages are intended to be a place to read and learn, more so than a Service page, which is more “clickety,” or navigational.
The Info Details content type is one of the most flexible by design. Presenting information that is clear, scannable, and digestible calls for a template with lots of options and components. At the same time, your Info Details page should make thoughtful use of the options, so it doesn’t overwhelm people.
Where does your Information Details page sit within related content?
A visitor might come to an Info Details page from a Topic (such as Disease Control & Prevention) then click to a Service page (Tick-borne diseases) that navigates them to an Information Details page (Tick-borne disease prevention) for more detail. This page about preventing tick-borne diseases offers specific information about a general topic, so the visitor will likely stay here longer.
In this content architecture, the Info Details page fits into a logical end point in the user journey.
Notice the breadcrumb on the Information Details page:
Make sure you’re thoughtful about where you place your Info Details page in a user’s journey. If a user lands on “Tick-borne disease prevention” from a Google search, they may look to the breadcrumb for more context for the page they landed on. This is why it’s important to consider how users might find your content and place your Info Details page in the right place.
Is your Information Details page organized and easy to scan?
Like any page type, your Info Details page should be well-organized and easy for visitors to scan. Specifically, we recommend you:
Enable the Table of Contents if the page will have more than 2 sections
Put the most important information at the top of the page
Avoid structuring your page as an FAQ
Limit the overall quantity of content on the page
Follow the general guidelines for accessible content
Table of Contents
Information Details pages automatically produce a Table of Contents from your section headers, unless you choose to hide it. If you have more than 2 sections on your Info Details page, we urge you to use the Table of Contents.
In user testing, we have seen again and again that people use the Table of Contents to scan for the information they want and then click on it to jump to the relevant section. As mentioned above, reading looks different on the internet. The user’s eye tends to start in the upper left corner and move down the page in an F pattern to scan the content on the page to find what they need. On the Info Details page, the Table of Contents is located exactly in the right place for the visitor to do this scanning. You are improving the user experience when you enable the Table of Contents.
Using the Table of Contents will also help with search term optimization (SEO). Search engines will crawl headers and sometimes use them in search term results.
Most important information first
The F pattern is one reason to do this, but also people rarely read to the bottom of the page. For these reasons, it’s best to get the most important information in first.
Avoid FAQs
We do not recommend structuring your Information Details page using a Frequently Asked Questions structure. Why?
Too often FAQ pages become overly long as you continue to add new questions. Scanning what seems like a miscellaneous list is not a great user experience. Later questions might be related to a previous question, which leads to similar content in different places on the page.
Often times, the question isn’t actually “frequently asked.” It’s more of an addendum or piece of content added on later. It’s better to rework your content on other pages so this new information fits in a logical place than to tack it onto a set of FAQs.
As the 2 previous bullets suggest, the better content practice is to write the questions as statements that are broad categories, so that later content will fit well under them. For example, rather than an FAQ with several specific questions landlords might ask about the RAFT program, use the header “What landlords need to know about RAFT.”
This PFML page offers a compromise. It has FAQs, but they are listed under general topics.
Are your headers precise, accurate and scannable?
User research has shown us that people scan the headers in the Table of Contents to quickly find out if the page has what they want. This is why, in addition to using the Table of Contents, you want to be sure to write good, scannable headers. Since headers sometimes appear in Google search results, they also offer another place to plant key terms that users search for.
Your headers should use plain but precise language. Instead of using an overly broad term like “Overview,” for example, you can write a header that indicates introductory material but that is also specific to the content on the page. On this page about starting a business in Massachusetts, for example, the first section header is “General guidance for starting a business.” Similarly, rather than use a header such as “Resources,” write one that more accurately describes the resources in the section.
Make your headers accurate, so users will know exactly what’s in a section. It’s a good idea to draft your content in a Word doc first for this reason — you can draft, revise, and restructure as you determine what will go in each section and how many sections the page will have. Rather than create one section with many paragraphs, don’t hesitate to start a new section with a new header when the content changes. It will help with scanning and create white space between sections, which makes for easier reading. On the Starting a business page, the topics and section lengths vary, but the authors made each one distinct so that people with varying levels of knowledge on the topic could quickly find the sections most relevant to them.
Similarly, on this page about Cyber Security, the accurate, specific headers also do the work of signaling who the audience is for each section.
Headers work as a navigational tool to help visitors quickly find what they need on a page. It’s worth it to take the time to draft, revise, and wordsmith your headers to get them there fast.
Are you using the available components to communicate information well?
Information Details pages offer many components to help you communicate your content: video embeds, pull quotes, iFrames, rich text, CSV tables, etc. A well organized, clear Info Details page should make thoughtful use of the components, however, and not overwhelm the visitor by using too many of these.
Below are some sample pages where authors have made good use of this content type’s flexibility and have chosen components that are well-matched for the purpose of the page.
Images and iFrames
On this page about How and Where to Recycle in Massachusetts, the author uses 2 components — images and iFrames — to help visitors look up information and see examples of recyclable items. These visual components are the right matches for the kinds of the information they convey, and they follow succinct and relevant headers for quick scanning.
Video embeds
This page about Telehealth for Covid-19 treatment uses a short video under the header “Get a free telehealth consultation” to explain the process step-by-step with ASL interpretation. Using a video for this purpose is a logical choice to convey this important information.
Callout Links
Notice on this housing assistance page how the callout links cap each section with an action the visitor can take to get more information or complete a task.
This page summarizes many types of housing assistance, so the callout links break up the information well and stand out for the reader, offering something they can do when they find the program that applies to them. The callout links help with skimming as well. If a person has landed here after a Google search for “RAFT” and already knows what it is, they can jump right to the “Apply for” button.
Highlight
Another available component is the yellow highlight. On the Starting a Business page, the message in the highlight (“Your business type will directly affect your tax responsibilities”) is there to indicate how important it is for people starting a new business to research business types.
In a user research study, participants noted again and again this important piece of information because it was the only highlight on the page. They actually said, “It must be important because it’s in this yellow box.” By making selective use of this feature, the authors helped users understand how important the highlighted content is.
Are you using the Visual Story format for the right kind of content?
Info Details pages can be rendered in Visual Story format, which shrinks the page margins and allows more space for data visualizations that benefit from a horizontal orientation (and that are more likely viewed by people on desktop devices). The Visual Story format is intended for visuals, as the name suggests. If your page is mostly text, you should not opt for this format as it will make for a poor user experience with text stretching across most of the page.
Last updated
