15+ Beautiful Website Headers and Why They Work So Well

Mikä on ensimmäinen asia, jonka käyttäjä näkee verkkosivustollasi?

Juuri otsikko.

Jos se ei ole tarpeeksi houkutteleva, jos se ei tuo selkeyttä, käyttäjät saattavat vain lähteä pois, eivätkä ehkä koskaan enää palaa.

Emmehän halua sitä, vai haluammeko?

Web-sivuston otsikot ovat keskeinen osa verkkosivuston suunnittelua. Niillä on keskeinen rooli käyttäjien huomion herättämisessä ja yhteyden luomisessa verkkosivuston kävijöihin.

Sen vuoksi käsittelemme seuraavilla riveillä joitakin otsikoiden suunnitteluperiaatteita, jotka sinun tulisi huomioida verkkosivuston otsikkoa suunnitellessasi.

Header-suunnitteluperiaatteet, joita kannattaa noudattaa

Tutkimuksissa on havaittu, että käyttäjien silmät liikkuvat verkkosivulla noudattamalla yhtä kolmesta kuviosta:

• Gutenberg-kuvio

Kuvan lähde: https://vanseodesign.comThe Gutenberg-kuviota voidaan soveltaa tekstipainotteiseen sisältöön. Se viittaa siihen, että lukijan silmät pyyhkäisevät sivun poikki ja alas vaakasuorissa liikkeissä.

Esimerkki:

• Z-kuvio

Z-kuvio määrittelee Z-kirjaimen muotoisen polun, jota käyttäjien silmät kulkevat sivua skannatessaan. Sitä suositellaan sellaisten laskeutumissivujen suunnitteluun, jotka lukijat skannaavat nopeasti.

Esimerkki:

• F-kuvio

Tämä kuvio kuvaa yleisimmin käytettyä tyyliä lukea sisältöblokkeja verkkomediassa. Käyttäjät skannaavat verkkosivun nopeasti, ja heidän katseensa seuraa F-kuviota.

Esimerkki:

Menemättä tarkemmin yksityiskohtiin näistä malleista, haluamme vahvistaa, että missä tahansa näistä malleista ylempi vaakasuora viiva on se kohta, josta kävijät aloittavat sivun skannaamisen.

Mitä verkkosivun otsikkoon kannattaa integroida?

Nämä kuviot kertovat, minkä vuoksi verkkosivujen suunnittelija joutuu päättämään tarkkaan sen, mitä käyttäjät näkevät ensin. Otsikon tulisi toimia koukkuna, joka kiinnittää heidän huomionsa ja kutsuu heidät tutustumaan muuhun sivuun.

Ei ole mahdollisuutta tehdä toista vaikutusta. Kannattaa siis miettiä tarkkaan, mitä sisällyttää otsikkoon:

• Vahva sankarikuva

Sankarikuva on erittäin suuri bannerikuva, joka näytetään verkkosivulla taiton yläpuolella. Se sisältyy otsikko-osioon ja on ensimmäinen asia, jonka käyttäjät näkevät saapuessaan verkkosivustolle. Sankarikuvien tarkoituksena on myös kiinnittää kävijöiden huomio yrityksen ainutlaatuiseen myyntivalttiin (USP). Parhaiden käytäntöjen mukaan oikeiden ihmisten kasvojen käyttäminen sankarikuvissa voi auttaa kävijöitä samaistumaan paremmin brändiin. Viestinnästä tulee inhimillisempää ja henkilökohtaisempaa.

Lähde: Drift.com

• Yksilöllinen myyntivaltti (USP)

Yksilöllinen myyntivaltti (USP) on lause, joka selittää, miksi yritys on olemassa. Sen tulisi paljastaa, mitä yritys tekee, miksi ja kenelle. Sen tulisi myös korostaa ainutlaatuisia ominaisuuksia ja hyötyjä, joiden ansiosta brändi erottuu kilpailijoistaan. Vahva USP on elintärkeä, kun halutaan välittää oikea viesti verkkosivuston kävijöille ja lopulta muuttaa heidät asiakkaiksi.

Lähde: miro.com

• Brändinimi

Brändinimi totuttaa ihmiset sivuston identiteettiin tai vahvistaa ihmisten mielikuvaa yrityksesi identiteetistä.

Ilmakuvan tulisi heijastaa brändin persoonallisuutta ja varmistaa, että brändin ääni on johdonmukainen koko verkkosivustolla. Sen pitäisi olla helposti tunnistettavissa, vaikka se leikattaisiin pois sivuston otsikosta. Ja kun se on sijoitettu verkkosivuston otsikkoon, sillä pitäisi olla keskeinen rooli henkilökohtaisen yhteyden luomisessa jokaiseen käyttäjään.

Lähde: carolinaherrera.com

• Tuotevideo

