<!DOCTYPE html>
<html lang="en" data-theme="auto" data-palette="default" data-material="solid" data-shape="rounded">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Write for the person on the other side. · Fieldnotes</title>
<script id="reva-settings-schema" type="application/json">{"kind":"demo","values":{"theme":["auto","light","dark"],"palette":["default","mono","sand","ocean","cobalt","citrus","violet","forest"],"material":["solid","glass","veil","soft"],"shape":["square","subtle","rounded","pill"],"motion":["none","subtle","expressive"],"edge":["plain","gradient","shine","animated"],"density":["compact","comfortable","spacious"],"depth":["flat","subtle","pronounced"],"fill":["gradient","solid"],"type":["compact","standard","large"],"size":["small","medium","large"],"border":["subtle","defined","none"],"width":["narrow","standard","wide"],"navbar":["standard","centered","floating","split"],"contrast":["auto","more"]}}</script>
<script id="reva-settings-runtime" src="/RevaCSS/settings.js?v=f9ab880ccb15b9eb488ca65ef2ad687a4870aa28">
</script>
<meta name="description" content="Clear language is a small act of consideration with a lasting effect.">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva-fonts.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.motion.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.selects.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.glass.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.veil.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.soft.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/demos/blog.css">
</head>
<body class="blog-site">
<a class="skip-link" href="#blog-title">Skip to content</a>
<header class="container">
<nav class="top-menu" aria-label="Fieldnotes journal" style="--re-menu-anchor: --fieldnotes-navigation">
<a class="menu-brand" href="https://eristavi.github.io/RevaCSS/demos/blog/source.html">fieldnotes.</a>
<ul class="menu-items menu-desktop">
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source.html">Journal</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/archive.html">Archive</a>
</li>
<li class="menu-dropdown" style="--re-menu-branch-anchor: --fieldnotes-desktop-categories-anchor">
<button type="button" class="menu-toggle" popovertarget="fieldnotes-desktop-categories">Categories</button>
<ul class="menu-panel" id="fieldnotes-desktop-categories" popover="auto">
<li class="menu-back">
<button type="button" class="menu-toggle" popovertarget="fieldnotes-desktop-categories" popovertargetaction="hide">Back to main menu</button>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/category/practice.html">Practice</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/category/design.html">Design</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/category/notes.html">Notes</a>
</li>
</ul>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/author/alex-morgan.html">Author</a>
</li>
</ul>
<button type="button" class="menu-toggle menu-collapse" popovertarget="fieldnotes-mobile-menu" aria-label="Menu">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
<ul class="menu-items menu-mobile" id="fieldnotes-mobile-menu" popover="auto">
<li class="menu-back">
<button type="button" class="menu-toggle" popovertarget="fieldnotes-mobile-menu" popovertargetaction="hide">Close menu</button>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source.html">Journal</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/archive.html">Archive</a>
</li>
<li class="menu-dropdown">
<button type="button" class="menu-toggle" popovertarget="fieldnotes-mobile-categories">Categories</button>
<ul class="menu-panel" id="fieldnotes-mobile-categories" popover="auto">
<li class="menu-back">
<button type="button" class="menu-toggle" popovertarget="fieldnotes-mobile-categories" popovertargetaction="hide">Back to main menu</button>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/category/practice.html">Practice</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/category/design.html">Design</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/category/notes.html">Notes</a>
</li>
</ul>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/author/alex-morgan.html">Author</a>
</li>
</ul>
<div class="menu-actions">
<a class="button outline" href="https://eristavi.github.io/RevaCSS/demos/blog/source.html#latest">Explore the journal</a>
</div>
</nav>
</header>
<main class="container" aria-label="Article">
<nav class="breadcrumbs" aria-label="Breadcrumb">
<ol>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source.html">Journal</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/category/practice.html">Practice</a>
</li>
<li>
<span aria-current="page">Write for the person on the other side.</span>
</li>
</ol>
</nav>
<article aria-labelledby="blog-title">
<header class="blog-intro">
<p class="blog-kicker">Practice / FIELDNOTES</p>
<h1 id="blog-title">Write for the person on the other side.</h1>
<p>Clear language is a small act of consideration with a lasting effect.</p>
<div class="row">
<span class="avatar" aria-hidden="true">AM</span>
<div>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/author/alex-morgan.html">Alex Morgan</a>
<p class="blog-meta">
<time datetime="2026-09-24">September 24, 2026</time> · 3 min read</p>
</div>
</div>
</header>
<figure>
<svg class="blog-cover" viewBox="0 0 640 400" aria-hidden="true" focusable="false">
<rect width="640" height="400" fill="var(--re-surface-alt)">
</rect>
<circle cx="165" cy="200" r="145" fill="var(--re-primary)" opacity=".18">
</circle>
<path d="M280 310V90h180v220z M330 310V150h180v160z" fill="var(--re-primary)" opacity=".45">
</path>
<path d="M65 325H575 M65 340H575" stroke="var(--re-text)" stroke-width="2" opacity=".22">
</path>
<circle cx="395" cy="210" r="65" fill="var(--re-surface)">
</circle>
<path d="M80 80h65 M80 80v65 M560 320h-65 M560 320v-65" fill="none" stroke="var(--re-primary)" stroke-width="3">
</path>
</svg>
<figcaption>An abstract study in space and balance.</figcaption>
</figure>
<div class="blog-reading">
<aside aria-labelledby="article-contents">
<nav>
<h2 id="article-contents">In this story</h2>
<ol>
<li>
<a href="#story-0">Lead with the useful information</a>
</li>
<li>
<a href="#story-1">Make the next step visible</a>
</li>
<li>
<a href="#story-2">Read it once more</a>
</li>
</ol>
</nav>
<p class="blog-meta">An independent perspective on everyday work.</p>
</aside>
<div>
<section aria-labelledby="story-0">
<h2 id="story-0">Lead with the useful information</h2>
<p>People usually arrive with a question or a task. Put the information that helps them act near the beginning. A clear opening gives the rest of the page a purpose.</p>
<p>Use the words your reader would use. Familiar language reduces the effort needed to understand an unfamiliar process.</p>
</section>
<section aria-labelledby="story-1">
<h2 id="story-1">Make the next step visible</h2>
<p>Explain what happens after an action. A good label can describe a destination, a result or a decision. It should help someone choose before they click.</p>
<p>When something needs attention, say what changed and what the person can do. Specific information is more useful than a general message that something went wrong.</p>
</section>
<section aria-labelledby="story-2">
<h2 id="story-2">Read it once more</h2>
<p>Read the page aloud and notice where the sentence asks you to hold too much information. Split that sentence or put its main point earlier.</p>
<p>A final read is an opportunity to remove friction. Keep the details that help the reader and give each one enough room to be understood.</p>
</section>
<blockquote>
<p>Give the important things a clear place, and enough room to be understood.</p>
</blockquote>
<footer class="card" id="article-author">
<div class="row">
<span class="avatar" aria-hidden="true">AM</span>
<div>
<h2>Written by Alex Morgan</h2>
<p>Alex writes about thoughtful design, useful technology and making room for better work. Fieldnotes is a fictional independent journal.</p>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/author/alex-morgan.html">All stories by Alex Morgan</a>
</div>
</div>
</footer>
</div>
</div>
</article>
<nav aria-label="Adjacent articles">
<div class="grid">
<a class="card stack" href="https://eristavi.github.io/RevaCSS/demos/blog/source/useful-defaults.html" rel="prev">
<small>Previous story · Newer</small>
<strong>The quiet value of useful defaults.</strong>
</a>
<a class="card stack" href="https://eristavi.github.io/RevaCSS/demos/blog/source/small-systems.html" rel="next">
<small>Next story · Older</small>
<strong>Small systems, lasting habits.</strong>
</a>
</div>
</nav>
<section aria-labelledby="related-heading">
<header class="row justify-between">
<h2 id="related-heading">Keep exploring.</h2>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source.html#latest">All stories</a>
</header>
<div class="grid">
<article class="card stack">
<p class="blog-kicker">
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/category/practice.html">Practice</a>
</p>
<h3>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/room-for-better-work.html">Make room for better work.</a>
</h3>
<p>A quieter workspace begins with a few deliberate choices. Start with what matters, then give it room to breathe.</p>
<p class="blog-meta">5 min read</p>
</article>
<article class="card stack">
<p class="blog-kicker">
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/category/design.html">Design</a>
</p>
<h3>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/useful-defaults.html">The quiet value of useful defaults.</a>
</h3>
<p>Good starting choices help people move forward with fewer decisions.</p>
<p class="blog-meta">3 min read</p>
</article>
<article class="card stack">
<p class="blog-kicker">
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/category/practice.html">Practice</a>
</p>
<h3>
<a href="https://eristavi.github.io/RevaCSS/demos/blog/source/small-systems.html">Small systems, lasting habits.</a>
</h3>
<p>A system earns its place by being useful on an ordinary Tuesday.</p>
<p class="blog-meta">3 min read</p>
</article>
</div>
</section>
</main>
<footer class="container">
<div class="row justify-between">
<p>
<strong>fieldnotes.</strong> · A fictional journal.</p>
<a href="#blog-title">Back to top</a>
</div>
<p class="blog-meta">Built with <a href="https://eristavi.github.io/RevaCSS/">RevaCSS</a> · Native HTML and CSS.</p>
</footer>
</body>
</html>