B2B-nettstedsdesign: beste praksis for innkjøpskomiteer

Godt design av B2B-nettsteder handler ikke om å se ut som en oppstartsbedrift eller en bank. Det handler om å la fem eller seks personer fra samme selskap, hver med sitt eget spørsmål, finne svaret uten å snakke med salg først. De fleste B2B-nettsteder er designet for én tenkt besøkende: en beslutningstaker som leser forsiden fra topp til bunn og klikker «Book en demo». Den personen finnes sjelden.

Denne guiden tar for seg design av B2B-nettsteder fra kjøperens side: hva hver side må gjøre, hvordan navigasjonen bør fungere når flere roller og bransjer besøker det samme nettstedet, hvordan du designer for besøkende du ikke kan identifisere, og hvordan du bygger sider med utskiftbare plasser slik at de kan tilpasses senere. Den avsluttes med et kommentert illustrerende eksempel og et redesign med før og etter som du kan kopiere.

Vårt standpunkt: Design for komiteen, ikke personaen

De fleste briefer for B2B-nettsteder starter med en persona og en moodboard for merkevaren. Vi mener det er feil utgangspunkt. Et B2B-kjøp gjøres av en innkjøpsgruppe, og medlemmene besøker nettstedet hver for seg, til ulike tider, med ulike oppgaver. Den økonomiske beslutningstakeren vil vite kostnaden og risikoen. Brukeren vil vite om produktet løser den daglige oppgaven. IT vil vite om sikkerhet og integrasjoner. Innkjøp vil ha vilkårene.

Kjøpere gjør også det meste av dette arbeidet alene. Gartner-forskning publisert i 2018 fant at potensielle kunder bruker bare rundt 17 prosent av kjøpstiden sin på møter med leverandører, og den tiden fordeles på alle leverandørene de vurderer. Resten er research, mye av det på leverandørenes nettsteder.

Så designspørsmålet er ikke «hva vil vår ideelle kunde se?». Det er «hvilket medlem av innkjøpskomiteen er på denne siden akkurat nå, og kan de få svaret sitt på under ett minutt?». Et nettsted som svarer godt på det, ser som regel enklere ut enn et prisbelønnet nettsted. Det konverterer bedre fordi ingen trenger å sende e-post til salg for å finne ut om du integreres med Salesforce.

Hva som skiller et B2B-nettsted fra et B2C-nettsted

Før veiledningen side for side er det nyttig å være tydelig på begrensningene. Dette er forskjellene som bør styre designbeslutningene:

Ingenting av dette betyr at B2B-nettsteder skal være tettpakket. Det betyr at hierarkiet må betjene flere personer. Vil du gå dypere inn i brukervennligheten, tar innlegget vårt om brukervennlige B2B-nettsteder for seg UX-mønstre, skjemaer og hastighet.

Beste praksis for design av B2B-nettsteder, side for side

Hver kjerneside har én jobb. Når en side prøver å gjøre tre jobber, gjør den ingen av dem godt.

Forsiden: rut videre, ikke selg

Forsiden på et B2B-nettsted er et sentralbord. En besøkende som kommer dit kjenner som regel navnet ditt (fra en anbefaling, en annonse, en G2-oppføring) og vil raskt bekrefte to ting: hva du gjør og om det passer for bedrifter som deres. Design den slik at den svarer på begge over bretten, og deretter ruter videre. Henvisninger fra partnere og affiliates lander ofte her også; guiden vår til affiliate-markedsføring for SaaS dekker hvor den trafikken heller bør gå. Galleriet vårt med eksempler på B2B-forsider viser hvordan 11 programvareselskaper løser denne rutingsoppgaven i dag.

