Verkkosivuesimerkit valehtelevat sinulle: Kenttäopas toimistoille

Yhteenveto

Verkkosivuesimerkit näyttävät valmiilta tuotteilta, mutta ne ovat oikeastaan vastauksia kysymykseen, jota et ole vielä kysynyt. Useimmat tiimit keräävät esimerkkejä, näyttävät niitä asiakkaille ja yrittävät sitten kopioida ulkoasun. Tämä prosessi epäonnistuu, koska se kopioi pinnan rakenteen sijaan. Tämä artikkeli oikaisee kuusi myyttiä verkkosivuesimerkeistä: nokkelan otsikon, hero-osion joka selittää kaiken, ylimääräisen CTA:n, toimialan sääntökirjan, 'se on valmis kun näyttää hyvältä' -luovutuksen ja mallin kopioimisvaiston. Jokainen oikaisu antaa sinulle toistettavan kritiikin, jota voit käyttää jokaisen asiakkaan seuraavassa toteutuksessa. Käytä sekvenssiä kerran, niin lopetat sivujen näyttämisen esimerkeiltä ja alat saada sivut tekemään mitä esimerkit tekevät.

Näyttääkö asiakkaasi uusi sivusto täsmälleen samalta kuin esimerkki, jota he rakastivat, mutta tuntuu silti kuolleelta? Et ole yksin. Sivulla on sama asettelu, samat värit, sama lihavoitu typografia. Eikä se silti konvertoi. Tässä syy: verkkosivuesimerkit ovat vastauksia, eivät malleja. Ne on rakennettu ratkaisemaan yksi tietty ongelma yhdelle tietylle yleisölle. Kopioit niiden pinnan, etkä peri niiden logiikkaa. Tämä opas tappaa kuusi myyttiä verkkosivuesimerkeistä, jotta voit muuttaa minkä tahansa esimerkin toistettavaksi kritiikiksi, joka toimii seuraavan asiakkaan kohdalla. Käytä sitä jokaisessa toteutuksessa, ei vain hauskoissa.

Myytti: Laita se vain näyttämään esimerkiltä

Aloita tehtävästä, joka pitää tehdä. Ennen kuin avaat yhdenkään esimerkin, kirjoita ylös se yksi toiminto, jonka tämän sivun on mahdollistettava. Ei toimintoja. Yksi. SaaS-sivulla: aloita kokeilujakso. Toimiston sivulla: varaa puhelu. Portfoliossa: lähetä tiedustelu. Mene sitten avaamaan esimerkkejä. Ainoat säilyttämisen arvoiset ovat sivut, jotka työntävät tuntematonta kohti tällaista päätöstä mahdollisimman vähällä kitkalla.

Todellisuus: sivu on kone, jolla on yksi tuotos. Tässä useimmat työt menevät pieleen. Tiimit lähtevät liikkeelle visuaalisesta kerroksesta. He pitävät hero-osiosta, he pitävät väristä, he pitävät fonttiyhdistelmästä. Joten he rakentavat nämä elementit uudelleen sivulle, jolla on täysin eri tehtävä. Lopputulos näyttää esimerkiltä, mutta ei käyttäydy lainkaan sen tavoin. Esimerkki konvertoi, koska sen rakenne vastasi sen tehtävää. Sinun sivusi on pukeutunut naamiaisasuun.

Ratkaisu on yhden lauseen testi. Jokaisesta keräämästäsi esimerkistä kirjoita: Tämä sivu vakuuttaa [vierailijatyypin] tekemään [yhden toiminnon]. Jos et pysty täydentämään lausetta, esimerkki on koristetta. Voit kerätä koristeita, jos se auttaa tunnelmatauluasi, mutta älä aseta sitä asiakkaan eteen strategiana.

Näin se toimii eri asiakkaiden kohdalla. Sinulla on asiakas, joka myy ohjelmistoa, ja asiakas, joka myy valmennusta. Kaksi eri toimialaa, sama kysymys. Vierailija saapuu. Mikä on se yksi toiminto, joka vie suhdetta eteenpäin? Ohjelmistoasiakkaalle: aloita kokeilujakso. Valmentajalle: varaa puhelu. Kirjoita ne ylös ja pidä ne pöydällä. Jokainen suunnittelupäätös, jokainen tekstivalinta, jokainen sivun osio joko tukee tätä toimintoa tai poistuu. Tämä on toistettava osa. Se ei riipu mausta. Se riippuu päätöksestä, jonka teit ennen minkään työkalun avaamista.

