# We design for people and machines Topic: [Machine-readable website](https://btlabs.dev/en/ai-website) > A website has two readers today: people and AI. What design has to deliver for both, where the two worlds complement each other — and where they clash. When I used to present a design, there was one question at the end: does it work? Do people find their way around, do they understand in a second what it is about, does it build trust? Today I ask two questions. The second is: does a machine understand it too? For me, that is the biggest change I have seen in twenty years of web design. A website is no longer designed only for the person in front of the browser, but also for the search engines, AI assistants and agents that read it, summarize it and pass it on. There are two terms for this, and they overlap a lot: [AEO](https://btlabs.dev/en/glossary/aeo-answer-engine-optimization) aims at the direct answer — the answer box, the voice assistant, the AI overview in search. [GEO](https://btlabs.dev/en/glossary/geo-generative-engine-optimization) is broader and is about being drawn on as a citable source in generated answers. To me, web design for humans and machines means designing a business's digital identity for both readers. ## For people: trust in a second. For a person, a website has to build trust at first glance, provide orientation and work without having to think about it. That has not changed, and it is still half of my job. - **Hierarchy and legibility.** I work with clear typography, strong contrast and plenty of white space, because they guide the eye through the page. On the web, people skim rather than read: back in 1997 the Nielsen Norman Group showed that 79 percent of test users scanned a new page instead of reading it word by word. - **Brand and feeling.** Colors, imagery and tone decide whether someone feels addressed. An AI understands your text. But a person still does the buying, and that person decides on trust and on the brand. - **Speed and accessibility.** Short load times, calm animations and touch targets large enough for a phone are not optional for me. Neither is [accessible code](https://btlabs.dev/en/glossary/web-accessibility), so that everyone can actually use the site. In btlabs Core we built in a skip link, a visible focus indicator and the option to switch off motion, and an automated test checks the pages every day. That is not a promise of conformance — but it is a foundation you can reach it on. ## For machines: structure, meaning, context. An AI sees neither layout nor mood. It reads code, structure and data, and it pulls individual passages out of a page instead of looking at it as a whole. Today I dedicate a second part of every design to that. - **Finished HTML, not assembly instructions.** Many pages only come together in the browser, assembled by JavaScript. For a person that makes no difference; for many machines it does: a 2024 analysis by Vercel and MERJ found that the crawlers of OpenAI, Anthropic and Perplexity do not execute JavaScript — unlike Google's. That is why we deliver every page fully rendered from the server: what a machine fetches is the complete content. - **Semantic HTML.** I consistently use the right elements: header, main content, article, navigation, headings in a clean order. They tell a machine immediately what the core content is, what navigation is and what a quote is. A heading that only looks big but technically is not one does not exist for it. - **A second, invisible layer.** Next to the visible design I set up [structured data](https://btlabs.dev/en/glossary/structured-data) following Schema.org, as JSON-LD and kept separate from the visible code, the way Google recommends. On top of that come text formats such as [llms.txt](https://btlabs.dev/en/glossary/llms-txt). It is still not an adopted standard but an industry proposal, and we counted ourselves who actually fetches it: over roughly three months up to September 2026, exactly two providers could be verified on our site, Googlebot and GPTBot. It does have a practical lever, though, because Google's checking tool Lighthouse now scores it — why a bad file is then worse than none is the subject of [A bad llms.txt is worse than none at all](https://btlabs.dev/en/posts/check-llms-txt-bad-file). - **Design you can query.** I even make colors and fonts machine-readable, as [design tokens](https://btlabs.dev/en/glossary/design-tokens) with a name and a value. How we noticed that this was missing on our own site is in [Why an AI cannot represent your brand](https://btlabs.dev/en/posts/machine-readable-brand-design-tokens). - **Unambiguous facts.** Meaningful URLs, clean metadata and precise descriptions of your business and services turn your company into a [clear entity](https://btlabs.dev/en/glossary/knowledge-graph-digital-entity). That won't prevent every wrong answer from an AI, but it lowers the risk that it connects facts incorrectly. ## Where both worlds want the same thing. The good news: what helps a person often helps the machine as well. - **Clear structure.** A page with meaningful headings and short lists helps the person who skims and the AI that cuts out passages. How big the difference can be shows up in an analysis of AI citations: focused, granular pages were cited 2.3 times more often than broad catch-all pages. I broke down the numbers behind it in [2.3× more AI citations from granular structure](https://btlabs.dev/en/posts/granular-structure-more-ai-citations). - **Reducing to the essentials.** If you design to the point, you deliver content without visual noise. For people that makes the decision easier, for machines the classification. ## Where they contradict each other. Not everything that looks good to a person reaches the machine. These are the places where I design differently today than I did five years ago: 1. **No important text inside images.** Opening hours on a graphic, an offer in a banner, a quote as a picture: readable for a person, empty for a machine. 2. **Headings that make a statement.** "Our services" tells an AI nothing. "Boiler servicing in Bolzano within 48 hours" is a statement it can quote. 3. **Icons with words.** A phone receiver without a label is clear to people, but to machines and screen readers it is an empty sign. 4. **Alt texts that describe.** "Image1.jpg" or "Team photo" wastes the one place where an image talks to machines. If you want to look at the topic from the visibility side — which two channels a website has to serve in the first place — you'll find that in [Dual-channel visibility](https://btlabs.dev/en/posts/dual-channel-visibility). Here I was interested in the craft behind it. ## Two questions, one design. At the end of every design, both questions now carry the same weight for me: does it work? And does a machine understand it too? A design is only finished when I can answer yes to both — the visible interface and the machine-readable one belong to the same identity. If you want to know how your website does on both questions, [write to me](https://btlabs.dev/en/contact). --- Source: https://btlabs.dev/en/posts/we-design-for-people-and-machines Last-Modified: 2026-09-25T15:01:52.949Z Languages: [de](https://btlabs.dev/llms/de/posts/wir-designen-fuer-mensch-und-maschine) · [it](https://btlabs.dev/llms/it/posts/progettiamo-per-persone-e-macchine) See also: [llms.txt](https://btlabs.dev/llms.txt) · [ai.txt (Policy)](https://btlabs.dev/ai.txt) · [identity.json](https://btlabs.dev/identity.json)