Egy gyártóipari vevő a weboldaladra érkezik, és egy elegáns SaaS-dashboardot ábrázoló hero képet lát. Egy fintech prospect érkezik, és ugyanazt a képet kapja. Egyikük sem érzi úgy, hogy az oldal neki készült, és mindketten másodperceken belül távoznak. Nem az a baj, hogy hiányoznak a landing page képei. Az a baj, hogy mindenki ugyanazokat a képeket látja, függetlenül attól, ki ő, és mire van szüksége.
A landing page képeit egyszer választják ki, általában az, aki az oldalt tervezte, és utána minden látogatónak ugyanazt mutatják. Egy több iparágat és vásárlói szerepkört kiszolgáló B2B oldalon ez azt jelenti, hogy a legtöbb látogató valaki más világáról lát képet. A fő kép illesztése a látogató iparágához, szerepköréhez vagy szakaszához a személyre szabás egyik olcsóbb formája, mert nem igényel új szöveget, de csak akkor segít, ha a kép valami konkrétat mond. Ez a cikk bemutatja, mire való az egyes képtípus, mikor éri meg a videó, hogyan rendeld a vizuális elemeket szegmensekhez, valamint azokat a teljesítménybeli és akadálymentességi részleteket, amelyeken múlik, hogy bármi ebből működik-e.
Miért buknak el az általános landing page-képek a B2B-ben
A látogató szeme általában először a képekre esik, így ezek alakítják az első benyomást, még mielőtt a főcímet elolvasná. Egy általános kép önmagában nem sokat árt; a veszteség az elszalasztott lehetőség, hogy valami ismerőset mutass a látogatónak.
A több vásárlói personával rendelkező B2B cégeknél egyetlen képkészlet strukturális hátrányt okoz. Egy a platformodat értékelő mérnöki alelnöknek más vizuális elvárásai vannak, mint egy ugyanezt tevő CMO-nak. Az egyik technikai architektúrát, integrációkat vagy adatfolyamokat szeretne látni. A másik irányítópultokra, kampánymutatókra vagy ROI-diagramokra reagál. Ha mindketten ugyanazt az általános irodai fotót látják, egyikük sem kapja meg azt a relevanciajelet, amely görgetésre ösztönözné. Ugyanez érvényes az őket idehozó hirdetésre is; a reszponzív display hirdetések használatáról szóló útmutatónk leírja, hogyan tartsd összhangban a display kreatívot az oldallal.
A szokásos bűnösök az üvegirodában kezet rázó emberekről készült stockfotók. Könnyű felismerni, hogy stockfotók, így semmit sem tesznek hozzá, és elfoglalják a helyet, ahol egy termékképernyőkép, egy valódi ügyfél vagy egy munkafolyamat-ábra lehetne. Ha egy landing page vizuáljaiból egyetlen dolgot tesztelsz, egy valódi képet (a termékedet, az ügyfeleidet, a csapatodat) teszteld a stockfotóval szemben.
Vizuális elemek illesztése a látogatói szegmensekhez
A személyre szabott képek mögötti ötlet az, hogy lerövidítsd az időt az érkezés és a „ez nekem szól” érzés között. A gyakorlati módja, hogy a képváltozatokat a már követett szegmensekhez rendeled. Ha látogatóazonosítással állapítod meg a cég iparágát, méretét vagy földrajzi helyét, ugyanezek az adatpontok határozhatják meg, mely képek jelenjenek meg az oldalon.
Így rendelheted a szegmenseket képekhez:
Iparágalapú vizuális elemek. A gyártóipari látogatóknak gyárcsarnokot mutass. A pénzügyi szolgáltatóknak kereskedési pultot. Az egészségügynek kórházi munkafolyamatot. Az eladott termék ugyanaz, de a vizuális kontextus a látogató mindennapi valóságához igazodik.
Szerepkör-alapú vizuális elemek. A technikai vásárlók az architektúra-ábrákra, kódrészletekre és integrációs folyamatokra reagálnak. Az üzleti vásárlók az irányítópultokra, diagramokra és eredménymutatókra. Ha a vizuális nyelvet a vásárló szakértelméhez igazítod, azt jelzed, hogy érted a nézőpontját.
Szakaszalapú vizuális elemek. Az először érkezőknek a magas szintű, előnyöket bemutató illusztrációk segítenek, amelyek megmutatják, mivel foglalkozol. A visszatérő látogatók, akik már fogyasztottak terméktartalmat, jobban reagálnak a részletes képernyőképekre, az összehasonlító táblázatokra vagy az ügyfélbizonyítékokra.
Cégméret. A nagyvállalati látogatókra a léptéket, biztonsági tanúsítványokat vagy több csapatot érintő munkafolyamatokat bemutató képek hathatnak. A kisebb cégek a gyorsaságot, egyszerűséget és gyors sikereket mutató képekkel azonosulnak.
Képtípusok, és mikor teljesít a legjobban az egyes típus
A landing page különböző vizuális elemei különböző funkciókat töltenek be. Ha érted ezeket a különbségeket, tudatosan döntheted el, mit szabsz személyre, és mit hagysz statikusan.
A hero képek határozzák meg az első benyomást, és keretezik a teljes értékajánlatot. Az oldal legértékesebb területét foglalják el. Egy olyan hero kép, amely a terméket használat közben mutatja – ideális esetben a látogató számára ismerős adatokon vagy környezetben –, többet mond egy absztrakt grafikánál. Személyre szabott oldalaknál a hero a természetes első variálandó elem, mert mindenki látja, aki megérkezik.
A termék-képernyőképek kézzelfogható bizonyítékot adnak arról, mit árulsz, de gondatlanul használva zsúfolttá tehetik az oldalt. Egyetlen jegyzetekkel ellátott képernyőkép, amely a látogató felhasználási esetéhez legfontosabb funkciókat emeli ki, jobban működik, mint több jegyzet nélküli. Ha a szegmentálási adataid szerint a látogatót az analitika érdekli, mutasd az analitikai dashboardot. Ha az integrációk, mutasd az integrációs panelt.
Az illusztrációk és egyedi grafikák kiválóan egyszerűsítik a bonyolultat. Ha egy absztrakt munkafolyamatot vagy többlépéses folyamatot kell elmagyaráznod, az egyedi illusztrációk másodpercek alatt átadják, amihez bekezdések kellenének. Különösen hasznosak a személyre szabott oldalakon, ahol a magyarázatnak a látogató technikai jártasságához kell igazodnia. A landing page szövegírói briefben jegyezd fel, melyik szakaszhoz milyen vizuális elem kell, hogy a design és a szöveg együtt készüljön.
A társadalmi bizonyítékot adó képek közé tartoznak az ügyféllogók, csapatfotók és esettanulmány-bélyegképek. Ezek személyre szabhatók a látogató iparágából vagy cégméret-sávjából származó logókkal. Egy középvállalati SaaS-cégnek nagyobb megnyugvást ad más középvállalati SaaS-cégek logóit látni, mint olyan Fortune 500-as logókat, amelyekkel nem tud azonosulni. A B2B landing page példáink megmutatják, melyik bizonyítékkal indítson az egyes oldaltípus.
A háttérképek hangulatot teremtenek anélkül, hogy figyelmet követelnének. A finom színátmenetek vagy geometrikus minták gyakran jobban teljesítenek a fotós hátterekénél, mert mélységet adnak, figyelemelterelés nélkül. Ritkán kell őket személyre szabni, mert a szerepük a támogatás, nem a relevancia jelzése.
Videó a landing page-en: mikor érdemli ki a helyét
A videó a legnehezebb vizuális elem, amit hozzáadhatsz – oldalsúlyban és a figyelemben, amit igényel. Szerintünk egy landing page-en lévő videónak egy olyan kérdésre kell felelnie, amelyre a látogató egy képernyőképből nem kap választ: általában arra, hogy „hogyan néz ki, amikor valaki ténylegesen használja?”. Ha a videó zenei aláfestéssel megismétli a főcímet, egy jól megválasztott képernyőkép gyorsabban elvégzi ugyanezt. A landing page-eken túli videóhoz lásd a B2B videómarketing útmutatónkat.
Ahol a videó jellemzően megtérül a B2B oldalakon:
- Termékbemutatók a demó- és regisztrációs oldalakon. Egy 60–90 másodperces videó, amely az alapvető munkafolyamatot mutatja be, lehetővé teszi, hogy a látogató maga döntse el, illik-e hozzá, mielőtt hívást foglal. A kurzor mozogjon lassan, a felhasználói felület pedig legyen olvasható abban a méretben, amelyben lejátsszák.
- Ügyféltörténetek a késői szakasz oldalain. Ha egy ügyfél a saját szavaival magyarázza el a problémát, az olyan bizonyíték, amit egy logó nem tud adni. Tedd az általa alátámasztott állítás mellé, ne egy külön videógalériába.
- Webinár- és rendezvényoldalak. Egy 30 másodperces előadói klip megmutatja, hogy megéri az időt a részvétel. A rendezvény után a felvétel váltja fel.
És ahol általában nem: automatikusan lejátszódó háttérvideóként a címsor mögött (versenyez a szöveggel és lassítja a betöltést), illetve a kulcsinformációk egyetlen forrásaként (sok B2B látogató munkahelyen, lenémítva böngészik).
Videó hozzáadása az oldal lassítása nélkül
- Használj előnézeti képet, és kattintásra töltsd be a lejátszót. Egy teljes YouTube- vagy Vimeo-beágyazás betölti a szkriptjeit, mielőtt bárki megnyomná a lejátszás gombot. A Google Lighthouse dokumentációja azt javasolja, hogy a harmadik féltől származó beágyazásokat egy homlokzat mögött töltsd be lustán, vagyis egy statikus előnézettel, amely interakciókor cserélődik a valódi lejátszóra.
- A hajtás alatti beágyazásokat töltsd be lustán. Ha az iframe-ekhez hozzáadod a
loading="lazy"attribútumot, a képernyőn kívüli lejátszók betöltése késleltetve történik, ahogy a web.dev iframe lazy loading útmutatója leírja. - Mindenhez legyen felirat. A feliratok a hang nélkül nézőket szolgálják, és az előre rögzített, hangot tartalmazó videóknál akadálymentességi követelmény is.
- A CTA legyen látható a videó nélkül is. Az űrlap vagy a gomb soha ne függjön attól, hogy valaki végignézi-e a videót.
Annak mérése, hogy a videó segít-e
A GA4 bővített mérése video_start, video_progress és video_complete eseményeket rögzít azoknál a beágyazott YouTube-videóknál, amelyeknél engedélyezve van a JS API támogatás. Két szám fontosabb a megtekintéseknél: a lejátszási arány (lejátszások osztva az oldal látogatóival), és a lejátszó látogatók konverziós rátája azokéhoz képest, akik nem játszották le. A második esetében légy óvatos. Akik megnyomják a lejátszást, eleve aktívabbak, így a nézők magasabb konverziós rátája nem bizonyítja, hogy a videó okozta. A korrekt teszt az oldal A/B tesztje videóval és videó nélkül, konverziók alapján értékelve, nem nézési idő szerint.
A videó is jól személyre szabható. Egy gyártóipari és egy szoftveres látogató ugyanazt a bemutatót láthatja két különböző demóadatkészlettel felvéve, ami olcsóbb, mint amilyennek hangzik, ha a forgatókönyv már megvan.
Vizuális hierarchia a személyre szabott oldalakon
A képek alakítják, hogyan haladnak végig a látogatók egy oldalon. A szöveggel teli oldalakon az emberek jellemzően a tetején vízszintesen, majd a bal oldalon lefelé pásztáznak (F-minta); a ritkás oldalakon a szem gyakran cikcakkban halad a bal felső saroktól a jobb felsőig, majd lefelé. A képeket ezeket az útvonalakat szem előtt tartva helyezd el.
A személyre szabott hero képet az F-minta tetejére tedd, ahová a tekintet először esik. A kiegészítő vizuális elemek a függőleges olvasási útvonal mentén kapjanak helyet. Ha irányjelző elemeket használsz a képeken, például egy ember tekintetét vagy egy nyilat egy diagramon, a cselekvésre ösztönzés felé mutassanak, ne el tőle.
A méret hierarchiát teremt. A nagyobb képek fontosságot jeleznek. Ha azt szeretnéd, hogy egy célfiókból érkező látogató egy konkrét eredményre vagy képességre fókuszáljon, tedd azt a képet az oldal domináns vizuális elemévé. A másodlagos képek, például az ügyféllogók vagy a kiegészítő képernyőképek maradjanak kisebbek, hogy megerősítsenek, ne versenyezzenek.
Adj teret a fő képnek. Egyetlen tiszta, szegmenshez illő kép körülötte szabad térrel gyorsabban befogadható, mint három zsúfolt, figyelemért versengő kép, és egy változatot kell karbantartani három helyett.
Lépésenkénti munkafolyamat a landing page képek személyre szabásához
A képek személyre szabásához nem kell újraépítened az egész oldalt. Íme egy gyakorlati munkafolyamat, amely kicsiben indul, és skálázható.
1. lépés: válaszd ki a legnagyobb minősített szegmenseidet. Húzd ki az adatokat az analitikai vagy látogatóazonosító eszközödből. Mely iparágak, cégméretek vagy szerepkörök adják a minősített forgalmad zömét? Olyan szegmensekkel kezdj, amelyek elég nagyok a méréshez, és elég eltérőek ahhoz, hogy a különböző képeknek valóban legyen értelme.
2. lépés: vizsgáld át a jelenlegi landing page képeidet. Sorold fel a legnagyobb forgalmú landing page-eid összes képét. Mindegyiknél kérdezd meg: egyformán megszólítja mindhárom szegmenst? Ha igen, akkor vagy erős univerzális kép, vagy egy általános kép, amely senkit sem szólít meg. Jelöld meg azokat a képeket, ahol egy szegmensspecifikus változat relevanciát adhatna.
3. lépés: készíts 2–3 képvariánst minden megjelölt helyre. Nincs szükség teljes újratervezésre. Hero képeknél ez jelentheti ugyanannak az elrendezésnek három változatát eltérő háttérképpel, eltérő termék-képernyőképekkel vagy eltérő felhasználási eseteket bemutató illusztrációkkal. A kompozíciót és a CTA elhelyezését tartsd változatlanul, hogy a kép tartalmát teszteld, ne az oldal szerkezetét.
4. lépés: állíts be szegmensalapú megjelenítési szabályokat. A személyre szabási platformodon rendeld minden változatot a célszegmenséhez. Határozz meg alapértelmezést azoknak a látogatóknak, akik egyik szegmensbe sem illenek. Ellenőrizd, hogy a megfelelő képek jelennek-e meg a megfelelő látogatóknak, minden szegmensből vett tesztfiókokkal előnézetben megnézve.
5. lépés: mérj és iterálj. A konverziós rátát szegmensenként kövesd, ne csak összesítve. Egy hero kép, amely növeli a gyártóipari látogatók konverzióját, ronthatja a SaaS látogatókét. Futtass A/B teszteket minden szegmensen belül, hogy a képcserék hatását elkülönítsd a többi oldalelemétől. A mintaméretet a teszt indulása előtt határozd meg (az A/B teszt mintaméret útmutatónk megmutatja, hogyan), futtasd legalább két teljes hétig, és ne állítsd le idő előtt csak azért, mert jól néz ki az irányítópult.
Technikai teljesítmény: sebesség vs. vizuális minőség
Egy későn megérkező személyre szabott hero rosszabb, mint egy időben megjelenő általános. A hero kép gyakran a Largest Contentful Paint elem, így a mérete és a betöltési sorrendje dönti el, milyen gyorsnak érződik az oldal.
Használj modern formátumokat. A Google dokumentációja szerint a veszteséges WebP képek 25–34%-kal kisebbek a hasonló JPEG-eknél, a veszteségmentes WebP képek pedig 26%-kal kisebbek a PNG-knél. Az AVIF gyakran még jobban tömörít. AVIF-et vagy WebP-t szolgálj ki JPEG tartalékkal a <picture> elemen keresztül.
Ahelyett, hogy valaki más méretkorlátait másolnád, állíts fel költségkeretet a saját oldalaidra: nézd meg a hero fájlméretét és az LCP-t a PageSpeed Insightsban mobilprofillal, és minden olyan változatot, amely érezhetően nehezebb az alapértelmezettnél, kezelj hibaként.
Használj reszponzív képeket srcset attribútumokkal. Ha egy mobilos látogatónak 2000 px széles képet szolgálsz ki, pazarlod a sávszélességet, és késlelteted a megjelenítést. Hagyd, hogy a böngészők a nézetablak szélessége alapján válasszák ki a megfelelő méretű képet. Személyre szabott oldalaknál ez azt jelenti, hogy minden képvariánsnak saját reszponzív méretkészlet kell, de ezt a build eszközök automatizálhatják.
A hero képet ne töltsd be lustán. A hajtás felett van, így a lusta betöltés késleltetné; inkább jelöld meg a fetchpriority="high" attribútummal, és csak a lejjebb lévő képeket töltsd be lustán. Szegmensváltozatoknál a legtisztább megoldás a szerveren vagy az edge-en dönt a változatról, így a megfelelő kép már kezdettől a HTML-ben van. Ha a csere kliensoldalon történik, foglald le a kép méreteit, hogy az elrendezés ne ugorjon betöltéskor.
Akadálymentesség minden képvariánsnál
Minden személyre szabott képváltozatnak saját alt szövegre van szüksége. Egy gyártási munkafolyamatot ábrázoló hero képnek azt a jelenetet leíró alt szöveg kell, nem egy általános, bármelyik változatra ráillő alt szöveg. A képernyőolvasók azt olvassák fel, ami az oldalon van, és az alt szövegnek azt kell tükröznie, amit az adott szegmens látó látogatói ténylegesen látnak.
A jó alt szöveg tömören leírja a kép tartalmát, és a környező kontextushoz kapcsolja. 100 karakter alatt tartsd. A dekoratív képeknél (hátterek, térközök) üres alt attribútumot használj, hogy a képernyőolvasók átugorják őket. A funkcionális képeknél, például a linkelt grafikáknál az alt szöveg a link célját írja le.
A be nem töltődő képek helyén vizuálisan megjelenik az alt szöveg, vagyis az alt szöveg a lassú kapcsolaton böngésző, látó látogatóknak is tartalékként szolgál. Ha perszonalizált képváltozataid vannak, ez egy újabb ok arra, hogy minden változat egyedi, leíró alt szöveget kapjon egy közös helykitöltő helyett.
Gyakori hibák a perszonalizált vizuális elemeknél
A képpersonalizációval most ismerkedő csapatok gyakran túlzásba viszik. Ha az oldal minden képét látogatói szegmens szerint cseréled, az karbantartási terhet jelent, és felhígítja a valóban fontos változtatások hatását. A personalizációt az egy-két legnagyobb hatású képhelyre összpontosítsd (általában a hero és az elsődleges társadalmi bizonyíték szakasz), a többit hagyd egységesen.
Egy másik gyakori hiba, hogy a szegmensadatokból tolakodónak ható feltételezéseket vonnak le. Ha a látogatónak a saját céglogóját mutatod, mielőtt azonosította volna magát, átlépsz egy határt. Ha az iparágához kapcsolódó képeket mutatsz, az hasznos. Ha az irodaházát mutatod, az nyugtalanító. A különbség a kontextuális relevancia és a megfigyelés között van.
Harmadik buktató, ha túl sok változatot tesztelsz egyszerre. Négy szegmens három képhellyel, mindegyiken néhány változattal már tucatnyi kombinációt ad, jóval többet, mint amennyit a B2B forgalom tesztelni tud. Szegmensenként egyszerre egy változót tesztelj, várd ki a statisztikai szignifikanciát, és építs bizalmat minden változtatásban, mielőtt újabbakat raknál rá.
Azoknak a csapatoknak, amelyek egy átfogóbb B2B landing page optimalizálási terven dolgoznak, a képperszonalizáció ésszerű korai lépés, mert kevesebb új tartalmat igényel, mint a szövegperszonalizáció. A bökkenő az, hogy valódi, szegmensspecifikus vizuális anyagok kellenek hozzá; ha csak iparáganként egy-egy másik stockfotót tudsz előállítani, inkább a szövegre fordítsd az időt.
Hol kezdd
Vedd a legnagyobb forgalmú landing page-edet, és nézd meg a hero képet egyetlen kérdéssel: ráismerne-e a legnagyobb szegmensedből érkező látogató a saját munkájára? Ha nem, cseréld le egy olyan termékképernyőképre vagy ügyfélfotóra, amelyre ráismerne, és teszteld a jelenlegi ellen. Csak ha egy valódi kép legyőzi a stockfotót, akkor érdemes szegmensenként változatokat készíteni. A Markettailor összeköti a látogatóazonosítási adatokat az oldalon megjelenő tartalommal, a képeket is beleértve, ha a szabályok saját felépítése nélkül szeretnéd kiszolgálni ezeket a változatokat.
