Personaliseeritud B2B veebilehtede disainimustrid

Personaliseerimine muudab seda, mida külastajad näevad. Disainimustrid otsustavad, kas suudate neid muudatusi ka aasta pärast hallata või jääb teile sait, mida keegi ei julge puudutada. Kahekümne hästi struktureeritud variandiga saiti on lihtsam juhtida kui viie juhusliku variandiga saiti. Kui saidi struktuur vajab kõigepealt tööd, alustage meie juhendist B2B veebisaidi disain ostukomiteedele.

Enamik B2B veebisaite ei loodud personaliseerimist silmas pidades. Need ehitati ühe kogemusena ja personaliseeritud sisu poldi hiljem külge. See lähenemine toimib kahe või kolme reegli puhul. Kahekümne puhul laguneb see. See artikkel käsitleb disainimustreid, mis võimaldavad süstemaatiliselt personaliseerida, alates päisejaotistest kuni üksikute sisuplokkideni.

Päisesektsiooni isikupärastamise mustrid

Päis on koht, kust enamik B2B-meeskondi personaliseerimist alustab ja kus on kõige lihtsam üle pingutada. Valige odavaim muster, mis töö ära teeb.

Muster 1: teksti vahetus (väikseim töömaht)

Hoidke paigutus, pildid ja CTA-nupp samad. Muutke ainult pealkirja ja alapealkirja teksti. See on lihtsaim muster ja kõige lihtsam testida, sest isoleerite muutuja sõnumiks.

Näitlik näide küberturbeettevõtte jaoks:

• Vaikimisi: „Kaitske oma ettevõtet tänapäevaste ohtude eest“
• Tervishoiusegment: „HIPAA-nõuetele vastav turvalisus, mis kaitseb patsientide andmeid“
• Finantsteenuste segment: „SOC 2 sertifitseeritud kaitse finantsasutustele“

Lehe struktuur ei muutu. Teie disainisüsteem jääb puutumata. Vahetate ainult tekstistringe, mistõttu on seda lihtne mallideks muuta ja hallata.

Muster 2: sisuploki vahetus (keskmine pingutus)

Asendage kogu päise sisuplokk (pealkiri, alapealkiri, toetav pilt ja CTA), säilitades sama paigutusvõrgu. Päise konteiner jääb fikseerituks; sisu on vahetatavad moodulid. Google'i responsive display ads rakendavad sama ideed reklaamis: teie annate varad ja süsteem paneb paigutuse iga paigutuskoha jaoks kokku.

Ehitage oma päisejaotis komponendina, mis võtab vastu props-väärtused: headline, subheadline, imageUrl, ctaText, ctaLink. Iga personaliseerimisvariant on erinev props-komplekt. Paigutuse CSS määratletakse üks kord; sisu varieerub.

See muster toimib hästi, kui eri segmendid vajavad erinevaid pilte. Tootmissegment võib näha tehasepõranda pilte, samas kui SaaS-segment näeb töölaua ekraanipilte. Visuaalne mõju on tugevam kui ainult teksti vahetamisel ja hoolduskulu on hallatav.

Muster 3: paigutuse variant (suurim pingutus)

Erinevad segmendid saavad täiesti erineva päise paigutuse. Võib-olla näevad suurettevõtete külastajad videodemoga päist ja CTA-d „Broneeri kõne“, samal ajal kui väikeettevõtete külastajad näevad lihtsamat päist CTA-ga „Alusta“ ja toote ekraanipildiga.

Kasutage seda mustrit ainult juhtudel, kus ostuteekond erineb segmentide vahel nii põhjalikult, et sama paigutus ei saa mõlemat teenindada. Suurettevõtete ostjad vajavad tavaliselt kohe alguses usaldussignaale ja inimsuhtlust; VKE ostjad tahavad kiirust ja iseteenindust. Need on piisavalt erinevad, et õigustada eraldi paigutusi.

Kompromiss: iga paigutusvariant vajab eraldi hooldust, testimist ja responsiivse disaini tööd. Piirduge maksimaalselt kahe või kolme paigutusvariandiga.

Sotsiaalse tõestuse vahetamine

Sotsiaalne tõestus on tavaliselt meie esimene soovitus pärast päiseosa, sest see ei vaja uut teksti, vaid paremat valikut. Kui tervishoiuvaldkonna ostja näeb teiste tervishoiuettevõtete logosid ja tervishoiuettevõtte CTO soovitust, on sõnum „teiesugused ettevõtted kasutavad seda“. Üldine logosein seosetutest tööstusharudest ütleb palju vähem.

