div>

havaintoprosessi mahdollistaa maailman hahmottamisen näkö -, haju -, ääni -, maku-ja tuntoaistiemme kautta. Erityisesti visuaalinen järjestelmämme käsittelee ympäristössään valtavia tietomääriä. Sen sijaan, että havaitsisimme elementit erikseen, aivomme organisoivat kuviot, esineet ja muodot kokonaisiksi muodoiksi, joita voimme ymmärtää.

näköhavainnon Gestalt-ryhmittelyperiaatteet kuvaavat tätä organisaatiota periaatteiksi, jotka selittävät, miten havaitsemme ja järjestämme tämän valtavan määrän visuaalisia ärsykkeitä. Gestalt-periaatteet-samankaltaisuus, läheisyys, sulkeminen, figure-ground, jatkuvuus ja yhteinen kohtalo — ovat suosittu työkalu, jota suunnittelijat käyttävät visuaalisesti organisoivaan informaatioon. Visuaalisena suunnittelijana ja nyt vuorovaikutussuunnittelijana sovellan näitä periaatteita säännöllisesti luodakseni suhteita ja eroja suunnittelemieni elementtien välille. Ymmärtäminen, miten nämä periaatteet toimivat, ja miten niitä käytetään suunnittelussa, tuottaa vahvempaa ja mukaansatempaavampaa työtä.

Oletko valmis parantamaan mallejasi? Aloitetaan kaivamalla samankaltaisuutta.

samankaltaisuus

samankaltaisuuden Gestalt-periaate sanoo, että samankaltaiset elementit koetaan enemmän toisiinsa liittyviksi kuin erilaiset alkuaineet. Samankaltaisuus auttaa meitä järjestämään objektit niiden relatedness muiden objektien ryhmän ja voi vaikuttaa ominaisuuksia väri, koko, muoto ja suunta.

värin käyttäminen suhteiden osoittamiseen

samankaltaisuuteen vaikuttaa erityisesti väri. Alla olevassa esimerkissä huomaa, miten värilliset muodot vaikuttavat voimakkaasti ryhmittelyyn tai suhteeseen, vaikka eri muotoja olisi mukana.

koon käyttäminen suhteiden osoittamiseen

koko on toinen hyödyllinen työkalu samankaltaisuuden luomisessa. Alla olevassa esimerkissä koon samankaltaisuus saa suuremmat muodot erottumaan ja muodostamaan ryhmän, vaikka kaikki muodot ovat samoja.

muodon käyttäminen suhteiden osoittamiseen

muoto on hyödyllinen ryhmittelyssä samankaltaisuuden perusteella, mutta sillä on väriin ja kokoon verrattuna heikoin ryhmittelyvaikutus. Tässä esimerkissä muoto saa meidät tulkitsemaan elementtejä ympyröiden ja neliöiden sarakkeina, toisin kuin Vuorottelevien ympyröiden ja neliöiden riveinä.

käyttämällä orientaatiota relaatioiden osoittamiseen

orientaatiota voidaan ryhmitellä myös samankaltaisuuden perusteella. Kääntämällä joitakin neliöitä tässä ryhmässä 45 astetta, tehdään erillinen ryhmittely, joka koetaan liittyvän toisiinsa. Ne näyttävät lähestulkoon liikkuvan samaan suuntaan verrattuna ympäröiviin muotoihin. Tämä koskee yhteisen kohtalon Gestalt-periaatetta, jota käsittelemme tulevassa artikkelissa. Mutta voit vapaasti hypätä eteenpäin ja Google se (kun olet lukenut tämän artikkelin, tietenkin!). Se on kiehtova periaate, joka tapahtuu usein ympärilläsi.

enemmän väristä

kuten aiemmin mainittiin, samankaltaisuuteen vaikuttaa erityisesti väri ja se voi syrjäyttää muut ominaisuudet. Voimme esimerkiksi ohittaa esimerkin muodon samankaltaisuudesta lisäämällä väriä. Nyt näemme vuorottelevat rivit punainen ja valkoinen muotoja vastakohtana sarakkeet ympyröitä ja neliöitä. Kokeile. Yritä nähdä sarakkeet ympyröitä ja neliöitä. Mahdollista, mutta aika rankkaa nyt, vai mitä?

