UW logo
UX Design GuidesUX Design Guides

Information Design

This guide offers simple principles and guidance for creating web resources that are easy to scan, follow, and use.

What is information design?

Information design is the practice of organizing, structuring, and presenting information and data so people can understand it quickly and clearly. It combines text, visual layout, hierarchy, and design elements to turn complex information into an easy-to-read format.

Why is information design important?

People scan, they don't read

The main reason good information design is that people don't read on the web, they scan. Studies have shown that ~80% of people scan pages and only ~16% read word-for-word.

However, people do scroll, even long page – if it's content they need, and easy to find, they will scroll down.

Help people, and machines

  • It improves readability – clear headings, bullet points, and white space guide the eye naturally through a page.
  • It improves accessibility – well structured information is more easily consumed by people using screen readers, people with low literacy, or people with non-native language backgrounds.
  • It reduces cognitive load – breaking content down into distinct and digestible chunks reduces overwhelm.
  • Helps people find information or take action faster – well-designed pages helps people find what they need or take important next steps, and faster, so that they aren’t wasting time.
  • It improves usability – studies have found that with information design improvements, the result was truly stellar: 124% better usability. (Measuring the Usability of Reading on the Web, Nielsen Norman Group, 1997)
  • It reduces AI hallucinations – poorly structured content trains AI systems to make wrong connections: when related concepts appear too far apart, or when unrelated ideas get crammed into the same paragraph, AI models start associating things that shouldn’t be linked.

What should you prioritize first?