• Overskrift: resultatet og kategorien i klartekst. «Lønnssystem for team i flere land» slår «Vi styrker fremtidens arbeidsliv».
• Undertittel: hvem det er for, etter selskapstype eller størrelse.
• Bevisstripe: gjenkjennelige kundelogoer eller ett konkret resultat, plassert rett under overskriften, ikke nederst.
• Rutingblokk: «Jeg jobber med økonomi / HR / IT» eller «Løsninger for SaaS / industri / helse», hver med lenke til en side laget for den leseren.
• Én primær CTA, én sekundær: for eksempel «Book en demo» pluss «Se priser». Flere valg sprer oppmerksomheten.

Guiden vår til personalisering av B2B-forsiden går dypere inn i hva du bør endre på forsiden for ulike besøkssegmenter.

Løsnings- og bransjesider: gjør jobben til den første salgssamtalen

Disse sidene bærer mesteparten av vekten i designet av et B2B-nettsted, og de er som regel de svakeste. En god bransjeside leses som de første 15 minuttene av en behovsavklaring: her er problemet slik din bransje opplever det, her er hvordan team som ditt løser det med oss, her er en kunde i din bransje, her er hvordan utrullingen ser ut. Hvis siden kan kopieres til en annen bransje ved å søke og erstatte bransjenavnet, gjør den ikke jobben sin. Se bransjespesifikk personalisering av nettsteder for hvordan du strukturerer innhold per vertikal.

Prisside: forklar modellen selv om du skjuler tallene

Mange B2B-selskaper kan ikke publisere én enkelt pris. Det er greit. Det som ikke fungerer, er en prisside med tre kolonner der det står «Kontakt oss». Forklar i det minste hva prisen avhenger av (brukere, volum, moduler), hva en typisk kontraktslengde er, og hva som er inkludert i implementeringen. Økonomiske beslutningstakere bruker denne siden til å avgjøre om det i det hele tatt er verdt å involvere innkjøp. Innlegget vårt om personalisering av prissider for B2B viser hvordan du tilpasser den etter selskapsstørrelse.

Bevissider: gjør kundecaser lette å skumlese

Kundecaser leses av skeptikere, ofte sent i syklusen. Design dem slik at leseren finner en sammenlignbar bedrift på sekunder: filtre for bransje og bedriftsstørrelse, og en oppsummeringsboks øverst i hver case med utgangssituasjonen, hva som endret seg og det målte resultatet. En vegg av PDF-nedlastinger bak et skjema er ikke et bibliotek med bevis.

Sider om sikkerhet, integrasjoner og implementering

Dette er sidene som oftest mangler på B2B-nettsteder, og de leses av medlemmene i innkjøpskomiteen som kan stoppe avtalen. En integrasjonskatalog med reelle oppsettdetaljer, en sikkerhetsside som tydelig lister opp sertifiseringer og datahåndtering, og en implementeringsside med en realistisk tidslinje gjør mer for konverteringen sent i prosessen enn enda en funksjonsside.

Demo- og kontaktsider: hold forespørselen i proporsjon

Konverteringssiden bør gjenta resultatet den besøkende kjøper, vise hva som skjer etter at de sender inn (hvem som tar kontakt og når), og bare be om feltene salg trenger til første samtale. Vi går gjennom valg av felt i detalj i guiden vår til skjemaer for leadfangst.

Navigasjon for flere roller og bransjer

Navigasjonen er der designet av et B2B-nettsted enten respekterer innkjøpsgruppen eller ignorerer den. Disse mønstrene hjelper. (For å endre selve innholdet etter rolle, se hvordan du personaliserer B2B-nettstedet etter stillingstittel.)

1. Løsningsmenyen delt i to. Én kolonne «Etter rolle» (økonomi, drift, IT), én kolonne «Etter bransje». Besøkende velger selv, og du får et gratis signal om hvem de er.
2. En synlig «Hvorfor oss»- eller «Sammenlign»-inngang. Besøkende sent i prosessen ser etter innhold om sammenligning og bytte. Gjemmer du det i bunnteksten, skjuler du det for dem som er nærmest et kjøp.
3. En ressursmeny etter oppgave, ikke etter format. «Bygg business caset», «Vurder sikkerheten», «Planlegg implementeringen» er mer nyttig enn «Blogg, e-bøker, webinarer».