Tämä on ydinerot kopioimisen ja rakentamisen välillä: kopiointi toistaa sen, mitä näet, rakentaminen toistaa sen, minkä esimerkki päätti. Kun tunnistat päätöksen ensin, voit varastaa heidän luurankonsa heidän ihonsa sijaan. Kun teet niin, sama esimerkki voi ohjata SaaS-sivua, toimiston sivua ja portfoliota. Asiakas vaihtuu. Logiikka ei.

Myytti	Todellisuus
Hyvä verkkosivusto näyttää erottuvalta	Hyvä verkkosivusto antaa tuntemattomalle yhden selkeän tehtävän
Hero-osion pitäisi selittää kaikki	Hero-osion pitäisi ansaita vieritys
Useammat CTA:t tarkoittavat enemmän konversioita	Yksi sivu, yksi ensisijainen toiminto
Selkeys tarkoittaa enemmän tekstiä	Selkeys tarkoittaa vähemmän, paremmin valittuja sanoja
Esimerkit ovat kopioitavia malleja	Esimerkit ovat todisteita päätöksestä
Kun se näyttää oikealta, se on valmis	Sivu on hypoteesi, kunnes liikenne todistaa sen

Myytti: Vahva brändi tarkoittaa nokkelaa otsikkoa

Katso Calendlyn kotisivua. Sen ensimmäinen rivi on "Schedule meetings without the back-and-forth emails." Ei mitään nokkelaa. Ei sanaleikkejä, ei sanaleikkejä. Se kertoo lopputuloksen ja poistaa kivun. Näin arvolupauksen pitäisi toimia: nimeä muutos, jonka asiakas saa, ja kitka, jonka poistat.

Todellisuus: selkeys voittaa nokkeluuden. Asiakkaat taistelevat sinua vastaan tästä. He haluavat "mullistaa", "voimaannuttaa", "vapauttaa". Nämä sanat eivät merkitse mitään vierailijalle, joka päättää, klikkaako hän. Vierailija ei välitä asiakkaasi missiosta. Hän välittää siitä, mitä tapahtuu klikkauksen jälkeen.

Ota asiakas, joka myy talousvalmennusta. Heidän nykyinen hero-osionsa sanoo "Autamme ihmisiä rakentamaan varallisuutta luottavaisesti." Se on kategoria, ei lupaus. Kirjoita se uudelleen: "Saat selkeän kuukausittaisen säästösuunnitelman yhdellä 45 minuutin puhelulla." Kumpi versio kertoo tuntemattomalle, mitä hän saa? Kumpi versio tekee seuraavasta askeleesta ilmeisen? Se on se, joka julkaistaan.

Kirjoita siis otsikko lauseena, jonka asiakas sanoisi kollegalleen. Ei iskulause. Lause. Jos lause hämmentäisi ketään, karsi sitä, kunnes se ei hämmentäisi. Tee sitten sama väliotsikolle: yksi tukirivi, ei kappale. Selkeimmät sivut tekevät tämän hellittämättä. Katso kaavaa missä tahansa korkeasti konvertoivien SaaS-sivujen joukossa: puhdas otsikko, lyhyt väliotsikko, yksi toimintakutsu. Palkintoja voittavat esimerkit rikkovat tämän kaavan joskus. Konvertoivat esimerkit rikkovat sitä harvoin.

Brändi kyllä merkitsee, mutta ei siellä, missä luulet. Brändi elää äänessä, kuvastossa ja sivun tunteessa. Otsikko ei ole paikka olla arvoituksellinen. Otsikko on paikka olla yksinkertainen. Kun asiakkaat vastustelevat, pyydä heitä nimeämään yksi yritys, jota he ihailevat iskulauseesta, joka hämmentää heidät ensimmäisellä lukukerralla. He eivät löydä yhtään. Hämmennys on toiminnan vihollinen.

Myytti: Taitteen yläpuoli tarkoittaa kaiken ahtamista hero-osioon