Koska käyttäjiltä kuluu vain 50 millisekuntia, ennen kuin he muodostavat mielipiteen verkkosivustosta, se tarkoittaa, että tärkeimmät viestit pitäisi saada otsikkoon. Siksi monet yritykset eivät odota, että käyttäjät selaavat alaspäin ja pääsevät tuotteensa/palvelunsa ominaisuuksiin, vaan käyttävät videon voimaa viestinsä välittämiseen paremmin. Älkäämme myöskään unohtako, että 78 % ihmisistä katsoo nettivideoita viikoittain ja 55 % katsoo nettivideoita päivittäin.

Lähde: wistia.com

• Call to action (CTA)

CTA on viesti (yleensä painikkeessa), joka laukaisee verkkosivujen kävijöissä tietyn reaktion. Toimintakutsun tulisi olla selkeästi määritelty ja verkkosivuston kävijöiden helposti ymmärrettävissä. Luonnollisesti CTA, joka on sijoitettu otsikkoon, juuri siihen kohtaan, josta kävijät aloittavat matkansa verkkosivustolle, lisää mahdollisuuksia saada haluttu toiminta kyseisiltä käyttäjiltä.

Lähde: creatopy.com

• Tuotteen esittely

Jos ylläpidät sähköistä verkkokauppaa, haluat korostaa tietyn tuotteen laatua ja kätevyyttä, ja paras tapa tehdä se on sisällyttää kyseinen tuote otsikkoon. Käyttäjien huomio kiinnittyy tuohon parhaaseen tarjoukseen, ja he ovat alttiita astumaan ostoprosessiin.

Lähde: amazon.com

Missä tahansa edellä mainituissa tapauksissa yleinen nyrkkisääntö on: Pidä se yksinkertaisena, pidä se selkeänä, tee otsikosta mukaansatempaava! Tutkimukset osoittavat, että ”keskimääräinen ero siinä, miten käyttäjät suhtautuvat informaatioon taiton ylä- ja alapuolella, on 84 %”. On siis parasta keskittyä vähentämään näitä lukuja niin paljon kuin mahdollista. Ja se onnistuu parhaiten, jos olet asettanut itsellesi tavoitteita siitä, mitä haluat välittää.

Suuret verkkosivustot, kuten www.youtube.com, rajoittavat otsikolle varattua tilaa vain vähän. Tämä tehdään tarkoituksella, sillä käyttäjien huomio halutaan ohjata johonkin tärkeämpään, kuten tuotteisiin, palveluihin tai videoihin (esim. YouTube).

Joskus otsikkoa ei edes tarvita, tai jos tarvitaan, se on vain pieni.

Se riippuu sivuston erityispiirteistä. Mieti asiaa ja anna verkkosivustollesi sen tarvitsema persoonallisuus, riippumatta siitä, mitä web-suunnittelun trendit ”kertovat” sinulle silloin tällöin.

Mitä verkkosivustosi otsikko inspiroi?

Tietyjen viestien välittämisen lisäksi voit myös harkita tiettyjen tunteiden herättämistä lukijoissa. Riippuen siitä, minkä tarkoituksen annat otsikolle, se voi herättää lukijoissa jonkin seuraavista:

• Uteliaisuus

Tietyille verkkosivustoille sopisi asettaa otsikko, joka herättää lukijoissa uteliaisuutta. He haluavat tietää lisää, he kaipaavat lisää, he ryntäävät tutkimaan loputkin jutusta.

Sellainen tunne minulla on tästä Canvan otsikosta. He tekevät valtavan lupauksen juuri siinä: ”Suunnittele mitä tahansa”. Ja sinua pyydetään testaamaan tätä. Voitko vastustaa?

• Action

Jossain tapauksissa on parempi herättää toimintaa suoraan otsikolla. Toimintakutsulla voit kutsua käyttäjiä klikkaamaan painiketta tai suorittamaan jonkin muun vuorovaikutuksen verkkosivuston kanssa heti alkuun. Planablen tapauksessa heidän USP:nsä liittyy suoraan alla olevaan CTA:han. lisäksi, jos et ole vielä aivan valmis ostamaan, siellä on myös mahdollisuus varata aika esittelyyn.

• Luottamus

Voi olla hyödyllistä aloittaa herättämällä kävijöissä luottamusta. Haluat, että he ryhtyvät myöhemmin johonkin toimenpiteeseen, ja sitä varten heidän on voitava luottaa täysin siihen, että he tekevät oikean päätöksen.

Katsotaanpa, miten Salesforce tekee sen. He ilmoittavat olevansa maailman suurin CRM. Okei, voit sanoa, että 99 % yrityksistä ei ole ensimmäisiä alallaan. Ja olisit oikeassa. Mutta jos luet alempaa, löydät varmasti jotain, jota voit hyödyntää. Siellä on tapaustutkimus, joka osoittaa, kuinka tehokas tuote on. Voit itsekin hyödyntää tällaista tapaustutkimusta.

• Kipu

Miksi ihmeessä haluaisit herättää lukijoissa kipua, varsinkin otsikosta? No, monien yritysten markkinointi perustuu FUD-periaatteeseen (Fear, Uncertainty, Doubt). Konversioprosessin varhaisessa vaiheessa pelko/kipu saa aikaan päätöksen soveltaa ratkaisua välittömästi ja saa tuon kivun häipymään.