Hold toppmenyen på fem eller seks punkter. Trenger du flere, er det informasjonsarkitekturen som må forbedres, ikke menyen. Den samme strukturen avgjør hvordan søkemotorer gjennomsøker og vekter sidene dine; denne guiden til nettstedsarkitektur for SEO dekker den siden av saken.

Design for anonyme besøkende

Det store flertallet av besøkende på B2B-nettsteder fyller aldri ut et skjema, så designet må fungere for folk du ikke vet noe om. Det har to konsekvenser.

For det første trenger hver side en fornuftig standardversjon. Standardoverskriften, -bevisene og -CTA-en bør betjene den vanligste kjøperen din, ikke et generisk «alle». For det andre bør sidene bygges slik at standardversjonen kan byttes ut senere uten redesign. Det er her design og personalisering møtes.

Design klart for personalisering: bygg sider med plasser

En side som er klar for personalisering, har et lite antall tydelig avgrensede moduler som kan endres mens resten av siden står fast. I praksis dekker tre innholdsplasser det meste av verdien:

• Overskriftsplass: H1 og underoverskrift. Samme lengdeintervall på tvers av variantene, så layouten ikke hopper.
• Bevisplass: en logostripe eller ett kort med en kundecase. Laget for å vise én bransjes logoer eller én kundehistorie om gangen.
• CTA-slot: knappetekst pluss en støttesetning på én linje, for eksempel «Book en demo» for en besøkende fra et mellomstort selskap kontra «Snakk med en enterprise-spesialist» for en stor konto.

Design disse feltene med faste dimensjoner og innholdsgrenser (for eksempel overskrift på 40 til 70 tegn, et bevis-kort med logo, én setning og en lenke). Da kan et innholdsteam skrive varianter uten å be designteamet om en ny layout hver gang. For konkrete grensesnittmønstre i disse feltene, se innlegget vårt om designmønstre for personaliserte B2B-nettsteder.

Kommentert eksempel: forsiden til et mellomstort B2B-selskap

Eksempel (illustrerende, ikke en ekte bedrift): «Ledgerline», en fiktiv leverandør av automatisering av leverandørgjeld som selger til økonomiteam i bedrifter med 200 til 2 000 ansatte. Slik kunne forsiden deres vært bygget opp, fra topp til bunn, med begrunnelsen for hver blokk.

1. Toppfelt: logo, Løsninger (Etter rolle / Etter bransje), Priser, Kunder, Ressurser, Sikkerhet. CTA-knapp «Book en demo». Sikkerhet står i hovedmenyen fordi IT-gjennomgangen i dette eksemplet er steget som ofte stopper avtaler sent i løpet.
2. Hero (overskriftsplass): «Automatisering av leverandørgjeld for økonomiteam som har vokst ut av regnearkene.» Undertittel: «Godkjenninger, avstemming og betalinger i én arbeidsflyt, i drift på rundt seks uker.» Kategori, målgruppe og en tidslinje, alt på to linjer.
3. Bevisplass: fem logoer fra den besøkendes mest sannsynlige segment, med én linje: «Brukes av økonomiteam i industri, varehandel og logistikk.» Kan byttes ut etter bransje senere.
4. Rutingsblokk: tre kort: «For økonomidirektører: kutt kostnaden per faktura», «For regnskapsteam: slutt å mase om godkjenninger», «For IT: integrasjoner og sikkerhet». Hvert kort lenker til en rolleside.
5. Slik fungerer det: tre steg med ett skjermbilde hver. Viser produktet, noe kjøpere forventer før en demo.
6. Ett kundecasekort: sammenlignbart selskap, utgangssituasjon, resultat. Andre bevispunkt, dypere enn logoer.
7. Smakebit på priser: «Prises etter fakturavolum. Se hvordan prisingen fungerer.» Svarer på det første filterspørsmålet til den økonomiske beslutningstakeren.
8. Plass for avsluttende CTA: «Book en demo på 30 minutter. Du snakker med en finansspesialist, ikke en generisk SDR.» Setter forventninger til hva som skjer videre.

