These notes answer three progressively layered questions — do not read them mixed together:
(1) How to manage content (governance layer) —— Content Strategy: Before writing the first word, decide on the high-level plan for "what content to create, who creates it, where to place it, and when to remove it". It is not writing itself (that is tactics); it sets direction for tactics. Supporting components include content inventory/audit, content standards, intranet management models, Agile scheduling, and information architecture.
(2) How to write content (execution layer) — Users only scan, not read, online, so writing must "serve scanning": put conclusions first (inverted pyramid), cut fluff (concise writing), use layout to chunk content (summaries/bold text/key points), make small interface text precise (microcopy), and match tone to the audience (Tone of Voice).
(3) How to validate content (validation layer) — Use content testing(open-ended information-finding tasks) and eyetracking to confirm users actually understand the content and can find what they need.
Core principle running through the whole piece:"Without good content, there is no good experience" (Halvorson 2011) — UX projects should start with content, not with UI. Each section provides core principle / Why / counterexample.
1. Content Strategy: The high-level plan that precedes tactics
Definition: Content strategy = the ongoing practice of planning the "creation, delivery, and governance" of useful, usable, effective content. This definition was proposed by Kristina Halvorson in the 2009 book *Content Strategy for the Web* (2nd edition 2012). It ensures every piece of content serves a legitimate purpose, so resources are not wasted producing "meaningless content".
Strategy ≠ Tactics: Strategy (what to do, why, who does it) must come before tactics (writing, shooting videos, creating graphics). Many organizations skip strategy and jump straight to tactics, resulting in declining content quality and impaired UX; other teams fixate excessively on UI design, ignoring that what users actually want is information.Counterexample: Content professionals often feel frustrated because organizations only assign them tactical work and do not understand the value of strategy.
Content strategy must specify 5 things:
| Element | Specific question it answers |
|---|---|
| Purpose | Which business goal / user need this piece of content serves |
| Ownership | Who owns, creates, measures, and maintains it |
| Fulfillment method | What format, channel, style, tone, and wording to use |
| Organization | How to structure, tag, and organize content so it is findable and contextually visible |
| Publication integration | How to publish it and how it integrates into the overall experience |
Four phases (cyclical, until content is removed)— Planning → Creation → Maintenance → Unpublishing. Content cycles repeatedly between the Planning, Creation, and Maintenance phases until it is taken offline.
| Phase | Key questions | Tools used |
|---|---|---|
| Planning | What is the current state of existing content? What are the goals? Where are the challenges and opportunities? Who requests content/who has subject-matter expertise/who creates, reviews, and publishes/who handles issues | Content inventory + audit, Content Strategy Statement, Editorial Calendar |
| Creation | How to integrate content early in design? What are the editorial/legal/publication standards? How do backend systems operate? How to maintain consistency across channels | Content Framework (early ideation to avoid later chaos), content requirements checklist (structure/metadata/accessibility), Asset Map |
| Maintenance | Who maintains it? How often to update the inventory (at least every 3 months)? How to implement and communicate changes | Content Governance committee, Content Scorecard (shows content’s business impact) |
| Unpublishing | Who makes the final removal decision? Who deletes it from the CMS? Should it be archived/how long? Who still links to it (should redirects be set up)?What is the SEO impact of deletion | Offline process checklist |
Core principle: Unpublishing is a "difficult but important" decision — removing outdated content directs user attention to the newest, most relevant information.Why: Lack of strategy lets information spiral out of control, harming both users and employees.
2. Content Strategy vs UX Writing vs Content Design: Who does what
These three roles are easily confused; distinguish them in one sentence:Content strategy manages "processes and standards", UX writing handles "writing clear words", and content design is responsible for "organizing, laying out, and presenting content so it is easy to read and find".
| Role | What they do | Focus |
|---|---|---|
| Content Strategist | Develops plans, processes, and standards; conducts content inventories/audits, creates editorial calendars, structures content (scalable, reusable content systems); oversees cross-platform publishing and backend management | Content quality + production efficiency (making writers more effective) |
| UX Writer | Writes clear, concise copy: UI copy (buttons/navigation/error messages), microcopy (headlines/summaries/metadata), long-form content (articles/videos/podcast scripts) | Clarity + concision + consistency + collaboration with design |
| Content Designer | Combines writing + design: information architecture, wireframes/prototypes, structuring and formatting (headings/subheadings/spacing/white space/bullet points/highlights) | Making content engaging, accessible, and easy to navigate |
Skills UX writers need: Correct grammar + attention to detail, familiarity with writing, understanding of user research/ideation, SEO skills, knowledge of how CMS (content management system) works.
Metrics for the two content types differ(Clarify whether content is marketing content or product content before selecting metrics):
| Content marketing metrics | Product content metrics |
|---|---|
| Traffic | Usage |
| Social media follows / reactions | Task time |
| Engagement | Task success rate |
| Conversion | Satisfaction |
| Retention / churn | —— |
Content Strategy vs UX Writing: 9-dimension division of responsibilities(For the same task, each side owns half):
| Dimension | Content Strategy | UX Writing |
|---|---|---|
| Processes and tools | Sets up and adjusts | Follows and influences changes to them |
| Research | Supports and facilitates user/stakeholder research | Creates test copy variants, collaborates with designers |
| Goals and metrics | Communicates goals, tracks and reports progress | Creates copy to meet goals, iterates based on feedback |
| Technical systems | Understands and communicates CMS capabilities | Leverages technical features in writing |
| Standards and guidelines | Oversees maintenance of style guides and content standards | Uses and complies with standards, contributes updates |
| Writing tools | Explores and implements new tools to improve quality and efficiency | Uses tools, provides improvement feedback |
| Review and editing | Sets review cycles and approval roles | Conducts reviews, advocates for user-centricity |
| Publishing and maintenance | Prepares for publishing, trains publishers, coordinates audits | Writes metadata for SEO, conducts final reviews |
| Content retirement | Defines retirement processes | Assists with redirects/reuse/archiving/merging |
Core principle: A growing number of organizations invest in two separate roles rather than combining them into one — because the workload and complexity of each are too great.Three pillars of collaboration: Shared understanding of user needs (both rely on research), consistent standards (jointly defined and maintained), feedback loops (both use feedback to improve).
3. Content Inventory vs Content Audit: Take stock first, then assess quality
These are two different things:
- Content Inventory: Lists all current: Lists all current digital content, recorded at the page/resource level (name, URL, author, topic, format, creation/update date, metadata). It only tells you "how much there is and where it is",it does not assess quality.
- Content Audit: Assesses the quality of content in the inventory, flagging items that need updating, content gaps, and items to delete.
Recommended order: Inventory first, then audit— See the full picture first, so you understand the impact scope of each decision and can act quickly.
When to start: At any stage — when launching a new project to assess existing content, or during ongoing work to reduce duplication and information overload.
How to implement (people/process/tools):
| Dimension | Practice |
|---|---|
| People | Assign owners for the inventory and audit to ensure information transparency and regular updates |
| Process | "Take small steps" — prioritize content most used by users/the business, divide work and collaborate to progress gradually |
| Tools | Use familiar spreadsheets (Google Sheets / Excel) for recording and collaboration; store on platforms such as SharePoint for permission management + backup; minimize tool learning costs as much as possible |
Three categories of audit criteria: ① Industry standards (plain language, clear headings, appropriate formatting, no autoplay videos); ② Organizational standards (tone, metadata, formatting specifications); ③ Goals and performance metrics (click volume, bounce rate, user need satisfaction).
Handling decisions: After the audit, label each piece of content as Keep / Update / Delete. For items needing updates, record improvement items + assign an owner; notify relevant parties for major changes.Priority order for improvements: First address content that "violates industry best practices + organizational standards" (easy to judge), then address content tied to user needs and business metrics (requires discussion).
Core principle: Inventory + audit is a framework for evaluating content,prioritize quality over quantity. Why: CMS can partially auto-update inventories, but audits still require human work — share maintenance duties, conduct regular checks, and avoid inventory obsolescence.
4. Content Standards: Embed "how to write" into the design system
Content standards = Guidelines for scalable content design/management, comprising two types:Structural rules(for cross-channel reuse) + Editorial processes(for consistent process, tone, and style). Design systems typically only cover UI components, but content standards are equally critical for high-quality content.
Essential difference from UI components: UI components can be directly copied and pasted; content standards cannot— they must ensure every piece of content is "unique yet coherent". Therefore content standards are "guidelines + examples", not "fill-in-the-blank templates".
Content standards should include two categories:
| Content strategy and process standards | Format selection criteria and format-specific considerations |
|---|---|
| Content goals and principles (often expressed via a content strategy statement) | Content creation and design standards |
| Team members, roles, responsibilities | Inclusivity and accessibility standards |
| Workflow (including review and approval) | Readability statistics and level Readability |
| Content operation details (manuals/AI tools/CMS/Figma plugins) | Global best practices for web writing |
| Publishing, SEO, maintenance, and removal procedures | Organizational standards and editorial guidelines for style/tone/voice/grammar |
Setup steps: ① Define scope and priorities (start small, begin with areas critical to the organization or proven problematic by research); ② Collaborate and promote (clearly explain the benefits of "consistency + efficiency" to the design system team); ③ Get familiar with tools; ④ Define structure (distinguish between global standards that apply to all content vs specific standards targeted at individual components/channels/types—global standards avoid repetition, only differences need to be described); ⑤ Content audit (identify inconsistencies, collect positive and negative examples).
Industry benchmark cases: Intuit(contentdesign.intuit.com, comprehensive enough to have an independent website), GOV.UK (styleguide.mailchimp.com, includes writing goals and principles), Australian Government Style Manual (stylemanual.gov.au), Adobe Spectrum (each UI pattern comes with a writing checklist, e.g., help/error text for password fields), Salesforce Lightning (do/don't examples for chatbots), Shopify Polaris (places design and content standards together), Sainsbury's (global + specific), Atlassian (self-service help area), Optum (includes usage of AI platform Writer.ai), DBS Bank (standards are placed directly on the intranet for publisher convenience).
New role in the AI era: Many AI tools allow direct configuration of standards—only with content standards can teams ensure consistent, compliant output when using AI across platforms (Intuit strictly prohibits direct copy-pasting of generated content).
Core principle: Content standards are the bridge between "strategic planning" and "consistent, efficient execution".Why/Value measurement: Track time savings + organizational metrics (team satisfaction↑, project delays↓, late content requests↓, standard adoption↑, instances of ignoring standards↓) + user metrics (satisfaction↑, engagement↑, error rates↓, conversion rates↑). Maintenance:Typically reviewed once per year, with specific sections reviewed more frequently.
V. 3 Intranet Content Management Models: Centralized / Distributed / Hybrid
Intranet (enterprise internal system) content is often contributed across departments (HR, internal communications, various departments), so a management model must be chosen to define "who creates, publishes, updates, and when content is taken down".
| Model | Description | Advantages | Disadvantages |
|---|---|---|---|
| Centralized | A core team manages all publishing, other teams submit approval requests | Controllable quality, simple training (only the core team needs training), good global perspective for optimizing categorization | Low efficiency (slow approval), workload concentrated on the core team |
| Distributed | Publishing rights are delegated to individual departments/teams | High participation (strong autonomy), fast response (suitable for fast-changing environments) | High training demand (many administrators need training), inconsistent content, lack of review leading to low quality/redundancy |
| Hybrid | Core team manages critical content (homepage/navigation), other content is managed by individual departments | Balances control and freedom, moderate training and review workload | Still requires some training, needs moderate review of secondary content |
General recommendations: ① Regardless of the model, there must be a dedicated team for global planning and goal monitoring; ② Training should not only teach CMS usage, but also how to write high-quality content + correctly use design components; ③ Widely communicate management standards and clearly explain their importance.
VI. Don't Forget Content in Agile Development: 5 Types of Content User Stories
In Agile, User Stories are used to track work, but the time for content creation/maintenance/optimization is often severely underestimated. Add the following 5 types of "content-focused user stories" to the backlog to prevent content from being overlooked, rushed, or skipped.
| User story type | Purpose | Example |
|---|---|---|
| Content Spikes | Reserve research time for future backlog items (user research + data analysis summary) | "As a content creator, I want to understand common questions first-time homebuyers have about mortgages, so that I can answer them accurately" |
| Content Creation Tasks | Independent creation stories, focused on needs identified by research, accurately reflecting required time | "As a first-time homebuyer, I want to understand the mortgage application process, so that I can reduce my fear of buying a home" |
| Content Review | Review with marketing/legal/design/development, reserve revision time, check writing style/tone/accessibility | "As a content creator, I want to review content with operations/marketing/compliance to ensure it is accurate and on-brand" |
| Publication & Management | Document time for preparation/publishing/review/takedown | "As a content manager, I want to write high-quality metadata so that content appears on search result pages" |
| Ongoing Testing & Optimization | Gather feedback through real user testing after launch, iterate continuously | "As a content creator, I want to understand when and how first-time homebuyers communicate with the bank, so that I can add supporting copy" |
Core principle: High-quality content starts with user research + reasonable story planning.Why/Counterexample: Without proper planning and time estimation, content will be overlooked, compressed, or skipped.
VII. Information Architecture IA vs Sitemap: Don't Mistake a Part for the Whole
These two are often treated as synonyms, but in fact a sitemap is only one part of information architecture(one deliverable), and cannot represent the entire IA.
- Sitemap: A visual diagram of how website content is organized—box nodes represent pages, arrows/lines represent relationships (the NNGroup case uses blue/green/yellow to distinguish levels 1/2/3). It is mainly used for internal planning, and usually not shown to users (some sites place it in the footer as auxiliary navigation, but its importance has diminished with the emergence of more advanced navigation).
- Information Architecture (IA): The methods and processes for organizing website content, including two aspects—① Content organization and maintenance (how to organize, establish relationships, and display in navigation); ② Structure and naming (website structure, organization methods, naming of navigation elements). The goal = to let users easily find/discover content.IA is an ongoing process, not a single deliverable.
IA includes multiple activities and deliverables(a sitemap is only one of them):
| IA activity | What it is | Potential deliverables |
|---|---|---|
| Content inventory | Identify and categorize all digital content (often done at the start of a redesign) | Directory / spreadsheet |
| Content audit | Assess usefulness, decide to keep/delete/update | Spreadsheet with decision columns |
| Taxonomy development | Establish a Controlled Vocabulary to describe and categorize content | Hierarchical structure (general at the top, specific below) |
| IA user research | Card sorting, tree testing, usability testing, to understand findability/discoverability | Research report |
| Plan website structure | Map content organization and hierarchy | Sitemap |
Four differences (memorize them and you won't mix them up):
| Dimension | IA | Sitemap |
|---|---|---|
| Sequence | IA comes first (defines the overall structure); the sitemap | Comes later (drawn to represent IA after IA is established) |
| Level of abstraction | IA: Abstract (conceptual organization of content) | Sitemap: Concrete (shareable visual diagram) |
| Comprehensiveness | IA: Comprehensive (includes naming, navigation UI components such as search box placement/breadcrumbs) | Sitemap: Not comprehensive (intentionally only includes what stakeholders need to know, to avoid information overload) |
| Stability | IA: Both evolve with design/user research; but certain aspects of IA (such as taxonomy controlled vocabularies) are predetermined and designed to remain unchanged long-term | Sitemap: Also evolves |
VIII. How People Read Online: Scanning Is the Default, 5 Classic Patterns + New Patterns
The most critical fact: Users online rarely read word-for-word; the vast majority scan to quickly find key information. This is the conclusion drawn from NNGroup's13 years of research, 500+ participants, and cumulative 750 hours of eye-tracking data. Basic information processing habits have remained stable, but new layouts have spawned new reading patterns.
How eye-tracking research is done: Use Eyetracking to record eye movements. Quantitative (Heatmap + metrics such as average fixation points to observe trends) + qualitative (observe individual gaze trajectories to see specific behaviors).
4 factors that influence "scan vs read carefully": ① Motivation (how important the information is); ② Task type (finding specific information / browsing new content / in-depth research); ③ Focus level (current attention); ④ Personality (scanning-prone vs careful-reading-prone).
5 classic scanning patterns(different tasks, layouts, and content types trigger different patterns):
| Pattern | Characteristics | When it occurs | Efficiency | Example |
|---|---|---|---|---|
| F-Pattern | Gaze concentrates at the top + left side of the page, forming an F shape (RTL languages such as Arabic show a reversed F) | When subheadings/bullet points/visual cues are missing | Lowest, easy to miss information | Checking Sumatran tiger population on TigersinCrisis; Investopedia; long page on Beijing WDZJ.com abandoned after reading only 1/5 |
| Spotted | Only fixates on prominent words (bold, links, numbers) | When obvious visual elements are present (bulleted lists/bold keywords) | Higher than F-pattern, but depends on design quality | Looking up Baryshnikov on Wikipedia (F on left, spotted on right), the number 1960 caught attention; South America hiking bulleted list scanned 8 times |
| Layer-Cake | First scans headings/subheadings, only reads body text when finding something of interest, path resembles horizontal stripes of a layer cake | Clear structure, distinct hierarchy between headings and body text | High, fast positioning | Looking up winter maintenance for marine engines on Yamaha, located via bold light-blue subheadings contrasting with black body text |
| Commitment | Reads all or most content word-for-word | When highly interested or required by task (studying exam content, performing specific operations) | Strongest comprehension but slowest | National Geographic users told they would be tested so read word-for-word; Guardian articles of interest |
| Lawn Mower | Scans comparison tables: starts at top left, moves left to right, moves down, moves right to left, repeats (like a lawn mower) | Tables comparing multiple products/services | Reduces ineffective eye movements, efficient | See next section |
New patterns spawned by new layouts:
- Lawn Mower pattern(covered specifically in the next section)—scanning in "image-text" order on Apple Watch product pages.
- Pinball pattern—non-linear jumping on search engine results pages (SERP), especially between images and featured content.Example: Searching for "Botox price", gaze jumped 158 times within 14 seconds, highly scattered.
- New content elements interrupt reading: Comparison tables, embedded ads, user-generated content (comments).Example: Science Magazine users originally read nearly linearly and completely,attention dropped sharply after encountering embedded ads, shifting to light scanning.
4 guiding principles to support scanning: Organize content with clear headings and subheadings, front-load information (important content easy to find), formatting techniques (bold/bullet points), concise language to reduce reading burden.
IX. Lawn Mower Pattern: How to Design Comparison Tables Without Disrupting Scanning
The Lawn Mower pattern is specifically used for scanning comparison tables—gaze starts at the top-left cell, moves row by row in a zigzag (left→right, move down, right→left, move down). Before entering this pattern, users usually quickly assess the table layout(look at column headers, row labels, some content) to decide how to read.Example: Viewing the Sonos One speaker comparison table on CNET, first scanned the full table in lawn mower pattern, then only fixated on the three columns for Sonos One/Apple HomePod/Amazon Echo.
Exceptions: When focusing on only one feature (such as price), users only scan relevant rows; when comparing two non-adjacent products, the pattern adjusts.
Poor design disrupts the lawn mower pattern (counterexamples):
- IGN table: Table too long (forgets column header positions→exits pattern and returns to top to confirm, cognitive load↑), unclear terminology ("4K"/"Native 4K"/"8K support" makes users jump back and forth between two columns), too much placeholder content ("TBA" to be announced occupies multiple cells→skips some rows and eventually abandons).
- Apple Watch table: Well-organized but with much repetitive information (identical content across multiple columns for many features wastes time), vague descriptions ("improved gyroscope" does not state what was improved). Even so, users still considered comparison tables an efficient tool.
- CNET table: Cells without row labels are almost meaningless→users frequently exit scanning mode to re-read labels repeatedly.
7 design recommendations to support the lawn mower pattern:
| Recommendation | How to implement | Benchmark |
|---|---|---|
| 1 Fix table headers | Headers stay visible during scrolling, eliminating the need to return to the top to check | Dropbox / Xbox |
| 2 Provide column hiding | Allow users to hide other columns when they only want to view some columns | —— |
| 3 Make cell content self-contained | Reduce reliance on row labels | Apple's row-label-free design (compared to CNET's label-dependent design) |
| 4 Group "yes/no" features | Group √/× style features together for quick scanning | Dropbox groups checkmark rows together |
| 5 Merge duplicate content | Use cross-column cells for features shared across multiple products to avoid repetition | Xbox (identical features for Series X/S span two columns; however, excessive white space leads to overly low information density, a side effect of mobile-first design) |
| 6 Provide term definitions | Add Tooltips to explain complex concepts | Dropbox adds a hover tooltip for "Smart Sync Auto-Evict" |
| 7 Avoid ineffective placeholders | Do not place "TBA"; if absolutely necessary, group them all at the bottom of the table | —— |
10. Love-at-First-Sight Pattern: Looking at only one result on the search results page
Love-at-First-Sight Pattern: On the search engine results page (SERP), users focus on only one result and are satisfied, ignoring the rest. This is "satisficing" behavior — users seek a "good enough" answer, not the most comprehensive one. It was first documented in 2005 (Kara Pernice, *How People Read on the Web*).
Data: Out of 377 search instances, in 20% of cases users focused on only one result— an increase from 17% in 2006, statistically significant p < 0.001.
4 contributing factors:
| Factor | Explanation | Example |
|---|---|---|
| 1 Trust in search engines | Belief that the engine ranks the most relevant results first | Beijing user: "I usually pick the top two results on Baidu; they should be the most popular or highest rated" |
| 2 Result attractiveness | Prominent designs such as Featured Snippets guide attention | A US user found the required document checklist for the US-Canada border via a Google Featured Snippet without looking at other results; a Beijing user selected a table result containing professional information and scores |
| 3 Low motivation / time pressure | Tendency to accept "good enough" | Counterexample: A user answered incorrectly after reading a Featured Snippet (mistaking the median income of Raleigh for that of the entire US) and had no motivation to question it |
| 4 The first result exactly meets the need | If the first result fully matches, select it directly | Searching for "Bankofamerica.com" and only looking at the first official website result; searching for "2019 best stroller reddit" and clicking the Reddit post directly |
Love-at-First-Sight vs Good Abandonment: Love-at-First-Sight is a gaze pattern(looking at only one result); Good Abandonment is an overall behavior(finding a satisfactory answer on the SERP and being satisfied without clicking or modifying the query). The two can occur simultaneously, but not necessarily — Good Abandonment can also happen after browsing multiple results.
Strategies to make content "selected at first glance": ① Understand user needs and answer questions precisely (increase the chance of being selected as a Featured Snippet); ② Use intuitive designs such as tables/lists and front-load key information; ③ Provide high-quality content (even if not in first position, it can still attract users in research tasks).
11. Inverted Pyramid: Put the conclusion at the very front
Inverted Pyramid: Present the most important information (core facts/conclusions) first, then supplement with secondary details and background. The shape resembles an inverted triangle — the wide top = key content, the narrow bottom = supplementary details.Contrary to academic writing(which gives the conclusion at the end), it is especially suitable for web pages because users can grasp the main point no matter how much they read.
5 advantages: Improves comprehension (build overall understanding before grasping details), lowers interaction cost (captures the main idea without reading much), encourages scrolling (a strong opening sparks interest), has clear logic (broad information lays the foundation at the opening, reducing the need for jump links), and supports scanning (stopping mid-way does not cause missing the key point).
How to write (5 steps): ① Identify the core message (the key point readers can understand even if they read only one sentence, which can independently convey the article's content); ② Arrange secondary information (rank by importance, place information for broad audiences near the front, and professional details near the back); ③ Use concise and forceful language (cut redundancy, use short paragraphs, bulleted lists); ④ Front-load important information (make the main title descriptive of the main idea, place the most important information in the first sentence of each paragraph, and use keywords at the start of each sentence to signal what follows); ⑤ Add a summary or bulleted key points (a summary paragraph before the main text, like the opening of this article).
12. Rewriting for Brevity: 7 methods to cut words
Core principle: Conciseness not only improves experience, but also increases the probability that an article will be read. But conciseness is not about blindly cutting — words that aid understanding should be kept.
| Method (EN) | How to cut | Original → Concise version |
|---|---|---|
| 1 Kill Your Darlings | Delete sentences you are emotionally attached to but that have no practical meaning | "Inclusion is the future of UX. In fact, inclusion is the future of our world. By following these guidelines..." → "By following these guidelines, your research can be more ethical and thorough." (If you struggle to cut, save them separately first) |
| 2 Remove Unnecessary Words | Delete meaningless filler words (it is / there are), excessive modifiers, and passive sentences | "It is important to involve stakeholders..." → "Involving stakeholders is important..."; "extremely valuable" → "valuable" (use absolutely/very sparingly) |
| 3 Avoid Redundancy | Delete repeated phrases and superfluous information | "ChatGPT, Google Bard, Bing Chat, and so on" → "ChatGPT, Google Bard, and Bing Chat" (delete and so on) |
| 4 Check Dependent Clauses | Delete introductory dependent clauses that add no information | "As we all know, UX designers must work with..." → "UX designers must work with..." |
| 5 Consider Your Audience and Purpose | Adjust according to the audience's knowledge level and project goals | "The field of UX, or user experience, has grown..." → "The field of UX has grown..." (video descriptions can be brief; blog posts need more detail) |
| 6 Cut Excess Information | Delete details the audience does not need; do not spend space on common knowledge | Same as above (explaining the UX acronym is redundant for people in the field) |
| 7 Rearrange | Adjust sentence structure to expose redundant words and optimize logical flow | Rearrange to make the logic of "unusable interactive prototypes will annoy stakeholders" smoother, and cut words along the way |
13. 5 layout techniques for long-form content: Make long content scannable
Core principle: Long-form content relies on layout chunking to support scanning — summaries, bolding/highlighting, bullet points, callouts, and visuals.
| Technique (EN) | Function | How to use / positive and negative examples |
|---|---|---|
| 1 Summaries | Provide a reading "roadmap", help judge relevance, and reinforce memory | Can be placed at the beginning(to judge relevance; GoodRx uses three key summaries), middle(to improve paragraph comprehension; Healthline includes a small summary after each section), end(to reinforce memory). Investopedia uses red boxes to distinguish summaries from the main text.Headings must be clear: Healthline calls its ending section "The Bottom Line", which is less clear than "Summary/Conclusion/Key Takeaways" |
| 2 Bold & Highlight | Emphasize key information and attract attention | Cover no more than 30% of the article; use only to convey key points, do not overuse or it will interfere with scanning. Medium lets users highlight resonant paragraphs and make them visible to others |
| 3 Bullet Points | Emphasize key information, group content, and clearly present options/relationships | Must be concise; for long content, bold keywords to optimize scanning.Counterexample: Bullet point paragraphs on the NBA website are too long; users cannot scan them quickly, forming a new "wall of text" |
| 4 Callouts | Highlight statistics/quotes/examples to enhance depth | Be concise and informative; use background color/borders to increase prominence. Robinhood uses a dark gray background to highlight examples |
| 5 Visuals | Informational graphics enhance comprehension; decorative graphics improve aesthetics but should not be overused | Prioritize informational visuals and reduce purely decorative ones. Positive example: Quanta Magazine uses charts to explain P vs NP.Counterexample comparison: A generic stock photo on the left side of Greenpop has no informational value and lengthens the page, vs an actual event photo on the right that provides context |
14. Microcopy: 3I goals + 3C writing approach
Microcopy = text shorter than 3 sentences; it is easier to scan quickly than long copy and is commonly used in UI.Key judgment: The type of microcopy is determined not by "where it appears", but by its "purpose".
3I — The three major goals of microcopy (multiple goals can apply simultaneously, but the primary goal must be clear when writing):
| Goal (EN) | What it does | Subtypes + examples |
|---|---|---|
| Inform | Explain, prompt, and guide to help users understand content/complete tasks (the most flexible and common) | Titles/subtitles (Investopedia's main title states that Roth IRAs are good for young people, and the subtitle summarizes the advantages), summaries/introductory paragraphs (Patagonia's "Beneath the Rock" is abstract, and the summary completes the topic), Tooltips (Google camera icon "Search by image"). Mailchimp security change notice: informs in advance to reduce anxiety and build trust |
| Influence | Promote product advantages, spark interest, drive conversion and sales | Taglines (evian "water the way nature intended"), CTAs (Barnes & Noble "GET READY for SCHOOL"), promotional banners (Amazon Prime Day "Devices up to 49% off", clear numbers + limited time + brand), Slack main title "Bring all your communication together in one platform" |
| Interact | Help users understand and operate interface elements (buttons/labels/forms) | Button/link/checkbox labels (start with verbs such as Add/Shop), category names (Sherwin-Williams "Paint & Tools"), placeholder text (American Airlines "City or airport"/"mm/dd/yyyy" — but do not use placeholders to replace field labels, as they disappear when typing), breadcrumbs (Pepco "Home > Ways to Save > Business > District of Columbia"), tab switches (Weather.com forecast views) |
Priority examples: See's Candies candy box size chart includes promotional language (no preservatives) but its primary goal is to inform (select suitable packaging); an Asana user testimonial is inside a card but its purpose is to drive conversion (click Read case study) → counts as Influence type; a PA Turnpike unpaid toll reminder explaining regulatory consequences → counts as Inform type.
3C — Three writing rules for informational microcopy (Clarity > Concision > Character):
| Principle (EN) | Core principle | Key points + examples |
|---|---|---|
| Clarity | First priority; if it cannot be understood, the task is not completed | 4 levers: Signposting (where am I), Information Scent (where to go next), Relevance (why this matters to me), Appropriate Terminology (use users' words, no jargon). Mastercard student card explains fraud liability protection/card locking; another card directly writes "0% introductory APR" — same credit card, different information for different users |
| Concision | Users are busy; they will not read long blocks of text, which are also prone to being truncated. | Cut unnecessary expressions, pay attention to length limits for titles and descriptions, and keep only the most critical information. Owala’s button "Out of stock - notify me" packs two pieces of information into one button in a logical order; WHO’s "Vaccination Information Hub" removes "the" — making it shorter, more readable, and displayed more completely on search results pages. |
| Character | Make copy feel human, but never sacrifice clarity and concision. | It does not have to be lively; the key is who your users are., match tone, memes, and style to the audience; there is no universal formula. Ace Hardware’s "Top Brands Under One Roof" is more memorable than "Popular Brands" without being overblown; OpenAI’s "Sora 2 is here" is more colloquial and human-sounding than "Sora launches today". |
15. Tone of Voice: 4 Dimensions to Shape Different Personalities
Definition of Tone of Voice: In literature, tone = the author’s attitude toward the subject; in UX,every sentence on a page (from body text to button labels) affects tone and determines how the brand "speaks".
4 Dimensions of Tone of Voice(combined to form an actionable Tone-of-Voice Profile):
- Funny ↔ Serious
- Formal ↔ Casual
- Respectful ↔ Irreverent (playfulness makes a brand distinctive, but never to the point of offending users)
- Enthusiastic ↔ Matter-of-fact
The same error message "An error has occurred" produces different effects when adjusted across the 4 dimensions:
| Dimension Combination | Example | Characteristics |
|---|---|---|
| Serious · Formal · Respectful · Matter-of-fact | "We apologize, but we are experiencing a problem." | Traditional, straightforward, no humor, no strong emotion |
| Serious · Casual · Respectful · Matter-of-fact | "We're sorry, but we're experiencing a problem on our end." | More relaxed, uses phrases like "we're/sorry" to feel approachable |
| Serious · Casual · Respectful · With some emotion | "Oops! We're sorry, but we're experiencing a problem on our end." | "Oops!" adds a touch of emotion |
| Funny · Casual · Irreverent · With some emotion | "What did you do!? You broke it!" | Humor + irreverence increase interactivity, but may irritate users |
How to Choose Tone of Voice: ① Based on brand personality; ② Based on users and context (Counterexample: when users are frustrated or encountering errors repeatedly, a humorous tone will annoy them); ③ Validate with user testing.Core principle: Tone can strengthen affinity, but it can also ruin the experience — choose based on brand + users + context, and test it.
16. Content Testing + Eye-tracking: Verify That Users Truly Understand and Can Find Content
16.1 How to Test Content with Users
Content testing differs from traditional usability testing — it needs to be more flexible, because the goal is to evaluate "content quality and relevance" rather than "completing fixed tasks".
Core Practices:
- Learn the product and content thoroughly: Become fully familiar before testing so you can ask the right questions (know the target users, core messages, and content needs clearly).
- Follow up with open-ended questions(encourage detailed feedback rather than yes/no answers):
| Follow-up Question | Goal |
|---|---|
| What do you think of this information? If you could change it, what would you change? What parts are easy to understand, what parts are hard, and why? | Get users to share content problems they notice |
| What does "[X term]" mean to you? | Judge whether technical jargon is understood |
| If you had to explain this information to a child, how would you say it? | Assess whether true understanding is achieved |
| Can you summarize this in your own words? | Easy, accurate summarization = understood; needing to look back at the original repeatedly and recite word for word = not truly understood |
| If someone said these words to you, who do you think that person would be? What would their job be? | Subtly guide users to describe the tone of the content |
- Key Taboos: When talking to participants,avoid using the word "content"— users do not think about information that way.
- Use individual tasks, do not run group discussions(to avoid group influence on individual feedback);Customize tasks(prepare a base of general tasks, adjust flexibly per participant, and allow independent exploration).
- Use open-ended information-finding tasks(open-ended): no clear answer, no clear end point; tell users to complete at their own pace, just like searching in daily life.Counterexample vs Positive Example: When testing Investopedia’s "Smart Strategies for Coping with a Bear Market", you should not simply ask people to read it and give feedback; instead, provide a scenario — "The stock market has fallen recently and may keep falling, you want investment advice for a market downturn, see if Investopedia has that".
- Consider competitive testing: Let users search freely or visit competitor websites; this can yield valuable insights into user needs (limit this to a small portion of test time).
- Select the right participants: Match target user characteristics; for professional content, recruit people with relevant knowledge and experience.Case: When testing the National Cancer Institute’s article on adult non-Hodgkin lymphoma, recruit people who have been diagnosed or their primary caregivers.
16.2 Eyetracking Study Setup
Eye trackers use special light to create reflections in the eyes; a camera captures these reflections to estimate eyeball position and movement, which is projected onto the UI to visualize gaze locations.
Three Types of Visualization Outputs:
| Output | Type | What It Is | Number of Participants Needed |
|---|---|---|---|
| Gazeplots | Qualitative | Individual gaze points + duration (bubble size ∝ gaze duration) | 8–12 people |
| Gaze Replays | Qualitative | Video showing how participants browsed | Lightweight tools are sufficient (USB eye trackers / eye-tracking glasses, but these may not produce precise gazeplots/heatmaps) |
| Heatmaps | Quantitative | Aggregated gaze data from multiple people on the same task (red = longest, yellow and green = shorter) | At least 39 people performing the same task |
Example Study Findings: Banner Blindness (ignoring elements that look like ads), uncertainty in flat UI design (minimalist style lacking strong cues increases difficulty), gaze patterns (F-pattern, layer-cake pattern).
Key Details:
- Calibration: Each person needs individual calibration due to differences in eyes and face; after calibration, the participant must stay relatively still, otherwise tracking will be lost.
- Materials Checklist(2019 desktop study): Tobii Spectrum eye tracker (with built-in monitor), high-performance PC, large monitor (for facilitator/observer use), two sets of keyboard and mouse, external speaker and microphone, printed task instructions/scripts/consent forms, external hard drive for backup, two adjacent tables, fixed chair (for participant, to prevent movement that breaks calibration) + wheeled chair (for facilitator), cash incentive envelopes.
- Layout: Rented a WeWork 4-person office space (to fit participant + researcher + 1–2 observers); the facilitator’s monitor displays real-time gaze data (red dots and red lines), needs high resolution and must be positioned at an offset so the participant cannot see it; give task instructions verbally or in software as much as possible, to avoid looking down at paper which breaks calibration.
- 2006 vs 2019: The layout has changed little in 13 years, but technology has advanced significantly — miniaturized cameras have improved calibration accuracy and better hidden the tracking mechanism.
- Method Selection: Lightweight tools → gaze replays + qualitative insights; desktop setup → gazeplots (8–12 people); quantitative → heatmaps (≥39 people).Always run a pilot for 1–2 days first to troubleshoot technical issues and build in buffer time.
Sourced from NNGroup Topics / Content Strategy - Content Strategy (20 articles). For information architecture IA/card sorting/tree testing, see NNGroup Information Architecture IA (Three IA Models · IA vs Sitemaps · Flat vs Deep Hierarchy · Full Taxonomy Process · Left-side Vertical Navigation · 5 Major Pitfalls of Privacy Policy Pages); for persuasive design and behavioral science behind CTA/influential copy, see NNGroup Persuasive Design and Behavioral Psychology (Six Principles of Persuasion · Cognitive Biases · Attention Limits · Information Foraging and Wayfinding · Mental Models · Trust Hierarchy · Self-Determination Motivation · Privacy and Ethical Boundaries · 26 articles); for usability testing methods (5-user rule/39 users for eye-tracking/task scenarios) and the ten heuristics, see NNGroup Usability Testing and the Ten Usability Heuristics (Full Table of 10 Heuristics · Complex Application Scenarios · User Pleasure Hierarchy · Testing Methods: 5-User Rule/Recruitment/Remote/Task Scenarios/Step-by-Step Tasks/Attitude vs Behavior/4-Step Analysis/Small-Sample Bias/Competitive Evaluation). Images/original files (including eye-tracking gazeplots, comparison table screenshots, Bose/IGN videos) are retained in sources.
Sources and Related Materials
- NNGroup Information Architecture IA (Three IA Models · IA vs Sitemaps · Flat vs Deep Hierarchy · Full Taxonomy Process · Left-side Vertical Navigation · 5 Major Pitfalls of Privacy Policy Pages)
- NNGroup Persuasive Design and Behavioral Psychology (Six Principles of Persuasion · Cognitive Biases · Attention Limits · Information Foraging and Wayfinding · Mental Models · Trust Hierarchy · Self-Determination Motivation · Privacy and Ethical Boundaries · 26 articles)
- NNGroup Usability Testing and the Ten Usability Heuristics (Full Table of 10 Heuristics · Complex Application Scenarios · User Pleasure Hierarchy · Testing Methods: 5-User Rule/Recruitment/Remote/Task Scenarios/Step-by-Step Tasks/Attitude vs Behavior/4-Step Analysis/Small-Sample Bias/Competitive Evaluation)