Tämä voi olla lähestymistapa kyberturvapalveluissa, fyysisen turvallisuuden palveluissa, mutta myös terveydenhuollossa tai eläkerahastoissa.

Tällaista lähestymistapaa voidaan hyödyntää kampanjoissa, joissa halutaan saada ihmiset tietoisiksi siitä, että on rokotettava COVID-tautia vastaan tai käytettävä turvavyötä.

• Laughter

Mahdollisesti halutaan luoda emotionaalinen yhteys kävijöihin, heti alusta alkaen. Eikä siihen ole parempaa keinoa kuin saada heidät nauramaan. Ja nauraa kovaa. Syntyy myötätunnon tunne, ja saat käyttäjät seisomaan rinnallasi, kun he tutustuvat verkkosivustoon.

• Tuttuus

Käyttäjien tilanteen yhdistäminen otsikossa esitettyyn samankaltaiseen tilanteeseen voi luoda tietynlaista tuttuutta.

Tyyppisiä otsikoita erityyppisille verkkosivustoille

Sivuston erityispiirteistä riippuen jokin otsikko sopii paremmin kokonaissuunnitteluun kuin toinen. Näin ollen sinun tulisi olla selvillä siitä, minkälainen otsikkotyyppi sopii parhaiten omalle verkkosivustollesi (olipa kyseessä sitten verkkokauppa, blogi, portfolio, verkkolehti jne.).

• CTA-painotteinen otsikko

Blue Apronin tapauksessa verkkosivuston otsikkotyyppi käyttää suuren sankarikuvan sijasta suurta videota. Se välittää viihtyisyyden, tuttuuden ja ruokahalun tunnetta.

Seuraavana on CTA, joka kutsuu käyttäjää ryhtymään toimenpiteisiin, jotta hän voi hyötyä samasta viihtyisästä ja herkullisesta kokemuksesta.

CrazyEgg-verkkosivustolla on otsikko, joka kutsuu käyttäjiä ottamaan tuotteensa mukaan elävään esittelyyn. Heidän tuotteensa sopii juuri täydellisesti tällaisiin reaaliaikaisiin esittelyihin. Ja se todistaa välittömästi tuotteen hyödyt. He käyttävät myös visuaalista vihjettä, joka viittaa CTA:han: ilmapallossa olevan miehen käsi ohjaa katseen kohti painiketta.

• Brändiin keskittyvä otsikko

Tämä on kaunis esimerkki verkkosivustosta, jonka otsikko keskittyy brändi-identiteettiin ja brändielementteihin. Se sisältää logon, brändilogon värien jäljittelyn yläosassa sekä heidän sloganinsa.

• Sisältöön keskittyvä otsikko

Tämä sopii hyvin blogeihin ja lehtiin, jotka mainostavat artikkeleita ja juttuja.

Mutta, löysin myös joitain poikkeuksia.

Patagonia ei mainosta kauppaansa etusivulla, mutta, he työntävät tarinoita, jotka osoittavat heidän sitoutumisensa maailman muuttamiseen. Tämä tämänhetkinen tarina, joka on esillä verkkosivuston otsikossa, kertoo orjuudesta ja aktivismista.

Ikean tapauksessa näytön vasen puoli kehottaa kävijöitä yhteen verkkokauppaan, kun taas toinen puoli kehottaa käyttäjiä lukemaan Ikean tarinan.

• Videotaustapainotteinen otsikko

BUKWILD integroi verkkosivun otsikkoon 3 eri videota. Kunkin videon voi toistaa viemällä hiiren vastaavan kohdan päälle. Mielenkiintoista tässä on heidän luova tapansa käyttää videoita osana suurempaa ”kuvaa”, joka edustaa heidän brändiään.

• Tuotekeskeinen otsikko

Muodin verkkokauppa Croppin tapauksessa otsikossa esitellään uusimmat mallistot.

Threadless.com asettaa seinätaiteen asiayhteyteen, ja siinä on CMYK Squad. Otsikossa on myös selkeä CTA, kaikille niille, jotka kokevat kuuluvansa jollain tavalla siihen skenaarioon, jota ”squad” esittää otsikossa.

• Henkilöbrändäykseen keskittyvä otsikko

Matkablogi Alex in Wanderlandin tapauksessa verkkosivuston otsikossa käyttäjät näkevät Alexin valokuvan lisäksi tarinan alun tässä otsikossa: ”Five years and counting on the road…”. Tämä on kutsu lukijoille, jotta he haluaisivat tutustua useampaan tarinaan.

Päättääkseni…

Ilmoitusotsikot vaikuttavat suuresti verkkosivuston menestykseen tai epäonnistumiseen. Teknisesti ottaen tämä yläosa on luonnollisesti ensimmäinen asia verkkosivustolla, jonka kanssa ihmiset ovat vuorovaikutuksessa.