Taitteen yläpuoli ei ole viiva, joka pitää täyttää. Se on päätöspiste. Vierailija katsoo ensimmäistä näyttöä ja vastaa kolmeen kysymykseen: Mikä tämä on? Kenelle se on? Mitä minun pitäisi klikata? Jos hero-osion on työskenneltävä kovemmin kuin niin, olet jo menettänyt ne, jotka olisivat voineet konvertoitua.

Todellisuus: taitteen yläpuoli on suodatin. Katso hero-osioita, jotka toimivat. Linearin kotisivu on referenssi: minimalistinen otsikko, minimalistinen väliotsikko, yksi selkeä seuraava askel. Ei karusellia. Ei "Lue lisää" kilpailemassa "Aloita" kanssa. Vain yksi ilmeinen polku eteenpäin. Loput tarinasta tulee päätöksen jälkeen, ei ennen sitä.

Tämä on myytti, joka maksaa eniten asiakkaan luottamusta, koska tyhjä tila tuntuu keskeneräiseltä jollekin, joka maksoi suunnittelusta. Pidä linja. Hero-osio, jossa on selkeä otsikko ja yksi CTA, ei ole keskeneräinen. Se on suodatin. Se kertoo väärälle vierailijalle poistumaan nopeasti ja oikealle vierailijalle, mihin klikata.

Tee peittotesti. Aseta paperinpala näytön alaosan päälle jokaisesta harkitsemastasi esimerkistä. Jos et pysty vastaamaan kolmeen kysymykseen jäljellä olevasta, hylkää esimerkki. Tee sama asiakkaasi nykyiselle sivustolle. Harjoitus vie kaksi minuuttia, ja se on nopein tapa todistaa, että sivu yrittää tehdä liikaa.

Tulet kuulemaan "meidän pitää käyttää tila hyödyksi". Se on asiakkaan ahdistusta, ei suunnitteluperiaate. Tila ei ole hukkaan heitettyä; epäselvyys on hukkaan heitettyä. Vierailija, jonka on selvitettävä sivu, on vierailija, joka on jo lähdössä. Käytä taitteen yläpuolta vastataksesi käytännön kysymyksiin ja mieti luovia yksityiskohtia alempana.

Tässä on vastakkaisnäkökulma: minimalismi ei ole myöskään tavoite. Harva hero-osio, joka ei koskaan kerro, mitä tuote tekee, on vain kaunis palapeli. Selkeys on tavoite. Minimalismi on taktiikka, joka auttaa selkeyttä, ja sotku on taktiikka, joka tappaa sen. Arvioi jokaista elementtiä sen mukaan, auttaako se vierailijaa tekemään sen yhden päätöksen. Jos ei, leikkaa se. Jos se selkeyttää, pidä se, vaikka muotoilu tuntuisi kiireiseltä. Testi ei ole "onko tämä siisti?" Vaan "näkeekö tuntematon polun?"

Myytti: Useammat CTA:t tarkoittavat enemmän mahdollisuuksia konvertoida

Tee CTA-auditointi huomenna. Avaa asiakkaasi kotisivu ja laske jokainen painike ja linkki, jotka kilpailevat päätoiminnon kanssa. Useimmilla sivuilla on useita: "Lue lisää", "Tutustu palveluihin", "Ota yhteyttä", "Lue blogi", "Katso hinnat". Kun jokainen elementti pyytää huomiota, yksikään ei saa sitä. Vierailija vastaa tekemällä ei mitään.

Todellisuus: yksi sivu, yksi ensisijainen toiminto. Menestyvät sivut vastustavat tätä. Esimerkiksi Notionin sivusto pyrkii yhteen toimintakutsuun. Yksi sivu, yksi ensisijainen toiminto. Kurinalaisuus pakottaa valinnan: mitä me oikeastaan haluamme tämän vierailijan tekevän? Jos vastaus on "aloita kokeilujakso", koko sivu palvelee sitä painiketta. Kaikki muu joko tukee sitä tai poistuu.

Yksi ensisijainen CTA ei tarkoita vain yhtä linkkiä. Toissijaiset toiminnot ovat sallittuja. Niiden tulisi olla hillitympiä, sijoitettuja myöhemmäksi, eikä niitä saa koskaan sijoittaa ensisijaisen painikkeen viereen hero-osiossa. Et poista valintoja. Asetat ne järjestykseen. Vierailija voi edelleen tutkia, lukea ja vertailla. Mutta sivulla on selkäranka, ja selkäranka osoittaa yhteen suuntaan.

