AI agents no longer sit on the sidelines. In browsers like ChatGPT Atlas, they read pages, fill fields, and move flows forward with the user’s permission. That shifts the job of UX from only helping people to also supporting software that behaves like a person. If the interface is predictable and well-labelled, both will finish faster. If not, both will stall. OpenAI’s own notes on Atlas confirm that “agent mode” can research, automate tasks, and complete web actions during a session, which puts your form and checkout design directly in the spotlight.
What “agent-friendly” actually means
An agent parses structure first and prose second. It relies on explicit labels, consistent field names, and stable states. It prefers short, literal answers over decorative microcopy. For a form, that means real <label> elements connected to inputs and clear instructions near the control, not hidden in placeholders. WCAG 2.1 makes this expectation explicit: provide labels or instructions so users know what data to enter and what an option means. That guidance helps humans and machine agents equally.
Forms that machines and people can both complete
Use semantic labels, not visual guesses. Tie every input to a programmatic label, and keep helper text adjacent. Beyond being good manners, you’re meeting WCAG’s “Error Identification” requirement when you describe the error in text, not just colour or an icon. When the page updates an error dynamically, announce it via a live region so assistive tech (and well-behaved agents) can detect the change.
Adopt inline validation with care. Real-time hints reduce back-and-forth. Research from Baymard found that many sites still skip inline validation or implement it poorly, which adds avoidable friction. Trigger checks at sensible moments, clear the message once fixed, and use positive confirmation for valid input so the agent knows it can proceed.
Get serious about autocomplete. Modern autofill relies on standard tokens, not made-up names. Use MDN’s documented tokens for addresses, cards, and contact details (for example, name, email, address-line1, address-level2, postal-code, cc-number, cc-exp, cc-csc). These values are also defined in the HTML Living Standard, which clarifies ordering and behaviour. Correct tokens help a human’s browser and an agent populate fields without brittle CSS selectors or brittle heuristics.
Design error states the agent can parse. Pair visual cues with machine-readable signals: inline text near the field, a summary area at the top with anchor links to each error, and an aria-live="polite" container for updates. Don’t rotate field names or IDs in the name of bot “security”; you’ll break assistive tech and force agents to guess.
Keep masks and formats honest. If you mask card numbers or phone inputs, accept multiple formats and store normalised values server-side. Show the required format up front. Strict masking that rejects valid input patterns leads to loops for both users and agents.
Carts and checkout that finish cleanly
Offer native payments when possible. The Payment Request API streamlines the hand-off between site, browser, and stored wallets. It reduces keystrokes and avoids fragile field mapping during the most error-prone step. MDN’s guide and the W3C spec outline how to adopt it while keeping your existing processor.
Show totals and shipping clearly. Cart abandonment remains stubbornly high across the web, with long-running research placing the global average near 70 percent. Clear costs, predictable progress, and minimal surprises help. Avoid late-stage add-ons and keep the step count stable so both user and agent know exactly what’s left.
Make flows idempotent. Agents retry when the network blips. For actions like “apply coupon”, “create order”, or “submit address”, design endpoints to handle safe repeats without double-charges or duplicate accounts. Return machine-readable codes alongside friendly text so software can branch correctly.
Stabilise selectors and names. Use durable id and name attributes on controls and buttons. Avoid randomised attributes that change each page load. If you ship A/B tests, guard core attributes from experiment frameworks.
Give state a single source of truth. Keep cart quantities, discounts, and shipping options in one canonical spot and reflect them in the DOM in plain text. Hidden totals or values embedded only in client scripts are fragile for automation and accessibility alike.
Trust, safety, and the right level of friction
Agentic browsers bring a new risk: prompt injection through untrusted page content. Security analysts have flagged this class of issue across AI-assisted browsing and recommend that sensitive actions require explicit confirmation. Design your flows with checkpoints and summaries before irreversible steps, then make the accept button text exact and unambiguous.
Use smart, not blunt, defences. Keep CAPTCHAs off the happy path. Apply risk scoring and step-up checks on suspicious traffic only. For logged-in users, device binding and strong re-authentication during payments are smoother than blanket puzzles. If you implement Secure Payment Confirmation or similar strong customer authentication, keep messages clear and provide a fallback.
A compact implementation checklist
- Real
<label>tags on every control; helper text next to inputs. - Inline validation with descriptive messages and a live region for updates.
- Standards-based
autocompletetokens for names, addresses, and cards. - Idempotent endpoints and clear, machine-readable error codes.
- Stable IDs and names; no rotating attributes.
- Payment Request API where available; explicit totals and progress.
- Step-up verification on risk, not CAPTCHAs everywhere; explicit confirmations on high-impact actions.
Design for the person at the keyboard and the software helping them. When your forms speak in plain labels, your carts reflect honest totals, and your flows keep state steady, both audiences finish with less fuss.
Run a Generative Engine Optimisation Pilot on a High-Value Page
Pick one product or service page and turn it into an agent-friendly reference that still reads well for people.
- H1 and short-answer rewrite with query-matched headings
- Tables, captions and source links added where needed
- Tracking plan for assisted conversions