Før og etter: redesign av en generisk B2B-forside

Eksempel (illustrasjon): forsiden til det samme fiktive selskapet før en redesign, og hva som ble endret.

Redesignet legger ikke til en eneste animasjon. Hver endring gjør jobben enklere for et bestemt medlem av komiteen.

Hva kjennetegner et godt B2B-nettsted: en sjekkliste med 12 punkter

Blir de bedt om å nevne et godt B2B-nettsted, velger de fleste markedsførere ett på grunn av det visuelle. Egenskapene som hjelper kjøpere, er stort sett ikke visuelle. Et godt B2B-nettsted består kontrollene nedenfor uansett stil. Gi ditt eget nettsted en ærlig score: ett poeng per punkt, og alt under 9 forteller deg hvor redesignbudsjettet bør gå før noen åpner et designverktøy.

1. Overskriften på forsiden nevner kategorien og kunden. En førstegangsbesøkende kan si hva du selger og hvem det er for etter fem sekunder.
2. Hver påstand har bevis rett ved siden av. Et kundenavn, et skjermbilde eller et tall med kilde står ved siden av påstanden, ikke på en egen side.
3. Det finnes en vei per rolle. Den økonomiske beslutningstakeren, den daglige brukeren og IT finner hver sin side fra hovednavigasjonen.
4. Det finnes en vei per bransje for de to eller tre største vertikalene dine, med en bransjespesifikk kundehistorie på hver.
5. Prisene er forklart. Enten tall, eller prismodellen og et utregnet eksempel for en typisk kundestørrelse.
6. Sikkerhet, integrasjoner og implementering har egne sider. De svarer på spørsmål fra sen fase som ellers blir e-poster til salg.
7. Hver side har én primær CTA og høyst én sekundær, og den primære forespørselen passer til den besøkendes sannsynlige fase.
8. Demoskjemaet spør bare om det rutingen trenger og sier hva som skjer etter innsending.
9. De viktigste landingssidene fungerer uten forsiden. En besøkende som kommer fra søk til et blogginnlegg eller en funksjonsside, kan likevel se hva du gjør og hvor de skal gå videre.
10. Sidene lastes raskt på mobil. Core Web Vitals består på feltdata fra mobil for de viktigste malene dine.
11. Sammenligningsinnhold finnes. Kjøpere i sen fase søker etter «X vs Y» og «alternativer til X»; en rettferdig side fra deg slår en anmeldelsessides oppsummering av deg. Våre egne Markettailor-sammenligninger følger denne tilnærmingen.
12. Konvertering måles per segment. Du kan se demorate etter bransje, selskapsstørrelse eller liste over målkontoer, ikke bare ett gjennomsnitt for hele nettstedet.

Ingen av de tolv punktene handler om visuell stil. Vil du se hvordan ekte selskaper håndterer punkt 1, 2 og 7, går gjennomgangen vår av eksempler på B2B-forsider gjennom elleve SaaS-forsider seksjon for seksjon. Punkt 9 betyr mer enn de fleste team regner med. Når søk sender besøkende rett til blogginnlegg og funksjonssider, er forsiden kanskje inngangssiden for bare en liten andel av øktene. Sjekk landingssiderapporten i analyseverktøyet: Sjekklisten må holde for de ti viktigste inngangssidene dine, ikke bare den ene som styret ser på.

En arbeidsflyt i seks steg for å revidere designet på B2B-nettstedet ditt