Nimeä se yksi painike, joka merkitsee eniten jokaiselle asiakkaalle. Laita se hero-osioon. Toista se todisteosion jälkeen. Anna sitten tilaa. Jos asiakas pyytää toista kilpailevaa painiketta hero-osioon, kysy heiltä, kumpaan he panisivat neljännesdollarin. Se, jonka he valitsevat, on ensisijainen. Toinen on häiriötekijä.

Rakenna hierarkia yhdelle riville: ensisijainen painike (yksi), toissijainen linkki (hillitty), tertiääriset linkit (valikko). Kirjoita se tarjoukseesi, jotta asiakas tietää suunnitelman ennen kuin näkee muotoilun. Kun asiakas myöhemmin vaatii toista ensisijaista painiketta, viittaa takaisin riviin. Sanoit sopineesi yhteen.

Tämä on toistettava keskustelu. Käyt sen jokaisen asiakkaan kanssa, koska jokainen asiakas pyytää lisää vaihtoehtoja. Vastauksesi joka kerta: yksi sivu, yksi tehtävä, yksi ensisijainen toiminto. Se ei ole luova mielipide. Se on kaava, joka kulkee parhaiden esimerkkien läpi.

Myytti: Asiakkaasi toimiala tarvitsee omat sääntönsä

Virhe on kohdella "SaaS" ja "toimisto" eri lajeina. Tehtävä on sama. Siirrä tuntematon yhteen päätökseen. Mikä muuttuu, on todiste, jota käytät tekemään päätöksestä turvallisen.

Todellisuus: sama tehtävä, eri todisteet. SaaS-sivu todistaa tuotteen toimivan demolla, kokeilujaksolla tai kuvakaappauksella itse tuotteesta. Toimiston sivu todistaa tiimin toimivan tapaustutkimuksilla ja tuloksilla. Portfolio todistaa työn olevan palkkaamisen arvoinen ennen/jälkeen-selkeydellä ja asiakkaan omilla sanoilla. Sama luuranko, eri todisteet.

Joten ennen kuin hylkäät esimerkin, koska se on toiselta toimialalta, katso pinnan ohi. Kysy, mihin päätökseen se tähtää ja mitä todisteita se johtaa. Hammaslääkärin varaussivu ja SaaS-tuotteen varaussivu voivat jakaa saman anatomian: selkeä otsikko, yksi CTA, todiste, joka vähentää klikkaamisen riskiä. Hammaslääkäri sanoo "Ei vakuutussotkua." SaaS-tuote sanoo "Ei luottokorttia vaadita." Eri sanasto, sama tehtävä.

Siksi verkkosivuesimerkkien lainaaminen muilta toimialoilta toimii. Lainattu esimerkki rikkoo asiakkaasi oletukset siitä, miltä heidän oman toimialansa pitäisi näyttää. Se antaa sinulle myös sisäänrakennetun syyn perustella päätös. Kun asiakas sanoo "kaikki kilpailijamme tekevät näin", voit osoittaa toimialan ulkopuoliseen sivuun, joka tekee saman tehtävän paremmalla rakenteella.

Kysy päätöksen painoarvosta. Vierailija, joka valitsee projektinhallintatyökalun, tekee pienemmän panoksen päätöksen kuin se, joka myöntää kuusinumeroisen toimeksiannon. Rakenne pysyy: yksi tehtävä, yksi CTA, kerrokselliset todisteet. Kerrokset vaihtuvat. Toimiston sivu tarvitsee syvällisempiä tapaustutkimuksia, nimettyjä rooleja ja vahvemman käsityksen työsuhteesta. SaaS-sivu tarvitsee demon, kokeilujakson ja todisteen nopeudesta.

Varoitus: älä käytä ulkopuolista esimerkkiä välttääksesi todellisia toimialan rajoitteita. Lakitoimisto ei voi konvertoida kuin deittisovellus, ei siksi, että rakenne eroaa, vaan koska luottamusvaatimukset ja päätöksen painoarvo eroavat. Ajat silti yhtä toimintoa. Tarvitset vain enemmän todisteita ja vähemmän naurua. Toimiala on merkityksellinen rajoitteena, ei sääntöjen joukkona. Aloita tehtävästä, säädä sitten todisteita.

Myytti: Kun se näyttää oikealta, se on valmis