lisäksi väri voi ohittaa koon. Kun lisäämme väriä esimerkkiin samankaltaisuudesta koossa, luomme kaksi ryhmää erillään toisistaan. Nyt näemme suuret punaiset neliöt yhtenä ryhmänä ja yhden suuren valkoisen neliön erillisenä, toisiinsa liittymättömänä (ja yksinäisenä) ryhmänä.

nämä kaksi esimerkkiä kuvaavat, kuinka voimakas väri voi olla elementtien välisten suhteiden määrittämisessä. Yritä käyttää väriä työssäsi eriyttääksesi elementtejä ja tulet hämmästymään siitä, kuinka paljon vahvempia ryhmäsi ovat.

samankaltaisuus käytännössä

kun suunnittelemme, Voimme käyttää samankaltaisuutta välittämään organisaatiota ja assosiaatioita osoittamalla, mitkä elementit liittyvät tai eivät liity toisiinsa. Esimerkiksi Salon sivuilla alla olevat kaksi osiota on ryhmitelty niiden suhteellisen koon mukaan. Hahmotamme selvästi kaksi erillistä ryhmää, joiden ylimmät tarinat ovat vasemmalla ja luetuimmat oikealla. Vaikka molemmat osat tarjoavat saman toiminnon-näytetään artikkeleita luettavaksi-ryhmittely koon mukaan antaa enemmän salience vasemmalle ryhmittely, jonka avulla Salon ohjata huomiota niiden alkuun tarinoita.

sen sijaan kokoerojen puuttuminen tässä Amazonin esimerkissä ei anna erityistä merkitystä millekään yksittäiselle osiolle. Tästä huolimatta samankaltaisuus saavutetaan edelleen käyttämällä toistoa samankokoisia ja-muotoisia, mikä saa meidät hahmottamaan rivejä kohteita.

samankaltaisen värinkäytön

tiedämme, että väri on vahva samankaltaisuuden indikaattori, joka auttaa organisoimaan ja tekemään sisällön ymmärrettäväksi. Tässä esimerkissä Cars.com, samanlainen väri käyttö auttaa meitä erottamaan, mikä on otsikko, kehon kopio, ja linkki tekstiä. (Täysi paljastus: työskentelen Cars.com vuorovaikutussuunnittelijana.) Käyttämällä erillisiä värejä jokaiselle näistä elementeistä, odotamme niiden toimivan samalla tavalla ja sinisen linkin tekstin tapauksessa käyttäytyvän samalla tavalla.

läheisyys

läheisyyden Gestalt-periaatteen mukaan lähempänä toisiaan olevat elementit koetaan enemmän toisiinsa liittyviksi kuin kauempana toisistaan olevat alkuaineet. Samankaltaisuuden tavoin läheisyys auttaa meitä organisoimaan objekteja niiden suhteellisuudella muihin esineisiin. Läheisyys on vahvin periaate objektien suhteellisuuden osoittamiseksi, mikä auttaa meitä ymmärtämään ja organisoimaan tietoa nopeammin ja tehokkaammin.

alla olevat esimerkit ympyröistä osoittavat, miten läheisyyttä voidaan käyttää apuna hahmottamaan objekteja toisiinsa liittyviksi. Kuten näemme täällä, ympyrät ovat levittäytyneet, näytteille mitään suhdetta, ja jokainen on koettu erillisenä objektina.

kuitenkin kun ympyrät vedetään lähekkäin toisiaan, niille annetaan relaatio, eikä niitä enää mielletä erillisiksi kappaleiksi.

valkoinen tila

valkoinen tila on korvaamaton väline läheisyyden luomisessa. Saman ympyräryhmän ottaminen ja välilyöntien lisääminen auttaa hahmottamaan asioita eri tavalla. Vasemmalla olevien muotojen läheisyys saa meidät näkemään kaksi ryhmää sarakkeina, kumpikin omana ryhmänään. Oikealla muotojen läheisyys saa meidät hahmottamaan nämä kaksi ryhmää riveinä, jälleen kukin omana ryhmänään. Käytä valkoista tilaa malleja vahvistaa ryhmittymiä sekä erottaa ne muista elementeistä.

