|
Video | What Is Structure? | Design Principles | CRAP | Design Procedure | Gather Key Info | HATS | Priya’s Reference Card | Conclusion | Sources |
In “Information Design for Technical Communicators,” Sarah Holdgrafer walks through the core principles of information design and shows each one at work on a real National Weather Service forecast page.
Structure is Step 3 of the technical writing process: key ideas, style guide, outline, template, and layout.
This week takes those focus areas and turns them into a procedure you can actually follow, drawing on two related disciplines. Information design is the broader field: presenting information so it’s understandable and easy to use. Document design is information design applied specifically to documents, pages, and screens. Structure is where that thinking happens in your writing process.
What Is Structure?
Structure is the plan for a document. It decides what information goes in, in what order, and where it appears in the document.
Without a clear and carefully planned structure, information may appear jumbled, in the order the writer happened to think of it, and the reader may have trouble finding or using what they need. At best that costs the reader time. At worst, a poorly organized document costs the organization money or creates a safety risk.
The National Weather Service’s forecast page is a good place to see what a working structure does.
The city name and current temperature are the largest, boldest text on the page, so a reader glancing at their phone gets the one number they came for immediately. Current conditions, the extended forecast, and the detailed forecast are each set apart in their own block, so a reader who only wants tomorrow’s high doesn’t have to wade through today’s humidity to find it.
Every day in the extended forecast uses the same layout, so once a reader understands one day’s entry, they understand all seven. None of that happens by accident. Someone decided what mattered most, grouped what belonged together, and repeated a pattern the reader could learn once and reuse. That’s structure at work, and it’s the model this week’s procedure is built to produce.
What Is a Design Principle?
A design principle is a rule of thumb for judging whether a document helps or hinders its reader.
Information design scholar Saul Carliner argues that these principles work because they answer three needs every reader brings to a document. Carliner calls these the physical, cognitive, and affective needs, and he argues that good information design addresses all three.
| Need | The Reader’s Question |
| Physical | Can the user locate the information they want or need? |
| Cognitive | Can the user understand or comprehend the information once they found it? |
| Affective | Can the user then use or apply the information to meet their needs? |
Two things about how people actually read make the physical need especially hard to satisfy.
- Readers scan instead of reading word for word. Jakob Nielsen’s research puts it at roughly twenty percent of the text on a page, so most of what you write is skimmed, not read.
- Readers take in the visual design of a document before they read any of its words. That first impression shapes how they approach everything that follows. A dense, cluttered page signals hard work and confusion ahead, and readers respond to that signal before they’ve engaged with a single sentence of your content.
CRAP (Contrast, Repetition, Alignment, Proximity)
CRAP is a set of four design principles introduced by designer Robin Williams in The Non-Designer’s Design Book.
The acronym is easy to remember, and the four principles cover most of what makes a document usable.
| Principle | Focus Area | Focus Action |
| Contrast | Difference that draws the eye. Elements that matter shouldn’t blend into their surroundings. | Make important things look different, using size, weight, typeface, color, or position. |
| Repetition | Consistency. Repeated formatting holds a document together and teaches the reader what to expect. | Format like things the same way, every time. |
| Alignment | A visual connection between elements. Items placed on a shared grid look related and deliberate. | Line elements up along common edges. Indent bullets and subtopics the same amount throughout. |
| Proximity | Closeness signals relationship. Readers assume items near each other belong together. | Keep related information together, and separate what isn’t related. |
These four principles rarely act alone.
On the weather page, the heading text is larger than the body text (contrast), every day’s forecast uses that same size difference (repetition), the headings all sit flush left (alignment), and the current-conditions numbers are grouped tightly together and set apart from the extended forecast (proximity).
Contrast tends to be the principle writers lean on hardest, and document design researcher Karen Schriver’s explanation is straightforward: the human eye is drawn to areas of high contrast. That’s also why contrast is easiest to overdo. Bold everything and nothing stands out anymore.
Information / Document Design Procedure
The design procedure we’ll use for this course has two stages: first you gather key info, then you work through the HATS (Headings, Access, Typography, Space) procedure.
For our purposes, consider Gather Key Info as a pre-step: it’s where you collect and prioritize the information that you’ll use in the document. HATS is the formal procedure that turns that material into an effective document that serves readers’ purposes. HATS was developed by business communication scholar William Baker in 2001 for routine workplace documents, and each of its four elements applies the CRAP principles to a different part of the document.
| PRE-STEP | HATS: THE FORMAL PROCEDURE | ||||
| Gather Key Info | Headings | Access | Typography | Space | |
| Action | Collect your research, rank it by what the reader needs, and set aside what won’t fit | Label each section so readers can see where it begins and which sections sit under others | Decide what comes first, group what belongs together, and choose how each chunk is presented | Choose and style the type: typeface, size, weight, and alignment | Give each element and section room to breathe with margins, white space, and gaps between groups |
| Purpose | Produce a prioritized list, since neither the document nor the reader’s attention can hold everything | Let a scanning reader jump straight to what they need | Help readers find and understand key information quickly | Make text readable and show, before a word is read, which text matters most | Help readers keep their place, spot key information, and see where one idea ends and the next begins |
Gather Key Info
Before you design anything, decide what the document has to carry. This pre-step turns a pile of research into a short, ranked list of what the reader needs.
|
HOW YOU DO IT
|
KEY INSIGHT Rank by the reader’s need, not your effort. The fact that took you three hours to track down isn’t automatically the most important one. Setting an item aside doesn’t mean losing it, either. It can go in an appendix, a follow-up document, or back into the draft if room opens up later. |
HATS → H: Headings
Headings come first because they turn your ranked list into a map of the document. Every other HATS decision hangs off them.
|
HOW YOU DO IT
|
KEY INSIGHT Descriptive beats generic. “Results” tells a reader that a section exists. “Student Test Scores Improved 23% After Intervention” tells them what’s actually in it. A reader who’s only scanning reads the heading and nothing else, so the heading has to carry the message on its own. |
HATS → A: Access
With headings in place, decide what comes first inside each section and how each chunk gets presented: as a paragraph, a bulleted list, or numbered steps.
|
HOW YOU DO IT
|
KEY INSIGHT Front-load everything. Journalists call it the inverted pyramid: put the most important information first, and let the details taper off below it. It works at every level of a document, from the piece as a whole down to the first sentence of a single paragraph. |
HATS → T: Typography
Typography makes the hierarchy you’ve planned visible. A reader should be able to tell a heading from body text before reading a word of either.
|
HOW YOU DO IT
|
KEY INSIGHT Two fonts is the ceiling. Every additional typeface is one more signal the reader has to decode. Most of what a heading needs to say can be said with size and weight alone. |
HATS → S: Space
Space gives each element and section room to breathe. White space isn’t wasted room: it’s what lets readers keep track of where they are in a document and spot key information at a glance. If you’ve applied the other principles, much of that space already exists. This step refines it.
|
HOW YOU DO IT
|
KEY INSIGHT White space is how readers keep their place. Technical communication scholars Elizabeth Tebeaux and Sam Dragga call it essential for helping readers track where they are in a document. On the weather page, the space around today’s temperature is what lets a reader find it in a glance. |
Priya Designs a Front Desk Reference Card
|
The Situation Priya works the front desk at her university’s recreation center. New members and guests interrupt the desk constantly, and it’s almost always the same handful of questions: how to reserve a locker, how to sign up for a fitness class, what a guest pass costs, how to report a broken machine, and how to replace a lost ID. The Answer Priya decides that if she builds a one-page reference card for the front desk, this may address many if not all of these issues. The card will be placed prominently on the front desk, in a place clearly visible to rec center visitors who come in through the front door. A second copy will be placed so front desk staff can quickly reference it. Gather Key Info To gather her key info, Priya logs every question asked at the desk for a week. She ends up with twenty-three distinct topics, from “where’s the water fountain” to “can I freeze my membership while I’m abroad?” A one-page card can’t hold twenty-three answers, so she ranks each topic by how often it comes up and how badly a wrong answer would go. Five topics make the card: lockers, classes, guest passes, equipment issues, and lost IDs. They account for most of the questions, and a wrong guess on any of them causes real problems. Membership freezes and the water fountain come up rarely, and a new worker saying “let me check” costs little, so those get set aside for the binder. H: Headings Five topics get five short headings that a reader can spot from across the desk. Her headings are Lockers, Classes, Guest Passes, Equipment Issues, and Lost ID. All five are short nouns, worded in parallel, and none needs a subheading. A visitor looking for guest pass prices can find the right section without reading anything else on the card. A: Access Next comes order: what goes first, and how each topic is presented. Priya orders the five sections by how often each question comes up, so lockers and classes sit at the top of the card and lost ID sits at the bottom. Not all five topics work the same way, so she presents them differently. Lockers, classes, and guest passes are lookup facts, so each gets a short bulleted line or two: guest passes cost ten dollars and are good for one visit, and classes are booked through the app, with no desk sign-up. Equipment issues and lost IDs involve a short process, so those become numbered steps. For a lost ID: bring a photo ID to the desk, pay the replacement fee, and pick up the new card. T: Typography Where and how the card will be read shapes every typography choice. Visitors will read it from a few feet away as they walk in, and staff will glance at it in the middle of a conversation. Priya sets the body text at 16 points, makes the five headings larger and bold, and uses one font throughout. She skips color entirely: the card will be photocopied when it wears out, and she doesn’t want anything to depend on color. S: Space Each topic gets room to breathe. Priya leaves a half-inch margin on all sides and puts a clear gap between the five sections, wider than the space between lines inside a section. A reader’s eye can tell at a glance where Lockers ends and Classes begins, and each heading sits closer to its own text than to the section above it. When she steps back, the Equipment Issues section looks crowded. Instead of squeezing the spacing, she moves two lines of explanation into the binder, and the section opens up again. The Result The finished card answers the desk’s five most common questions before anyone has to ask them. Visitors can find what they need as they walk through the door, and staff have the same answers in front of them when someone does ask. Everything she set aside stays in the binder, where it’s still available for the rare question the card doesn’t cover. |
Conclusion
Structure means planning what goes in, in what order, and where, before you draft.
Gather Key Info decides what belongs in the document and what matters most. HATS turns that decision into a working document. CRAP is what you check each choice against along the way. As information designer Edward Tufte puts it, clutter and confusion are failures of design, not attributes of information. Done well, the result is a document a reader can use on the first scan.
Sources & Further Reading
Everything referenced above, if you want to go to the originals.
- Sarah Holdgrafer, “Information Design for Technical Communicators” (video) — assigned viewing, embedded at the top of this page. Source of Carliner’s three needs, the design principles, and the National Weather Service example.
- “Principles of Document Design: CRAP” (video lecture) — contrast, repetition, alignment, and proximity shown on a real technical page.
- William H. Baker, “HATS: A Design Procedure for Routine Business Documents,” Business Communication Quarterly (2001) — the original source of HATS.
- H. Allen Brizee, “HATS: A Design Procedure for Routine Business Documents” (Purdue OWL slides, PDF) — a walkthrough of each HATS element, adapted from Baker.
- Joseph M. Moxley, “Page Design: How to Design Messages for Maximum Impact,” Writing Commons — scannability, headings, lists, and the core design principles.
- Saul Carliner, “Physical, Cognitive, and Affective: A Three-Part Framework for Information Design,” Technical Communication (2000) — source of the physical, cognitive, and affective framework.
- Elizabeth Tebeaux and Sam Dragga, The Essentials of Technical Communication (Oxford University Press) — source of the point that white space helps readers keep track of their location in a document.
- Jakob Nielsen, “How Little Do Users Read?,” Nielsen Norman Group — the research behind the twenty percent scanning figure.
- Digital.gov, “Organize the Information” — audience questions and bottom-line-first ordering, used in the Gather Key Info stage.
- Suzan Last, “Visual Rhetoric,” Technical Writing Essentials, 2nd ed. — the CRAP principles applied to technical documents.
- Nielsen Norman Group videos: “F-Pattern in Reading Digital Content,” “Why Chunking Content Is Important,” and “4 Tips for Bulleted Lists” — short, research-based videos on how people scan and process text.