Sisällysluettelo
Yksi vaikutusvaltaisimmista psykologisista teorioista UX:n ja vuorovaikutussuunnittelun aloilla on Gestalt-teoria. Teorian perustivat saksalaiset psykologit, ja sana "Gestalt" merkitsee lomake tai muoto Kuten nimestä käy ilmi, Gestalt-periaatteiden taustalla on ajatus siitä, että ihminen havaitsee pikemminkin kohteiden ryhmiä kuvioina kuin yksittäisiä kohteita.
Gestalt-periaatteista on monia artikkeleita, mutta niistä harvat auttavat sinua ymmärtämään, miten voit soveltaa niitä työssäsi UX/UI-suunnittelijana. Tämä artikkeli antaa sinulle ideoita siitä, miten voit käyttää Gestalt-periaatteita luodaksesi parempia UX- ja UI-suunnitelmia, jotka auttavat ihmisiä saavuttamaan tavoitteensa vähemmällä vaivalla.
Samankaltaisuuden laki
Samankaltaisuuden periaate sanoo, että kun kohteet ovat fyysisesti samankaltaisia, meillä on taipumus ryhmittää ne yhteen ja olettaa, että heillä on sama toiminnallisuus Esimerkiksi alla olevassa kuvassa viininpunaisia ympyröitä sisältävä viiva on melko helppo erottaa muusta kuvasta sen erilaisen värin vuoksi.
Esimerkki samankaltaisuusperiaatteesta. Tekijän kuva.
Samankaltaisuuden käyttäminen UX- ja UI-suunnittelussa
Kuvitellaan, että yrityksenne on kehittänyt sovelluksen nimeltä "Il Mio Chef'', jota italialaisen ruoan ystävät käyttävät ympäri Yhdysvaltoja ja Kanadaa (käytämme sitä loppuosan artikkelissa). UX-tutkijanne hiljattain toimittamassa raportissa todetaan, että italialaisen ruoan tilaamisen yhteydessä käyttäjät välittävät lähinnä siitä, mitkä ravintolat ovat lähimpänä heitä. Loppujen lopuksi haluaisimme kaikki saada italialaisen ruoanlasagnea tai pizzaa, kun se on vielä tuoretta ja lämmintä, eikö niin?
Jotta sovelluksemme käyttäjien olisi helppo nähdä, mitkä ravintolat ovat lähimpänä heitä, voimme käyttää samankaltaisuuden periaatetta korostamalla nämä ravintolat käyttöliittymässä. Alla olevassa kuvassa näet, miten näiden vaihtoehtojen korostaminen keltaisella (oikealla) tekee suuren eron korostamalla visuaalisesti eroa lähimpien ravintoloiden ja kauempana sijaitsevien ravintoloiden välillä. Näin voittevoi käyttää samankaltaisuuden periaatetta, jotta käyttäjät löytävät nopeasti etsimänsä.
Gestaltin samankaltaisuusperiaatteen käyttäminen. Tekijän kuva.
Läheisyyden laki
Läheisyysperiaatteen mukaan lähellä toisiaan sijaitsevat kohteet näyttävät liittyvän enemmän toisiinsa Esimerkiksi ensimmäisessä ja toisessa kuvassa on sama määrä ympyröitä kuin toisessa kuvassa. Toisessa kuvassa tietyt pylväät ovat kuitenkin lähempänä toisiaan, ja ne luovat vaikutelman, että niissä on kolme erillistä ryhmää yhden suuren ryhmän sijaan.
Katso myös: Mitä on liikesuunnittelu?
Läheisyys - esimerkki 1 - suuri ryhmä. Kuva kirjoittaja.
Läheisyys - esimerkki 2 - kolme erillistä ryhmää. Tekijän kuva.
Läheisyyden käyttäminen UX- ja UI-suunnittelussa
Katso myös: Aloittelijan opas sivellinkirjoitukseenOtetaan esimerkki tiedon visualisoinnin alalta.
Kuvitellaan tällä kertaa, että olet johtohenkilö, joka haluaa nähdä, miten sovelluksesi "Il Mio Chef" menestyy. Haluat tarkastella KPI:itä, jotka mittaavat taloudellista suorituskykyä, käyttäjien sitoutumista ja tyytyväisyyttä. Aluksi tiedon visualisointiin erikoistunut asiantuntijasi luo alla olevan kojelaudan, joka saa sinut ja kaikki muut johtohenkilöt hukkumaan numeroihin ja kysymään entistä enemmän kysymyksiä. Kuukauden kuluttua monet teistälopeta tämän kojelaudan käyttö kokonaan.
KPI-mittaristo - Il Mio Chef. Tekijän kuva.
Tässä vaiheessa palaat takaisin tiedon visualisoinnin asiantuntijan luo ja pyydät häntä helpottamaan kokonaiskuvan ymmärtämistä suunnittelemalla kojelaudan uudelleen. Läheisyysperiaate on tässä tapauksessa kätevä, ja näet uuden suunnittelun alla. Se sisältää kolme ryhmää, jotka on jaettu KPI:n tyypin mukaan, ja se auttaa kaikkia ymmärtämään, miten sovellus pärjää taloudellisesti.Ryhmittämällä kohteita yhteen ja käyttämällä ryhmien välissä enemmän valkoista tilaa voit auttaa käyttäjiäsi omaksumaan tietoa nopeammin.
Gestalt-läheisyysperiaatteen käyttäminen kojelaudan suunnittelussa. Tekijän kuva.
Jatkuvuuden laki
Jatkuvuusperiaatteen mukaan, kun silmä alkaa seurata kohdetta, se jatkaa "liikettä" kyseiseen suuntaan, kunnes se kohtaa toisen kohteen. Tämä liike auttaa meitä hahmottamaan kohteen osana samaa polkua, jonka joudumme kulkemaan löytääkseen tietoa. Alla oleva kuva osoittaa, miten voimme käyttää jatkuvuusperiaatetta luodaksemme tällaisia visuaalisia kuvioita, jotka ohjaavatsilmä tiettyyn suuntaan.
Esimerkki jatkuvuusperiaatteesta. Tekijän kuva.
Jatkuvuuden käyttäminen UX- ja UI-suunnittelussa
UX-tutkijasi esitteli uuden raportin, joka osoittaa, että käyttäjien pääasiallinen motivaatio käyttää "Il Mio Chef" -sovellusta on ruoan tutkiminen, koska sen avulla he pääsevät tutustumaan uusiin italialaisiin ruokaravintoloihin joka viikko. Katsot alla olevassa kuvassa (vasen puoli) esitettyä mittaria, joka osoittaa, kuinka monta kertaa ihmiset pyyhkäisevät vaihtoehtojen läpi nykyisellä käyttöliittymäsuunnittelulla, ja huomaat, etteivät he koskaan pyyhkäise useammin kuin kahdesti osoitteessakeskiarvo nähdä, mitä vaihtoehtoja heillä on käytettävissään.
Käyttämällä jatkuvuuden periaatetta (alla olevan kuvan oikealla puolella) UX-suunnittelijasi auttoi nostamaan tämän määrän keskimäärin noin 10 pyyhkäisyyn. Miten se tapahtui? Piilottamalla osan kuvasta ja korostamalla sitä, että sinun on pyyhkäistävä vasemmalle tai oikealle nähdäksesi, mitä siellä on, käyttäjien silmät ohjattiin kirjaimellisesti luomaan "pyyhkäisyliike" ja heitä motivoitiin tutkimaan lisää ravintoloita ja muita ravintoloita.Tämä on jotain sellaista, mihin aiempi muotoilu ei motivoinut sinua lainkaan, vaikka olisit jo luonnostasi motivoitunut tekemään niin.
Gestaltin jatkuvuusperiaatteen käyttö UX/UI-suunnittelussa. Tekijän kuva.
Yhteenvetona , tässä artikkelissa esiteltyjen Gestalt-periaatteiden käyttäminen UX- ja UI-suunnittelussa voi auttaa käyttäjiäsi löytämään tiedon nopeammin ja sulattamaan sen paremmin. Lisäksi se voi lisätä heidän tyytyväisyyttään tuotteeseesi motivoimalla heitä tekemään toimia, joista he pitävät eniten.
Kansi sisältää Miklos Philipsin taideteoksen, joka on muokattu Vectornatorilla.
