Valmistavan teollisuuden ostaja saapuu verkkosivustollesi ja näkee hero-kuvan tyylikkäästä SaaS-dashboardista. Fintech-prospekti saapuu ja saa saman kuvan. Kumpikaan ei koe, että sivu olisi tehty hänelle, ja molemmat lähtevät sekunneissa. Ongelma ei ole se, että laskeutumissivuilta puuttuisi kuvia. Ongelma on se, että samat kuvat näytetään kaikille riippumatta siitä, keitä he ovat tai mitä he tarvitsevat.
Laskeutumissivujen kuvat valitaan kerran, yleensä sivun suunnittelijan toimesta, ja sitten niitä näytetään jokaiselle kävijälle. B2B-sivustolla, jolla on useita toimialoja ja ostajarooleja, tämä tarkoittaa, että useimmat kävijät näkevät kuvan jonkun muun maailmasta. Pääkuvan sovittaminen kävijän toimialaan, rooliin tai vaiheeseen on yksi edullisimmista personoinnin muodoista, koska se ei vaadi uutta tekstiä, mutta se auttaa vain, jos kuva sanoo jotain täsmällistä. Tämä kirjoitus käy läpi, mihin kukin kuvatyyppi sopii, milloin video on vaivan arvoinen, miten visuaalit yhdistetään segmentteihin sekä suorituskyky- ja saavutettavuusyksityiskohdat, jotka ratkaisevat, toimiiko mikään tästä.
Miksi geneeriset laskeutumissivukuvat epäonnistuvat B2B:ssä
Kuvat ovat yleensä ensimmäinen asia, johon kävijän katse osuu, joten ne muokkaavat ensivaikutelmaa ennen kuin otsikkoa on luettu. Geneerinen kuva ei sinänsä haittaa paljon; hinta on menetetty tilaisuus näyttää kävijälle jotain, jonka hän tunnistaa.
B2B-yrityksille, joilla on useita ostajapersoonia, yksi kuvasarja luo rakenteellisen haitan. Alustaasi arvioiva teknologiajohtaja odottaa erilaista visuaalista sisältöä kuin samaa tekevä markkinointijohtaja. Toinen haluaa nähdä teknisen arkkitehtuurin, integraatiot tai tietovirrat. Toinen reagoi kojelautoihin, kampanjamittareihin tai ROI-kaavioihin. Kun molemmat näkevät saman geneerisen toimistokuvan, kumpikaan ei saa relevanssisignaalia, joka pitää heidät vierittämässä. Sama koskee heidät tuonutta mainosta; oppaamme siitä, milloin käyttää responsiivisia display-mainoksia, kertoo display-luovien pitämisestä linjassa sivun kanssa.
Kuvapankkikuvat kättelevistä ihmisistä lasitoimistossa ovat tavallisin syyllinen. Ne on helppo tunnistaa kuvapankkikuviksi, joten ne eivät lisää mitään, ja ne vievät tilan, jossa olisi voinut olla tuotekuvakaappaus, oikea asiakas tai kaavio työnkulusta. Jos testaat laskeutumissivun visuaaleista yhden asian, testaa oikeaa kuvaa (tuotteesi, asiakkaasi, tiimisi) kuvapankkikuvaa vastaan.
Visuaalien sovittaminen kävijäsegmentteihin
Personoitujen kuvien ajatus on lyhentää aikaa saapumisesta tunteeseen "tämä on minulle". Käytännössä se tehdään yhdistämällä kuvavariantit segmentteihin, joita jo seuraat. Jos käytät kävijätunnistusta yrityksen toimialan, koon tai maantieteen tunnistamiseen, samat tiedot voivat ohjata, mitkä kuvat sivulla näkyvät.
Tapoja yhdistää segmentit kuviin:
Toimialakohtaiset visuaalit. Näytä tehdashalli valmistavan teollisuuden kävijöille. Näytä kaupankäyntipöytä rahoitusalan kävijöille. Näytä sairaalan työnkulku terveydenhuollon kävijöille. Myytävä tuote on sama, mutta visuaalinen konteksti muuttuu vastaamaan kävijän arkea.
Roolikohtaiset visuaalit. Tekniset ostajat reagoivat arkkitehtuurikaavioihin, koodiesimerkkeihin ja integraatiovirtoihin. Liiketoimintaostajat reagoivat kojelautoihin, kaavioihin ja tulosmittareihin. Visuaalisen kielen sovittaminen ostajan osaamiseen viestii, että ymmärrät hänen näkökulmansa.
Vaihekohtaiset kuvat. Ensikertalaiset kävijät hyötyvät yleistason hyötykuvituksista, jotka kertovat, mitä teette. Palaavat kävijät, jotka ovat jo tutustuneet tuotesisältöön, reagoivat paremmin yksityiskohtaisiin kuvakaappauksiin, vertailutaulukoihin tai asiakasnäyttöön.
Yrityksen koko. Enterprise-vierailijat voivat reagoida kuviin, jotka näyttävät mittakaavaa, tietoturvasertifikaatteja tai useiden tiimien työnkulkuja. Pienemmät yritykset samaistuvat kuviin, jotka näyttävät nopeutta, yksinkertaisuutta ja nopeita voittoja.
Kuvatyypit ja milloin kukin toimii parhaiten
Eri visuaaliset elementit palvelevat laskeutumissivulla eri tehtäviä. Näiden erojen ymmärtäminen auttaa tekemään tietoisia valintoja siitä, mitä personoida ja mitä pitää staattisena.
Hero-kuvat luovat ensivaikutelman ja kehystävät koko arvolupauksen. Ne vievät sivun arvokkaimman tilan. Hero, joka näyttää tuotteen käytössä, mieluiten datalla tai ympäristössä, jonka kävijä tunnistaa, kertoo enemmän kuin abstrakti grafiikka. Personoiduilla sivuilla hero on luonteva ensimmäinen vaihdeltava elementti, koska jokainen sivulle saapuva näkee sen.
Tuotekuvakaappaukset ovat konkreettinen todiste siitä, mitä myyt, mutta huolimattomasti käytettyinä ne voivat tehdä sivuista sekavia. Yksi selitetty kuvakaappaus, joka korostaa kävijän käyttötapaukseen olennaisimpia ominaisuuksia, toimii paremmin kuin useampi selittämätön. Jos segmentointidatasi kertoo, että kävijä on kiinnostunut analytiikasta, näytä analytiikan koontinäyttö. Jos häntä kiinnostavat integraatiot, näytä integraationäkymä.
Kuvitukset ja räätälöidyt grafiikat ovat erinomaisia monimutkaisuuden yksinkertaistamisessa. Kun pitää selittää abstrakti työnkulku tai monivaiheinen prosessi, räätälöity kuvitus kertoo sekunneissa sen, mihin tarvittaisiin kappaleita. Ne ovat erityisen hyödyllisiä personoiduilla sivuilla, joilla selityksen on mukauduttava vierailijan tekniseen osaamistasoon. Merkitse laskeutumissivun copy-briiffiin, mitä visuaalia kukin osio tarvitsee, jotta design ja teksti suunnitellaan yhdessä.
Sosiaalisen todisteen kuviin kuuluvat asiakaslogot, tiimikuvat ja asiakastarinoiden pikkukuvat. Niitä voi personoida näyttämällä logoja kävijän toimialalta tai kokoluokasta. Keskisuuri SaaS-yritys vakuuttuu enemmän nähdessään muiden keskisuurten SaaS-yritysten logoja kuin Fortune 500 -logoja, joihin se ei voi samaistua. B2B-laskeutumissivuesimerkkimme näyttävät, millä näytöllä kunkin sivutyypin kannattaa aloittaa.
Taustakuvat luovat tunnelmaa vaatimatta huomiota. Hienovaraiset liukuvärit tai geometriset kuviot toimivat usein paremmin kuin valokuvataustat, koska ne tuovat syvyyttä häiritsemättä. Niitä tarvitsee harvoin personoida, koska niiden tehtävä on tukea, ei viestiä relevanssia.
Video laskeutumissivulla: milloin se ansaitsee paikkansa
Video on raskain lisättävä visuaalinen elementti, sekä sivun painossa että sen vaatimassa huomiossa. Näkemyksemme: laskeutumissivun videon pitäisi vastata yhteen kysymykseen, johon kävijä ei saa vastausta kuvakaappauksesta, yleensä "miltä tämä näyttää, kun joku oikeasti käyttää sitä?" Jos video toistaa otsikon musiikin kera, hyvin valittu kuvakaappaus tekee saman työn nopeammin. Laskeutumissivuja laajemmasta videosta kerrotaan B2B-videomarkkinoinnin oppaassamme.
Missä video yleensä kannattaa B2B-sivuilla:
- Tuote-esittelyt demo- ja rekisteröitymissivuilla. 60–90 sekuntia ydintyönkulkua näyttävä video antaa kävijän todeta sopivuutensa ennen puhelun varaamista. Pidä kursori hitaana ja käyttöliittymä luettavana siinä koossa, jossa video toistuu.
- Asiakastarinat ostopolun loppuvaiheen sivuilla. Asiakas, joka selittää ongelman omin sanoin, on todiste, jota logo ei voi antaa. Sijoita se sen väitteen viereen, jota se tukee, älä erilliseen videogalleriaan.
- Webinaari- ja tapahtumasivut. 30 sekunnin puhujaklippi näyttää, että sessio on ajan arvoinen. Tapahtuman jälkeen tallenne korvaa sen.
Ja missä se ei yleensä toimi: automaattisesti toistuvana taustasilmukkana otsikon takana (se kilpailee tekstin kanssa ja maksaa latausaikaa) ja ainoana tapana saada keskeinen tieto (moni B2B-kävijä selaa töissä äänet pois päältä).
Videon lisääminen hidastamatta sivua
- Käytä esikatselukuvaa ja lataa soitin klikkauksesta. Täysi YouTube- tai Vimeo-upotus lataa skriptinsä ennen kuin kukaan painaa toistoa. Googlen Lighthouse-dokumentaatio suosittelee kolmannen osapuolen upotusten laiskalatausta julkisivun takana, eli staattista esikatselua, joka vaihtuu oikeaksi soittimeksi vuorovaikutuksessa.
- Lataa sivun alaosan upotukset laiskasti. Kun iframeihin lisätään
loading="lazy", näkymän ulkopuoliset soittimet ladataan myöhemmin, kuten web.dev:n opas iframejen laiskalataukseen kuvaa. - Tekstitä kaikki. Tekstitykset palvelevat ilman ääntä katsovia, ja ne ovat saavutettavuusvaatimus ennalta tallennetulle videolle, jossa on ääntä.
- Pidä CTA näkyvissä ilman videota. Lomakkeen tai painikkeen ei pitäisi koskaan riippua siitä, että joku katsoo loppuun asti.
Sen mittaaminen, auttaako video
GA4:n tehostettu mittaus tallentaa video_start-, video_progress- ja video_complete-tapahtumat upotetuista YouTube-videoista, joissa JS API -tuki on käytössä. Kaksi lukua on katselukertoja tärkeämpiä: toistoaste (toistot jaettuna sivun kävijöillä) ja toistaneiden kävijöiden konversioaste verrattuna niihin, jotka eivät toistaneet. Ole jälkimmäisen kanssa varovainen. Toistoa painavat kävijät ovat jo valmiiksi sitoutuneempia, joten katsojien korkeampi konversioaste ei todista videon aiheuttaneen sitä. Reilu testi on sivun A/B-testi videon kanssa ja ilman, ja sitä arvioidaan konversioilla, ei katseluajalla.
Video personoituu myös hyvin. Teollisuuden ja ohjelmistoalan kävijä voivat nähdä saman läpikäynnin kahdella eri demodatalla tallennettuna, mikä on halvempaa kuin miltä kuulostaa, kun käsikirjoitus on olemassa.
Visuaalinen hierarkia personoiduilla sivuilla
Kuvat ohjaavat sitä, miten kävijät liikkuvat sivulla. Tekstipainotteisilla sivuilla ihmiset silmäilevät yleensä yläosan poikki ja sitten alas vasenta reunaa (F-kuvio); väljillä sivuilla katse kulkee usein siksakkia vasemmasta yläkulmasta oikeaan yläkulmaan ja alas. Sijoita kuvat nämä reitit huomioiden.
Sijoita personoitu hero-kuvasi F-kuvion yläosaan, johon katse osuu ensin. Tukevat visuaalit kulkevat pystysuuntaista silmäilyreittiä pitkin. Jos käytät kuvissa suuntaa näyttäviä vihjeitä, kuten henkilön katsetta tai kaavion nuolta, suuntaa ne kohti toimintakehotustasi eikä poispäin siitä.
Koko luo hierarkian. Suuremmat kuvat viestivät tärkeydestä. Jos haluat kohdeyrityksen kävijän keskittyvän tiettyyn lopputulokseen tai kyvykkyyteen, tee siitä kuvasta sivun hallitseva visuaali. Toissijaisten kuvien, kuten asiakaslogojen tai tukevien kuvakaappausten, pitää pysyä pienempinä, jotta ne vahvistavat kilpailematta.
Anna pääkuvalle tilaa. Yksi selkeä, segmenttiin sopiva kuva väljästi sijoitettuna luetaan nopeammin kuin kolme ahdettua huomiosta kilpailevaa, ja ylläpidettävänä on yksi versio kolmen sijaan.
Vaiheittainen työnkulku laskeutumissivujen kuvien personointiin
Kuvien personointi ei vaadi koko sivuston uudelleenrakentamista. Tässä käytännön työnkulku, joka alkaa pienestä ja skaalautuu.
Vaihe 1: Valitse suurimmat kelpaavat segmenttisi. Hae data analytiikka- tai kävijätunnistustyökalustasi. Mitkä toimialat, yrityskoot tai roolit muodostavat valtaosan kelpaavasta liikenteestäsi? Aloita segmenteistä, jotka ovat riittävän suuria mitattaviksi ja riittävän erilaisia, jotta eri kuvat olisivat aidosti järkeviä.
Vaihe 2: Käy läpi nykyiset laskeutumissivujesi kuvat. Listaa jokainen kuva liikenteeltään suurimmilla laskeutumissivuillasi. Kysy kunkin kohdalla: puhutteleeko tämä kaikkia kolmea segmenttiä yhtä paljon? Jos kyllä, se on joko vahva yleiskuva tai geneerinen kuva, joka ei puhuttele ketään. Merkitse kuvat, joissa segmenttikohtainen variantti voisi lisätä relevanssia.
Vaihe 3: Luo 2–3 kuvavarianttia jokaiseen merkittyyn paikkaan. Et tarvitse täydellistä uudistusta. Hero-kuvien kohdalla tämä voi tarkoittaa kolmea versiota samasta asettelusta eri taustakuvilla, eri tuotekuvakaappauksilla tai eri käyttötapauskuvituksilla. Pidä sommittelu ja CTA:n sijainti samana, jotta testaat kuvan sisältöä etkä sivun rakennetta.
Vaihe 4: Määritä segmenttipohjaiset näyttösäännöt. Liitä personointialustallasi jokainen versio kohdesegmenttiinsä. Määritä oletus kävijöille, jotka eivät osu mihinkään segmenttiin. Testaa, että oikeat kuvat näkyvät oikeille kävijöille, esikatselemalla testitileillä jokaisesta segmentistä.
Vaihe 5: mittaa ja iteroi. Seuraa konversioastetta segmenteittäin, älä vain kokonaisuutena. Hero-kuva, joka nostaa teollisuuden vierailijoiden konversioita, voi heikentää SaaS-vierailijoiden tuloksia. Aja A/B-testejä kunkin segmentin sisällä erottaaksesi kuvamuutosten vaikutuksen muista sivun elementeistä. Päätä otoskoko ennen testin alkua (A/B-testin otoskoko -oppaamme näyttää miten), aja vähintään kaksi kokonaista viikkoa äläkä lopeta ennenaikaisesti siksi, että kojelauta näyttää hyvältä.
Tekninen suorituskyky: nopeus vs. visuaalinen laatu
Myöhässä saapuva personoitu hero-osio on huonompi kuin ajallaan saapuva yleinen. Hero-kuva on usein Largest Contentful Paint -elementti, joten sen koko ja latausjärjestys ratkaisevat, kuinka nopealta sivu tuntuu.
Käytä moderneja tiedostomuotoja. Googlen dokumentaation mukaan häviölliset WebP-kuvat ovat 25–34 % pienempiä kuin vastaavat JPEG-kuvat ja häviöttömät WebP-kuvat 26 % pienempiä kuin PNG-kuvat. AVIF pakkaa usein vielä enemmän. Tarjoa AVIF tai WebP JPEG-varavaihtoehdolla <picture>-elementin avulla.
Sen sijaan että kopioisit jonkun toisen kokorajat, aseta budjetti omille sivuillesi: tarkista hero-osion tiedostokoko ja LCP PageSpeed Insightsissa mobiiliprofiililla ja käsittele virheenä jokaista versiota, joka on huomattavasti oletusta raskaampi.
Käytä responsiivisia kuvia srcset-attribuuteilla. 2000 pikseliä leveän kuvan tarjoaminen mobiilikävijälle tuhlaa kaistaa ja viivästyttää renderöintiä. Anna selainten valita sopivan kokoinen kuva näkymän leveyden mukaan. Personoiduilla sivuilla tämä tarkoittaa, että jokainen kuvavariantti tarvitsee omat responsiiviset kokonsa, mutta käännöstyökalut voivat automatisoida tämän.
Älä lataa heroa laiskasti. Se on näkymän yläosassa, joten laiska lataus viivästyttää sitä; merkitse se sen sijaan fetchpriority="high"-attribuutilla ja lataa laiskasti vain alempana olevat kuvat. Segmenttiversioissa siistein ratkaisu päättää version palvelimella tai reunaverkossa, jolloin oikea kuva on HTML:ssä alusta asti. Jos vaihto tapahtuu selaimessa, varaa kuvalle mitat, jotta asettelu ei hypi sen latautuessa.
Saavutettavuus kaikissa kuvavarianteissa
Jokainen personoitu kuvaversio tarvitsee oman alt-tekstinsä. Valmistuksen työnkulkua esittävällä hero-kuvalla pitää olla alt-teksti, joka kuvaa juuri sitä näkymää, eikä geneeristä alt-tekstiä, joka sopisi mihin tahansa versioon. Ruudunlukijat kertovat, mitä sivulla on, ja alt-tekstin pitää vastata sitä, mitä kyseisen segmentin näkevät kävijät oikeasti näkevät.
Hyvä alt-teksti kuvaa kuvan sisällön tiiviisti ja liittää sen ympäröivään kontekstiin. Pidä se alle 100 merkissä. Koristekuvissa (taustat, välikkeet) alt-attribuutin pitäisi olla tyhjä, jotta ruudunlukijat ohittavat ne. Toiminnallisissa kuvissa, kuten linkitetyissä grafiikoissa, alt-tekstin pitää kuvata linkin kohde.
Kun kuvan lataus epäonnistuu, alt-teksti näytetään visuaalisesti, joten alt-teksti toimii varavaihtoehtona myös näkeville kävijöille hitailla yhteyksillä. Kun sinulla on personoituja kuvavariantteja, tämä on toinen syy, miksi jokainen variantti tarvitsee yksilöllisen, kuvaavan alt-tekstin yhteisen paikkamerkin sijaan.
Yleiset virheet personoiduissa kuvissa
Kuvien personointiin vasta tutustuvat tiimit personoivat usein liikaa. Jokaisen sivun kuvan vaihtaminen vierailijasegmentin mukaan luo ylläpitotaakan ja laimentaa niiden muutosten vaikutusta, joilla oikeasti on merkitystä. Keskitä personointi yhteen tai kahteen vaikuttavimpaan kuvapaikkaan (yleensä heroon ja tärkeimpään sosiaalisen todisteen osioon) ja pidä muut yhdenmukaisina.
Toinen yleinen virhe on käyttää segmenttidataa oletuksiin, jotka tuntuvat tunkeilevilta. Vierailijan yrityslogon näyttäminen ennen kuin hän on tunnistautunut ylittää rajan. Hänen toimialaansa liittyvien kuvien näyttäminen on hyödyllistä. Hänen toimistorakennuksensa näyttäminen on hämmentävää. Raja kulkee kontekstuaalisen relevanssin ja valvonnan välillä.
Liian monen version testaaminen kerralla on kolmas sudenkuoppa. Neljä segmenttiä kertaa kolme kuvapaikkaa parilla versiolla kussakin tuottaa jo kymmeniä yhdistelmiä, paljon enemmän kuin B2B-liikenne pystyy testaamaan. Testaa yhtä muuttujaa kerrallaan kunkin segmentin sisällä, odota tilastollista merkitsevyyttä ja varmistu jokaisesta muutoksesta ennen kuin lisäät uusia kerroksia.
Tiimeille, jotka toteuttavat laajempaa B2B-laskeutumissivujen optimoinnin suunnitelmaa, kuvien personointi on järkevä varhainen askel, koska se vaatii vähemmän uutta sisältöä kuin tekstien personointi. Ansa on, että se edellyttää aitoja, segmenttikohtaisia kuvia; jos pystyt tuottamaan vain eri kuvapankkikuvan jokaiselle toimialalle, käytä aika mieluummin teksteihin.
Mistä aloittaa
Ota eniten liikennettä saava laskeutumissivusi ja katso hero-kuvaa yhden kysymyksen kautta: tunnistaisiko suurimman segmenttisi kävijä siinä oman työnsä? Jos ei, korvaa se tuotekuvakaappauksella tai asiakaskuvalla, jonka hän tunnistaisi, ja testaa sitä nykyistä vastaan. Vasta kun oikea kuva voittaa kuvapankkikuvan, segmenttikohtaisten varianttien tuottaminen kannattaa. Markettailor yhdistää kävijätunnistuksen datan sivun sisältöön, myös kuviin, jos haluat näyttää nuo variantit rakentamatta sääntöjä itse.