Julkaise sivu ja muuta sitten yhtä asiaa kerrallaan. Konversio on hypoteesi, kunnes oikea vierailija todistaa sen. Ensimmäinen versio on arvaus, joka perustuu esimerkkien todisteisiin. Ainoa tapa tietää, onko arvaus oikea, on laittaa se liikenteen eteen ja katsoa, mitä tapahtuu.

Todellisuus: jokainen sivu on hypoteesi. Älä aja seitsemää testiä kerralla. Et tiedä, mikä muutos vaikutti lopputulokseen. Muuta otsikkoa, mittaa. Muuta CTA:ta, mittaa. Muuta todisteiden järjestystä, mittaa. Yksi muuttuja kerrallaan, viikko tai kaksi per testi liikenteestä riippuen, ja opit, mihin tämän asiakkaan yleisö oikeasti reagoi. Ruma sivu, joka konvertoi, voittaa kauniin sivun, joka ei konvertoi. Kauneus ei ole tavoite. Kitkattomuus on.

Se ei ole tekosyy julkaista rumaa työtä. Se on syy käsitellä viimeistelyä myöhempänä vaiheena, ei ensimmäisenä vaiheena. Viimeistelet sen, minkä todisteet palkitsevat. Et viimeistele arvausta. Kun asiakas pyytää "päivitystä", työnnä vastaan. Kysy, mitä nykyisen sivun pitäisi saavuttaa ja mitä se todella saavuttaa. Jos kukaan ei ole määritellyt tehtävää, päivitys on vain uusi maalikerros sivulla, jolla ei ole selkärankaa.

Aseta mittaus ennen julkaisua. Määritä yksi metriikka, joka lasketaan sivun menestykseksi. Se voi olla klikkaus, puhelu, lomakkeen lähetys. Se ei voi olla "sitoutuminen" tai "sivulla vietetty aika", ellei se ole kirjaimellisesti liiketoiminnan tavoite. Sitten sinulla on jotain, jota vasten testata. Jos liikennettä on vähän, käytä laadullista palautetta sen sijaan: viisi asiakaspuhelua kysyen, mitä he klikkaisivat. Mutta älä väitä voittajaa ilman todisteita.

Käsittele jokaista julkaisua auditoinnin alkuna. Katso sivua niin kuin vierailija oikeasti katsoo: nopeasti, skeptisesti ja hieman tylsistyneenä. Tämä on taito, jota voit soveltaa jokaiseen asiakkaaseen, ja sinun pitäisi. Parhaat esimerkit eivät näytä hyviltä siksi, että niiden suunnittelijat ovat luovempia. Ne konvertoivat, koska niiden tiimit muuttavat yhtä asiaa, kunnes sivu vastaa tehtävää.

Tee näin

Seuraava asiakastapaamisesi alkaa esimerkeillä. Se on ok. Käytä niitä. Mutta aloita kysymyksellä, et tunnelmataululla: "Mitä vierailijan pitäisi tehdä tällä sivulla?" Ota sitten esimerkit, joista he pitävät, ja vie ne läpi yllä olevista testeistä. Mitä tehtävää kukin tekee? Pystytkö vastaamaan kolmeen hero-kysymykseen? Onko olemassa yhtä ensisijaista CTA:ta? Mikä todiste vähentää klikkaamisen riskiä?

Tulet saamaan vastustusta. Asiakkaat puolustavat nokkelaa otsikkoa ja ylimääräistä painiketta. Silloin muistutat heitä siitä, mitä esimerkki oikeasti tekee, ei siitä, miltä se näyttää. Voit auditoida verkkosivusi kuin asiakas, joka ei välitä ja näyttää heille, kuinka nopeasti sivu voittaa tai menettää klikkauksen.

Tämä sarja on toistettava: määritä tehtävä, kirjoita yksinkertainen lause, rakenna hero-osio yhden päätöksen ympärille, karsi kilpailevat CTA:t, varasta rakenne esimerkeistä, joilla on sama tehtävä, ja julkaise sitten ja muuta yhtä asiaa kerrallaan. Suorita se jokaiselle asiakkaalle, jokaiselle sivulle, ja esimerkit lakkaavat olemasta tyylin lähde. Niistä tulee strategian lähde. Se on ero tiimin, joka rakentaa verkkosivuja, ja tiimin, joka rakentaa päätöksiä, välillä.