Kupující z výroby přijde na váš web a v hlavní sekci uvidí obrázek elegantního SaaS dashboardu. Přijde potenciální zákazník z fintechu a dostane stejný obrázek. Ani jeden nemá pocit, že stránka vznikla pro něj, a oba během pár vteřin odejdou. Problém není v tom, že by landing pages chyběly obrázky. Problém je, že se všem ukazují stejné obrázky bez ohledu na to, kdo jsou a co potřebují.
Obrázky na landing pages se vybírají jednou, obvykle tím, kdo stránku navrhl, a pak se ukazují všem návštěvníkům. Na B2B webu s několika odvětvími a rolemi kupujících to znamená, že většina návštěvníků vidí obrázek z cizího světa. Sladění hlavního obrázku s odvětvím, rolí nebo fází návštěvníka je jednou z levnějších forem personalizace, protože nevyžaduje nové texty, ale pomůže jen tehdy, když obrázek říká něco konkrétního. Tento článek popisuje, k čemu je který typ obrázku, kdy se vyplatí video, jak mapovat vizuály na segmenty a detaily výkonu a přístupnosti, které rozhodují o tom, zda něco z toho funguje.
Proč obecné obrázky na landing pages v B2B selhávají
Obrázky jsou obvykle první, na čem utkví oko návštěvníka, takže formují první dojem ještě před přečtením nadpisu. Obecný obrázek sám o sobě příliš neuškodí; cenou je promarněná šance ukázat návštěvníkovi něco, co pozná.
Pro B2B firmy s více nákupními personami představuje jediná sada obrázků strukturální nevýhodu. VP of Engineering, který hodnotí vaši platformu, má jiná vizuální očekávání než CMO, který dělá totéž. Jeden chce vidět technickou architekturu, integrace nebo toky dat. Druhý reaguje na dashboardy, metriky kampaní nebo grafy ROI. Když oba vidí stejnou obecnou fotku kanceláře, ani jeden nedostane signál relevance, který by ho udržel u scrollování. Totéž platí pro reklamu, která je přivedla; jak udržet obsahovou kreativu v souladu se stránkou, popisuje náš průvodce kdy použít responzivní obsahové reklamy.
Typickým viníkem jsou fotky z fotobanky s lidmi, kteří si podávají ruce ve skleněné kanceláři. Snadno se poznají jako stock, takže nic nepřidávají, a zabírají místo, kde mohl být snímek produktu, skutečný zákazník nebo diagram workflow. Pokud na vizuálech landing page testujete jednu věc, otestujte skutečný obrázek (váš produkt, vaše zákazníky, váš tým) proti fotce z fotobanky.
Sladění vizuálů se segmenty návštěvníků
Smyslem personalizovaných obrázků je zkrátit dobu mezi příchodem a pocitem „tohle je pro mě“. Prakticky to uděláte tak, že varianty obrázků přiřadíte segmentům, které už sledujete. Pokud pomocí identifikace návštěvníků zjišťujete odvětví, velikost nebo geografii firmy, tytéž údaje mohou určovat, které obrázky se na stránce zobrazí.
Způsoby, jak přiřadit obrázky k segmentům:
Vizuály podle odvětví. Návštěvníkům z výroby ukažte výrobní halu. Finančním službám obchodní stůl. Zdravotnictví nemocniční provoz. Prodávaný produkt je stejný, ale vizuální kontext se mění tak, aby odpovídal každodenní realitě návštěvníka.
Vizuály podle role. Techničtí kupující reagují na diagramy architektury, ukázky kódu a toky integrací. Obchodní kupující reagují na dashboardy, grafy a metriky výsledků. Sladění vizuálního jazyka s odborností kupujícího signalizuje, že rozumíte jeho pohledu.
Vizuály podle fáze. Návštěvníkům, kteří přišli poprvé, pomohou ilustrace přínosů na vysoké úrovni, které ukážou, co děláte. Vracející se návštěvníci, kteří už produktový obsah viděli, lépe reagují na podrobné snímky obrazovky, srovnávací tabulky nebo důkazy od zákazníků.
Velikost firmy. Návštěvníci z velkých firem mohou reagovat na obrázky ukazující rozsah, bezpečnostní certifikace nebo workflow více týmů. Menší firmy oslovují obrázky ukazující rychlost, jednoduchost a rychlé výsledky.
Typy obrázků a kdy který funguje nejlépe
Různé vizuální prvky plní na landing page různé funkce. Pochopení těchto rozdílů vám pomůže vědomě rozhodnout, co personalizovat a co nechat statické.
Úvodní obrázky vytvářejí první dojem a rámují celou hodnotovou nabídku. Zabírají nejcennější místo na stránce. Hero obrázek, který ukazuje produkt v použití, ideálně na datech nebo v prostředí, které návštěvník zná, řekne víc než abstraktní grafika. Na personalizovaných stránkách je hero přirozeně prvním prvkem, který se vyplatí obměňovat, protože ho vidí každý, kdo na stránku přijde.
Snímky produktu poskytují konkrétní důkaz toho, co prodáváte, ale při neuváženém použití mohou stránku zahltit. Jeden komentovaný snímek zvýrazňující funkce nejrelevantnější pro případ použití návštěvníka funguje lépe než několik nekomentovaných. Pokud vám data ze segmentace říkají, že návštěvníka zajímá analytika, ukažte analytický dashboard. Pokud ho zajímají integrace, ukažte panel integrací.
Ilustrace a grafika na míru vynikají ve zjednodušování složitých věcí. Když potřebujete vysvětlit abstraktní workflow nebo vícekrokový proces, ilustrace na míru sdělí za pár sekund to, co by jinak zabralo odstavce. Hodí se zejména pro personalizované stránky, kde se vysvětlení musí přizpůsobit technické vyspělosti návštěvníka. Do briefu pro texty landing page si poznamenejte, jaký vizuál každá sekce potřebuje, aby se design a texty plánovaly společně.
Obrázky se sociálním důkazem zahrnují loga zákazníků, fotky týmu a náhledy případových studií. Lze je personalizovat tak, že ukážete loga z odvětví nebo velikostní úrovně návštěvníka. Středně velká SaaS firma, která vidí loga jiných středně velkých SaaS firem, je uklidněná víc, než když vidí loga z Fortune 500, se kterými se nemůže ztotožnit. Naše příklady B2B landing pages ukazují, kterým důkazem by měl každý typ stránky začínat.
Obrázky na pozadí vytvářejí atmosféru, aniž by si žádaly pozornost. Jemné přechody nebo geometrické vzory často fungují lépe než fotografická pozadí, protože dodají hloubku bez rozptylování. Personalizaci potřebují jen zřídka, protože jejich úlohou je podporovat, ne signalizovat relevanci.
Video na landing page: kdy si své místo zaslouží
Video je nejtěžší vizuál, který můžete přidat, jak co do váhy stránky, tak co do pozornosti, kterou vyžaduje. Náš názor: video na landing page by mělo odpovědět na jednu otázku, na kterou návštěvník nemůže odpovědět ze snímku obrazovky, obvykle „jak to vypadá, když to někdo skutečně používá?“ Pokud video opakuje nadpis s hudbou v pozadí, dobře zvolený snímek obrazovky odvede stejnou práci rychleji. O videu mimo landing pages pojednává náš průvodce B2B video marketingem.
Kde se video na B2B stránkách obvykle vyplatí:
- Ukázky produktu na stránkách s demem a registrací. Šedesát až devadesát sekund ukazujících hlavní pracovní postup umožní návštěvníkovi se kvalifikovat dřív, než si zarezervuje hovor. Kurzor veďte pomalu a uživatelské rozhraní ať je čitelné ve velikosti, ve které se video přehrává.
- Zákaznické příběhy na stránkách pro pozdní fázi. Zákazník, který vlastními slovy popisuje problém, je důkaz, který logo dát nemůže. Umístěte ho vedle tvrzení, které podporuje, ne do samostatné videogalerie.
- Stránky webinářů a akcí. Třicetisekundový klip s řečníkem ukáže, že session stojí za čas. Po akci ho nahradí záznam.
A kde obvykle ne: jako automaticky přehrávaná smyčka na pozadí za nadpisem (konkuruje textu a stojí čas načítání) a jako jediný způsob, jak získat klíčové informace (mnoho B2B návštěvníků prochází web v práci s vypnutým zvukem).
Jak přidat video bez zpomalení stránky
- Použijte náhledový obrázek a přehrávač načtěte po kliknutí. Plné vložení z YouTube nebo Vimea načte své skripty dřív, než kdokoli stiskne přehrát. Dokumentace Google Lighthouse doporučuje líné načítání vložených prvků třetích stran za fasádou, tedy statickým náhledem, který při interakci zamění skutečný přehrávač.
- Vložené prvky pod ohybem načítejte líně. Přidání
loading="lazy"do iframů odloží přehrávače mimo obrazovku, jak popisuje průvodce web.dev k línému načítání iframů. - Všechno opatřete titulky. Titulky slouží divákům s vypnutým zvukem a u předtočeného videa se zvukem jsou požadavkem přístupnosti.
- CTA musí být vidět i bez videa. Formulář ani tlačítko by nikdy nemělo záviset na tom, že někdo video dokouká do konce.
Jak měřit, zda video pomáhá
Rozšířené měření v GA4 zaznamenává události video_start, video_progress a video_complete u vložených videí z YouTube, která mají zapnutou podporu JS API. Dvě čísla jsou důležitější než zhlédnutí: míra přehrání (přehrání dělená počtem návštěvníků stránky) a konverzní poměr návštěvníků, kteří video přehráli, oproti těm, kteří ne. U toho druhého buďte opatrní. Návštěvníci, kteří stisknou přehrát, jsou už tak zapojenější, takže vyšší konverzní poměr mezi diváky nedokazuje, že ho způsobilo video. Férovým testem je A/B test stránky s videem a bez něj, vyhodnocený podle konverzí, ne podle doby sledování.
Video se také dobře personalizuje. Návštěvník z výroby a návštěvník ze softwaru mohou vidět stejnou prohlídku natočenou na dvou různých demo datových sadách, což je levnější, než to zní, jakmile scénář existuje.
Vizuální hierarchie na personalizovaných stránkách
Obrázky ovlivňují, jak návštěvníci stránkou procházejí. Na stránkách s množstvím textu lidé obvykle přejedou očima horní část a pak levou stranu dolů (vzor F); na řídkých stránkách oko často kličkuje zleva nahoře doprava nahoru a dolů. Obrázky umisťujte s ohledem na tyto cesty.
Personalizovaný hlavní obrázek umístěte do horní části písmene F, kam oči dopadnou nejdřív. Podpůrné vizuály patří podél svislé čtecí dráhy. Pokud v obrázcích používáte směrová vodítka, například pohled osoby nebo šipku v diagramu, nasměrujte je k výzvě k akci, ne od ní.
Velikost vytváří hierarchii. Větší obrázky signalizují důležitost. Pokud chcete, aby se návštěvník z cílového účtu soustředil na konkrétní výsledek nebo funkci, udělejte z tohoto obrázku dominantní vizuál stránky. Vedlejší obrázky, jako loga zákazníků nebo doplňkové snímky obrazovky, by měly zůstat menší, aby posilovaly, a nekonkurovaly.
Dejte hlavnímu obrázku prostor. Jeden jasný obrázek odpovídající segmentu s volným místem kolem se čte rychleji než tři natěsnané, které soupeří o pozornost, a udržujete jen jednu variantu místo tří.
Postup krok za krokem pro personalizaci obrázků na landing page
Zavedení personalizace obrázků nevyžaduje přestavbu celého webu. Tady je praktický postup, který začíná v malém a postupně se rozšiřuje.
Krok 1: Vyberte své největší kvalifikované segmenty. Vytáhněte data z analytiky nebo nástroje pro identifikaci návštěvníků. Která odvětví, velikosti firem nebo role tvoří většinu vaší kvalifikované návštěvnosti? Začněte segmenty, které jsou dost velké na měření a dost odlišné, aby různé obrázky skutečně dávaly smysl.
Krok 2: projděte obrázky na současných landing pages. Sepište každý obrázek na svých nejnavštěvovanějších landing pages. U každého se zeptejte: osloví všechny tři segmenty stejně? Pokud ano, je to buď silný univerzální obrázek, nebo obecný obrázek, který neosloví nikoho. Označte obrázky, u kterých by varianta pro konkrétní segment mohla přidat relevanci.
Krok 3: Pro každý označený slot vytvořte 2–3 varianty obrázku. Nepotřebujete kompletní redesign. U obrázků v hlavní sekci to může znamenat tři verze stejného rozvržení s jiným obrázkem na pozadí, jinými snímky produktu nebo jinými ilustracemi případů užití. Kompozici a umístění CTA zachovejte stejné, abyste testovali obsah obrázku, ne strukturu stránky.
Krok 4: Nastavte pravidla zobrazení podle segmentů. Ve své personalizační platformě přiřaďte každou variantu k cílovému segmentu. Definujte výchozí verzi pro návštěvníky, kteří neodpovídají žádnému segmentu. Ověřte, že se správným návštěvníkům zobrazují správné obrázky, pomocí náhledu s testovacími účty z každého segmentu.
Krok 5: Měřte a iterujte. Sledujte konverzní poměr podle segmentů, nejen celkově. Hlavní obrázek, který zvýší konverze u návštěvníků z výroby, může zhoršit výkon u návštěvníků ze SaaS. Spouštějte A/B testy v rámci každého segmentu, abyste oddělili dopad změny obrázku od ostatních prvků stránky. Velikost vzorku určete před spuštěním testu (jak na to, ukazuje náš průvodce velikostí vzorku A/B testu), testujte alespoň dva celé týdny a nekončete předčasně jen proto, že dashboard vypadá dobře.
Technický výkon: rychlost vs. vizuální kvalita
Personalizovaná hero sekce, která dorazí pozdě, je horší než obecná, která dorazí včas. Hero obrázek je často prvkem Largest Contentful Paint, takže jeho velikost a pořadí načítání rozhodují o tom, jak rychle stránka působí.
Používejte moderní formáty. Dokumentace Googlu uvádí, že ztrátové obrázky WebP jsou o 25–34 % menší než srovnatelné JPEG a bezeztrátové obrázky WebP o 26 % menší než PNG. AVIF často komprimuje ještě víc. Servírujte AVIF nebo WebP se záložním JPEG pomocí prvku <picture>.
Místo kopírování cizích limitů velikosti si stanovte rozpočet pro vlastní stránky: zkontrolujte velikost souboru hero sekce a LCP v PageSpeed Insights v mobilním profilu a každou variantu, která je znatelně těžší než výchozí verze, berte jako chybu.
Používejte responzivní obrázky s atributy srcset. Poslat mobilnímu návštěvníkovi obrázek široký 2000 px plýtvá daty a zdržuje vykreslení. Nechte prohlížeče vybrat obrázek vhodné velikosti podle šířky viewportu. U personalizovaných stránek to znamená, že každá varianta obrázku potřebuje vlastní sadu responzivních velikostí, ale build nástroje to umí zautomatizovat.
Hlavní obrázek nenačítejte líně. Je nad ohybem, takže líné načítání ho zdrží; označte ho místo toho pomocí fetchpriority="high" a líně načítejte jen obrázky níže. U variant pro segmenty je nejčistší řešení rozhodnout o variantě na serveru nebo na edge, aby byl správný obrázek v HTML od začátku. Pokud k výměně dochází na straně klienta, rezervujte rozměry obrázku, aby rozvržení po načtení neposkočilo.
Přístupnost všech variant obrázků
Každá personalizovaná varianta obrázku potřebuje vlastní alternativní text. Hero obrázek s výrobním procesem by měl mít alt text popisující tuto scénu, ne obecný alt text, který by se hodil k jakékoli variantě. Čtečky obrazovky oznamují, co je na stránce, a alt text by měl odpovídat tomu, co vidící návštěvníci v daném segmentu skutečně vidí.
Dobrý alternativní text stručně popisuje obsah obrázku a zároveň ho vztahuje k okolnímu kontextu. Držte ho pod 100 znaky. Dekorativní obrázky (pozadí, oddělovače) by měly mít prázdný atribut alt, aby je čtečky obrazovky přeskočily. Funkční obrázky, například grafika s odkazem, potřebují alternativní text popisující cíl odkazu.
Když se obrázek nenačte, zobrazí se alternativní text, takže slouží jako záloha i pro vidící návštěvníky na pomalém připojení. Pokud máte personalizované varianty obrázků, je to další důvod, proč každá varianta potřebuje jedinečný, popisný alternativní text místo sdíleného zástupného.
Časté chyby u personalizovaných vizuálů
Týmy, které s personalizací obrázků začínají, často personalizují příliš. Výměna každého obrázku na stránce podle segmentu návštěvníka vytváří zátěž pro údržbu a ředí dopad změn, na kterých skutečně záleží. Personalizaci soustřeďte na jednu nebo dvě pozice obrázků s největším dopadem (obvykle hero a hlavní sekci se sociálním důkazem) a zbytek nechte jednotný.
Další častou chybou je využívat data o segmentech k domněnkám, které působí dotěrně. Ukázat návštěvníkovi logo jeho firmy dřív, než se sám identifikoval, překračuje hranici. Ukázat obrázky relevantní pro jeho odvětví pomáhá. Ukázat jeho kancelářskou budovu znepokojuje. Rozdíl je mezi kontextovou relevancí a sledováním.
Třetí nástrahou je testování příliš mnoha variant najednou. Čtyři segmenty krát tři sloty pro obrázky, každý s pár variantami, dají desítky kombinací, mnohem víc, než dokáže B2B návštěvnost otestovat. V každém segmentu testujte jednu proměnnou najednou, počkejte na statistickou významnost a ke každé změně si vybudujte důvěru, než přidáte další vrstvu.
Pro týmy, které pracují na širším plánu optimalizace B2B landing pages, je personalizace obrázků rozumným prvním krokem, protože vyžaduje méně nového obsahu než personalizace textů. Háček je v tom, že závisí na skutečných vizuálech pro jednotlivé segmenty; pokud zvládnete jen jinou fotku z fotobanky pro každé odvětví, věnujte čas raději textům.
Kde začít
Vezměte landing page s největší návštěvností a podívejte se na hero obrázek s jedinou otázkou: poznal by v něm návštěvník z vašeho největšího segmentu svou vlastní práci? Pokud ne, nahraďte ho snímkem produktu nebo fotkou zákazníka, kterou by poznal, a otestujte ji proti současné. Teprve až skutečný obrázek porazí ten z fotobanky, vyplatí se vyrábět varianty pro jednotlivé segmenty. Markettailor propojuje data z identifikace návštěvníků s obsahem stránky, včetně obrázků, pokud chcete tyto varianty zobrazovat, aniž byste sami stavěli pravidla.