Kujundage oma sotsiaalse tõendi jaotised algusest peale vahetatavaks:

Logoriba

Looge logoriba komponent, mis võtab vastu logoobjektide massiivi. Iga objekt sisaldab pilti, ettevõtte nime ja valikulist tööstusharu silti. Isikupärastamiseks hoidke iga tööstusharu segmendi jaoks eraldi logomassiive. Vaikimisi kasutage kõigi tööstusharude lõikes oma kõige äratuntavamaid logosid. Komponendi prototüüpimise ajal saab logo looja toota maketi jaoks kohatäitjalogosid, nii et saate paigutust testida enne, kui kliendid nende päris logode kasutamise heaks kiidavad.

Praktiline piirang: logoriba veenvaks täitmiseks on vaja vähemalt nelja logo segmendi kohta. Kui teil on ainult kaks tervishoiuklienti, kes on nõus oma logo näitama, näeb riba hõre välja. Täiendage seda tööstusharule asjakohaste sertifikaatide või partnerlusmärkidega, kuni teie kliendibaas kasvab.

Soovitused

Struktureerige soovitused andmeobjektidena: tsitaadi tekst, autori nimi, ametinimetus, ettevõte, ettevõtte logo, valikuline portreefoto. Hoidke kõiki soovitusi kesksel hoidlas. Märgistage igaüks tööstusharu, ettevõtte suuruse ja kasutusjuhuga. Teie isikupärastamismootor valib iga segmendi jaoks kõige asjakohasema soovituse.

Tugev B2B soovitus sisaldab konkreetsust. Klient, kes ütleb, kui palju kiiremaks kasutuselevõtt muutus (oma numbriga), lööb „suurepärase toote“. Tegevusalapõhiste soovituste kogumisel paluge klientidelt mõõdetud tulemust, mille alla nad on nõus oma nime panema, ja hankige täpsele sõnastusele kirjalik kinnitus.

Juhtumiuuringute kaardid

Sama põhimõte kehtib juhtumiuuringute eelvaadete kohta teie avalehel või tootelehtedel. Kujundage juhtumiuuringu kaart taaskasutatava komponendina: esiletõstetud pilt, ettevõtte nimi, tegevusala silt, üherealine tulemus ja link täielikule juhtumiuuringule. Vahetage kuvatavaid kaarte külastaja segmendi põhjal.

Üks disainiotsus, mis tuleb varakult teha: kas isikupärastatud juhtumiuuringud peaksid asendama teie vaikimisi kaarte või neile eelnema (näidatakse esimesena, millele järgnevad üldised juhtumiuuringud)? Eelnemine on turvalisem, sest külastajad näevad endiselt teie kõige laiemaid tõestuspunkte, kuid kõige asjakohasemad ilmuvad esimesena.

Navigeerimise personaliseerimine

Enamik meeskondi personaliseerib lehe sisu ja jätab navigeerimise rahule. Navigeerimine on aga nähtav igal lehel, seega järgneb väike muudatus seal külastajale kogu seansi vältel.

• Dünaamilised ressursilingid: asendage üldine rippmenüü „Ressursid“ tööstusharupõhiste üksustega. Tervishoiu külastajad näevad „HIPAA vastavuse juhendit“ ja „Tervishoiu juhtumiuuringuid“. Finantstehnoloogia külastajad näevad „SOC 2 dokumentatsiooni“ ja „Finantsteenuste ROI kalkulaatorit“.
• Personaliseeritud CTA-d navigeerimises: peamenüü CTA võib segmendi järgi muutuda. Suurettevõtete külastajad näevad „Rääkige müügiga“. VKE-de külastajad näevad „Vaata pakette“. Naasvad külastajad, kes on juba hinnalehel käinud, näevad „Alusta seadistamist“.
• Esiletõstetud jaotised: andke külastaja segmendile asjakohasele navigatsioonipunktile tagasihoidlik esiletõst. Kui külastab tootmisettevõte, tõstke tooterippmenüüs esile „Lahendused tootmisele“. Ärge kasutage selleks märki „Uus“; see pole uus ja naasvad külastajad märkavad seda.

Hoiatus: ärge muutke navigeerimise struktuuri ennast. Üksuste ümberpaigutamine või jaotiste peitmine segmentide põhjal tekitab segadust, eriti naasvatele külastajatele, kes mäletavad, kus asjad olid. Personaliseerige navigeerimisüksuste sisu, mitte navigeerimise arhitektuuri.

Sisuplokkide arhitektuur vahetatavate sektsioonide jaoks