1. List opp komiteen. Skriv ned de 4 til 6 rollene som er involvert i en typisk avtale, og det ene spørsmålet hver av dem trenger svar på på nettstedet ditt.
2. Koble spørsmål til sider. Finn siden som svarer på hvert spørsmål. Manglende sider (sikkerhet, implementering, sammenligninger) havner øverst i backloggen.
3. Sjekk de viktigste inngangssidene. List opp de 10 vanligste landingssidene i analyseverktøyet ditt. Mange B2B-besøkende ser aldri forsiden, så disse sidene trenger den samme klarheten.
4. Kjør en 60-sekunderstest per rolle. Gi en kollega en rolle og et spørsmål, og ta tiden på hvor lang tid det tar å finne svaret fra en typisk inngangsside.
5. Definer plasser på de viktigste sidene. Merk plassene for overskrift, bevis og CTA med innholdsgrenser, slik at varianter kan legges til senere.
6. Mål per segment, ikke bare for hele nettstedet. Følg konverteringsraten per bransje og bedriftsstørrelse der du kan identifisere dem. Et gjennomsnitt for hele nettstedet skjuler hvilke segmenter designet svikter.

Steg 6 er der de fleste team stopper opp, fordi konverteringsdata sjelden inneholder bedriftsegenskaper. Markettailors identifisering av besøkende kobler anonym trafikk til bedrifter, slik at du kan se hvilke bransjer og bedriftsstørrelser som engasjerer seg med hver side. Når plassene finnes, lar segmenteringen deg fylle dem med varianter per segment og beholde standardversjonen for alle andre.

Hvor du går videre

Start med revisjonsarbeidsflyten over, fiks de manglende sidene først, og bygg inn plasser på sidene med mest trafikk. Sammenligningen vår av landingssider vs. forsider hjelper deg å avgjøre hvor betalt trafikk bør lande.

Ofte stilte spørsmål

Hva er B2B-nettstedsdesign?

Design av B2B-nettsteder er strukturen, innholdet og det visuelle designet på et nettsted som selger til bedrifter heller enn forbrukere. Det må betjene flere roller fra den samme innkjøpskomiteen, støtte lange researchsykluser over mange besøk, og konvertere besøkende til demoforespørsler, kontaktforespørsler eller prøvekontoer i stedet for direkte kjøp.

Hva er beste praksis for design av B2B-nettsteder?

Si hva du gjør og hvem det er for i overskriften, plasser bevis rett ved siden av påstandene, tilby navigasjon etter rolle og etter bransje, forklar hvordan prisingen fungerer selv om tallene er tilpasset, publiser sider om sikkerhet, integrasjoner og implementering, og hold deg til én primær og én sekundær handlingsoppfordring per side.

Hvordan skiller design av B2B-nettsteder seg fra B2C?

B2C-nettsteder betjener som regel én beslutningstaker som kan kjøpe i løpet av én økt. B2B-nettsteder betjener en gruppe over uker eller måneder, med et kjøp med høyere risiko og en konvertering som ber om et møte i stedet for en betaling. Det flytter designet mot rollebaserte veier, grundigere bevis og innhold som reduserer risiko.

Hva kjennetegner et godt B2B-nettsted?

Et godt B2B-nettsted lar hvert medlem av en innkjøpskomité raskt få svar på sitt eget spørsmål: hva du gjør og for hvem, bevis ved hver påstand, veier etter rolle og bransje, en forklart prismodell, sider om sikkerhet og integrasjoner, én tydelig CTA per side og konvertering målt per segment. Visuell finpuss betyr langt mindre enn dette grunnleggende.

Hvilke sider bør et B2B-nettsted ha?

Som et minimum: en forside, løsningssider etter rolle eller bruksområde, bransjesider for de viktigste vertikalene dine, en prisside, en side med kunder eller kundecaser, sider om sikkerhet og integrasjoner, og en demo- eller kontaktside. Sammenlignings- og implementeringssider mangler ofte og betyr mest for kjøpere i sen fase.

Hvordan designer du et B2B-nettsted for personalisering?

Gi hovedsidene dine en sterk standardversjon for den vanligste kjøperen din, og definer så noen få avgrensede plasser, som regel overskriften, en bevismodul og CTA-en, med faste størrelser og innholdsgrenser. Varianter for bransjer eller selskapsstørrelser kan da skrives inn i disse plassene uten å redesigne siden.