Etusivun viesti kuntoon 15 minuutissa – ymmärtääkö asiakkaasi heti, mitä tarjoat?
Kun potentiaalinen asiakas saapuu verkkosivuillesi ensimmäistä kertaa, hänellä on mielessään yleensä muutama kysymys: Olenko oikeassa paikassa? Löytyykö täältä sitä, mitä etsin? Kannattaako minun jatkaa eteenpäin?
Ja näihin kysymyksiin pitäisi löytyä vastaus mahdollisimman nopeasti.
Verkkosivujen ensimmäinen näkymä eli hero-osio on vähän kuin kivijalkakaupan näyteikkuna. Sen tehtävä on herättää kiinnostus ja kertoa, mitä kaupan sisältä löytyy. Jos näyteikkunasta ei saa kunnolla selvää, potentiaalinen asiakas saattaa jatkaa matkaansa seuraavaan putiikkiin.
Sama pätee verkkosivuihin.
Vaikka sivustosi olisi kuinka kaunis, ei näyttävä ulkoasu yksin riitä, jos kävijä ei ymmärrä, mitä yrityksesi oikeastaan tarjoaa - ja mikä tärkeintä, onko se relevanttia juuri hänelle.
Ja tässä on yksi yleisimmistä verkkosivujen kompastuskivistä: yrittäjälle itselleen on niin selvää, mitä hän tekee, ettei hän huomaa kertoa sitä riittävän selkeästi muille.
Mikä ihmeen hero-osio?
Hero tarkoittaa verkkosivun ensimmäistä, yleensä näyttävää sisältöosiota, joka tulee vastaan heti sivun avautuessa.
Se sisältää tyypillisesti:
Pääotsikon, joka kertoo tärkeimmän asian yrityksestäsi tai palvelustasi.
Tukitekstin, joka tarkentaa, mitä tarjoat, kenelle ja miksi se on hyödyllistä.
Toimintakehotteen eli CTA, joka ohjaa kävijää seuraavaan vaiheeseen, esimerkiksi tutustumaan palveluihin tai varaamaan ajan.
Kuvan tai muun visuaalisen elementin, joka tukee viestiä ja yrityksesi ilmettä.
Kaikkia näitä ei tarvitse tunkea samaan osioon väkisin, mutta erityisesti pääotsikon ja tukitekstin olisi hyvä kertoa nopeasti, mistä sivustolla on kyse.
Heron tärkein tehtävä ei siis ole vain näyttää hyvältä ja kuulostaa tosi mageelta. Sen pitää saada oikea ihminen kiinnostumaan ja jatkamaan sivuillasi eteenpäin.
Esimerkki: Psykologi Emilia Laineen etusivu
Kuvitellaan, että Tampereella toimiva psykologi Emilia Laine tarjoaa keskustelutukea nuorille ja nuorille aikuisille etenkin opiskeluun liittyvissä painetilanteissa.
Hänen verkkosivunsa ovat kauniit ja rauhalliset. Etusivulla on tunnelmallinen kuva ja sen päällä iso teksti:
"Tilaa pysähtyä ja tulla kuulluksi."
Kuulostaa kauniilta, eikö?
Mutta jos et tuntisi Emiliaa entuudestaan, tietäisitkö heti, mitä hän tarjoaa?
Onko kyseessä psykologi, hyvinvointivalmentaja, joogastudio vai kenties retriittipalvelu?
Kaunis lause ei vielä kerro riittävästi.
Kokeillaan siis jotain muuta.
Pääotsikko
Esimerkki: Psykologin tukea nuorille ja nuorille aikuisille Tampereella
Nyt kävijä tietää heti kolme tärkeää asiaa: mitä palvelua tarjotaan, kenelle se on tarkoitettu ja missä sitä saa.
Tämä ei ehkä kuulosta yhtä runolliselta kuin alkuperäinen otsikko, mutta se tekee tärkeimmän työnsä: kertoo selkeästi, mistä on kyse.
Tukiteksti
Esimerkki: Kaikkea ei tarvitse selvittää yksin. Painavatko opiskelupaineet, stressi tai tulevaisuuden epävarmuus mieltä? Tarjoan nuorille ja nuorille aikuisille turvallisen tilan pysähtyä, tulla kuulluksi ja keskustella elämän haasteista sekä löytää keinoja oman hyvinvoinnin tueksi arjessa.
Tukiteksti tuo mukaan sen lämmön ja inhimillisyyden, jota alkuperäisessä otsikossa tavoiteltiin.
Samalla se kertoo enemmän siitä, millaisissa tilanteissa Emilian vastaanotolle voisi hakeutua.
Toimintakehote
Esimerkki: Tutustu palveluihin →
Nyt kävijälle on tarjolla myös selkeä seuraava askel.
Ja tadaa! Etusivun aloitusosiossa on jo huomattavasti enemmän sisältöä, joka auttaa potentiaalista asiakasta ymmärtämään, onko hän oikeassa paikassa.
Etusivun hero kuntoon 15 minuutissa
Nyt on sun vuoro!
Tämän pikaremontin tarkoitus ei ole kirjoittaa koko etusivua uusiksi tai suunnitella näyttävää uutta ulkoasua. Keskitytään vain ensimmäisen näkymän tärkeimpään viestiin.
1. Katso etusivuasi asiakkaan silmin
Avaa verkkosivustosi etusivu ja katso sen ensimmäistä näkymää.
Kuvittele, että olet täysin uusi kävijä, joka ei ole koskaan kuullut yrityksestäsi.
Kysy itseltäsi:
Selviääkö heti, mitä yritykseni tarjoaa (mielellään pääotsikosta)?
Ymmärtääkö oikea kohderyhmä, että palvelu on tarkoitettu juuri heille?
Tuleeko esiin jokin syy kiinnostua tai jatkaa lukemista?
Jos vastaukset eivät löydy helposti, tiedät mitä lähdetään korjaamaan.
Pieni vinkki: Voit myös pyytää jotakuta yritystäsi huonommin tuntevaa vilkaisemaan etusivuasi ja kertomaan, mitä hän ymmärtää yrityksesi tekevän.
2. Kirjoita parempi pääotsikko
Etusivun pääotsikon tehtävä on kertoa mahdollisimman selkeästi, mitä tarjoat.
Hyvä lähtökohta on tämä kaava:
Mitä tarjoat + kenelle / mikä on tärkein hyöty
Esimerkiksi:
Ennen: "Tervetuloa sivuilleni!"
Jälkeen: "Rennot yrityskuvat yrittäjille, jotka eivät viihdy kameran edessä."
Tai kuvitteellisen psykologimme tapauksessa:
Ennen: "Tilaa pysähtyä ja tulla kuulluksi."
Jälkeen: "Psykologin tukea nuorille ja nuorille aikuisille Tampereella."
Huomaatko eron?
Jälkimmäiset kertovat heti, mistä palvelussa on kyse.
Pääotsikon ei tarvitse olla tylsä, mutta selkeys kannattaa laittaa nokkeluuden edelle.
Ja jos rakastat nykyistä tunnelmallista otsikkoasi, ei sitä välttämättä tarvitse heittää kokonaan roskiin. Se voi toimia esimerkiksi tukitekstissä tai muualla sivustolla asettamassa tunnelmaa halutunlaiseksi.
3. Lisää tarkentava tukiteksti
Kun pääotsikko kertoo, mitä tarjoat, tukitekstin tehtävä on avata asiaa hieman lisää.
Kirjoita otsikon alle 1–2 lausetta, joissa kerrot esimerkiksi:
Millaisessa tilanteessa palvelusi auttaa?
Mitä asiakas saa tai hyötyy?
Mikä tekee tavastasi palvella erityisen?
Kaikkea ei tarvitse kertoa heti. Tukitekstin tehtävä on herättää riittävästi kiinnostusta, jotta kävijä haluaa jatkaa eteenpäin. Se on itseasiassa parempi, että teksti ei ole kovin pitkä. Nettisivuja silmäillään, ei lueta pitkiä pätkiä - varsinkaan sivujen aluissa kun vasta asetetaan tunnelmaa ja aihetta.
Esimerkiksi:
Pääotsikko: "Psykologin tukea nuorille ja nuorille aikuisille Tampereella"
Tukiteksti: "Kaikkea ei tarvitse selvittää yksin. Painavatko opiskelupaineet, stressi tai tulevaisuuden epävarmuus mieltä? Tarjoan nuorille ja nuorille aikuisille turvallisen tilan pysähtyä, tulla kuulluksi ja keskustella elämän haasteista sekä löytää keinoja oman hyvinvoinnin tueksi arjessa. "
Pääotsikko kertoo faktat. Tukiteksti tuo mukaan tunnetta, tarkennusta ja persoonallisuutta.
Yhdessä ne muodostavat paljon vahvemman ensivaikutelman kuin kumpikaan yksinään.
4. Päivitä tekstit Squarespacessa ja tarkista lopputulos
Nyt siirretään uudet tekstit verkkosivuille!
Avaa Squarespacessa etusivusi muokkaustila ja vaihda hero-osion pääotsikko ja tukiteksti uusiin.
Tallenna muutokset ja kurkkaa lopputulosta myös puhelimella.
Tarkista vielä:
Mahtuuko pääotsikko nätisti myös mobiilinäytölle?
Onko teksti helposti luettavaa?
Ymmärtääkö kävijä ensimmäisestä näkymästä, mitä tarjoat?
Jos kaikki näyttää hyvältä, tämä tehtävä on valmis ja olet merkittävästi parantanut sivuille saapuvan kävijän potentiaalia jatkaa eteenpäin sivullasi. ✓
Jos riittää energiaa ja intoa muokata hero osiota myös visuaalistesti, kurkkaa kolmen erilaisen hero osion tekemisen ohjeistus.
Siitä saat inspiraatiota etusivun alun asetteluun sekä Squarespace ohjeita mitä voit hyödyntää muuallakin kuin vain hero-osioissa.
Tee Squarespace-sivustollesi näyttävä ensivaikutelma
Verkkosivujen ensimmäinen näkymä etusivulla eli hero-osio on yksi sivuston tärkeimmistä kohdista. Se on usein ensimmäinen asia, jonka kävijä näkee sivuille saapuessaan, ja sillä on iso vaikutus siihen, millainen ensivaikutelma sivustosta syntyy.
Squarespacen omilla työkaluilla voi rakentaa todella näyttäviä ja persoonallisia hero-osioita, kunhan tietää, miten eri elementtejä ja asetuksia kannattaa hyödyntää.
Tässä video-ohjepaketissa opit tekemään kolme erilaista, visuaalisesti näyttävää hero-osiota Squarespacessa. Saat vaiheittaiset ohjeet asettelujen rakentamiseen ja opit samalla hyödyntämään Squarespacen ominaisuuksia vähän tavallista luovemmin.
Voit toteuttaa jonkin esimerkeistä sellaisenaan omilla kuvillasi, fonteillasi ja väreilläsi tai poimia niistä ideoita ja tekniikoita oman sivustosi suunnitteluun (myös muihin kuin hero-osioihin).
Mitä ohjepaketti sisältää?
Paketti sisältää kolme erillistä video-ohjetta, joissa rakennetaan kolme erilaista hero-osiota. Kaikki käytössä olevat ratkaisut on on luotu Squarespacen omilla ominaisuuksilla eli täysin ilman koodia.
1. Suuri otsikko kuvan päällä — Pamela
Näyttävä hero-osio, jossa suuri, persoonallisella fontilla toteutettu otsikko asettuu kuvan päälle ja ulottuu osion alareunaan. Lopputuloksena on rohkea, editorial-henkinen aloitusnäkymä.
2. Jaettu hero-osio kuvalla ja tekstillä — Hiki Club
Moderni ja graafinen asettelu, jossa kuva ja suuri otsikko muodostavat kaksi vierekkäistä kokonaisuutta. Opit rakentamaan näyttävän, selkeästi jaetun hero-osion, jossa typografia on pääosassa.
3. Näyttävä otsikko taustakuvan päällä — Kahvila Kuiske
Hero-osio, jossa suuri otsikko sijoittuu koko osion levyisen taustakuvan päälle vinossa ja kokonaisuutta viimeistellään pienillä tekstielementeillä. Lopputuloksena on persoonallinen, kerroksellinen ja viimeistelty aloitusnäkymä.
Videoissa näet vaihe vaiheelta, miten asettelut rakennetaan Squarespacessa ja mitä asetuksia niiden toteuttamiseen tarvitaan.
Ohjeiden avulla opit myös uusia tapoja yhdistellä kuvia, tekstejä ja muita elementtejä, jotta saat enemmän irti Squarespacen omista suunnittelutyökaluista. Näistä ominaisuuksista on hyötyä myös ihan kaikkien sivujen suunnittelu- ja rakennustyössä.
Kenelle ohjepaketti sopii?
Ohjepaketti sopii sinulle, jos käytössäsi on Squarespace 7.1 ja haluat tehdä verkkosivustostasi visuaalisesti näyttävämmän ja persoonallisemman.
Erityisesti silloin, jos tuntuu, että Squarespacen perusasettelut on jo nähty ja haluaisit kokeilla jotain vähän erilaista tai kaipaat inspiraatiota ja käytännön ohjeita miten erilaisia asetteluja voi Squarespacessa tehdä.
Olitpa rakentamassa ensimmäisiä Squarespace-sivujasi, uudistamassa olemassa olevaa sivustoa tai tekemässä verkkosivuja asiakkaillesi, saat ohjeista uusia ideoita ja käytännön vinkkejä näyttävien sivuosioiden rakentamiseen.
Et tarvitse aikaisempaa sivujen rakennusosaamista. Ohjeiden tavoitteena on näyttää, miten saat Squarespacen omista työkaluista enemmän irti ja rakennat niiden avulla tavallista näyttävämpiä kokonaisuuksia.
Tämä on digitaalinen tuote, joka on käytettävissä heti oston jälkeen. Kun hyväksyt toimituksen aloitettavaksi heti, menetät samalla kuluttajansuojalain mukaisen 14 päivän peruuttamisoikeuden.