If time is limited, focus on addressing these high-impact items:

  1. Make the page’s purpose clear
    • Ask yourself at each stage “what is the user trying to get done here/now?”
    • Consider what features of a page will support that task or goal
  2. Guide the user — on each page have:
    • A page title that clearly describes the page’s context and function
    • A clear call to action
    • A clear hierarchy — create a page structure using groups and headers to help users parse the page content
    • A clear path through the page
    • Clear feedback when action is taken
  3. Use headings and sub-headings well
    • Headings are one of the most powerful cues for both readers and search systems.
    • Create a proper hierarchy using semantic HTML. A proper hierarchy of headings should have: (1) only one top level heading (H1), and (2) at all other levels, at least two headings per level.
    • Help users understand:
      • how things are organized
      • break down concepts or tasks into a manageable size.
      • specify actions they can take and what is optional (answer the questions, “What do I have to do?” or "Do I have to Read This?”)
    • Be descriptive and use keywords naturally in headings – use target terms where it feels natural to reinforce topical clarity.
    • Object or verb labels? Pay attention to whether a page title, header, or subheader is acting as a label for grouped content (for which it should be worded as an object rather than a task), and when it is acting as a call to action or guiding a user through a series of steps (for which it should be worded as a task).
  4. Favor structured, scannable formats
    • Break up dense text with checklists, comparison tables, or short bullet summaries.
    • Bold keywords – lists are more readable when start with verbs and have key words bolded.
  5. Say less, clearly – Be specific, concise, and direct.
    • Keep it short. Avoid unnecessary words; aim for half the word count (or less) than conventional writing.
    • Lead with the takeaway. Start headers, bullet points, or sentences with key points or calls to actions.
    • Use simple language. Avoid jargon, technical terms, and overly complex sentence structures.
    • Replace vague terms with specific entities like product names, versions, locations, or dates.
    • Provide clear, unambiguous instructions that leave no room for misinterpretation.
    • Consider using AI to rewrite an existing page – Sample prompt: “Using the best practice identified in this page https://uxdesign.uw.edu/info-design please heavily edit the attached page for <audience> so that it is optimized for reading and scanning on the web."

What is content chunking?

Chunking refers to breaking information into meaningful, visually distinct units so readers can scan, understand, and remember it more easily. Clear chunking also helps AI systems recognize relationships correctly and avoid linking unrelated ideas.

Core principles

  • Keep chunks compact and self-contained. Each section should stand on its own and stay focused on a single topic.
  • Scope each section to one intent. Address one question or idea per section, such as what, why, or how.
  • Start with the answer. Put the first one or two sentences in an answer-first style so readers get the main point quickly.
  • Keep sections to a reasonable length. A target range of about 150–300 words helps avoid truncation and supports semantic matching in AI models.
  • Keep paragraphs short. Aim for 2–4 sentences per paragraph so the content stays easy to digest.
  • Strengthen entity clarity. Replace vague terms with specific names, versions, locations, or dates when possible.
  • Use descriptive subheadings. Each chunk should have a heading that clearly signals what it covers.

Why this matters

Well-chunked content is easier for people to scan and easier for AI systems to interpret correctly. When related ideas stay close together and each section has a clear purpose, the content is more usable and less likely to create confusion or result in “AI hallucinations.”

When should you use tabs and accordions?

Why to use

User interface mechanisms like tabs or accordions can simplify a page. When properly used, they can be an effective organizer within a content page or a web application.

Specifically, tabs and accordions can:

  • help users focus on few key pieces of content
  • organize content into groups
  • break down a task into multiple parts
  • reduce overwhelm
  • present distinct views of an object or task

When not to use

  • When content needs to be visible for most users to answer their questions or complete their primary task. Required information should never be hidden by default (or on page load), this can lead to user confusion or validation errors.
  • When an uninterrupted reading flow is prioritized.
  • When it is important to communicate a process or consumption order. (especially for tabs)
  • If the a comparison is needed between content within two panels, as this task will become cognitively burdensome.

The cost of nesting information

Nesting information inside a tab or accordion can make it harder for users to find and understand information. It is then better to show all page content at once when the use case supports it. Specifically, the following problems can occur:

  • Users may overlook content because it is not visible at first glance, or when scanning the page
  • Users must decide between topic headings. Norman Nielsen Group notes that “accordions shorten pages and reduce scrolling, but they increase the interaction cost by requiring people to decide on topic headings.”
  • Accessibility is reduced. For all users and special users with disabilities, the site becomes more complicated to use with keyboard navigation or screen readers.
  • Cross-device support increases. Disclosures add code and usability complexity and require more technical and design support to ensure they function properly on varying devices (e.g. mobile, tablet).

Best practices

Tabs

Tabs are best used for organizing content into groups, breaking down a task into multiple parts, or presenting distinct views of an object or task.

  • Tab groups should be limited to 2-6 tabs. Beyond that it may be helpful to introduce another level of navigation/hierarchy.
  • Labeling and content grouping should match user expectations and mental model of the content.
  • Tab labels should be concise and discrete, helping users clearly choose which one they are interested in.
  • Tabs should not be used when it is important to communicate a process or consumption order (e.g. don’t use when a form on each tab needs to be completed in sequence).

Accordions

Accordions are best for when people need only a few key pieces of content on a single page. By hiding most of the content, users can spend their time more efficiently focused on the few topics that matter.

  • Labeling and content grouping should match user expectations and mental model of the content.
  • Avoid nesting accordions inside of other accordions. For more than two tiers of content, consider other design components.
  • Avoid using accordions when there's little visible content on the page.
  • Avoid using all caps in accordion labels.

How should you format instructions?

Formatting instructions that are easy to scan, follow, and use in the moment is critical. It is especially useful when creating how-to guides, job aides, and other process support materials.

Core principles

  • Separate instructions from background context or other content.
  • Arrange steps in a logical, chronological order.
  • Give one instruction at a time when possible. Focus each step on one action.
  • Use active voice. Active voice (e.g., "Click the button") makes instructions clearer than passive voice (e.g., "The button is clicked").
  • Use italics where appropriate for UI labels such as Save, Submit, or Settings, or technical terms, new terms or titles of software systems or documents.

Formatting guidance

  • Use numbered lists for steps that must be completed in sequence.
  • Use bullets for related items that do not need to be done in a specific order.
  • Keep instructions consistent from section to section so readers know what to expect.
  • Make headings clear and specific so users can find what they need quickly.

References

Last updated by William Washington