Header on kotisivujen ensimmäinen kosketuspinta – se näkyy jokaisella sivulla ja ratkaisee usein sekunneissa, jääkö kävijä sivustolle vai ei. Headerin suunnittelu vaikuttaa suoraan sekä käyttäjäkokemukseen että siihen, löytääkö asiakas etsimänsä ilman turhaa klikkailua.
Moni yrittäjä keskittyy etusivun keskiosaan ja jättää headerin viimeiseksi mietittäväksi, vaikka se on ainoa elementti, jonka kävijä näkee joka ikisellä alasivulla. Helsinkiläinen kampaamoyrittäjä saattaa miettiä viikkoja etusivun kuvavalintoja, mutta unohtaa, että varausnappi headerissä olisi tuonut enemmän asiakkaita kuin mikään hero-kuva.
Mitä headeriin kuuluu – ja mitä ei
Toimiva header sisältää yleensä neljä elementtiä: logon, päänavigaation, yhteystiedon tai toimintokehotuksen sekä tarvittaessa hakutoiminnon. Verkkokaupoissa mukaan tulevat usein myös ostoskori ja kielivalinta.
Logo sijoitetaan lähes poikkeuksetta vasempaan yläkulmaan – tästä tavasta ei kannata poiketa, koska se on opittu käyttäytymismalli kaikilla verkkosivuilla. Navigaatio pidetään lyhyenä: 5–7 päävalikon kohtaa on käytännössä maksimi, jonka jälkeen käyttäjä alkaa hukkua vaihtoehtoihin. Jos yrityksellä on 15 palvelua, ne kannattaa ryhmitellä alavalikoihin, ei listata kaikkia headeriin.
Toimintokehotus – esimerkiksi ”Varaa aika” tai ”Pyydä tarjous” – kannattaa erottaa visuaalisesti muusta navigaatiosta, tyypillisesti napin muodossa oikeassa reunassa. Tämä on kohta, jossa moni sivusto epäonnistuu: nappi hukkuu tekstilinkkien joukkoon eikä erotu mitenkään.
Headerin korkeus ja tilankäyttö
Desktop-headerin korkeus asettuu yleensä 70–110 pikselin välille. Alle 60 pikselin header alkaa tuntua ahtaalta, ja yli 130 pikselin header vie liikaa tilaa varsinaiselta sisällöltä, varsinkin kannettavien 13-14 tuuman näytöillä.
Mobiilissa tilanne on tiukempi. Puhelimen näytöllä header vie helposti 15–20 % näkyvästä alueesta, joten hampurilaisvalikko on käytännössä pakollinen ratkaisu heti kolmannen navigaatiokohdan jälkeen. Tämä liittyy suoraan siihen, miten mobiilinavigaatio kannattaa rakentaa kokonaisuutena – aihetta käsitellään tarkemmin artikkelissa mobiilinavigaation suunnittelusta.
Kiinteä vai vieritettävä header?
Sticky header – eli yläpalkki, joka pysyy näkyvissä vieritettäessä sivua alaspäin – on nykyään oletusvalinta suurimmalle osalle sivustoista. Verkkokaupoissa se on lähes välttämätön, koska ostoskori ja haku pitää löytyä koko ajan.
Poikkeuksiakin on. Kuvapainotteisilla portfoliosivuilla tai taidegallerioilla kiinteä header voi rikkoa visuaalisen kokemuksen, jolloin header kannattaa antaa kadota vieritettäessä ja tuoda takaisin vain, kun käyttäjä vierittää ylöspäin. Tämä on tekninen yksityiskohta, mutta se erottaa harkitun toteutuksen suoraan teemasta kopioidusta.
Yleisimmät virheet headerin suunnittelussa
Kolme virhettä toistuu yrittäjien sivustoilla säännöllisesti:
Liian monta toimintokehotusta. Kun headerissä on samanaikaisesti ”Soita meille”, ”Varaa aika” ja ”Pyydä tarjous” -napit, mikään niistä ei erotu. Yksi selkeä ensisijainen toiminto riittää – muut voi sijoittaa navigaatioon tekstilinkkeinä.
Puhelinnumero piilotettuna alavalikkoon. B2B-yrityksissä ja paikallisissa palveluissa, kuten LVI-liikkeissä tai hammaslääkäriasemilla, puhelinnumero headerissä on usein tehokkaampi konversiokeino kuin mikään lomake. Se kannattaa näyttää suoraan, ei kolmen klikkauksen takana.
Navigaation testaamatta jättäminen mobiilissa. Desktopilla toimiva 8 kohdan valikko muuttuu mobiilissa sekavaksi pudotusvalikoksi, jossa alavalikot menevät päällekkäin. Tämä kannattaa aina testata oikealla puhelimella ennen julkaisua, ei vain selaimen kehittäjätyökaluilla.
Header ja hakukoneoptimointi
Headerillä on myös tekninen rooli hakukoneoptimoinnin kannalta. Navigaation linkkitekstit toimivat Googlelle signaalina siitä, mitä sivustolla on – ”Palvelut” kertoo vähemmän kuin ”Kotisiivous Helsingissä”, jos yritys tarjoaa nimenomaan sitä.
Header-elementti kannattaa myös merkitä semanttisesti oikein HTML:ssä (
Yleinen väärinkäsitys on, että header pitäisi täyttää mahdollisimman monella avainsanalla parantaakseen näkyvyyttä. Tämä ei toimi – Google arvostaa selkeää, käyttäjälle suunnattua navigaatiota enemmän kuin avainsanoilla täytettyä valikkoa, ja ylitäytetty header itse asiassa heikentää käytettävyyttä ja sitä kautta myös sijoituksia.
Suunnittelu mobiilista käsin
Kun header suunnitellaan ensin mobiilinäytölle ja vasta sitten laajennetaan desktopiin, lopputulos on yleensä selkeämpi molemmilla laitteilla. Tämä lähestymistapa pakottaa karsimaan headerin sisällön vain oleellisimpaan, koska pienellä näytöllä ylimääräiselle ei yksinkertaisesti ole tilaa. Aihetta on käsitelty laajemmin artikkelissa mobile-first-suunnittelusta.
Käytännössä tämä tarkoittaa, että jos yritys myy sekä kotimaassa että Ruotsissa, kielivalikko ei saa viedä headerissä enempää tilaa kuin itse päänavigaatio. Pieni lippu-ikoni tai kaksikirjaiminen lyhenne (FI/SV) riittää, eikä koko maan nimeä tarvitse kirjoittaa auki.
Usein kysyttyä headerin suunnittelusta
Kuinka monta linkkiä headerin navigaatiossa saa olla?
Suositus on 5–7 päävalikon kohtaa. Tätä useampi linkki hidastaa päätöksentekoa ja hukkuu varsinkin mobiilinäytöllä. Ylimääräiset kohdat kannattaa ryhmitellä alavalikoihin tai siirtää footeriin.
Pitääkö headerin olla sama kaikilla alasivuilla?
Kyllä, pääsääntöisesti header pysyy identtisenä koko sivustolla. Poikkeuksena voi olla esimerkiksi kassaprosessi verkkokaupassa, jossa navigaatio karsitaan minimiin, jotta asiakas ei poistu kesken maksun.
Kannattaako headeriin lisätä hakukenttä?
Riippuu sivuston laajuudesta. Alle 20 sivun yritys- tai esittelysivustolla hakukenttä on usein tarpeeton ja vie tilaa tärkeämmiltä elementeiltä. Verkkokaupoissa ja yli 50 sivun sisältösivustoilla haku sen sijaan on lähes pakollinen, koska käyttäjät eivät jaksa selata valikoita läpi.
Headerin suunnittelu kannattaa aloittaa aina siitä, mitä yksi toiminto kävijän halutaan tekevän ensimmäisenä – soittaa, varata aika vai selata tuotteita. Kun tämä on selvillä, loput elementit asettuvat sen ympärille luontevasti, eikä yläpalkista tule kaikkea kaikille -kokoelmaa, joka lopulta palvelee ketään huonosti.