Meidän mielipide hero-kuvasta on selvä
Hero-kuva vie huomion pois viestistä. Kun sivun yläosa on yksi iso kuva, vierailija katsoo mieluummin somisteita kuin lupausta. Niin usein käy, että silmä harhautuu, ajatus katkeaa ja seuraava klikkaus onkin takaisin selaimeen. Siksi uskallamme sanoa suoraan: monella sivulla hero tappaa konversion.
Pienyrittäjän kannalta tämä on kallis virhe. Etusivun tärkein tehtävä on tehdä valinta helpoksi heti taitteen yläpuolella. Jos arvolupaus ja toimintakehotus jäävät kuvan jalkoihin, myynti jää myös.
- Iso kuva syrjäyttää arvolupauksen ja toimintakehotuksen eli CTA-napin.
- Raskas kansikuva hidastaa latausta ja nostaa Largest Contentful Paintin arvoa, mikä näkyy poistumisissa.
- Mobiilissa hero on usein koko näyttö, jolloin vierailija ei edes näe CTA:ta tai luottamuselementtejä.
Miksi hero tappaa konversion useimmilla sivuilla
Ihmisen katse lukee verkossa nopeasti ja valikoiden. Silmäliiketutkimuksissa toistuu F-malli, jossa otsikko ja muutama ensimmäinen rivi ovat kriittisiä. Jos näillä riveillä on vain kuvapinta ja ylimalkaista mainoskieltä, pääviesti ei osu. Stock-kuva tai abstrakti tausta ei kerro, miksi juuri tämä yritys ratkaisee asiakkaan ongelman. Se on visuaalisesti näyttävää, mutta viestinnällisesti tyhjää.
Lisäksi heron sijoittelu usein hautaa tärkeät elementit. Puhelinnumero, varausnappi, tarjouspyyntölomake ja referenssilupaukset jäävät taitteen alapuolelle. Lämpökartat ja klikkikartat näyttävät sen armotta: ihmiset odottavat syyn toimia heti, eivät metsästä sitä vierittämällä.
Hitaus on myrkkyä myynnille
Google korostaa Core Web Vitals -mittareita, jotka kuvaavat käytettävyyttä. Largest Contentful Paint eli LCP mittaa, milloin sivun suurin sisältö latautuu. Arvaa, mikä sisältö on suurin, kun käytössä on täysleveä hero-kuva. Nimenomaan se. Siksi sitä ei voi lazy-loadata eli laiskalatauksella ohittaa. Lisäksi Interaction to Next Paint eli INP kertoo, kuinka nopeasti sivu reagoi ensimmäiseen toimintaan. Raskas kansikuva ja siihen liittyvät efektit lisäävät viivettä. Samalla Cumulative Layout Shift eli CLS voi pompauttaa sisältöä, jos kuva mitoitetaan huonosti. Jokainen näistä syö konversioastetta.
| Mittari | Mitä kuvaa | Hero-kuvan vaikutus |
|---|---|---|
| LCP | Suurimman sisältöelementin lataushetki | Täysleveä hero-kuva on usein suurin elementti → LCP pitenee eikä kuvaa voi laiskalatauksella ohittaa |
| INP | Kuinka nopeasti sivu reagoi ensimmäiseen toimintaan | Raskas kuva ja efektit lisäävät viivettä → hitaampi vaste ja heikompi käyttökokemus |
| CLS | Sisällön odottamattomat siirtymät latauksen aikana | Huonosti mitoitetut kuvat pompauttavat layoutia → virheklikkauksia ja turhautumista |
Mobiilissa hero on koko sivu
Monella asiakkaallamme liikenne on pääosin mobiilista. Pienellä näytöllä yksi kuva tarkoittaa käytännössä yhden ruudun mittaista tyhjää ennen kuin asia alkaa. Kun CTA, puhelinnappi tai ajanvarauslinkki on piilossa, osa käyttäjistä ei koskaan löydä sitä. Silloin ei auta, vaikka brändi olisi kuinka vahva.
Näin korvataan hero ilman draamaa
- Laita arvolupaus otsikoksi. Kerro yhdellä lauseella, mitä teet, kenelle ja miksi se on parempi kuin vaihtoehdot.
- Täydennä alaotsikolla, joka tekee lupauksen konkreettiseksi. Vältä yleisiä fraaseja ja kerro hyöty.
- Lisää yksi selkeä toimintakehotus eli CTA. Tee nappiin suora verbi, kuten Varaa aika tai Pyydä tarjous.
- Nosta luottamuselementit heti näkyviin. Asiakaslogot, arvostelujen keskiarvo ja selkeä palvelulupaus toimivat.
- Käytä tarvittaessa pientä, kevyttä kuvaa, joka tukee tekstiä. Ei videota tai liike-efektejä etusivun alkuun.
- Mittaa A/B-testillä. Testaa teksti-ensin-yläosa heron tilalle ja katso konversiopiikit analyytiikasta.
Kokemus kentältä: tuotot moninkertaistuivat ilman heroa
Kun rakensimme uudet sivut yritykselle, joka otti verkkosivut osaksi myyntikoneistoaan, päätimme jättää heron pois. Yläosaan tuli suora arvolupaus, tukevat referenssit ja iso CTA-nappi Pyydä tarjous. Lisäksi varmistimme suorituskyvyn kevyellä WordPress-rakenteella. Tuloksena tarjouspyyntöjä tuli heti selvästi aiempaa enemmän, jo ensimmäisen viikon aikana, moninkertaisesti investointiin nähden. Tapauksen voi lukea täältä: Uusi verkkosivusto toi moninkertaiset tuotot vain kuukaudessa.
Emme väitä, että muutos johtui vain yhdestä valinnasta. Mutta juuri tekstipainotteinen yläosa, näkyviin nostettu CTA ja turhan kuormituksen poistaminen olivat ne kytkimet, jotka tekivät päätöksestä helpon ja nopean.
Entä brändi ja visuaalisuus?
Brändi ei katoa, jos hero poistetaan. Päinvastoin, brändi vahvistuu, kun viesti on kirkas ja asiakas ymmärtää heti, mitä saa. Kaunis kuva voi tukea, mutta sen paikka on usein alempana, kontekstissa. Esimerkiksi palvelukokonaisuuden kohdalla voi näyttää aidon työn lopputuloksen tai referenssin yhteydessä tiimin kasvot. Näin visuaalisuus palvelee ymmärrystä eikä estä toimintaa.
WordPressillä tämä on helppoa ja mitattavaa
Rakennamme sivustoja WordPressillä, koska se mahdollistaa nopeat kokeilut ja selkeän sisällönhallinnan. Käytämme Elementor-sivustonrakentajaa ja kevyttä Hello-teemaa, jotka antavat täyden kontrollin taitteen yläpuolen asetteluun ilman turhaa koodikuormaa. Tekstin hierarkia, CTA-napit ja luottamuselementit saadaan sijoitettua pikselintarkasti, ja mittaaminen on helppoa.
Jos haluat välttää yllätykset, ylläpitopalvelumme on all inclusive. Siihen sisältyvät domain, webhotelli, tarvittavat lisenssit, päivittäiset varmuuskopioinnit sekä pienet muokkaukset. Kun tekninen pohja, Core Web Vitals ja sisältö ovat kunnossa, jokainen muutos on turvallinen testata eikä mikään katkea kesken kampanjan.
Konversio syntyy tekstistä, ei taustakuvasta
Tämä on provokaatio, mutta myös käytännön oppi: heron on ansaittava paikkansa, muuten hero tappaa konversion. Useimmilla palvelusivuilla paras hero on ytimekäs arvolupaus, tukeva alaotsikko ja yksi selkeä toimintakehotus. Kun asiakas saa vastauksen kolmessa sekunnissa, hän toimii. Ja silloin sivusto tekee juuri sitä, mitä varten se tehtiin.
