Visitors decide in the first 10 seconds whether to stay on a page, and leaving is most likely in the first 30, according to Nielsen Norman Group's analysis of Microsoft Research data on more than 2 billion recorded page visits. Most B2B website design best practices follow from that one number: the page has to say what you sell, to whom, before the visitor has finished deciding.
This guide sets out 11 rules, the published evidence behind each, how to check your own site against it and what fixing it usually involves. Every rule cites research we opened and read; where the evidence is old or second-hand, we say so.
What counts as B2B website design best practices here
A best practice, in this guide, is a design rule with published evidence and a check you can run in an afternoon. Rules of taste ("use more white space") are left out. So are rules that only hold for one industry.
We covered nine of the commercial decisions, including pricing, gating and the main call to action, in B2B website design: the 9 decisions that decide whether it books demos. This page goes one level down, to the design rules a page has to follow once those decisions are made, and keeps the overlap to two short rules.
| # | Rule | Evidence | How to check it |
|---|---|---|---|
| 1 | Say what you sell in the first screen | NN/g, 10 to 20 second visits | 5-second test with 5 people |
| 2 | Write for scanning | NN/g, 20% of words read | Read only the headings aloud |
| 3 | Design for a buyer who has already shortlisted | 6sense, contact at 61% of journey | List the questions answered without a call |
| 4 | Visible navigation, labelled by topic | Covered in our decisions guide | Tree test on the top 5 tasks |
| 5 | Show the shape of the price | NN/g, price as top need | Find a number in 2 clicks from home |
| 6 | Real photos, not stock | NN/g eye-tracking, 2010 | Count stock images per template |
| 7 | Keep the hero still | NN/g carousel study, 2013 | Any auto-rotating panel fails |
| 8 | Labels outside form fields | NN/g, 7 failures of placeholders | Fill the form, tab only |
| 9 | A speed budget in field data | Deloitte 2020, web.dev thresholds | Core Web Vitals at the 75th percentile |
| 10 | Accessibility as a gate | WebAIM 2026, WCAG 2.2 | Scan plus keyboard-only run |
| 11 | Same content on mobile | Google mobile-first indexing | Compare mobile and desktop headings |
Source: Octo Agency, drawing on the research cited in each section
Rules 1 to 3: the message
Rule 1: say what you sell, to whom, in the first screen. Nielsen Norman Group's 2011 analysis of a Microsoft Research study of 205,873 pages found that users often leave within 10 to 20 seconds, and that a visitor who stays 30 seconds often stays two minutes or more. The headline and the line under it carry that weight. A headline like "The platform for modern teams" fails; "Contract review software for in-house legal teams" passes. The check is a five-second test: show the first screen to five people outside the company, hide it, and ask what the company sells and for whom.
Rule 2: write for people who scan. In a 2008 study of 45,237 page views, Nielsen Norman Group estimated that users read about 20% of the words on an average page of 593 words. The data is old and the sample was 25 users, but nothing published since suggests people read more. Practically, that means descriptive H2s, one idea per paragraph, the key number at the start of a sentence and bold labels where a reader skims. A useful check: read only the headings aloud. If they do not tell the story of the page, rewrite them before you touch the layout.
Rule 3: design for a buyer who has already shortlisted you. 6sense's 2025 Buyer Experience Report, as summarised by CustomerThink, found that buyers first contact sellers about 61% of the way through the buying process, down from 69% in earlier studies, and that buying groups filled four of five shortlist places on day one. Buyers bought from their top-ranked vendor 77% of the time. The site is therefore doing most of the selling before any conversation happens. Design for that: implementation detail, security answers, integration lists and comparison pages belong in the main navigation, not behind "Talk to sales". Our B2B website strategy guide covers how to map those questions to pages before design starts.
Rules 4 and 5: navigation and price
These two are covered in depth in the decisions guide linked above, so we keep them short here.
Rule 4: visible navigation, labelled by topic. Primary navigation on desktop should be visible, not hidden behind a menu icon, and labelled by what the buyer wants ("For finance teams", "Integrations") rather than by format ("Resources", "Media"). Check it with a tree test: give five people the five tasks your buyers come for and record where they click first.
Rule 5: show the shape of the price. Nielsen Norman Group's usability research names price as business buyers' top information need, and found participants left sites without prices for competitors' sites, where they often built their shortlists. A range, a starting price or two priced scenarios is enough. The check: from the home page, can a stranger find a number in two clicks?
Rules 6 to 8: the page itself
Rule 6: real photos, not stock. In Nielsen Norman Group's eye-tracking work, users ignored stock photos of generic people but looked at photos of real staff: on one site they spent about 10% more time on staff portraits than on the biographies, though the biographies took up 316% more space. The research dates from 2010 and the page was last reviewed in August 2026. For a B2B site, that means photos of the product, the team and real customers. Where you have none, a clear product screenshot beats a handshake.
Rule 7: keep the hero still. Nielsen Norman Group's 2013 carousel study describes a user who could not find a discount that was the largest element on the page, because it rotated away every five seconds and was visible only about 20% of the time. Moving panels also read as adverts and trigger banner blindness. One message in the hero, static, with any other offers further down the page. If a slider is unavoidable, it moves only when the user asks.
Rule 8: labels outside form fields. Nielsen Norman Group lists seven ways placeholder text fails when it replaces a label, from memory strain once the user starts typing to poor contrast and patchy screen-reader support. Keep a visible label above every field, put hints outside the field and show errors next to the field that caused them. Then fill your own demo form using only the keyboard. Our guide to the demo request page covers field count and what happens after the submit button.
| Fault | Why it costs | Fix |
|---|---|---|
| Stock team photo in the hero | Ignored in eye-tracking | Product screenshot or real team |
| Auto-rotating hero slider | Offer visible a fraction of the time | One static message |
| Placeholder-only form labels | Users forget the field once typing | Visible label above each field |
| Vague link text ("Learn more") | Gives no clue where it goes | Describe the destination |
| Light grey body text | Fails contrast checks | Meet WCAG AA contrast |
Source: Nielsen Norman Group studies cited above; WebAIM Million 2026
Rules 9 to 11: speed, access and mobile
Rule 9: a speed budget measured in field data. Google's thresholds for a good page are a Largest Contentful Paint of 2.5 seconds or less, Interaction to Next Paint of 200 milliseconds or less and Cumulative Layout Shift of 0.1 or less, all at the 75th percentile of real visits. The commercial case comes from a Google-commissioned Deloitte study from 2020: a 0.1 second faster mobile site improved bounce rate on lead-generation information pages by 8.3%. The study gave no conversion figure for lead generation, and it was paid for by the company that sells the speed tools, so treat it as directional. The check is your Search Console Core Web Vitals report, not a single lab test. We explain how lab and field scores differ in Webflow page speed.
Rule 10: accessibility as a pass or fail gate. WebAIM's 2026 scan of the top million home pages found detectable WCAG failures on 95.9% of them, an average of 56.1 errors per page. The most common were low-contrast text (83.9% of pages), missing alt text (53.1%), missing form labels (51%), empty links (46.3%) and empty buttons (30.6%). Every one of those is a design or build decision. WCAG 2.2 adds a target-size rule at level AA: click targets at least 24 by 24 CSS pixels, or spaced so they do not overlap. Run an automated scan on every template, then complete the demo form with the keyboard alone.
Rule 11: the same content on mobile. Google indexes and ranks the mobile version of a page and says the mobile content should be equivalent to desktop. Accordions and tabs are fine; cutting sections, proof or headings on mobile is not, because what the mobile page lacks, Google does not see. Titles, meta descriptions and structured data should match too. Check by opening each template at 375 pixels wide and comparing its headings with the desktop version.
What it costs and how long it takes
Most of these rules cost little to apply to an existing site. The expensive ones are those that touch the build.
| Rules | Typical work | Who does it | Rough effort |
|---|---|---|---|
| 1 to 3, message | Rewrite headlines, add buyer-question pages | Marketing lead, copywriter | 1 to 3 weeks |
| 4 and 5, navigation and price | New menu labels, a pricing page | Marketing, sales, designer | 1 to 2 weeks |
| 6 to 8, page | Photos, static hero, form rebuild | Designer, developer | 1 to 2 weeks |
| 9, speed | Image, script and font work | Developer | 1 to 3 weeks |
| 10 and 11, access and mobile | Contrast, labels, targets, mobile parity | Designer, developer | 1 to 2 weeks |
Source: Octo Agency estimates; effort varies with site size and platform
These are our estimates, not published benchmarks. If the site fails five or more rules at the template level, a rebuild is often cheaper than patching, and our post on what a B2B website costs sets out the ranges. When we build a marketing site in Webflow, we run it as a four-week process, and we would apply all 11 rules as acceptance checks on every template rather than as fixes after launch. We quote per project.
The traps
Testing with colleagues. Anyone who knows the product passes the five-second test. Use people outside the company who match the buyer.
Fixing the home page only. Paid and organic visitors land on deep pages. Apply the rules to every template, starting with the pages that get the most entrances.
Trusting a lab score. A single Lighthouse run moves from test to test. Rule 9 is judged on field data at the 75th percentile.
Treating accessibility as a plug-in. Overlay widgets do not fix missing labels or low contrast. Those live in the design system.
Reading old research as precise. Several studies here date from 2008 to 2013. The direction has held up; the exact percentages are of their time.
What this means for your next 90 days
Days 1 to 30: measure. Run the five-second test on your three highest-entrance pages, a tree test on the navigation, an automated accessibility scan on every template and a check of the Core Web Vitals report. Score each page against the 11 rules in the table above.
Days 31 to 60: fix the message and the page. Rewrite headlines that fail rule 1, stop any rotating hero, replace stock photos, put labels outside form fields and add the buyer-question pages from rule 3.
Days 61 to 90: fix the build. Work through speed, contrast, target size and mobile parity, then rerun every check from the first month and compare.
If the gaps are in the templates rather than the copy, our marketing websites service page explains how we scope a build.
