Päivität etusivusi myöhään tiistai-iltana. Otsikko on kunnossa ja kuvat ovat kunnossa, mutta kävijät poistuvat silti sekunneissa. Alat miettiä, onko visuaalinen hierarkia se asia, jonka olet jättänyt huomaamatta. Usein on. Pienet visuaaliset valinnat muokkaavat ensivaikutelmaa nopeammin kuin useimmat yrittäjät arvaavat.
Visuaalinen hierarkia järjestää elementit niin, että katsoja näkee tärkeimmän tiedon ensin. Tässä luvussa kerrotaan selkeästi, mitä tämä tarkoittaa, miksi se vaikuttaa verkkosivuusi ja markkinointiisi ja miten voit soveltaa sitä ilman alan sanahelinää. Näet myös, miten gestalt-periaatteet liittyvät samaan kokonaisuuteen. Käydään asia läpi askel kerrallaan.
Mitä on visuaalinen hierarkia suunnittelussa
Visuaalinen hierarkia järjestää elementit niin, että katsoja näkee tärkeimmän tiedon ensin.
Käytännössä visuaalinen hierarkia näkyy verkkosivusi otsikoissa, palvelusivuilla, somegrafiikoissa ja painetuissa materiaaleissa. Kun osaat nimetä sen oikein, voit ohjeistaa suunnittelijoita nopeammin ja arvioida luonnoksia varmoin mielin.
Lähikäsitteet, kuten gestalt-periaatteet, liittyvät suoraan aiheeseen. Pidä ne mielessä, kun luet loput tästä osiosta.
Vahva hierarkia ohjaa katseen otsikosta todisteisiin ja sitä kautta toimintaan.
Miksi visuaalinen hierarkia on tärkeä yrityksellesi?
Asiakkaat arvioivat uskottavuutta asettelusta jo ennen kuin lukevat jokaisen sanan. Selkeä visuaalinen rakenne vähentää kitkaa ja tekee tarjouksista helpommin ymmärrettäviä.
Gestalt-periaatteet selittävät, miten ihmiset ryhmittelevät visuaalista tietoa automaattisesti.
Tee ensisijaisesta toimintakehotuksestasi visuaalisesti näkyvin elementti sivun yläosassa ennen vieritystä.
Jos haluat nähdä, miten tämä liittyy lähiaiheisiin, lue seuraavaksi mitä on negatiivinen tila ja valkoinen tila.
Käytännön tarkistuslista, jota voit käyttää heti
Tee ensisijaisesta toimintakehotuksestasi visuaalisesti näkyvin elementti sivun yläosassa ennen vieritystä.
Kun käyt läpi jotakin sivua, kysy, näkyykö visuaalinen hierarkia jo ensimmäisellä vierityksellä mobiilissa. Jos ei näy, vaihda osioiden järjestystä ennen kuin viilaat yksityiskohtia.
Tallenna kuvakaappaukset ennen muutoksia ja niiden jälkeen, jotta näet, mikä muutos auttoi sivustosi visuaalisen hierarkian kanssa.
Jaa tämä tarkistuslista kaikille, jotka päivittävät sivustoasi, jotta gestalt-periaatteet pysyvät yhtenäisinä uusillakin sivuilla.
Valitse yksi mittari seurattavaksi tässä kuussa, esimerkiksi sivulla vietetty aika tai lomakkeiden aloitukset, jotta suunnittelumuutokset kytkeytyvät liiketoimintatuloksiin eivätkä pelkkään makuun.
Miten tämä aihe liittyy laajempaan brändiisi
Visuaaliset valinnat eivät yleensä elä vain yhdellä sivulla. Gestalt-periaatteet selittävät, miten ihmiset ryhmittelevät visuaalista tietoa automaattisesti.
Somejulkaisujesi, sähköpostiesi ja painettujen materiaalien pitäisi toistaa samaa hierarkiaa, värejä ja kirjasinsääntöjä, joita käytät verkossa.
Kun brändin visuaalinen ilme alkaa hajota, asiakkaat aistivat hienovaraisen epäsuhdan, vaikka eivät osaisi selittää sitä.
Käytä sivua valkoinen tila suunnittelussa vertaillaksesi muistiinpanoja tämän osion toisen luvun kanssa.
Vahva hierarkia ohjaa katseen otsikosta todisteisiin ja sitä kautta toimintaan.
Kysymykset, jotka usein jäävät huomaamatta
Liittyvät hakusanat, kuten gestalt-periaatteet ja asettelun suunnittelu, auttavat sinua etsimään syvällisempiä esimerkkejä ja vertaamaan työtäsi yleisiin standardeihin.
Gestalt-periaatteet selittävät, miten ihmiset ryhmittelevät visuaalista tietoa automaattisesti.
Kirjoita ylös yksi ennen ja jälkeen -muutos, jonka testaat toimivalla sivulla tällä viikolla. Pienet mitatut muutokset voittavat epämääräiset suunnitelmat.
Kun tiimilläsi on yhteinen sanasto visuaalisen hierarkian ympärillä, korjauskierroksia suunnittelijoiden ja toimistojen kanssa tarvitaan vähemmän.
Työkalut, jotka helpottavat visuaalisia päivityksiä
Moniin ulkoasun ja tyylin ongelmiin ei tarvita räätälöityä koodia. Visuaalisessa editorissa voit säätää välejä, värejä ja typografiaa samalla, kun katsot esikatselua mobiilissa ja tietokoneella.
WEMASY:n Sivustonrakentajassa on visuaalinen muokkaus, jolloin voit julkaista muutokset odottamatta kehittäjää jokaisen pienen säädön takia. Avaa Sivustonrakentaja, kun olet valmis soveltamaan oppimaasi.
Kun julkaiset päivityksiä, tarkista uudelleen sivut mitä on negatiivinen tila ja valkoinen tila, jotta osio pysyy yhtenäisenä mielessäsi.
Sinulla on nyt toimiva näkökulma visuaaliseen hierarkiaan. Käytä sitä, kun käyt läpi sivustoasi, hyväksyt markkinointimateriaaleja tai ohjeistat suunnittelijaa. Jatka sivuille valkoinen tila ja valkoinen tila suunnittelussa, niin pidät vauhdin yllä tässä osiossa.
Usein kysytyt kysymykset
Kuinka kauan visuaalisen hierarkian parantaminen kestää?
Useimmat pienyritykset saavat sivunsa selkeämmiksi muutamassa keskittyneessä työrupeamassa, kun soveltavat tämän luvun perusteita. Aloita etusivustasi ja ota samat säännöt sitten käyttöön palvelu- ja yhteystietosivuilla.
Tarvitsetko suunnittelijan visuaalisen hierarkian parantamiseen?
Suunnittelijasta on apua monimutkaisissa brändiuudistuksissa, mutta moni visuaaliseen hierarkiaan liittyvä korjaus onnistuu itse, kun tiedät, mitä katsoa. Käytä tämän luvun rinnalla sivua mitä on negatiivinen tila, niin saat aiheeseen liittyviä ohjeita.
Voiko WEMASY auttaa visuaalisen hierarkian käyttöönotossa verkkosivullasi?
WEMASY:n Sivustonrakentajassa on visuaalinen editori, jolla voit säätää ulkoasua, värejä ja typografiaa ilman koodia. Avaa Sivustonrakentaja, niin voit päivittää pohjia ja esikatsella muutoksia mobiilissa.
Mikä on yleisin virhe visuaalisen hierarkian kanssa?
Ihmiset yrittävät korjata kaiken kerralla sen sijaan, että etenisivät yksi sivu kerrallaan. Valitse yksi ensisijainen asia, esimerkiksi luettavuus tai kontrasti, ja katso sitten seuraavaa parannusta varten sivua valkoinen tila.
Miten visuaalinen hierarkia liittyy SEO:hon?
Selkeä visuaalinen hierarkia ja luettava teksti pitävät kävijät sivulla pidempään, mikä tukee hakukoneiden seuraamia sitoutumissignaaleja. Yhdistä suunnittelukorjaukset hyvään sisältörakenteeseen, niin tulokset ovat parhaat.
Mitä kannattaa opiskella seuraavaksi visuaalisen hierarkian jälkeen?
Jatka tämän kirjan sivuille mitä on negatiivinen tila ja valkoinen tila, niin rakennat brändillesi kokonaisvaltaisen visuaalisen järjestelmän verkkoon.