Structured content lets readers focus on the details that are most important to them at different times. When they first encounter content, readers will prioritize certain kinds of details over others. By leveraging individual content elements, writers can deliver the highest priority details on the first contact. 

Positioning the right details

In many situations, you can’t show every detail at once. So, what details should you show? You need to narrow it down by selecting the most helpful information and choosing how to display it.

You can use your content model to rein in potential information overload, by pulling out the precise details you decide are most appropriate to show. 

By thinking about content structurally, editors and designers can coordinate what needs to be said with how it will be presented. 

Your content model can support your screen designs so you can emphasize information in a way that provides the ideal user experience. You can connect specific elements in your content model with modules in your screen designs. You achieve editorial and presentational flexibility.

Using a content model, you can switch between three kinds of “views”:

1. Preview – revealing what’s the content going to be like
2. Overview – stating what information the content talks about
3. Viewfinder – getting to the exact content that’s on target

Structuring content allows for the presentation of different levels of detail. When information is presented, it is shown as a hierarchy. Earlier, we explored how this works for lists and timelines. This ability to move between levels of detail exists in other common user experience patterns. 

Editors have three options concerning what parts to show, based on what is likely to attract the reader’s interest in different situations. They can present:

1. Evocative highlights from the content
2. Headline information about the topic
3. Decision-critical data relating to the customer’s need

Previews: Showcasing evocative highlights

Sometimes you want to give readers a taste of the content before they view it. Provoke interest. Help people discover what they might be interested in. They can get the impression of what to expect before viewing it in full—it’s about creating a sampling or a tasting menu: a sneak preview.

Some common elements used in previews include:

• Teasers such as quotes or subheadings
• Image thumbnails
• Video trailers

Previews are useful when the reader is not sure what they might be interested in among similar items.

Previews can be presented in various ways. Certain layouts excel at providing readers with the ability to glance over items and discover ones they might be interested in. Some common layouts that do this are tiles arrayed in a grid and image-centric galleries.

Overviews: Bringing the spotlight to headline information

Readers often want the content they scan to get to the point—fast. When that’s the case, you’ll want to present the headline information before getting into the details.

Journalists and other writers have long known the value of “front-loading” the most important details first so that readers can get the gist of what the content is about before reading it all. These techniques are known as the inverted pyramid style of writing or the “bottom line up front” method.

Designers also recognize the benefits of this approach. As designer Anneka Bjorkeson notes: “Exposing every detail on a static page will quickly create clutter. Instead, give the user enough material to understand the premise and provide further details upon request.”

Overviews pull in those content elements that readers most need to know, which helps readers find the most relevant content at a glance.

The important elements in overviews include:

• Headings
• Sub-headings
• Descriptive or narrative summaries
• Price or expense data
• Trendlines such as the direction or size of change over time
• Usage or performance metrics
• Status of item described

Authors should present these kinds of elements when readers need to understand the range of information available before choosing. Scanning the headline information, they can then quickly establish the importance of an item and whether items are similar or dissimilar.

When presented with an overview of the content, readers can decide to dig into the details if they want.

The goal of this approach is to provide the reader with a summary that can be supplemented with detailed content by tapping or clicking the summary. This form of interaction is used in many UI components:

• UI cards
• Dashboards such as customer self-service portals
• Expansion panels (also called accordions or collapsible panels)
• Details-on-demand tooltips and balloons
• Annotations within maps

Viewfinders: Providing access to decision-critical data

A different scenario is when customers want to see all the details, but only about select items. To do that, they first focus on one or two critical details that are essential for the other details to be relevant. 

Because customers are interested only in items that match their criteria, publishers should let customers select the variables or parameters that the customer most cares about. Customers may think: “Only show me locations near me,” or “Only show me items from a specific source.”

This approach is a good option when a specific detail is a major decision criterion for customers.

Within user interfaces, a couple of common techniques support this approach. First, a screen widget can allow users to specify a specific criterion. A locator widget that provides detailed information based on a postal code is an example. Filters are another common technique. Users can specify a value they care about, such as a topic, date, or another descriptive term. In both these techniques, the elements will be controlled values that are used repeatedly.

Inviting a closer look

In summary, structured content allows the details shown to be tailored to the customer’s journey. Writers and designers map out how customers will encounter the content, so they can plan what information customers need to see initially in order to become interested in taking a closer look at the full content.