Tootmisettevõtte ostja jõuab teie veebilehele ja näeb päisepildina sileda SaaS-töölaua pilti. Fintech-ettevõtte potentsiaalne klient saabub ja saab sama pildi. Kumbki ei tunne, et leht oleks tehtud tema jaoks, ja mõlemad lahkuvad sekunditega. Probleem ei ole selles, et maandumislehe pildid puuduvad. Probleem on selles, et kõigile näidatakse samu pilte, olenemata sellest, kes nad on või mida nad vajavad.
Maandumislehe pildid valitakse üks kord, tavaliselt lehe kujundaja poolt, ja näidatakse seejärel igale külastajale. Mitme tööstusharu ja ostjarolliga B2B veebilehel tähendab see, et enamik külastajaid näeb pilti kellegi teise maailmast. Peapildi sobitamine külastaja tööstusharu, rolli või etapiga on üks odavamaid personaliseerimise vorme, sest see ei vaja uut teksti, kuid aitab ainult siis, kui pilt ütleb midagi konkreetset. See postitus käsitleb, milleks iga pilditüüp on mõeldud, millal video on oma kaalu väärt, kuidas visuaale segmentidega vastendada ning jõudluse ja ligipääsetavuse detaile, mis otsustavad, kas miski sellest toimib.
Miks üldised maandumislehe pildid B2B-s ebaõnnestuvad
Pildid on tavaliselt esimene asi, millele külastaja pilk langeb, seega kujundavad need esmamulje enne pealkirja lugemist. Üldine pilt ise palju ei kahjusta; kulu on kasutamata võimalus näidata külastajale midagi, mille ta ära tunneb.
Mitme ostjapersonaga B2B ettevõtete jaoks tekitab üks pildikomplekt struktuurse ebasoodsa olukorra. Teie platvormi hindaval arendusjuhil on teistsugused visuaalsed ootused kui sama tegeval turundusjuhil. Üks tahab näha tehnilist arhitektuuri, integratsioone või andmevooge. Teine reageerib töölaudadele, kampaaniamõõdikutele või ROI graafikutele. Kui mõlemad näevad sama üldist kontorifotot, ei saa kumbki asjakohasuse signaali, mis paneks neid edasi kerima. Sama kehtib reklaami kohta, mis nad tõi; meie juhend responsiivsete displeireklaamide kasutamise kohta selgitab, kuidas hoida displeireklaami loovlahendus lehega kooskõlas.
Tavaline patune on fotopangapildid inimestest, kes klaasist kontoris kätt suruvad. Neid on lihtne fotopangapiltidena ära tunda, nii et need ei lisa midagi ja võtavad ruumi, kus oleks võinud olla tootekuvatõmmis, päris klient või töövoo diagramm. Kui testite maandumislehe visuaalide juures üht asja, testige päris pilti (teie toode, teie kliendid, teie tiim) fotopangapildi vastu.
Visuaalide sidumine külastajasegmentidega
Personaliseeritud piltide idee on lühendada aega saabumisest hetkeni „see on minu jaoks“. Praktiline viis selleks on siduda pildivariandid segmentidega, mida juba jälgite. Kui kasutate külastajate tuvastamist ettevõtte tööstusharu, suuruse või geograafia kindlakstegemiseks, saavad samad andmepunktid määrata, millised pildid lehel ilmuvad.
Viisid segmentide piltidega sidumiseks:
Tööstusharupõhised visuaalid. Näidake tootmise külastajatele tehase tootmisala. Näidake finantsteenuste külastajatele kauplemislauda. Näidake tervishoiu külastajatele haigla töövoogu. Müüdav toode on sama, kuid visuaalne kontekst muutub vastavalt külastaja igapäevasele reaalsusele.
Rollipõhised visuaalid. Tehnilised ostjad reageerivad arhitektuuridiagrammidele, koodijuppidele ja integratsioonivoogudele. Ärilised ostjad reageerivad töölaudadele, graafikutele ja tulemusmõõdikutele. Visuaalse keele sobitamine ostja asjatundlikkusega annab märku, et mõistate tema vaatenurka.
Etapipõhised visuaalid. Esmakülastajatele sobivad üldised kasu illustratsioonid, mis näitavad, mida te teete. Naasvad külastajad, kes on juba tootesisuga tutvunud, reageerivad paremini üksikasjalikele ekraanipiltidele, võrdlustabelitele või klienditõenditele.
Ettevõtte suurus. Suurettevõtete külastajad võivad reageerida piltidele, mis näitavad mastaapi, turvasertifikaate või mitme meeskonna töövooge. Väiksemad ettevõtted samastuvad piltidega, mis näitavad kiirust, lihtsust ja kiireid võite.
Pilditüübid ja millal igaüks kõige paremini toimib
Erinevad visuaalsed elemendid täidavad maandumislehel erinevaid funktsioone. Nende erinevuste mõistmine aitab teil teha teadlikke valikuid, mida personaliseerida ja mida staatilisena hoida.
Päisepildid loovad esmamulje ja raamistavad kogu väärtuspakkumise. Need võtavad lehel kõige väärtuslikuma ruumi. Päis, mis näitab toodet kasutuses, ideaalis andmetega või keskkonnas, mille külastaja ära tunneb, ütleb rohkem kui abstraktne graafika. Personaliseeritud lehtedel on päis loomulik esimene element, mida varieerida, sest seda näevad kõik, kes lehele jõuavad.
Toote ekraanipildid annavad konkreetse tõestuse sellest, mida müüte, kuid hooletul kasutamisel võivad need muuta lehed ülekoormatuks. Üks märkustega ekraanipilt, mis toob esile külastaja kasutusjuhu jaoks kõige olulisemad funktsioonid, toimib paremini kui mitu märkusteta pilti. Kui teie segmenteerimise andmed ütlevad, et külastajat huvitab analüütika, näidake analüütika armatuurlauda. Kui teda huvitavad integratsioonid, näidake integratsioonide paneeli.
Illustratsioonid ja kohandatud graafika sobivad suurepäraselt keerukuse lihtsustamiseks. Kui on vaja selgitada abstraktset töövoogu või mitmesammulist protsessi, annavad kohandatud illustratsioonid sekunditega edasi selle, milleks kuluks lõike. Need on eriti kasulikud personaliseeritud lehtedel, kus selgitus peab muutuma vastavalt külastaja tehnilisele tasemele. Märkige maandumislehe tekstilähteülesandes, millist visuaali iga jaotis vajab, et disain ja tekst oleksid koos planeeritud.
Sotsiaalse tõestuse pildid hõlmavad klientide logosid, tiimifotosid ja kliendilugude pisipilte. Neid saab personaliseerida, näidates külastaja valdkonna või suurusklassi logosid. Keskmise suurusega SaaS-ettevõtet rahustavad teiste keskmise suurusega SaaS-ettevõtete logod rohkem kui Fortune 500 logod, millega ta end samastada ei saa. Meie B2B maandumislehtede näited näitavad, milline tõend peaks igal lehetüübil esikohal olema.
Taustapildid loovad meeleolu, nõudmata tähelepanu. Õrnad üleminekud või geomeetrilised mustrid toimivad sageli paremini kui fototaustad, sest lisavad sügavust ilma tähelepanu hajutamata. Neid on harva vaja personaliseerida, sest nende roll on toetada, mitte asjakohasust näidata.
Video maandumislehel: millal see oma koha ära teenib
Video on kõige raskem visuaal, mida saate lisada, nii lehe kaalu kui ka nõutava tähelepanu poolest. Meie seisukoht: maandumislehe video peaks vastama ühele küsimusele, millele külastaja ekraanipildist vastust ei saa, tavaliselt „milline see välja näeb, kui keegi seda päriselt kasutab?“. Kui video kordab muusika saatel pealkirja, teeb hästi valitud ekraanipilt sama töö kiiremini. Video kohta väljaspool maandumislehti vaadake meie B2B videoturunduse juhendit.
Kus video B2B lehtedel tavaliselt end ära tasub:
- Tootetutvustused demo- ja registreerumislehtedel. Kuuskümmend kuni üheksakümmend sekundit põhitöövoo näitamist laseb külastajal end enne kõne broneerimist ise kvalifitseerida. Liigutage kursorit aeglaselt ja hoidke kasutajaliides loetavana selles suuruses, milles video mängib.
- Kliendilood hilise etapi lehtedel. Klient, kes selgitab probleemi oma sõnadega, on tõestus, mida logo anda ei suuda. Paigutage see väite kõrvale, mida see toetab, mitte eraldi videogaleriisse.
- Veebiseminari- ja ürituselehed. 30-sekundiline esineja klipp näitab, et sessioon on aega väärt. Pärast üritust asendab selle salvestis.
Ja kus see tavaliselt ei toimi: automaatselt mängiva taustatsüklina pealkirja taga (see konkureerib tekstiga ja maksab laadimisaega) ning ainsa viisina võtmeteabe saamiseks (paljud B2B külastajad sirvivad tööl heli väljalülitatuna).
Video lisamine lehte aeglustamata
- Kasutage eelvaatepilti ja laadige mängija klikiga. Täielik YouTube'i või Vimeo manus laadib oma skriptid enne, kui keegi esitusnuppu vajutab. Google'i Lighthouse'i dokumentatsioon soovitab laadida kolmanda osapoole manused laisalt fassaadi taga – staatiline eelvaade, mis vahetub suhtlemisel päris mängija vastu.
- Laadige lehe alaosas olevad manused laisalt.
loading="lazy"lisamine iframe'idele lükkab ekraaniväliste mängijate laadimise edasi, nagu kirjeldab web.dev juhend iframe'ide laisa laadimise kohta. - Lisage kõigele subtiitrid. Subtiitrid teenindavad ilma helita vaatajaid ning on ligipääsetavuse nõue eelsalvestatud heliga videotele.
- Hoidke CTA nähtaval ka ilma videota. Vorm või nupp ei tohiks kunagi sõltuda sellest, et keegi vaatab lõpuni.
Mõõtmine, kas video aitab
GA4 täiustatud mõõtmine salvestab sündmused video_start, video_progress ja video_complete manustatud YouTube'i videote puhul, millel on JS API tugi lubatud. Kaks numbrit on vaatamistest olulisemad: esitusmäär (esitused jagatud lehe külastajatega) ja nende külastajate konversioonimäär, kes videot vaatasid, võrreldes nendega, kes ei vaadanud. Teisega olge ettevaatlik. Külastajad, kes vajutavad esitusnuppu, on juba rohkem kaasatud, nii et vaatajate kõrgem konversioonimäär ei tõesta, et video selle põhjustas. Õiglane test on lehe A/B-test video ja ilma videota, hinnatuna konversioonide, mitte vaatamisaja järgi.
Ka video on hästi personaliseeritav. Tootmisvaldkonna külastaja ja tarkvaravaldkonna külastaja võivad näha sama ülevaatevideot, mis on salvestatud kahe erineva demoandmestikuga, mis on odavam, kui kõlab, kui stsenaarium on juba olemas.
Visuaalne hierarhia personaliseeritud lehtedel
Pildid kujundavad seda, kuidas külastajad lehel liiguvad. Tekstirohketel lehtedel kipuvad inimesed silmitsema üle ülaosa ja seejärel mööda vasakut serva alla (F-muster); hõredatel lehtedel liigub pilk sageli siksakis vasakult ülevalt paremale üles ja alla. Paigutage pildid neid teid silmas pidades.
Paigutage oma personaliseeritud päisepilt F-mustri tippu, kuhu pilk kõigepealt langeb. Toetavad visuaalid paigutuvad vertikaalsele skaneerimisteele. Kui kasutate piltides suunavaid vihjeid, nagu inimese pilk või nool diagrammil, suunake need oma tegevusele kutse poole, mitte sellest eemale.
Suurus loob hierarhia. Suuremad pildid annavad märku tähtsusest. Kui soovite, et sihtettevõtte külastaja keskenduks konkreetsele tulemusele või võimekusele, tehke see pilt lehe domineerivaks visuaaliks. Teisesed pildid, nagu kliendilogod või toetavad ekraanipildid, peaksid jääma väiksemaks, et need toetaksid, mitte ei konkureeriks.
Andke põhipildile ruumi. Üks selge, segmendile vastav pilt, mille ümber on ruumi, loetakse kiiremini kui kolm kitsast pilti, mis tähelepanu pärast võistlevad, ning hallata tuleb üht varianti kolme asemel.
Samm-sammuline töövoog maandumislehe piltide personaliseerimiseks
Piltide personaliseerimise juurutamine ei nõua kogu veebilehe ümberehitamist. Siin on praktiline töövoog, mis algab väikselt ja laieneb.
1. samm: valige oma suurimad kvalifitseeritud segmendid. Võtke andmed oma analüütika- või külastajate tuvastamise tööriistast. Millised tegevusalad, ettevõtete suurused või rollid moodustavad suurema osa teie kvalifitseeritud liiklusest? Alustage segmentidest, mis on mõõtmiseks piisavalt suured ja piisavalt erinevad, et erinevad pildid oleksid tõesti mõistlikud.
2. samm: auditeerige oma praeguseid maandumislehe pilte. Loetlege iga pilt oma suurima liiklusega maandumislehtedel. Küsige iga pildi puhul: kas see kõnetab kõiki kolme segmenti võrdselt? Kui jah, on see kas tugev universaalne pilt või üldine pilt, mis ei kõneta kedagi. Märkige pildid, mille puhul segmendispetsiifiline variant võiks asjakohasust lisada.
3. samm: looge igale märgitud kohale 2–3 pildivarianti. Täielikku ümberkujundust pole vaja. Päisepiltide puhul võib see tähendada sama paigutuse kolme versiooni erineva taustapildi, erinevate toote ekraanipiltide või erinevate kasutusjuhtude illustratsioonidega. Hoidke kompositsioon ja CTA paigutus ühesugused, et testiksite pildi sisu, mitte lehe struktuuri.
4. samm: seadistage segmendipõhised kuvamisreeglid. Siduge oma personaliseerimisplatvormis iga variant selle sihtsegmendiga. Määrake vaikimisi variant külastajatele, kes ühegi segmendiga ei sobi. Kontrollige, et õigetele külastajatele kuvataks õiged pildid, vaadates eelvaadet iga segmendi testkontodega.
5. samm: mõõtke ja täiustage. Jälgige konversioonimäära segmendi kaupa, mitte ainult üldiselt. Päisepilt, mis tõstab tootmissektori külastajate konversioone, võib SaaS-i külastajate puhul tulemusi halvendada. Viige iga segmendi sees läbi A/B-teste, et eristada piltide muutmise mõju teistest lehe elementidest. Otsustage valimi suurus enne testi algust (meie juhend A/B-testi valimi suuruse kohta näitab, kuidas), laske testil kesta vähemalt kaks täisnädalat ja ärge lõpetage enneaegselt ainult seetõttu, et töölaud näeb hea välja.
Tehniline jõudlus: kiirus vs visuaalne kvaliteet
Personaliseeritud päis, mis jõuab hilja, on hullem kui üldine päis, mis jõuab õigel ajal. Päise pilt on sageli Largest Contentful Paint element, seega selle suurus ja laadimisjärjekord määravad, kui kiire leht tundub.
Kasutage kaasaegseid vorminguid. Google'i dokumentatsiooni järgi on kadudega WebP-pildid 25–34% väiksemad kui võrreldavad JPEG-id ja kadudeta WebP-pildid 26% väiksemad kui PNG-d. AVIF tihendab sageli veelgi rohkem. Pakkuge AVIF- või WebP-vormingut koos JPEG-varuvariandiga elemendi <picture> kaudu.
Selle asemel, et kopeerida kellegi teise suuruspiiranguid, seadke oma lehtedele eelarve: kontrollige PageSpeed Insightsis mobiiliprofiiliga päisepildi faili suurust ja LCP-d ning käsitlege iga varianti, mis on vaikeversioonist märgatavalt raskem, veana.
Kasutage srcset-atribuutidega responsiivseid pilte. 2000 px laiuse pildi serveerimine mobiilikülastajale raiskab ribalaiust ja aeglustab renderdamist. Laske brauseritel valida vaateakna laiuse põhjal sobiva suurusega pilt. Personaliseeritud lehtede puhul tähendab see, et iga pildivariant vajab oma responsiivsete suuruste komplekti, kuid ehitustööriistad saavad selle automatiseerida.
Ärge laadige päist laisalt. See on nähtavas alas, nii et laisk laadimine viivitab seda; märkige see hoopis atribuudiga fetchpriority="high" ja laadige laisalt ainult allpool olevaid pilte. Segmendivariantide puhul otsustab kõige puhtam lahendus variandi serveris või servas, nii et õige pilt on HTML-is algusest peale. Kui vahetus toimub kliendi poolel, reserveerige pildi mõõtmed, et paigutus laadimisel ei hüppaks.
Ligipääsetavus kõigi pildivariantide puhul
Iga personaliseeritud pildivariant vajab oma alt-teksti. Tootmise töövoogu näitava päisepildi alt-tekst peaks kirjeldama seda stseeni, mitte olema üldine tekst, mis sobiks igale variandile. Ekraanilugejad loevad ette, mis lehel on, ja alt-tekst peaks vastama sellele, mida selle segmendi nägevad külastajad tegelikult näevad.
Hea alt-tekst kirjeldab pildi sisu lühidalt ja seob selle ümbritseva kontekstiga. Hoidke see alla 100 tähemärgi. Dekoratiivsetel piltidel (taustad, vahetäited) peaks olema tühi alt-atribuut, et ekraanilugejad need vahele jätaksid. Funktsionaalsed pildid, näiteks lingitud graafika, vajavad alt-teksti, mis kirjeldab lingi sihtkohta.
Kui pilt ei laadi, kuvatakse alt-tekst visuaalselt, mis tähendab, et alt-tekst toimib varulahendusena ka nägijatele aeglase ühenduse korral. Kui teil on personaliseeritud pildivariandid, on see veel üks põhjus, miks iga variant vajab ühise kohatäitja asemel unikaalset kirjeldavat alt-teksti.
Levinud vead personaliseeritud visuaalidega
Piltide personaliseerimisega alustavad meeskonnad personaliseerivad sageli üle. Iga lehe pildi vahetamine külastajasegmendi põhjal tekitab hoolduskoormuse ja lahjendab nende muudatuste mõju, mis on tegelikult olulised. Keskenduge personaliseerimisel ühele või kahele suurima mõjuga pildikohale (tavaliselt päis ja peamine sotsiaalse tõestuse jaotis) ning jätke ülejäänu ühtseks.
Teine levinud viga on segmendiandmete kasutamine eelduste tegemiseks, mis tunduvad pealetükkivad. Külastajale tema ettevõtte logo näitamine enne, kui ta on end tuvastanud, ületab piiri. Tema tööstusharuga seotud piltide näitamine on abiks. Tema kontorihoone näitamine on häiriv. Vahe on kontekstipõhise asjakohasuse ja jälgimise vahel.
Liiga paljude variantide korraga testimine on kolmas lõks. Neli segmenti korda kolm pildiplokki, igaühel paar varianti, annab juba kümneid kombinatsioone, palju rohkem kui B2B liiklus testida suudab. Testige iga segmendi sees korraga üht muutujat, oodake statistilist olulisust ja kinnitage iga muudatus enne uute kihtide lisamist.
Meeskondadele, kes töötavad laiema B2B maandumislehtede optimeerimise plaani kallal, on piltide personaliseerimine mõistlik varajane samm, sest see vajab vähem uut sisu kui tekstide personaliseerimine. Konks on selles, et see sõltub päris segmendispetsiifiliste visuaalide olemasolust; kui suudate toota ainult iga valdkonna jaoks erineva fotopanga pildi, kulutage aeg hoopis tekstidele.
Kust alustada
Võtke oma suurima liiklusega maandumisleht ja vaadake päisepilti ühe küsimusega: kas teie suurima segmendi külastaja tunneks selles ära oma töö? Kui ei, asendage see tootepildi või kliendipildiga, mille ta ära tunneks, ja testige seda praeguse vastu. Alles siis, kui päris pilt on fotopangapildist parem, tasub toota segmendipõhiseid variante. Markettailor seob külastajate tuvastamise andmed lehe sisuga, sealhulgas piltidega, kui soovite neid variante kuvada ilma reegleid ise loomata.
