Personointi muuttaa sitä, mitä kävijät näkevät. Suunnittelumallit ratkaisevat, pystytkö ylläpitämään muutoksia vielä vuoden päästä vai päädytkö sivustoon, johon kukaan ei uskalla koskea. Sivustoa, jossa on kaksikymmentä hyvin jäsenneltyä versiota, on helpompi pyörittää kuin sivustoa, jossa on viisi tilapäistä. Jos sivuston perusrakenne vaatii ensin työtä, aloita oppaastamme B2B-verkkosivuston suunnitteluun ostoryhmille.
Useimpia B2B-verkkosivustoja ei suunniteltu personointia varten. Ne rakennettiin yhdeksi kokemukseksi, ja personoitu sisältö liimattiin päälle jälkikäteen. Tapa toimii kahdelle tai kolmelle säännölle. Kahdellakymmenellä se hajoaa. Tämä artikkeli käsittelee suunnittelumalleja, joiden avulla voit personoida järjestelmällisesti hero-osioista yksittäisiin sisältölohkoihin.
Hero-osion personoinnin mallit
Pääosiosta useimmat B2B-tiimit aloittavat personoinnin, ja siinä on helpointa rakentaa liikaa. Valitse halvin malli, joka hoitaa tehtävän.
Malli 1: tekstin vaihto (pienin työmäärä)
Pidä asettelu, kuvat ja CTA-painike samoina. Muuta vain otsikon ja alaotsikon tekstiä. Tämä on yksinkertaisin malli ja helpoin testata, koska eristät muuttujan viestintään.
Havainnollistava esimerkki kyberturvallisuusyritykselle:
- Oletus: ”Suojaa yrityksesi nykyaikaisilta uhilta”
- Terveydenhuollon segmentti: ”HIPAA-yhteensopiva tietoturva, joka suojaa potilastiedot”
- Rahoitusalan segmentti: ”SOC 2 -sertifioitu suojaus rahoituslaitoksille”
Sivun rakenne ei muutu. Design-järjestelmäsi pysyy ehjänä. Vaihdat vain tekstijonoja, joten tämä on helppo pohjata ja ylläpitää.
Malli 2: sisältölohkon vaihto (keskitason vaiva)
Vaihda koko hero-sisältölohko (otsikko, alaotsikko, tukikuva ja CTA) säilyttäen saman asetteluruudukon. Hero-säiliö pysyy kiinteänä; sisällöt ovat vaihdettavia moduuleja. Googlen responsiiviset display-mainokset soveltavat samaa ajatusta mainontaan: annat aineistot, ja järjestelmä kokoaa asettelun sijoittelukohtaisesti.
Rakenna hero-osio komponentiksi, joka ottaa vastaan propsit: headline, subheadline, imageUrl, ctaText, ctaLink. Jokainen personointiversio on eri joukko propseja. Asettelun CSS määritellään kerran; sisältö vaihtelee.
Tämä malli toimii hyvin, kun eri segmentit tarvitsevat erilaisia kuvia. Valmistavan teollisuuden segmentti voi nähdä tehdashallin kuvia, kun taas SaaS-segmentti näkee raporttinäkymän kuvakaappauksia. Visuaalinen vaikutus on vahvempi kuin pelkissä tekstin vaihdoissa, ja ylläpitokustannus pysyy hallittavana.
Malli 3: asetteluversio (suurin työmäärä)
Eri segmentit saavat kokonaan erilaiset hero-asettelut. Ehkä suuryrityskävijät näkevät heron, jossa on videodemo ja ”Varaa puhelu” -CTA, kun taas pk-yrityskävijät näkevät yksinkertaisemman heron, jossa on ”Aloita”-CTA ja tuotekuvakaappaus.
Varaa tämä malli tapauksiin, joissa ostopolku eroaa segmenttien välillä niin perustavasti, ettei sama asettelu palvele molempia. Enterprise-ostajat tarvitsevat tyypillisesti luottamussignaaleja ja ihmiskontaktia heti alussa; pk-ostajat haluavat nopeutta ja itsepalvelua. Ne ovat riittävän erilaisia oikeuttaakseen erilliset asettelut.
Kompromissi: jokainen asetteluversio vaatii erillistä ylläpitoa, testausta ja responsiivista suunnittelutyötä. Rajoita asetteluversiot enintään kahteen tai kolmeen.
Sosiaalisen todisteen vaihtaminen
Sosiaalinen todiste on yleensä ensimmäinen ehdotuksemme hero-osion jälkeen, koska se ei vaadi uutta tekstiä, vain parempaa valikointia. Kun terveydenhuollon ostaja näkee muiden terveydenhuollon yritysten logoja ja terveydenhuoltoalan teknologiajohtajan suosituksen, viesti on ”kaltaisesi yritykset käyttävät tätä”. Geneerinen logoseinä toisiinsa liittymättömiltä toimialoilta sanoo paljon vähemmän.
Suunnittele sosiaalisen näytön osiot alusta asti vaihdettaviksi:
Logorivi
Luo logopalkkikomponentti, joka ottaa vastaan taulukon logo-objekteja. Jokainen objekti sisältää kuvan, yrityksen nimen ja vapaaehtoisen toimialatunnisteen. Personointia varten ylläpidä erillisiä logotaulukoita kullekin toimialasegmentille. Käytä oletuksena tunnetuimpia logojasi kaikilta toimialoilta. Kun teet komponentin prototyyppiä, logogeneraattori voi tuottaa mallikuviin paikkalogoja, jotta voit testata asettelua ennen kuin asiakkaat hyväksyvät oikeiden logojensa käytön.
Käytännön rajoite: tarvitset vähintään neljä logoa segmenttiä kohden, jotta logopalkki näyttää vakuuttavalta. Jos vain kaksi terveydenhuollon asiakastasi suostuu näyttämään logonsa, palkki näyttää harvalta. Täydennä toimialaan liittyvillä sertifikaateilla tai kumppanuusmerkeillä, kunnes asiakaskuntasi kasvaa.
Suositukset
Jäsennä suositukset dataobjekteiksi: lainausteksti, lähteen nimi, titteli, yritys, yrityksen logo, vapaaehtoinen kasvokuva. Säilytä kaikki suositukset keskitetyssä varastossa. Merkitse jokaiseen toimiala, yrityksen koko ja käyttötapaus. Personointimoottorisi valitsee kullekin segmentille relevanteimman suosituksen.
Vahvassa B2B-suosituksessa on yksityiskohtia. Asiakas, joka kertoo, kuinka paljon nopeammaksi perehdytys muuttui (omalla luvullaan), voittaa ”loistava tuote” -kommentin. Kun keräät toimialakohtaisia suosituksia, pyydä asiakkailta mitattu tulos, jonka he ovat valmiita allekirjoittamaan nimellään, ja hanki kirjallinen hyväksyntä tarkalle sanamuodolle.
Asiakastarinakortit
Sama periaate pätee etusivun tai tuotesivujen asiakastarinoiden esikatseluihin. Suunnittele asiakastarinakortti uudelleenkäytettäväksi komponentiksi: pääkuva, yrityksen nimi, toimialatunniste, yhden rivin tulos ja linkki koko asiakastarinaan. Vaihda näytettävät kortit kävijän segmentin mukaan.
Yksi suunnittelupäätös kannattaa tehdä aikaisin: korvaavatko personoidut asiakastarinat oletuskorttisi, vai lisätäänkö ne alkuun (näytetään ensin, ja yleiset asiakastarinat niiden jälkeen)? Alkuun lisääminen on turvallisempaa, koska kävijät näkevät edelleen laajimmat todisteesi, mutta relevanteimmat näkyvät ensin.
Navigaation personointi
Useimmat tiimit personoivat sivun sisältöä ja jättävät navigaation ennalleen. Navigaatio näkyy kuitenkin jokaisella sivulla, joten pieni muutos siinä seuraa kävijää koko istunnon ajan.
- Dynaamiset resurssilinkit: Korvaa yleinen ”Resurssit”-pudotusvalikko toimialakohtaisilla kohdilla. Terveydenhuollon vierailijat näkevät ”HIPAA-vaatimustenmukaisuusopas” ja ”Terveydenhuollon asiakastarinat”. Fintech-vierailijat näkevät ”SOC 2 -dokumentaatio” ja ”Rahoituspalvelujen ROI-laskuri”.
- Personoidut CTA:t navigaatiossa: Päänavigaation CTA voi vaihtua segmentin mukaan. Suuryrityskävijät näkevät ”Keskustele myynnin kanssa”. Pk-yrityskävijät näkevät ”Katso paketit”. Palaavat kävijät, jotka ovat jo käyneet hinnoittelusivulla, näkevät ”Aloita käyttöönotto”.
- Korostetut osiot: Anna kävijän segmenttiin liittyvälle navigaatiokohdalle hienovarainen korostus. Jos sivustolla vierailee valmistavan teollisuuden yritys, korosta tuotevalikossa ”Ratkaisut valmistavalle teollisuudelle”. Vältä tähän ”Uusi”-merkkiä; se ei ole uusi, ja palaavat kävijät huomaavat sen.
Varoituksen sana: älä muuta itse navigaation rakennetta. Kohtien siirtely tai osioiden piilottaminen segmenttien perusteella aiheuttaa hämmennystä, erityisesti palaaville vierailijoille, jotka muistavat, missä asiat olivat. Personoi navigaatiokohtien sisältöä, älä navigaation arkkitehtuuria.
Sisältölohkojen arkkitehtuuri vaihdettaville osioille
Käsittele sivua sisältölohkojen sarjana, joista jokaisen voi vaihtaa erikseen. Jokaisella lohkolla on kiinteä rajapinta (mitat, välistys, typografian skaala) ja vaihteleva sisältö. Jos sivustosi toimii jo komponenttikirjaston päällä, suurin osa tästä on olemassa; sinun tarvitsee vain saada sisältö tulemaan datasta kovakoodauksen sijaan.
Lohkojen rajapinnan suunnittelu
Jokaisen sisältölohkon pitäisi noudattaa vakiomäärittelyä:
- Kiinteät mitat: Säiliön leveys- ja korkeusrajoitukset määräytyvät sivun asettelusta, eivät sisällöstä. Tämä estää personoitua sisältöä rikkomasta sivun rakennetta.
- Typografinen asteikko: Otsikot käyttävät H2:ta. Leipäteksti käyttää kappaletta. Luettelomerkit käyttävät vakiolistatyyliä. Mikään variantti ei saa tuoda mukaan epästandardeja kirjasinkokoja.
- Välistyssäännöt: Täytettä ja marginaaleja hallitsee lohkon säiliö, ei sisältö. Näin visuaalinen rytmi pysyy johdonmukaisena riippumatta siitä, mikä sisältö lohkon täyttää.
- Sisällön rajat: Määritä jokaiselle tekstikentälle enimmäismerkkimäärä. ”Otsikko: enintään 60 merkkiä. Kuvaus: enintään 150 merkkiä.” Tämä estää personoitua sisältöä vuotamasta säiliöidensä yli.
Lohkotyypit
Rakenna vakiolohkotyyppien kirjasto, joka kattaa personointitarpeesi:
- Teksti + kuva -lohko: Jaettu asettelu, jossa teksti on toisella puolella ja kuva toisella. Käytetään useimmiten ominaisuuksien nostoihin ja hyötyväittämiin.
- Lukulohko: Muutama keskeinen mittari isoina numeroina ja tukitekstin kera. Vaihda mittarit segmenteittäin, esimerkiksi käytettävyyslukusi suuryrityksille ja tyypillinen käyttöönottoaikasi pk-yrityksille. Käytä vain lukuja, jotka pystyt perustelemaan; lukulohko on ensimmäinen asia, jonka epäilevä ostaja tarkistaa.
- Suosituslohko: Lainaus, lähde ja valinnainen yrityksen logo. Yksi lohko, monta sisältöversiota.
- Vertailulohko: ominaisuusvertailu tai ennen/jälkeen-esitys. Sisältö vaihtelee, mutta asettelu on kiinteä.
- CTA-lohko: otsikko, tukiteksti ja painike. Vaihda viesti ja kohde segmentin mukaan.
Kun tarvitset uuden personoidun osion, kokoat sen olemassa olevista lohkoista etkä suunnittele tyhjästä, joten uudesta variantista tulee sisältötehtävä eikä design- ja kehitystiketti.
Toimialakohtaisia suunnitteluesimerkkejä
Alla olevat esimerkit ovat havainnollistavia: miten B2B SaaS -etusivu voisi muuttua kolmelle toimialasegmentille yllä kuvattuja malleja käyttäen.
Terveydenhuoltosegmentti
- Hero: tekstin vaihto korostamaan HIPAA-vaatimustenmukaisuutta ja potilastietojen suojaa. Alaotsikko viittaa tiettyihin terveydenhuollon säädöksiin.
- Sosiaalinen todiste: Logopalkissa terveydenhuollon yrityksiä (sairaaloita, healthtech-startupeja, lääkeyhtiöitä). Suositus sairaalan tietohallintojohtajalta.
- Sisältölohko: Korvaa yleinen ”Näin se toimii” -osio terveydenhuoltokohtaisella työnkululla, joka näyttää potilastietojärjestelmäintegraation ja vaatimustenmukaisuuden tarkistuspisteet.
- CTA: ”Katso, miten alustamme täyttää HIPAA-vaatimukset” (tuotenimelläsi) yleisen ”Lue lisää” -tekstin sijaan.
Rahoituspalvelujen segmentti
- Hero: Teksti vaihdetaan korostamaan tietoturvaa, auditointivalmiutta ja säädöstenmukaisuutta. Pääotsikko viittaa SOC 2:een ja taloudellisen datan suojaamiseen.
- Sosiaalinen todiste: Logopalkissa on pankkeja, fintech-yrityksiä ja vakuutusyhtiöitä. Suositus rahoituslaitoksen CISO:lta.
- Sisältölohko: Tilastolohko näyttää käytettävyyden, salausstandardit ja hallussasi olevat sertifioinnit yleisten tuotemittareiden sijaan.
- Navigaatio: ”Resurssit”-pudotusvalikossa ovat ensimmäisinä vaatimustenmukaisuusdokumentaatio ja tietoturvan white paperit.
Valmistavan teollisuuden segmentti
- Hero: sisältölohkon vaihto tehdas- ja teollisuuskuviin geneeristen toimistokuvien sijaan. Otsikko keskittyy operatiiviseen tehokkuuteen ja toimitusketjun näkyvyyteen.
- Sosiaalinen näyttö: Valmistavan teollisuuden yrityksen tuotantojohtajan suositus, joka korostaa ajansäästöä ja virheiden vähenemistä.
- Sisältölohko: korvaa SaaS-keskeinen ominaisuuslista valmistavan teollisuuden käyttötapauksilla: varastonseuranta, laadunvalvonta, toimittajahallinta.
- CTA: "Katso valmistavan teollisuuden asiakastarina" suoralla linkillä toimialakohtaiselle asiakastarinasivulle.
Brändin johdonmukaisuus varianttien välillä
Kun useampi ihminen on luonut variantteja vuoden tai pidempään, sivusto alkaa ajautua: hieman erilaisia painiketyylejä, otsikko äänensävyllä, jota kukaan ei hyväksynyt, kuvapankkikuva eri kirjastosta. Yksittäistä varianttia kukaan ei huomaa. Kävijät huomaavat kokonaisuuden. Suojakaiteet estävät tämän.
Suunnittelun reunaehdot
Design-järjestelmäsi pitäisi määrittää, mikä personoiduissa varianteissa saa muuttua ja mikä ei:
- Kiinteät elementit: logon sijoittelu, brändin päävärit, typografiahierarkia, ylä- ja alatunnisteen asettelu. Nämä eivät koskaan muutu varianttien välillä.
- Muuttuvat elementit: Otsikot, leipäteksti, kuvat, suositukset, CTA-teksti. Nämä muuttuvat vapaasti lohkojärjestelmän rajoissa.
- Rajatut elementit: korostusvärit (rajattu paletti), kuvatyyli (määritellyt valokuvausohjeet), ikonisarjat (hyväksytystä kirjastosta). Nämä voivat vaihdella, mutta vain sovituissa rajoissa.
Sävy- ja äänensävyohjeet
Kirjoita yhden sivun personoinnin tyyliopas (ei koko brändikirjaa), joka vastaa näihin:
- Mikä on oletusäänensävymme? (esim. ”Ammattimainen mutta keskusteleva. Suora, ei myyvä.”)
- Miten äänensävy mukautuu segmenteittäin? (esim. ”Enterprise: muodollisempi, viittaa vaatimustenmukaisuuteen ja mittakaavaan. Pk-yritykset: rennompi, korosta nopeutta ja yksinkertaisuutta.”)
- Mitä ilmauksia käytämme aina? Mitä vältämme?
- Kuinka paljon viesti saa enimmillään poiketa oletusviestinnästämme?
Tarkista personoidut tekstit näitä ohjeita vasten neljännesvuosittaisissa auditoinneissa. Pieni sävyn ajautuminen kertautuu ajan myötä. Versio, joka on tänään hieman brändin ohi, on vuoden päästä tunnistamaton.
Visuaalinen laadunvarmistusprosessi
Ennen kuin mikään personoitu versio menee käyttöön, ota siitä kuvakaappaus kolmella näkymäleveydellä (tietokone, tabletti, mobiili) ja vertaa sitä oletuskokemukseen rinnakkain. Tarkista:
- Tekstin ylivuoto tai katkeaminen
- Kuvasuhteen vääristyminen
- Värikontrastiongelmat (erityisesti vaihdettujen taustakuvien kanssa)
- Välistysten epäjohdonmukaisuudet
- CTA-painikkeen koko ja sijoittelu
Automatisoi tämä mahdollisuuksien mukaan. Visuaalisen regressiotestauksen työkalut, kuten Playwrightin kuvakaappausvertailu tai Percy, voivat merkitä versioiden väliset asetteluerot ennen kuin ne päätyvät tuotantoon. Kun versiot ovat käytössä, testaa niitä kuten mitä tahansa muuta muutosta; 90 päivän personoinnin testaustiekarttamme kertoo, miten testit kannattaa ajoittaa.
Seuraava askeleesi
Arvioi nykyinen verkkosivustosi yllä kuvatun lohkojärjestelmän valossa. Selvitä, mitkä etusivusi, tuotesivusi ja hinnoittelusivusi osiot on jo rakennettu itsenäisiksi lohkoiksi ja mitkä ovat tiukasti sidoksissa ympäröivään sisältöön. Valmiiksi modulaariset osiot ovat nopeimmat personointimahdollisuutesi. Sidoksissa olevat vaativat uudelleenrakentamista ennen kuin niitä voi personoida luotettavasti. Aloita modulaarisista ja rakenna loput uudelleen osio kerrallaan. Kun lohkot ovat valmiita, Markettailorin segmentointi voi päättää, minkä variantin kukin yritys näkee toimialan, koon tai jo käyttämiesi yrityslistojen perusteella. Itse segmenttien määrittelystä lue konvertoivat firmografiset segmentit.