Kun kävijä saapuu sivustollesi, hänen silmänsä eivät lue sivua ylhäältä alas järjestyksessä. Ne silmäilevät ja hyppivät esiin nousevien elementtien välillä. Visuaalinen hierarkia on suunnitteluperiaate, joka ohjaa, mitä he huomaavat ensin, toiseksi ja kolmanneksi. Ilman sitä hyväkin sisältö hukkuu, koska mikään ei ohjaa katsetta tärkeimpään.
Visuaalinen hierarkia verkkosivustolla on elementtien harkittua järjestämistä koon, värin, kontrastin, välien ja sijoittelun avulla niin, että kävijät keskittyvät luontevasti tärkeimpään tietoon ensin. Se ratkaisee, ymmärtääkö joku arvolupauksesi sekunneissa vai lähteekö hän hämmentyneenä siitä, mitä yrityksesi tarjoaa. Hierarkian onnistuminen on yksi vaikuttavimmista suunnittelupäätöksistä, jonka voit tehdä.
Miksi visuaalinen hierarkia on tärkeä?
Kävijät käyttävät keskimäärin muutaman sekunnin päättäessään, jäävätkö sivulle. Sinä aikana he eivät lue kappaleita. He silmäilevät otsikoita, kuvia ja painikkeita arvioidakseen relevanssia. Sivu, jolla on vahva visuaalinen hierarkia, viestii tarkoituksensa heti. Sivu ilman sitä pakottaa kävijät näkemään enemmän vaivaa, ja useimmat eivät vaivaudu.
Hierarkia ohjaa myös toimintaan. Kun ensisijainen toimintakehote on visuaalisesti hallitseva, useampi kävijä klikkaa sitä. Kun se sulautuu ympäröivään sisältöön, konversioasteet laskevat. Visuaalisen hierarkian ja liiketoiminnan tulosten suhde on suora: selkeä hierarkia tuottaa selkeämpiä polkuja toimintoihin, joihin haluat kävijöiden päätyvän.
Mitkä työkalut luovat visuaalisen hierarkian?
Suunnittelijat käyttävät yhtenäistä joukkoa visuaalisia ominaisuuksia prioriteetin määrittämiseen. Kutakin voi säätää erikseen tai yhdistää voimakkaamman vaikutuksen saamiseksi.
Koko
Suuremmat elementit herättävät huomion ensin. 36 pikselin pääotsikko vetää katseen ennen 16 pikselin leipätekstiä. Kokoerot otsikkotasojen välillä luovat selkeän lukujärjestyksen. Kun kaikki sivulla on suunnilleen saman kokoista, mikään ei erotu eikä kävijöillä ole sisääntulokohtaa.
Väri ja kontrasti
Korkean kontrastin elementit neutraalia taustaa vasten vaativat huomiota. Kirkas painike valkoisella sivulla on mahdoton ohittaa. Matalan kontrastin elementit vetäytyvät taka-alalle. Käytä pääbrändiväriäsi säästeliäästi tärkeimmillä elementeillä: pääotsikossa, ensisijaisessa toimintakehotteessa sekä keskeisissä tilastoissa tai suosituksissa. Ympäröivässä sisällössä pitäisi käyttää neutraaleja sävyjä, jotka tukevat eivätkä kilpaile.
Välit ja tyhjä tila
Tyhjän tilan ympäröimät elementit näyttävät tärkeämmiltä kuin tiiviisti ahtautuneet. Runsas väli toimintakehotepainikkeen ympärillä viestii, että se ansaitsee huomion. Ahtaat asettelut saavat kaiken tuntumaan yhtä kiireelliseltä, mikä tarkoittaa, ettei mikään tunnu lainkaan kiireelliseltä. Artikkeli miten käytät tyhjää tilaa verkkosivustollasi käsittelee tätä periaatetta käytännön tasolla.
Sijoittelu
Kävijät silmäilevät verkkosivuja ennustettavilla tavoilla, tyypillisesti alkaen vasemmasta yläkulmasta ja edeten alaspäin. Tärkein sisältö kuuluu sivun yläosaan ja mobiilissa ensimmäiseen näkymään.
Miten visuaalista hierarkiaa sovelletaan yrityssivustolla
Vahva hierarkia noudattaa yhtenäistä kaavaa jokaisella sivutyypillä. Yksityiskohdat vaihtelevat, mutta rakenne pysyy samana.
Etusivun hierarkia
Etusivu tarvitsee koko sivuston selkeimmän hierarkian, koska se palvelee laajinta yleisöä. Pääotsikko kertoo, mitä yritys tekee. Ensisijainen toimintakehotepainike sijaitsee näkyvästi sen alapuolella. Artikkeli miten saat verkkosivustosi näyttämään ammattimaiselta käsittelee sitä, miten hierarkia sopii laajempaan tavoitteeseen viimeistellystä ulkoasusta. Artikkeli mitä UX-suunnittelu on selittää, miten hierarkia liittyy laajempaan kävijäkokemukseen.
Miten WEMASY hoitaa visuaalisen hierarkian
WEMASYn mallipohjat on rakennettu niin, että visuaalinen hierarkia on keskeinen suunnitteluperiaate. Otsikkokoot, painiketyylit, välien oletusarvot ja sisältölohkojen asettelut on rakennettu niin, että tärkeimmät elementit erottuvat luonnostaan. Visuaalisessa editorissa voit säätää hierarkiaa muuttamalla otsikkotasoja, painiketyylejä ja osioiden välejä niin, että taustalla oleva rakenne pysyy ehjänä sekä työpöydällä että mobiilissa.
Katso, mitä kuuluu mukaan, osoitteesta WEMASYn sivustonrakentaja tai tutustu vaihtoehtoihin hintasivulla.
Usein kysytyt kysymykset
Mitä visuaalinen hierarkia on verkkosivustolla?
Visuaalinen hierarkia on sivun elementtien järjestämistä niin, että kävijät huomaavat tärkeimmän tiedon ensin. Koko, väri, kontrasti, välit ja sijoittelu vaikuttavat kaikki tämän järjestyksen muodostumiseen. WEMASYn sivustorakentimellavoit toteuttaa tämän suoraan omalla sivustollasi.
Miksi visuaalinen hierarkia on tärkeä konversioille?
Selkeä hierarkia ohjaa kävijät kohti toimintoa, jonka haluat heidän tekevän. Kun toimintakehote on visuaalisesti hallitseva ja arvolupaus heti näkyvissä, useampi kävijä ymmärtää, mitä tehdä, ja toimii. Ilman hierarkiaa toimintakehotteet hukkuvat kilpailevien elementtien joukkoon.
Mistä tiedän, onko sivullani hyvä visuaalinen hierarkia?
Siristä silmiäsi katsoessasi sivua tai katso sitä kauempaa. Elementin, joka erottuu eniten, pitäisi olla pääotsikkosi tai ensisijainen toimintakehotteesi. Jos mikään ei erotu tai väärä elementti hallitsee, hierarkiaa täytyy säätää. Pyydä jotakuta, joka ei tunne sivustoasi, tunnistamaan pääviesti viidessä sekunnissa.
Mitä eroa on visuaalisella hierarkialla ja asettelulla?
Asettelu määrää, mihin elementit sijoitetaan sivulla: sarakkeet, ruudukot ja osioiden järjestys. Visuaalinen hierarkia määrää, mitkä näistä elementeistä herättävät huomion ensin koon, värin ja kontrastin avulla. Sivulla voi olla looginen asettelu mutta heikko hierarkia, jos kaikki elementit kilpailevat huomiosta yhtä lailla.
Toimiiko visuaalinen hierarkia samalla tavalla mobiilissa?
Periaatteet ovat samat, mutta soveltaminen eroaa. Mobiilinäytöillä näkyy kerralla vähemmän sisältöä, joten hierarkian täytyy olla tiukempi. Pinoa elementit pystysuunnassa tärkeysjärjestyksessä. Varmista, että pääotsikko ja ensisijainen toimintakehote näkyvät ennen kuin kävijä vierittää. Vähennä kilpailevien elementtien määrää työpöytäversioon verrattuna.
Voivatko mallipohjat tarjota hyvän visuaalisen hierarkian?
Kyllä. Hyvin suunnitellut mallipohjat luovat hierarkian otsikkorakenteen, painiketyylien ja välien oletusarvojen avulla. Muokkauksen pitäisi tapahtua tämän rakenteen sisällä sen kumoamisen sijaan. Yhden otsikon muuttaminen paljon suuremmaksi tai useiden kirkkaanväristen painikkeiden lisääminen voi rikkoa mallipohjan tarjoaman hierarkian.