En køber fra produktionsindustrien lander på dit website og ser et herobillede af et elegant SaaS-dashboard. Et fintech-prospekt kommer og får det samme billede. Ingen af dem føler, at siden er bygget til dem, og begge forlader den inden for få sekunder. Problemet er ikke, at landingssiden mangler billeder. Problemet er, at de samme billeder vises til alle, uanset hvem de er, eller hvad de har brug for.
Billeder på landingssider vælges én gang, som regel af den, der designede siden, og vises derefter til alle besøgende. På et B2B-website med flere brancher og købsroller betyder det, at de fleste besøgende ser et billede af en andens verden. At matche hovedbilledet med den besøgendes branche, rolle eller fase er en af de billigere former for personalisering, fordi det ikke kræver ny tekst, men det hjælper kun, hvis billedet siger noget specifikt. Dette indlæg gennemgår, hvad hver billedtype er til, hvornår video er det værd, hvordan du kobler visuelle elementer til segmenter, og de detaljer om performance og tilgængelighed, der afgør, om noget af det virker.
Hvorfor generiske billeder på landingssider fejler i B2B
Billeder er som regel det første, den besøgendes øje lander på, så de former førstehåndsindtrykket, før overskriften er læst. Et generisk billede skader ikke meget i sig selv; prisen er den forpassede chance for at vise den besøgende noget, de genkender.
For B2B-virksomheder med flere køberpersonaer skaber ét fælles sæt billeder en strukturel ulempe. En VP of Engineering, der evaluerer din platform, har andre visuelle forventninger end en CMO, der gør det samme. Den ene vil se teknisk arkitektur, integrationer eller dataflows. Den anden reagerer på dashboards, kampagnemålinger eller ROI-grafer. Når begge ser det samme generiske kontorfoto, får ingen af dem det relevanssignal, der får dem til at scrolle videre. Det samme gælder annoncen, der bragte dem; vores guide til hvornår du skal bruge responsive displayannoncer gennemgår, hvordan du holder displaykreativer i tråd med siden.
Stockfotos af folk, der giver hånd på et glaskontor, er den sædvanlige synder. De er nemme at genkende som stockfotos, så de tilføjer intet, og de optager den plads, hvor et produktskærmbillede, en rigtig kunde eller et diagram over arbejdsgangen kunne have været. Hvis du tester én ting i en landingssides visuelle udtryk, så test et rigtigt billede (dit produkt, dine kunder, dit team) mod stockfotoet.
Match det visuelle til segmenter af besøgende
Idéen bag personaliserede billeder er at forkorte tiden fra ankomst til »det her er til mig«. Den praktiske måde at gøre det på er at mappe billedvarianter til segmenter, du allerede følger. Hvis du bruger besøgsidentifikation til at registrere virksomhedens branche, størrelse eller geografi, kan de samme datapunkter styre, hvilke billeder der vises på siden.
Måder at knytte segmenter til billeder på:
Branchebaserede visuelle elementer. Vis et produktionsgulv for besøgende fra produktion. Vis et handelsbord for finanssektoren. Vis et hospitalsflow for sundhedssektoren. Produktet er det samme, men den visuelle kontekst ændres, så den matcher den besøgendes hverdag.
Rollebaserede visuelle elementer. Tekniske købere reagerer på arkitekturdiagrammer, kodestykker og integrationsflows. Forretningskøbere reagerer på dashboards, grafer og resultatmålinger. At matche det visuelle sprog med køberens ekspertise signalerer, at du forstår deres perspektiv.
Visuelt indhold efter fase. Førstegangsbesøgende har gavn af overordnede illustrationer af fordele, der slår fast, hvad du laver. Tilbagevendende besøgende, der allerede har læst produktindhold, reagerer bedre på detaljerede skærmbilleder, sammenligningstabeller eller beviser fra kunder.
Virksomhedsstørrelse. Enterprise-besøgende reagerer måske på billeder, der viser skala, sikkerhedscertificeringer eller workflows på tværs af teams. Mindre virksomheder kan relatere til billeder, der viser hastighed, enkelhed og hurtige gevinster.
Billedtyper, og hvornår hver især virker bedst
Forskellige visuelle elementer har forskellige funktioner på en landingsside. At forstå forskellene hjælper dig med at træffe bevidste valg om, hvad der skal personaliseres, og hvad der skal forblive statisk.
Hero-billeder skaber førsteindtrykket og rammer hele værditilbuddet ind. De optager den mest værdifulde plads på siden. Et hero-billede, der viser produktet i brug, helst med data eller i en sammenhæng, den besøgende genkender, siger mere end en abstrakt grafik. På personaliserede sider er hero-billedet det naturlige første element at variere, fordi alle, der lander, ser det.
Produktskærmbilleder giver konkret dokumentation for, hvad du sælger, men de kan få sider til at virke rodede, hvis de bruges ukritisk. Ét annoteret skærmbillede, der fremhæver de funktioner, der er mest relevante for den besøgendes use case, virker bedre end flere uden annoteringer. Hvis dine segmenteringsdata fortæller dig, at en besøgende går op i analyse, så vis analysedashboardet. Hvis de går op i integrationer, så vis integrationspanelet.
Illustrationer og specialdesignet grafik er fremragende til at forenkle kompleksitet. Når du skal forklare et abstrakt workflow eller en proces i flere trin, kommunikerer specialdesignede illustrationer på sekunder, hvad der ville kræve flere afsnit. De er særligt nyttige på personaliserede sider, hvor forklaringen skal tilpasses den besøgendes tekniske niveau. Notér, hvilket visuelt element hver sektion skal have, i tekstbriefen til landingssiden, så design og tekst planlægges sammen.
Billeder til social proof omfatter kundelogoer, teamfotos og thumbnails til cases. De kan personaliseres ved at vise logoer fra den besøgendes branche eller størrelsesniveau. En SaaS-virksomhed i mid-market, der ser logoer fra andre SaaS-virksomheder i mid-market, føler sig mere tryg end ved at se Fortune 500-logoer, den ikke kan relatere til. Vores eksempler på B2B-landingssider viser, hvilket dokumentationselement hver sidetype bør starte med.
Baggrundsbilleder skaber stemning uden at kræve opmærksomhed. Diskrete gradienter eller geometriske mønstre klarer sig ofte bedre end fotografiske baggrunde, fordi de tilføjer dybde uden at distrahere. De har sjældent brug for personalisering, da deres rolle er at understøtte, ikke at signalere relevans.
Video på en landingsside: Hvornår den gør sig fortjent til pladsen
Video er det tungeste visuelle element, du kan tilføje, både i sidevægt og i den opmærksomhed, den kræver. Vores holdning: en video på en landingsside skal besvare ét spørgsmål, som den besøgende ikke kan besvare ud fra et skærmbillede, som regel »hvordan ser det ud, når nogen faktisk bruger det her?« Hvis videoen gentager overskriften med musik bagved, gør et velvalgt skærmbillede det samme hurtigere. Om video ud over landingssider kan du læse vores guide til B2B-videomarketing.
Her plejer video at betale sig på B2B-sider:
- Produktgennemgange på demo- og tilmeldingssider. 60 til 90 sekunder, der viser den centrale arbejdsgang, lader en besøgende kvalificere sig selv, før de booker et opkald. Hold cursoren langsom og brugerfladen læsbar i den størrelse, den afspilles i.
- Kundehistorier på sider sent i forløbet. En kunde, der forklarer problemet med sine egne ord, er et bevis, som et logo ikke kan give. Placér den ved siden af den påstand, den understøtter, ikke i et separat videogalleri.
- Webinar- og eventsider. Et klip på 30 sekunder med taleren viser, at sessionen er tiden værd. Efter eventet erstatter optagelsen det.
Og hvor det som regel ikke virker: som en automatisk afspillet baggrundsloop bag overskriften (den konkurrerer med teksten og koster indlæsningstid) og som den eneste måde at få vigtige oplysninger på (mange B2B-besøgende browser på arbejdet med lyden slået fra).
Tilføj video uden at gøre siden langsommere
- Brug et posterbillede, og indlæs afspilleren ved klik. En fuld YouTube- eller Vimeo-embed indlæser sine scripts, før nogen trykker afspil. Googles Lighthouse-dokumentation anbefaler lazy loading af tredjeparts-embeds bag en facade, en statisk forhåndsvisning, der skifter til den rigtige afspiller ved interaktion.
- Lazy-load embeds under folden. Tilføjer du
loading="lazy"til iframes, udskydes afspillere uden for skærmen, som beskrevet i web.dev's guide til lazy loading af iframes. - Tekst alt. Undertekster hjælper seere uden lyd og er et tilgængelighedskrav for forudindspillet video med lyd.
- Hold CTA'en synlig uden videoen. Formularen eller knappen må aldrig afhænge af, at nogen ser videoen til ende.
Sådan måler du, om videoen hjælper
GA4's udvidede måling registrerer events som video_start, video_progress og video_complete for indlejrede YouTube-videoer, der har JS API-understøttelse slået til. To tal betyder mere end visninger: afspilningsraten (afspilninger divideret med sidens besøgende) og konverteringsraten for besøgende, der afspillede videoen, sammenlignet med dem, der ikke gjorde. Vær forsigtig med det sidste. Besøgende, der trykker på afspil, er allerede mere engagerede, så en højere konverteringsrate blandt seerne beviser ikke, at det var videoen, der gjorde det. Den fair test er en A/B-test af siden med og uden video, vurderet på konverteringer, ikke visningstid.
Video personaliserer også godt. En besøgende fra produktion og en besøgende fra software kan se den samme gennemgang optaget på to forskellige demodatasæt, hvilket er billigere, end det lyder, når først manuskriptet findes.
Visuelt hierarki på personaliserede sider
Billeder former, hvordan besøgende bevæger sig gennem en side. På teksttunge sider skimmer folk typisk hen over toppen og derefter ned langs venstre side (F-mønsteret); på sparsomme sider går øjet ofte i zigzag fra øverst til venstre til øverst til højre og nedad. Placér billeder med de veje i tankerne.
Placér dit personaliserede hero-billede øverst i F'et, hvor øjnene lander først. Understøttende visuelle elementer placeres langs den lodrette scanningsvej. Hvis du bruger retningsgivende elementer i billederne, som en persons blik eller en pil i et diagram, så lad dem pege mod din call-to-action, ikke væk fra den.
Størrelse skaber hierarki. Større billeder signalerer vigtighed. Hvis du vil have en besøgende fra en målaccount til at fokusere på et bestemt resultat eller en bestemt funktion, så gør det billede til det dominerende visuelle element på siden. Sekundære billeder, som kundelogoer eller understøttende skærmbilleder, skal forblive mindre, så de forstærker uden at konkurrere.
Giv hovedbilledet plads. Ét klart billede, der passer til segmentet, med luft omkring læses hurtigere end tre sammenpressede, der konkurrerer om opmærksomheden, og det er én variant at vedligeholde i stedet for tre.
Et trin-for-trin-workflow til personalisering af billeder på landingssider
Du behøver ikke bygge hele dit website om for at implementere billedpersonalisering. Her er en praktisk arbejdsgang, der starter i det små og skalerer.
Trin 1: Vælg dine største kvalificerede segmenter. Træk data fra dit analyseværktøj eller dit værktøj til identifikation af besøgende. Hvilke brancher, virksomhedsstørrelser eller roller udgør størstedelen af din kvalificerede trafik? Start med segmenter, der er store nok til at måle, og forskellige nok til, at forskellige billeder reelt giver mening.
Trin 2: Gennemgå de nuværende billeder på dine landingssider. List hvert billede på dine landingssider med mest trafik. Spørg for hvert: Taler det lige meget til alle tre segmenter? Hvis ja, er det enten et stærkt universelt billede eller et generisk, der ikke taler til nogen. Markér billeder, hvor en segmentspecifik variant kunne tilføje relevans.
Trin 3: Lav 2-3 billedvarianter pr. markeret plads. Du behøver ikke et komplet redesign. For herobilleder kan det betyde tre versioner af samme layout med forskellige baggrundsbilleder, forskellige produktskærmbilleder eller forskellige illustrationer af use cases. Hold kompositionen og CTA-placeringen ens, så du tester billedindholdet, ikke sidestrukturen.
Trin 4: Opsæt segmentbaserede visningsregler. Knyt i din personaliseringsplatform hver variant til dens målsegment. Definer en standard for besøgende, der ikke matcher noget segment. Test, at de rigtige billeder vises for de rigtige besøgende, ved at forhåndsvise med testkonti fra hvert segment.
Trin 5: Mål og iterér. Følg konverteringsraten pr. segment, ikke kun samlet. Et hero-billede, der løfter konverteringerne for besøgende fra industrien, kan skade performance for SaaS-besøgende. Kør A/B-tests inden for hvert segment for at isolere effekten af billedændringer fra andre elementer på siden. Fastlæg stikprøvestørrelsen, før testen starter (vores guide til stikprøvestørrelse i A/B-test viser hvordan), kør mindst to hele uger, og stop ikke tidligt, fordi dashboardet ser godt ud.
Teknisk performance: hastighed vs. visuel kvalitet
En personaliseret hero, der kommer for sent, er værre end en generisk, der kommer til tiden. Hero-billedet er ofte Largest Contentful Paint-elementet, så dets størrelse og indlæsningsrækkefølge afgør, hvor hurtig siden føles.
Brug moderne formater. Googles dokumentation angiver, at WebP-billeder med tab er 25-34 % mindre end tilsvarende JPEG'er, og WebP-billeder uden tab 26 % mindre end PNG'er. AVIF komprimerer ofte endnu mere. Server AVIF eller WebP med JPEG som fallback via <picture>-elementet.
I stedet for at kopiere andres størrelsesgrænser skal du sætte et budget for dine egne sider: tjek heroens filstørrelse og LCP i PageSpeed Insights med en mobilprofil, og behandl enhver variant, der er mærkbart tungere end standarden, som en fejl.
Brug responsive billeder med srcset-attributter. At servere et 2000px bredt billede til en mobilbesøgende spilder båndbredde og forsinker visningen. Lad browserne vælge billedet i den passende størrelse ud fra viewportens bredde. På personaliserede sider betyder det, at hver billedvariant skal have sit eget sæt responsive størrelser, men build-værktøjer kan automatisere det.
Lazy-load ikke hero-billedet. Det er over folden, så lazy loading forsinker det; marker det med fetchpriority="high" i stedet, og lazy-load kun billeder længere nede. For segmentvarianter afgøres varianten renest på serveren eller ved edge, så det rigtige billede er i HTML'en fra start. Hvis udskiftningen sker i browseren, så reserver billedets dimensioner, så layoutet ikke hopper, når det indlæses.
Tilgængelighed for alle billedvarianter
Hver personaliseret billedvariant skal have sin egen alt-tekst. Et herobillede, der viser et produktionsflow, skal have alt-tekst, der beskriver den scene, ikke en generisk alt-tekst, der kunne passe til enhver variant. Skærmlæsere læser op, hvad der er på siden, og alt-teksten skal passe til det, seende besøgende i det segment faktisk ser.
God alt-tekst beskriver billedets indhold kort og relaterer det til den omgivende kontekst. Hold den under 100 tegn. Dekorative billeder (baggrunde, afstandsstykker) bør have tomme alt-attributter, så skærmlæsere springer dem over. Funktionelle billeder som linkede grafikker skal have alt-tekst, der beskriver linkets destination.
Når billeder ikke indlæses, vises alt-teksten visuelt, hvilket betyder, at alt-tekst også fungerer som fallback for seende besøgende på langsomme forbindelser. Når du har personaliserede billedvarianter, er det endnu en grund til, at hver variant skal have unik, beskrivende alt-tekst i stedet for en fælles pladsholder.
Almindelige fejl med personaliserede billeder
Teams, der er nye inden for billedpersonalisering, overpersonaliserer ofte. At udskifte hvert billede på siden efter besøgssegment skaber en vedligeholdelsesbyrde og udvander effekten af de ændringer, der faktisk betyder noget. Fokusér personaliseringen på de en eller to billedpladser med størst effekt (som regel hero-sektionen og den primære social proof-sektion), og hold resten ensartet.
En anden typisk fejl er at bruge segmentdata til at gøre antagelser, der føles påtrængende. At vise en besøgende deres virksomhedslogo, før de har identificeret sig, overskrider en grænse. At vise billeder, der er relevante for deres branche, er nyttigt. At vise deres kontorbygning er ubehageligt. Forskellen går mellem kontekstuel relevans og overvågning.
At teste for mange varianter på én gang er en tredje faldgrube. Fire segmenter gange tre billedslots med et par varianter hver giver allerede dusinvis af kombinationer, langt flere end B2B-trafik kan teste. Test én variabel ad gangen inden for hvert segment, vent på statistisk signifikans, og opbyg tillid til hver ændring, før du lægger flere lag på.
For teams, der arbejder sig gennem en bredere plan for optimering af B2B-landingssider, er personalisering af billeder et fornuftigt tidligt skridt, fordi det kræver mindre nyt indhold end personalisering af tekst. Hagen er, at det forudsætter rigtige, segmentspecifikke billeder; hvis alt, du kan producere, er et andet stockfoto pr. branche, så brug tiden på teksten i stedet.
Hvor du skal starte
Tag din landingsside med mest trafik, og se på hero-billedet med ét spørgsmål: ville en besøgende fra dit største segment genkende sit eget arbejde i det? Hvis ikke, så erstat det med et produktskærmbillede eller et kundebillede, som de ville, og test det mod det nuværende. Først når et ægte billede slår stockbilledet, er det værd at producere varianter pr. segment. Markettailor kobler data fra besøgsidentifikation til indholdet på siden, herunder billeder, hvis du vil vise disse varianter uden selv at bygge reglerne.