Käsitlege lehte sisuplokkide jadana, millest igaüht saab eraldi vahetada. Igal plokil on fikseeritud liides (mõõtmed, polsterdus, tüpograafia skaala) ja muutuv sisu. Kui teie veebileht töötab juba komponenditeegi peal, on suurem osa sellest olemas; peate ainult panema sisu tulema andmetest, selle asemel et see oleks koodi sisse kirjutatud.

Ploki liidese kujundamine

Iga sisuplokk peaks vastama standardsele spetsifikatsioonile:

• Fikseeritud mõõtmed: konteineri laiuse ja kõrguse piirangud määrab lehe paigutus, mitte sisu. See hoiab ära, et personaliseeritud sisu lõhuks lehe voo.
• Kirjastiilide skaala: pealkirjad kasutavad H2-te. Põhitekst kasutab lõiku. Täpploendid kasutavad tavalist loendistiili. Ükski variant ei tohiks tuua sisse mittestandardseid kirjasuurusi.
• Vahede reeglid: sise- ja välisvahesid juhib ploki konteiner, mitte sisu. See tagab, et visuaalne rütm jääb ühtlaseks olenemata sellest, milline sisu plokki täidab.
• Sisu piirangud: määratlege iga tekstivälja maksimaalne tähemärkide arv. „Pealkiri: kuni 60 tähemärki. Kirjeldus: kuni 150 tähemärki.“ See hoiab ära personaliseeritud sisu konteineritest üle voolamise.

Ploki tüübid

Looge standardsete plokitüüpide teek, mis katab teie personaliseerimisvajadused:

• Tekst + pilt plokk: jagatud paigutus, kus ühel pool on tekst ja teisel pool pilt. Kasutatakse kõige sagedamini funktsioonide esiletõstmiseks ja kasude kirjeldamiseks.
• Statistikaplokk: mõned võtmenäitajad suurte numbrite ja selgitava tekstiga. Vahetage näitajaid segmendi kaupa, näiteks suurettevõtetele töökindluse näitaja ja väikeettevõtetele tüüpiline seadistamisaeg. Kasutage ainult numbreid, mida suudate tõendada; statistikaplokk on esimene asi, mida skeptiline ostja kontrollib.
• Soovituse plokk: tsitaat, autor ja valikuline ettevõtte logo. Üks plokk, palju sisuvariante.
• Võrdlusplokk: funktsioonide võrdlus või enne/pärast esitlus. Sisu varieerub, kuid paigutus on fikseeritud.
• CTA plokk: pealkiri, toetav tekst ja nupp. Vahetage sõnumit ja sihtkohta segmendi järgi.

Kui vajate uut personaliseeritud jaotist, koostate selle olemasolevatest plokkidest, mitte ei kujunda nullist, nii et uus variant muutub sisuülesandeks, mitte disaini- ja arenduspiletiks.

Tööstusharupõhise disaini näited

Allolevad näited on näitlikud: kuidas B2B SaaS-i avaleht võiks ülaltoodud mustrite abil kolme tööstusharusegmendi jaoks muutuda.

Tervishoiu segment

• Päis: teksti vahetus, et rõhutada HIPAA nõuetele vastavust ja patsiendiandmete kaitset. Alapealkiri viitab konkreetsetele tervishoiumäärustele.
• Sotsiaalne tõestus: logoribal on tervishoiuettevõtted (haiglad, tervisetehnoloogia idufirmad, ravimiettevõtted). Haigla IT-juhi soovitus.
• Sisuplokk: asendage üldine jaotis „Kuidas see toimib“ tervishoiupõhise töövooga, mis näitab EHR-i integratsiooni ja vastavuskontrollipunkte.
• CTA: „Vaadake, kuidas meie platvorm vastab HIPAA nõuetele“ (koos teie tootenimega) üldise „Loe edasi“ asemel.

Finantsteenuste segment

• Päis: teksti vahetus, et alustada turvalisuse, auditivalmiduse ja regulatiivse vastavusega. Pealkiri viitab SOC 2-le ja finantsandmete kaitsele.
• Sotsiaalne tõestus: logoribal on pangad, fintech-ettevõtted ja kindlustusfirmad. Finantsasutuse CISO soovitus.
• Sisuplokk: statistikaplokk näitab üldiste toote mõõdikute asemel käideldavust, krüpteerimisstandardeid ja teie sertifikaate.
• Navigeerimine: rippmenüü „Ressursid“ seab esikohale vastavusdokumentatsiooni ja turvalisuse valged raamatud.

Tootmise segment

