Ilmustration by Eleni Debo
Ilmustration: Otsikko on avainasemassa verkkosivuston suunnittelussa, ja se määrittelee sävyn sen kaikille muille osa-alueille. Varsinkin nyt voitokkaan minimalismin aikakaudella, jolloin erilaiset silmäkarkit usein karkotetaan häikäilemättömästi mutta reilusti. Joskus silmälle ei jää jäljelle mitään muuta kiinnekohtaa, joten verkkosivuston otsikkosuunnittelun rooli on kasvanut merkittävästi.
Verkkosuunnittelijat näkevät paljon vaivaa suunnitellessaan tätä verkkosivuston osaa luovuutta ja tuottavuutta silmällä pitäen. Googlen mukaan mielipiteen muodostaminen verkkosivustosta kestää vain 50 ms, ja osa mielipiteistä kehittyy uskomattomassa 17 ms:ssa. Kuluttajien tutustuminen brändiin alkaa täältä.
Jos haluat oppia, miten suunnitella verkkosivuston otsikko, joka toimii, ja mitä elementtejä sen tulisi sisältää, lue eteenpäin, siellä on esimerkkejä.
”Elämä on ensivaikutelma. Saat siitä yhden tilaisuuden.
Tee siitä ikuinen.”
– J.R. Rim
Sivujen etusivuotsikko (header header) eli otsikkootsikko (header header) eli etusivuotsikko (header header header) tarkoittaa verkkosivun ylimpää osaa. Aikaisemmin ihmiset ymmärsivät otsikot verkkosivujen yläosissa oleviksi kapeiksi kaistaleiksi, jotka sisälsivät logon, toimintakutsun ja yhteystiedot. Nykyaikaisessa muotoilussa otsikkona pidetään kuitenkin koko kotisivun taiton yläpuolella olevaa tilaa.
Sivun strategisena osana, jonka ihmiset näkevät ensimmäisten sekuntien aikana verkkosivuston lataamisen jälkeen, otsikko toimii eräänlaisena kutsuna. Sen tulisi antaa perustiedot sivustosta, jotta käyttäjät ymmärtäisivät sekunneissa, mitä se tarjoaa.
Jotkut suunnittelijat tekevät erillisiä otsikoita sivuston eri osioille. Voit esimerkiksi tehdä ison otsikon etusivulle ja jättää pienen kaistaleen muille sivuille. Pidä se kuitenkin johdonmukaisena. Sisäsivun otsikkomuotoilun tulisi olla lyhennetty versio pääsivun otsikosta. Tämä on hyvä verkkosivujen suunnittelukäytäntö.
- Mitä verkkosivujen otsikko sisältää?
- Parhaat verkkosivujen otsikkosuunnittelukäytännöt
- otsikon koko
- Visuaalinen hierarkia
- Kiinteä (tahmea) otsikko
- Ilmoitusotsikon välittämää viestiä
- Videota tai animaatiota
- Hyvin suunniteltu toimintakutsu
- Parhaat fontit verkkosivujen otsikoihin
- Yksinkertainen otsikkosuunnittelu
- Kätketty navigaatio (hampurilaisvalikko)
- Kännykkään suunniteltavan otsikon suunnittelu
- Johtopäätöksinä
Mitä verkkosivujen otsikko sisältää?
Sivujen otsikon tehtävänä on antaa käyttäjille vastauksia peruskysymyksiin: mitä tuotemerkkiä edustetaan, mitä tavaroita ja palveluita tarjotaan, miten ottaa yhteyttä yrityksen työntekijöihin, onko ajankohtaisia tarjouksia ja niin edelleen.
Sivujen otsikon lisäksi se edustaa myös sivuston laatua ja jopa identiteettiä. Jos otsikko herättää hyvän tunnereaktion ja katsoja kokee, että siinä on jotain arvokasta, olet läpäissyt alkutestin.
Sivuston otsikon tärkeimmät elementit ovat yleensä:
- logo tai brändin tunniste
- kutsu toimintaan
- teksti tai otsikko
- navigaatioelementit
- haku.
Kaikkea näistä elementeistä ei ole pakko lisätä yhtä aikaa. On löydettävä tasapaino tiedon runsauden ja sen harmonisen sijoittelun välillä. Käytä vain tarvitsemaasi tietoa, otsikon ylikuormittaminen ei osoittautuisi hyödylliseksi, vaikka kaikki linkit tuntuisivatkin tärkeiltä.
Liian tyhjän otsikon jättäminen ei myöskään ole hyvä idea. Käyttäjä, joka ei saa käyttöliittymästäsi selvää muutamassa sekunnissa, lähtee todennäköisesti pois eikä palaa takaisin. Huono otsikko voi työntää kävijät pois toiselle sivustolle, jolla on huonompi sisältö.
Minimalistisissa otsikkomalleissa esitetään vain linkit sivuston tärkeimpiin osioihin ja yrityksen logo. Tämä tekniikka on erityisen hyödyllinen laskeutumissivuja suunniteltaessa.
Parhaat verkkosivujen otsikkosuunnittelukäytännöt
Loukkaavuuttasi ei rajoita mikään otsikko-osion muotoilussa. Sivuston otsikko on alue, joka on avoinna monenlaisille luoville suunnitteluratkaisuille, joiden tulisi olla mieleenpainuvia, ytimekkäitä ja hyödyllisiä.
Käydään läpi tärkeimmät kohdat.
otsikon koko
Kysymykseen siitä, minkä kokoinen verkkosivuston otsikkokuvan tulisi olla, ei ole yksiselitteistä vastausta. Jotkin resurssit yrittävät tarjota sarjoja tarkkoja lukuja, mutta nykyään yksi verkkosivujen rakentamisen vaikeimmista osa-alueista on varmistaa tehokkuus jokaisessa näytön koossa. Ja vaikka kaksi näyttöä olisivatkin samankokoisia, resoluutio saattaa olla erilainen, joten käyttäjät eivät näe samaa.
Ei siis kannata takertua tarkkaan pikselikäsitteeseen, vaan noudattaa mieluummin yksinkertaisia terveen järjen sääntöjä.
Ohotsivun tulisi olla niin korkea, ettei se häiritse sisällön hahmottamista. Informaatioresursseille pieni otsikko olisi hyvä valinta, kun taas laskeutumisessa otsikko voi olla suurempi.
Tilavuudeltaan suurten otsikoiden kohdalla on parempi jättää taiton alle hieman tilaa, jotta käyttäjä saa vilauksen siitä, mitä sivulla on seuraavaksi, ja alkaa selata.
Visuaalinen hierarkia
Nielsen Norman -ryhmä muotoili teoriansa F-kirjaimen muotoisesta verkkolukemissuunnitelmaa koskevasta kuviomallista ensimmäisen kerran vuonna 2006, eikä se ole menettänyt merkitystään tähän päivään mennessä.
Henkilö, joka löytää itsensä uudelta tuntemattomalta sivustolta, aloittaa visuaalisen matkansa aina näytön vasemmasta yläkulmasta. Ja jos hän ei löydä sieltä odotettua tietoa, sivu koetaan automaattisesti hankalaksi ja epätyypilliseksi, jonka ymmärtäminen vaatii liikaa vaivaa.
Logo. Eräässä toisessa NN/g:n tekemässä tutkimuksessa havaittiin, että käyttäjät muistavat paljon helpommin ne tuotemerkit, joiden logot on sijoitettu vasemmalle verrattuna keskelle tai oikealle sijoitettuun osaan.
Jos sinulla on pyöreämuotoinen logo, on hyväksyttävää sijoittaa se ruudun keskelle, vaikka sen tehokkuus on silti alhaisempi verrattuna vasemmalle sijoitettuihin.
Navigointi. Kiinnitä huomiota siihen, ettet sotke tätä verkkosivuston osaa liikaa. Liian monet linkit hukuttavat kävijät. Joskus sivuston rakenteen kokonainen uudistaminen saattaa olla paikallaan, jotta tärkeimmille kategorioille saadaan raivattua tilaa.
Saat kävijät helposti ymmärtämään, missä he ovat ja miten he voivat löytää tiensä eteenpäin. Käytä hover-efektejä ohjaamaan käyttäjiä heidän navigoidessaan.
Kutsu toimintaan. Toteuta visuaalisen hierarkian periaatteita korostaaksesi CTA:ta luonnollisesti.
Kiinteä (tahmea) otsikko
Kiinteä (tahmea) otsikko
Jäykät (sticky) navigaatiopalkit eli ”tahmeat (sticky)” navigointipalkit merkitsevät sitä, että navigaatio seuraa käyttäjää sivua sivujen selaamisen aikana. Tämä on nykyään verkkosuunnittelun standardi.
Tee otsikosta kiinteä, jos se ei riko yleistä suunnittelukonseptia. Se on hyvä idea sekä työpöytä- että mobiilisuunnittelussa:
- E-commerce-sivustot – ostoskori on aina käyttäjän edessä.
- Palvelusivustot – puhelinnumero tai CTA ovat jatkuvasti esillä.
Kiinteät otsikot parantavat asiakaskokemusta, sillä ne auttavat käyttäjiä pysymään orientoituneina ja antavat heille enemmän kontrollia.
Ilmoitusotsikon välittämää viestiä
Pohdi ennen väliotsikon suunnittelua verkkosivuston kokonaistyyliä ja pääasiallista tarkoitusta.
Jos kyseessä on tuotteen esittelyyn tarkoitettu myynninedistämissivusto, otsikon suunnittelussa voi olla linkkejä tärkeimpiin osioihin yhdistettynä suureen sankarikuvaan ensimmäisellä ruudulla, koska tällaisen verkkosivuston päätarkoitus on esitellä tuote tehokkaasti. Verkkokauppa- tai yrityssivustojen kohdalla tilanne voi olla erilainen. Käyttäjän on navigoitava helposti, tiedettävä uusimmat tarjoukset, miten ottaa nopeasti yhteyttä johtajaan ja mistä näkee jo tekemänsä tilaukset, joten tässä tapauksessa otsikko voi olla tiiviimpi ja antaa tilaa muille luokille.
On useita mahdollisia viestejä, joita otsikko voi välittää:
- kannustaa kuluttajaa tekemään jotakin
- työskennellä luottamuksen rakentamiseksi
- kannustaa kävijää tietämään lisää
- olla huvittava jne. Jos se edustaa esimerkiksi ruoanjakelupalvelua, kuva voisi kuvata siistiä kuriiria ja esteettisesti houkuttelevaa ruokaa. Yleisesti ottaen kävijän, joka on nähnyt sivustosi, pitäisi haluta ostaa sinulta jotain.
Laadukkaat kuvat. Valokuvaus on tehokas työkalu verkkosuunnittelijoille. Se voi kertoa tarinan, herättää tunteita ja motivoida kävijöitäsi selaamaan pidemmälle. Sivustoille, joilla on voimakkaasti vaikuttavia kuvia, kannattaa kokeilla läpinäkyvän otsikon tekemistä. Se tuo kuvat paremmin esiin ja säilyttää tärkeimmät linkit.
Liukuvat. Jos sinulla on useita upeita kuvia, jotka edustavat sivuston liiketoimintaa, anna mennä! Käyttäjät voivat vierittää läpi joukon hienoja korkearesoluutioisia kuvia.
Kuvitukset. Verkkosivujen otsikkokuvien on iskettävä oikeaan sävyyn ja luotava henkilökohtainen yhteys. Parempi, jos kuva on erottuva ja helposti tunnistettava, vaikka se leikattaisiin pois verkkosivuston otsikosta. Voit saavuttaa sen hyödyntämällä nykypäivän kuvitustrendiä.
Sivujen kotisivut Videota tai animaatiota
Älä keskitä huomiotasi vain staattisiin kuviin.
Videon lisääminen on yksi tehokkaimmista verkkosivuston otsikkoideoista. Jos mahdollista, yritä lisätä otsikkoon temaattista videomateriaalia. Monet verkkosivustot käyttävät sitä vangitakseen yleisön ja esittelevät samalla yrityksensä tai tuotteensa parhaalla mahdollisella tavalla.
Toinen tapa tehdä ulkoasustasi entistäkin houkuttelevampi, elävämpi ja mieleenpainuvampi on lisätä animaatioita. Sillä voi tehdä todella hienoja verkkosivuston otsikoita. Jos etsit interaktiivista verkkosivua, joka sitouttaa katsojat, animaatio on loistava vaihtoehto.
Triumph Moottoripyöräliike Hyvin suunniteltu toimintakutsu
Nettisivujen otsikkoa suunniteltaessa suunnittelija lisää sinne joitain toimintakutsuelementtejä, kuten esimerkiksi ”kirjaudu sisään”-, ”rekisteröidy”-, ”ota yhteyttä”-, ”ota yhteyttä”-elementtejä. Jotta käyttäjän huomio kiinnittyisi niin, että se johtaisi tarvittavaan toimintaan, painikkeen tulisi sisältää asiakkaalle ymmärrettävä kirjoitus ja sen tulisi erottua muun sisällön joukosta.
Toimintakutsun sijoittaminen strategisesti merkittävään paikkaan on täydellinen tilaisuus kannustaa käyttäjiä ryhtymään toimenpiteisiin heti alkuunsa, jolloin konversioprosentti nousee. Joitakin CTA-kutsuja voidaan käyttää tietyn ajanjakson ajan edistämään erikoistarjouksia, toisilla on pitkäaikainen läsnäolo.
Dronen kilpaurheiluliigan uudelleensuunnittelun konsepti Parhaat fontit verkkosivujen otsikoihin
Ensiksi asiakas hahmottaa osioiden nimiä ja yrityksen tarjoamia tietoja: yhteystietoja, mielenkiintoisia tarjouksia. Siksi on valittava selkeät, luettavat fontit, jotka eivät haittaa hahmottamista ja jotka voisi ymmärtää ensisilmäyksellä.
Suurissa kotisivujen otsikoissa voi käyttää rohkeaa typografiaa ja mielikuvituksellisia elementtejä herättämään käyttäjien huomion, muuten ei kannata valita hienoja fontteja, jotka voivat osoittautua vaikealukuisiksi.
Viestintäturva-verkkosivut Yksinkertainen otsikkosuunnittelu
Pitämällä otsikko selkeänä ja siistinä kävijät tuntuvat siltä, ettet yritä rasittaa heitä tarjouksillasi. Luova verkkosivuston otsikko voi olla hyvinkin yksinkertaisen näköinen.
Ruokapalvelun etusivu Tätä ratkaisua käytetään yhä enenevässä määrin verkkosivujen muotoilussa. Hampurilaisvalikko on pieni kolmesta raidasta koostuva kuvake, jota napsauttamalla koko valikko tulee näkyviin. Suunnittelijat käyttävät tätä tekniikkaa, kun heidän on keskityttävä päänäyttöön.
Sivuston käytettävyyden kannalta tämä on hyvä vaihtoehto. Tällainen valikko tuli mobiilimuotoilusta ja on käyttäjille jo tuttu. Hampurilainen sopii mainossivustoille, joissa pääpaino on tuotteen laadukkaassa esittelyssä valokuvien tai videoiden avulla. Verkkokauppoihin tämä vaihtoehto ei ehkä sovellu yhtä hyvin, sillä asiakkaalle on tärkeää, että kori, valitut tuotteet ja hakukenttä ovat nopeasti käytettävissä.
Skeittikaupan monipuolisuuskotelo Kännykkään suunniteltavan otsikon suunnittelu
Osaotsikon tulisi näkyä oikein verkkosivuston työpöytäversion lisäksi myös mobiiliversiossa. Sen on siis oltava responsiivinen ja sopeuduttava hyvin mihin tahansa mobiililaitteeseen.
Mobiililaitteiden päivittäinen käyttö on johtanut siihen, että verkkosivujen ulkoasu näyttää mobiilisuuntautuneelta jopa työpöytälaitteiden inkarnaatioissa. Esimerkiksi suurten sankarikuvien ja hampurilaisvalikoiden toteuttaminen on saanut alkunsa mobiilisuunnittelusta.
Huonekalumyymälä responsiivinen muotoilu >>
Johtopäätöksinä
Sivusto esittäytyy pääotsikkonsa avulla. Se on kuin ainutlaatuinen käyntikortti. Kun suunnittelet verkkosivustoa, kiinnitä siksi mahdollisimman paljon huomiota otsikkoon.
Ja vielä yksi verkkosivuston otsikkosuunnittelun paras käytäntö: tee säännöllisiä muutoksia, jotta verkkosivustosi pysyy tuoreena ja ajan tasalla. Hyödynnä joitakin oivalluksia tästä artikkelista.