Verkkosivustoa rakentaessa vaisto on täyttää tila. Lisätä vielä yksi osio, yksi ominaisuusnosto, yksi tekstirivi. Parempia sivustoja tuottaa päinvastainen vaisto: jättää tilaa. Tyhjä tila ei ole tyhjää. Se tekee kaikesta muusta sivulla luettavaa, luotettavaa ja helppoa toimia.
Tyhjä tila (white space) suunnittelussa tarkoittaa sivun elementtien välisiä ja ympärillä olevia tyhjiä alueita. Siihen kuuluvat tekstirivien väli, painikkeen sisäinen täyttö, otsikon ja sen alla olevan kappaleen väli sekä osioiden marginaalit. Mikään siitä ei ole hukkaa. Kaikki on töissä.
Nimi on hieman harhaanjohtava: tyhjän tilan ei tarvitse olla valkoista. Se on mikä tahansa sivun alue, jota sisältö ei täytä. Tumma tausta, jossa on runsaasti tilaa osioiden välillä, käyttää tyhjää tilaa yhtä tehokkaasti kuin valkoinen tausta.
Miksi tyhjä tila on tärkeää verkkosivustolla?
Tyhjä tila vaikuttaa siihen, miten kävijät havaitsevat ja käsittelevät sisältöä. Sivut, joilla on runsaasti tilaa, tuntuvat helpommin luettavilta, ammattimaisemmilta ja luotettavammilta. Sivut, joilla on vähän tilaa, tuntuvat sekavilta ja vaikeammin navigoitavilta sisällön laadusta riippumatta.
Kognitiivinen syy on yksinkertainen. Kun elementit ovat lähellä toisiaan, aivojen täytyy tehdä enemmän työtä tunnistaakseen, mihin yksi päättyy ja toinen alkaa. Kun elementtien ympärillä on tilaa, silmä liikkuu sivulla luonnollisesti ilman rasitusta. Vähemmän vaivaa kävijältä tarkoittaa enemmän huomiota varsinaiselle sisällölle ja toimintakehotteille.
Tyhjä tila viestii myös brändin asemoinnista. Premium- ja luksusbrändit käyttävät johdonmukaisesti enemmän tyhjää tilaa kuin edullisuuteen tai hintaan keskittyvät. Yhteys runsaan tilan ja laadun välillä on syvään juurtunut. Ahtaalta näyttävä yrityssivusto viestii brändistä jotain tahatonta riippumatta siitä, mitä teksti sanoo.
Millaisia tyhjän tilan tyyppejä web-suunnittelussa on?
Makrotyhjä tila
Makrotyhjä tila on sivun suurten osioiden välinen laajamittainen tila. Väli hero-osion ja ominaisuusosion välillä, sisällön molemmilla puolilla olevat marginaalit ja tila viimeisen osion ja alatunnisteen välillä. Makrotyhjä tila antaa sivulle sen yleisen hengitystilan ja määrää, kuinka avoimelta tai tiiviiltä asettelu tuntuu ensi silmäyksellä.
Mikrotyhjä tila
Mikrotyhjä tila on sisällön sisäistä pienimuotoista tilaa: tekstirivien väli (rivikorkeus), väli kentän selitteen ja syöttökentän välillä lomakkeessa ja painikkeen sisäinen täyttö. Mikrotyhjä tila määrää, kuinka luettavia yksittäiset elementit ovat. Tiukalla rivivälillä oleva kappale on vaikeampi lukea kuin sama kappale runsaalla rivivälillä, vaikka fonttikoko olisi sama.
Aktiivinen tyhjä tila
Aktiivinen tyhjä tila on tilaa, joka on sijoitettu tarkoituksella ohjaamaan huomiota tai luomaan korostusta. Runsas tila toimintakehotepainikkeen ympärillä esimerkiksi eristää sen visuaalisesti ja saa sen erottumaan ympäröivästä sisällöstä. Tässä tyhjää tilaa käytetään suunnittelutyökaluna eikä pelkästään hengitystilana.
Passiivinen tyhjä tila
Passiivinen tyhjä tila on luonnollista tilaa, joka on sisällön ympärillä asettelun seurauksena, ei tietoisena suunnittelupäätöksenä. Väli kappaleen lopun ja sisältösarakkeen reunan välillä, tila sivun alareunassa ennen alatunnistetta. Se on välttämätöntä mutta ei strategista.
Kuinka paljon tyhjää tilaa riittää?
Kiinteää sääntöä ei ole, mutta yleisin virhe on käyttää liian vähän, ei liian paljon. Epäröidessäsi lisää tilaa ja katso, tuntuuko sivu paremmalta. Lähes aina tuntuu.
Toimiva tyhjän tilan määrä riippuu sisältötyypistä ja yleisöstä. Teknisille käyttäjille tarkoitettu ohjesivusto voi olla tiheämpi kuin yleisille kävijöille suunnattu etusivu. Luksustuotteen sivu tarvitsee enemmän hengitystilaa kuin vertailutaulukko. Oikea määrä on se, joka tekee sisällöstä helpoimmin luettavan ja tärkeimmät elementit helpoimmin havaittaviksi.
Käytännön testi: jos siristät silmiäsi katsoessasi sivua ja kaikki sulautuu yhteen, tyhjää tilaa ei ole tarpeeksi. Jos silmäsi löytää heti otsikon ja toimintakehotteen katsoessasi sivua kokonaisuutena, tila toimii. Artikkeli mitä visuaalinen hierarkia on selittää, miten tila toimii koon, värin ja kontrastin rinnalla ohjaten kävijän katsetta.
Yleisiä tyhjän tilan virheitä yrityssivustoilla
Yhteen ahdetut osiot ilman visuaalista erottelua ovat yleisin ongelma. Kun hero-osio, ominaisuusosio, suositukset ja toimintakehote sulautuvat toisiinsa ilman hengitystilaa, kävijät eivät erota, mihin yksi aihe päättyy ja toinen alkaa. Pystysuuntaisen tilan lisääminen osioiden välille on yleensä yksittäinen muutos, joka parantaa sekavaa etusivua eniten.
Tiukka riviväli leipätekstissä tekee kappaleista vaikeampia lukea, erityisesti mobiilissa, jossa rivin pituus on lyhyempi ja silmän täytyy vaihtaa suuntaa useammin. Vähintään 1,5-kertainen rivikorkeus fonttikokoon nähden on laajasti käytetty standardi verkon luettavuudelle.
Painikkeet, joiden sisäinen täyttö on liian pieni, tuntuvat pieniltä ja vaikeilta napauttaa. Painike, joka on teknisesti oikean kokoinen mutta jonka tekstin ympärillä on vain vähän täyttöä, näyttää visuaalisesti pienemmältä kuin on ja saa vähemmän klikkauksia. Runsas täyttö saa painikkeet tuntumaan tärkeiltä ja helpoilta toimia.
Sisältö, joka kulkee reunasta reunaan ilman sivumarginaaleja, on epämukavaa lukea ja saa sivun näyttämään keskeneräiseltä. Jokainen sisältöalue hyötyy yhtenäisestä marginaalista, joka pitää tekstin etäällä näytön reunoista, erityisesti mobiilissa. Artikkeli miten teet verkkosivustosta mobiiliystävällisen käsittelee tilankäyttöä osana laajempaa mobiilisuunnittelun huomioitavien asioiden kokonaisuutta.
Miten tyhjä tila vaikuttaa SEO:hon?
Tyhjä tila vaikuttaa SEO:hon epäsuorasti sen luomien käyttökokemussignaalien kautta. Helpommin luettavilla sivuilla on matalampi poistumisprosentti ja pidempi sivulla vietetty aika. Nämä käyttäytymissignaalit kertovat hakukoneille, että sivu palvelee kävijöitään hyvin, mikä vaikuttaa sijoituksiin ajan myötä.
Myös sivun nopeudella on merkitystä. Tyhjällä tilalla ei ole tiedostokokoa, joten lisätila ei hidasta sivua. Mutta suunnittelupäätökset, jotka joskus liittyvät tiheisiin asetteluihin, tiiviisti pinotut suuret kuvat, raskaat animaatiot osioiden välillä ja liiallinen sisältö, voivat kaikki vaikuttaa latausaikaan. Siistimpi ja tilavampi asettelu on usein myös nopeampi. Artikkeli mitä SEO on käsittelee sitä, miten käyttökokemus ja tekninen suorituskyky liittyvät hakusijoituksiin.
Miten WEMASY hoitaa tyhjän tilan
WEMASYn sivustorakentimen mallipohjissa on yhtenäiset välien oletusarvot, jotka luovat luettavan ja ammattimaisen asettelun ilman käsin tehtäviä määrityksiä. Osioiden täyttö, rivikorkeudet ja elementtien välit on asetettu arvoihin, jotka toimivat eri laitteilla. Visuaalisella editorilla voit säätää yksittäisten osioiden välejä, kun oletus ei sovi sisältöösi, jolloin saat hallinnan ilman että sinun tarvitsee aloittaa alusta.
Katso, mitä kuuluu mukaan, osoitteesta WEMASYn sivustonrakentaja tai tutustu vaihtoehtoihin hintasivulla.
Usein kysytyt kysymykset
Tarkoittaako enemmän tyhjää tilaa vähemmän sisältöä?
Ei välttämättä. Tyhjä tila tarkoittaa elementtien välistä ja ympärillä olevaa tilaa, ei sisällön poistamista. Sisältörikas sivu voi silti käyttää tyhjää tilaa tehokkaasti ryhmittelemällä aiheeseen liittyvän sisällön selkeästi, antamalla osioille hengitystilaa ja olemalla yrittämättä näyttää kaikkea kerralla. Käsitys siitä, että tyhjän tilan lisääminen tarkoittaa sisällön poistamista, on yksi syy siihen, miksi yrityssivustot päätyvät liian tiheiksi. Enemmän tyhjää tilaa tarkoittaa yleensä paremmin järjestettyä sisältöä, ei sen vähenemistä. WEMASYn sivustorakentimellavoit toteuttaa tämän suoraan omalla sivustollasi.
Onko tyhjä tila tärkeää mobiilissa?
Kyllä, ja kiistatta enemmän kuin työpöydällä. Pienellä näytöllä liian tiheä sisältö on vaikeampi lukea ja vaikeampi napauttaa tarkasti. Napautuskohteiden ympärillä täytyy olla tilaa, jotta ne toimivat luotettavasti. Rivikorkeuksien täytyy olla runsaita, jotta lyhyiksi rivittyneet tekstirivit pysyvät luettavina. Mobiilin kapeampi näyttö tarkoittaa, että jokainen välipäätös vaikuttaa kokemukseen suoremmin kuin leveällä työpöytäasettelulla. Tarkista kaikki välit oikealla puhelimella ennen julkaisua.
Voiko tyhjä tila hidastaa sivustoani?
Ei. Tyhjä tila on CSS-väliä, jolla ei ole merkittävää tiedostokokoa. Täytön, marginaalin tai rivikorkeuden lisääminen sivulle ei pidennä latausaikaa. Latausaikaan voi vaikuttaa tilan täyttävä sisältö: suuret kuvat, videoupotukset ja raskaat skriptit. Tilava asettelu optimoidulla sisällöllä latautuu yhtä nopeasti kuin tiheä asettelu samalla sisällöllä ja tuntuu yleensä käytössä merkittävästi paremmalta.
Mistä tiedän, onko sivustollani liian vähän tyhjää tilaa?
Selkein merkki on, että sivu tuntuu kiireiseltä tai vaikealukuiselta, kun katsot sitä kokonaisuutena. Erityisiä merkkejä ovat teksti, joka kulkee lähellä näytön reunaa, osiot, jotka sulautuvat visuaalisesti ilman selvää katkoa, painikkeet, jotka näyttävät pieniltä vaikka ovat teknisesti riittävän suuria, ja kappaleet, joiden lukeminen tuntuu väsyttävältä. Sivun näyttäminen jollekulle, joka ei ole nähnyt sitä aiemmin, ja sen seuraaminen, mihin hänen silmänsä menevät ensin, on yksi luotettavimmista tavoista tunnistaa tyhjän tilan ongelmat, koska sisältöön tottuminen voi tehdä tiheyden näkymättömäksi suunnittelijalle.
Mitä eroa on täytöllä (padding) ja marginaalilla (margin) web-suunnittelussa?
Täyttö on elementin sisäinen tila sen sisällön ja reunan välillä. Marginaali on elementin ulkopuolinen tila sen ja ympäröivien elementtien välillä. Käytännössä molemmat lisäävät tyhjää tilaa. Painikkeen sisäinen täyttö määrää, kuinka paljon tilaa painikkeen tekstin ympärillä on. Otsikon alapuolinen marginaali määrää, kuinka lähellä seuraava kappale on. Molempia ominaisuuksia säädetään niin, että syntyy tila, joka tekee sivusta luettavan ja hyvin järjestetyn.