• Päis: sisuploki vahetus tehase- ja tööstuspiltidega üldiste kontorifotode asemel. Pealkiri keskendub tegevuse tõhususele ja tarneahela läbipaistvusele.
• Sotsiaalne tõend: tootmisettevõtte operatsioonijuhi soovitus, mis rõhutab aja kokkuhoidu ja vigade vähenemist.
• Sisuplokk: asendage SaaS-keskne funktsioonide nimekiri tootmisspetsiifiliste kasutusjuhtudega: laoseisu jälgimine, kvaliteedikontroll, tarnijate haldus.
• CTA: „Vaata tootmise kliendilugu“ koos otselingiga tööstusharupõhisele kliendiloo lehele.

Brändi järjepidevuse hoidmine variantide vahel

Kui mitu inimest on variante loonud aasta või kauem, hakkab veebileht triivima: veidi erinevad nupustiilid, pealkiri toonis, mida keegi heaks pole kiitnud, fotopanga pilt teisest kogust. Ühte varianti ei märka keegi. Külastajad märkavad summat. Kaitsepiirded hoiavad seda ära.

Disaini kaitsepiirded

Teie disainisüsteem peaks määratlema, mida personaliseeritud variantides tohib ja mida ei tohi muuta:

• Fikseeritud elemendid: logo paigutus, brändi põhivärvid, tüpograafia hierarhia, päise ja jaluse paigutus. Need ei muutu variantide vahel kunagi.
• Muutuvad elemendid: pealkirjad, põhitekst, pildid, soovitused, CTA tekst. Need muutuvad vabalt plokisüsteemi piirangute raames.
• Piiratud elemendid: aktsendivärvid (piiratud palett), pildistiil (määratletud fotojuhised), ikoonikomplektid (heakskiidetud kogust). Need võivad varieeruda, kuid ainult kindlates piirides.

Tooni ja hääle juhised

Kirjutage üheleheküljeline personaliseerimise stiilijuhis (mitte terve brändiraamat), mis vastab järgmistele küsimustele:

• Milline on meie vaikimisi hääl? (nt „Professionaalne, kuid vestluslik. Otsekohene, mitte pealetükkiv.“)
• Kuidas toon segmendi järgi kohandub? (nt „Suurettevõte: formaalsem, viidake vastavusele ja mastaabile. Väikeettevõte: vabam, rõhutage kiirust ja lihtsust.“)
• Milliseid väljendeid me alati kasutame? Mida me väldime?
• Kui palju tohib sõnum meie vaikesõnumist maksimaalselt erineda?

Vaadake personaliseeritud tekstid kvartaalsete auditite käigus nende juhiste valguses üle. Väike tooni triiv kuhjub aja jooksul. Variant, mis on täna kaubamärgist pisut kõrvale kaldunud, on aasta pärast tundmatu.

Visuaalse kvaliteedikontrolli protsess

Enne kui ükski personaliseeritud variant käivitub, tehke sellest ekraanipildid kolmel vaateakna laiusel (lauaarvuti, tahvelarvuti, mobiil) ja võrrelge kõrvuti vaikimisi kogemusega. Kontrollige:

• Teksti ülevool või kärpimine
• Pildi kuvasuhte moonutus
• Värvikontrasti probleemid (eriti vahetatud taustapiltidega)
• Vahede ebaühtlus
• CTA-nupu suurus ja asukoht

Automatiseerige see võimaluse korral. Visuaalse regressiooni tööriistad, nagu Playwrighti ekraanipiltide võrdlus või Percy, suudavad märgata variantide paigutuserinevusi enne, kui need tootmisse jõuavad. Kui variandid on aktiivsed, testige neid nagu iga teist muudatust; meie 90-päevane personaliseerimise testimise tegevuskava käsitleb, kuidas teste järjestada.

Teie järgmine samm

Auditeerige oma praegust veebilehte ülalkirjeldatud plokisüsteemi järgi. Tuvastage, millised teie avalehe, tootelehe ja hinnalehe jaotised on juba ülesehitatud iseseisvate plokkidena ja millised on ümbritseva sisuga tihedalt seotud. Juba modulaarsed jaotised on teie kiireimad personaliseerimisvõimalused. Seotud jaotised vajavad enne usaldusväärset personaliseerimist ümbertöötamist. Alustage modulaarsetest ja struktureerige ülejäänud ükshaaval ümber. Kui plokid on valmis, saab Markettailori segmenteerimine otsustada, millist varianti iga ettevõte näeb, lähtudes valdkonnast, suurusest või teie juba kasutatavatest kontonimekirjadest. Segmentide määratluste kohta vaadake firmograafilised segmendid, mis konverteerivad.