Siirry sisältöön

14.5.0

Gestalt-hahmolait

Hahmopsykologiaan perustuvilla Gestalt-hahmolaeilla pyritään kuvaamaan, miten ihminen havaitsee ja jäsentää visuaalista informaatiota. Kun havaintoja ohjaavat lainalaisuudet tunnetaan, suunnittelijan ei tarvitse perustaa valintojaan arvailuun.

Ihmisaivot ryhmittelevät visuaaliset elementit yhtenäisiksi kokonaisuuksiksi esimerkiksi läheisyyden, samankaltaisuuden tai jatkuvuuden perusteella.

Hahmolakeihin perustuvia sommitteluperiaatteita noudattamalla voidaan suunnitella kognitiivisesti miellyttäviä ja loogisesti jäsennettyjä käyttöliittymiä ja visuaalisia sisältöjä.

Tähän osioon on koottu muutamia käyttöliittymäsuunnittelun kannalta keskeisimpiä Gestalt-hahmolakeja. Ohjeessa kuvatut hahmolait soveltuvat sellaisenaan myös tiedon visualisointia ja graafista suunnittelua ohjaaviksi periaatteiksi.

Samankaltaisuuden laki

Keskenään samankaltaisia piirteitä (muoto, koko tai väri) omaavat kohteet havaitaan yhtenäisenä ryhmänä. Mitä enemmän kohteet muistuttavat toisiaan, sitä varmemmin niiden katsotaan kuuluvan samaan kategoriaan. Samankaltaisten elementtien odotetaan sisältävän myös samoja toiminnallisia ominaisuuksia.

Samankaltaisuus kytkeytyy vahvasti tuttuuteen. Siksi esimerkiksi linkkien, painikkeiden ja muiden yleisimpien käyttöliittymäelementtien tyylissä ja käyttötavoissa kannattaa usein nojata vakiintuneisiin käytäntöihin ja yhtenäiseen ulkoasuun.

Samankaltaisuuden laki, kuvituskuva.
Samankaltaisuuden laki (Law of Similarity): Toisiaan muistuttavat elementit, esimerkiksi samanväriset painikkeet, mielletään kuuluvaksi samaan kategoriaan.

Läheisyyden laki

Toisiaan lähellä olevat kohteet mielletään yhteenkuuluviksi. Esimerkiksi lähekkäin sommitellut tekstit ja kuvat ymmärretään helposti osaksi samaa asiasisältöä. Periaate pätee myös toiminnallisiin elementteihin: esimerkiksi vierekkäisten painikkeiden odotetaan jollain tavalla liittyvän samaan toimintoon tai tehtävään.

Usein läheisyys vaikuttaa kohteiden yhteenkuuluvuuteen jopa vahvemmin kuin niiden samankaltaisuus. Elementtien ryhmittelyllä, välistyksillä ja tyhjän tilan käytöllä voidaan vaikuttaa tehokkaasti siihen, miten verkkopalvelun käyttäjä jäsentää näkemäänsä ja tulkitsee eri osien välisiä suhteita.

Läheisyyden laki, kuvituskuva.
Läheisyyden laki (Law of Proximity): Toistensa lähellä olevat kohteet muodostavat yhtenäisen ryhmän.

Jatkuvuuden laki

Samassa linjassa sijaitsevat kohteet ja luontaista jatkumoa seuraavat elementit muodostavat yhtenäisen kokonaisuuden. Ihmisaivot pyrkivät rakentamaan kohteiden välille eheän linjan tai muun säännönmukaisen jatkuvuuden esimerkiksi pysty- tai vaakasuunnassa.

Esimerkiksi lukusuuntaa mukailevat vierekkäiset elementit kytkeytyvät luontaisesti samaan horisontaaliseen linjaan ja järjestykseen. Jatkuvuus toteutuu myös esimerkiksi asteittain tummenevissa sävyskaaloissa ja väriliu’uissa.

Jatkuvuuden laki, kuvituskuva.
Jatkuvuuden laki (Law of Continuity): Yksittäiset elementit nivoutuvat yhteen, jos ne seuraavat samaa linjaa tai jatkumoa.

Sulkeutuvuuden laki

Säännönmukainen muoto tai kuvio käsitetään ehjäksi kokonaisuudeksi, vaikka siitä puuttuisi osia. Ihmisaivot pyrkivät etsimään kohteesta tuttuja muotoja ja täydentämään puuttuvat tai peittyvät kohdat.

Esimerkiksi ympyrä tai neliö sulkeutuu ehjäksi kuvioksi, vaikka muotoa rajaava viiva olisi todellisuudessa vajaa tai katkonainen.

Sulkeutuuvden laki, kuvituskuva.
Sulkeutuvuuden laki (Law of Closure): Muoto ymmärretään säännölliseksi kuvioksi, vaikka osa muotoa rajaavasta viivasta puuttuu.

Symmetrian laki

Mitä symmetrisemmän kokonaisuuden kohteen osat muodostavat, sitä todennäköisemmin havaitaan yhtenäinen kohde eikä yksittäisiä osia, joista kohde muodostuu. Yleensä symmetria koetaan myös visuaalisesti miellyttävänä.

Elementtien tasauksella, ryhmittelyllä ja layoutin palstoituksella voidaan yleensä luoda symmetriaan perustuva tasapaino, joka tuottaa visuaalisesti luontevan ja rauhallisen lopputuloksen.

Myös väreillä, muodoilla ja mittasuhteilla on merkitystä. Usein esimerkiksi kuvien tai graafisten muotojen muodostama ryhmä vaikuttaa epäsymmetriseltä, jos reunimmainen elementti poikkeaa selvästi muista vaikkapa voimakkaan sävyn tai runsaiden yksityiskohtien vuoksi.

Symmetriaa ei silti tarvitse aina noudattaa kaavamaisesti, sillä liiallisesti sovellettuna se saatetaan kokea myös tylsänä. Visuaalisessa sommittelussa esimerkiksi parien rikkominen voi toisinaan olla perusteltua. Esimerkiksi kuvien ryhmittelyssä parittomiin lukuihin perustuva määrä tuottaa usein esteettisesti kiinnostavamman lopputuloksen kuin parillisiin lukuihin nojaava jaottelu.

Symmetrian laki, kuvituskuva.
Symmetrian laki (Law of Symmetry): Useasta osasta koostuva kohde koetaan varmemmin yhtenäiseksi, jos kokonaisuus on visuaalisesti tasapainoinen.

Yhteisen alueen laki

Yhteisen alueen laki kytkeytyy tiiviisti läheisyyden lakiin. Esimerkiksi väritäytön tai reunaviivan sisäpuolella olevat elementit tulkitaan yhtenäiseksi joukoksi.

Yhteinen alue sulkee kohteet joko osaksi ryhmää tai sen ulkopuolelle, vaikka kohteet olisivat muuten keskenään samanlaisia.

Käyttöliittymissä elementtiryhmiä ei kuitenkaan yleensä tarvitse rajata erillisellä kehysviivalla tai väritäytöllä, jos yhteenkuuluvuus käy ilmi jo sommittelusta. Rajaava kehys on usein turha, jos kohteet sijaitsevat lähekkäin esimerkiksi samalla rivillä.

Yhteisen alueen laki, kuvituskuva.
Yhteisen alueen laki (Law of Common Region): Esimerkiksi viivalla tai taustasävyllä rajatut kohteet mielletään samaan ryhmään.