läheisyyden voima

läheisyys on riittävän vahva nujertamaan muut variaation elementit. Huomaa, miten läheisyys voittaa vielä silloinkin, kun siihen lisätään muita ominaisuuksia, kuten väri ja muoto. Väri ja muoto eivät päihitä läheisyyttä ja jokainen ryhmittymä mielletään silti erilliseksi elementiksi.

läheisyys käytännössä

kun järjestämme tietoa malleissamme, voimme läheisyyden avulla luoda suhteita elementtien välille auttaaksemme ymmärtämään esitettyä informaatiota. Esimerkiksi ryhmittelemällä nämä kuvat Apple Storesta lähietäisyydeltä, määritämme suhteen koko ryhmään. Koemme niiden liittyvän toisiinsa ja odotamme niiden sisällön olevan samankaltaista.

kuitenkin, kun poistamme keskimmäisen sarakkeen, havaitsemme yhtäkkiä kaksi erillistä ryhmää ja odotamme niiden välillä erilaista sisältöä.

yhdistämällä läheisyys ja samankaltaisuus

ryhmittely läheisyyden mukaan voidaan myös yhdistää samankaltaisuuteen luomaan vahvempia suhteita. Tässä Amazonin esimerkissä ryhmittely läheisyyden ja koon samankaltaisuuden perusteella saa meidät hahmottamaan kaksi erillistä ryhmää ja antaa enemmän näkyvyyttä Vasemmanpuoleiselle ryhmälle.

läheisyys ja hierarkia

läheisyys on erinomainen hierarkkisten elementtien järjestämiseen. Tässä esimerkissä Crate & Barrel, vaihtoehdot on ryhmitelty yhteisiin otsikoihin, luoden suhteita, mikä tekee skannauksesta ja tiedon löytämisestä paljon helpompaa.

kun otsikot poistetaan ja vaihtoehdot ryhmitellään ilman läheisyyttä, menetämme luodut suhteet ja on paljon vaikeampaa nopeasti skannata ja löytää haluttu tieto. Kokeile itse. Mene ja katso, kuinka nopeasti löydät kahvimukit ryhmittelystä, jossa on otsikoita vs. ryhmittely ilman otsikoita. Vähän vaikeampi hypätä siihen nopeasti, vai mitä?

Conclusion

sen ymmärtäminen, miten samankaltaisuutta ja läheisyyttä voi käyttää vaikuttaakseen elementtien välisiin suhteisiin työssäsi, auttaa sinua luomaan malleja, jotka helpottavat organisointia ja parantavat työsi käytettävyyttä. Käytä samankaltaisuutta ja läheisyyttä luodaksesi sekä suhteita että eroja mallien elementtien välillä. Kokeile käyttää valkoista tilaa, väri, koko, muoto ja suunta elementtejä ja sekoita molemmat periaatteet yhteen tuottaa erittäin vahvoja ja mukaansatempaavia suhteita.

sarjan seuraavassa osassa tarkastellaan sulkemista ja figure-groundia ja tutkitaan, miten nämä kaksi gestalt-periaatetta käyttävät positiivista ja negatiivista tilaa yksinkertaisten mutta voimakkaiden suhteiden luomiseen.

Resources And Good Reads

• Gestalt principles on Scholarpedia.
• ”laws of Organization in Perceptual Forms”: teksti Max Wertheimerin seminaaripaperista vuodelta 1923.
• Universal Principles of Design Revised and updated: 125 ways to improve usability, influence perception, increase appeal, make better design, and teach through design, tekijä William Lidwell, Kritina Holden ja Jill Butler. Rockport Pub, 2010.
• Information Visualization: Perception for Design, Colin Ware. Elsevier, 2012.

• suunnitteluperiaatteet: Visual Perception And the Principles Of Gestalt
• Connecting And Separating Elements Through Contrast and Similarity
• Compositional Balance, Symmetry And Asymmetry
• How To Improve Your Email Workflow With Modular Design
• parantaa käyttäjäkokemusta reaaliaikaisilla ominaisuuksilla

(ml, da, og, jb, il)