Tartalomjegyzék
A UX és az interakciótervezés területén az egyik legbefolyásosabb pszichológiai elmélet a Gestalt elmélet. Az elméletet német pszichológusok alapították, és a "Gestalt" szó jelentése űrlap vagy shape Ahogy a név is jelzi, a Gestalt-elvek mögött az a gondolat áll, hogy az ember a tárgyak csoportjait mintaként érzékeli, nem pedig az egyes tárgyakat.
Sok cikk szól a Gestalt-elvekről, de nem sok segít megérteni, hogyan alkalmazhatod őket UX/UI tervezőként a munkádban. Ez a cikk ad néhány ötletet, hogyan használhatod a Gestalt-elveket jobb UX- és UI-designok létrehozásához, amelyek segítenek az embereknek, hogy kevesebb erőfeszítéssel érjék el céljaikat.
A hasonlóság törvénye
A hasonlóság elve azt állítja, hogy ha a tárgyak fizikailag hasonlóak, akkor hajlamosak vagyunk arra, hogy csoportosítsa őket és feltételezzük, hogy rendelkeznek a ugyanaz a funkcionalitás Az alábbi képen például a bordóvörös köröket tartalmazó vonalat elég könnyű megkülönböztetni a kép többi részétől, mivel más színű.
A hasonlóság elvének példája. A szerző fotója.
A hasonlóság használata a UX és UI tervezésben
Képzeljük el, hogy az Ön cége kifejlesztett egy "Il Mio Chef'' nevű alkalmazást, amelyet az olasz ételek szerelmesei használnak szerte az Egyesült Államokban és Kanadában (a cikk további részében ezt fogjuk használni). Egy nemrégiben készült jelentés, amelyet az UX-kutatója adott át Önnek, azt állítja, hogy amikor olasz ételek rendeléséről van szó, a felhasználókat leginkább az érdekli, hogy melyik étterem van hozzájuk a legközelebb. Végül is, mindannyian szeretnénk, ha alasagnát vagy pizzát, amíg még friss és meleg, nem igaz?
Ahhoz, hogy az alkalmazásunk felhasználóinak könnyebbé tegyük, hogy lássák, mely éttermek vannak hozzájuk a legközelebb, a hasonlóság elvét használhatjuk azáltal, hogy ezeket az éttermeket kiemeljük a felhasználói felületen. Az alábbi képen látható, hogy ezeknek a lehetőségeknek a sárga színű kiemelése (jobb oldalon) nagy különbséget jelent, mivel vizuálisan hangsúlyozza a legközelebbi és a távolabbi éttermek közötti különbséget. Így leheta hasonlóság elvét felhasználva segíthet a felhasználóknak gyorsan megtalálni, amit keresnek.
A hasonlóság Gestalt-elvének felhasználása. A szerző képe.
A közelség törvénye
A közelség elve azt mondja ki, hogy az egymáshoz közel elhelyezkedő objektumok úgy tűnik, hogy jobban kapcsolódnak egymáshoz Például az első és a második képen ugyanannyi kör van, mint az egymástól távolabb elhelyezkedő objektumokon. A második képen azonban egyes oszlopok közelebb vannak egymáshoz, és azt a benyomást keltik, mintha egyetlen nagy csoport helyett három különálló csoport lenne.
Közelség - példa 1 - egy nagy csoport. A szerző képe.
Közelség - 2. példa - három különböző csoport. A szerző képe.
A közelség használata a UX és UI tervezésben
Vegyünk egy példát az információs vizualizáció területéről.
Ezúttal képzeljük el, hogy Ön egy vezető, aki látni szeretné, hogyan teljesít az "Il Mio Chef" nevű alkalmazása. Meg akarja nézni a pénzügyi teljesítményt, a felhasználói elkötelezettséget és az elégedettséget mérő KPI-ket. Először az információs vizualizációs szakembere elkészíti az alábbi műszerfalat, ami miatt Ön és az összes többi vezető elveszik a számokban, és még több kérdést tesz fel. Egy hónap múlva sokan közülükegyszerűen hagyja abba a műszerfal használatát.
KPI műszerfal - Il Mio Chef. A szerző képe.
Ezen a ponton visszamész az információs vizualizációs szakemberedhez, és megkéred, hogy a műszerfal újratervezésével könnyítse meg az emberek számára az összkép megértését. A közelség elve ebben az esetben jól jön, és az alábbiakban láthatod az új dizájnt. Három csoportot tartalmaz, a KPI típusa szerint felosztva, és segít mindenkinek megérteni, hogy az alkalmazás hogyan teljesít a pénzügyi szempontbólAz objektumok csoportosítása és a csoportok közötti nagyobb fehér tér használata segíthet a felhasználóknak gyorsabban feldolgozni az információkat.
A közelség Gestalt-elvének alkalmazása a műszerfal tervezésében. A szerző képe.
A folytonosság törvénye
A folytonosság elve kimondja, hogy ha a szem egyszer elkezd követni egy tárgyat, akkor addig követi a "mozgást" abba az irányba, amíg egy másik tárggyal nem találkozik. Ez a mozgás segít nekünk abban, hogy a tárgyat ugyanannak az útnak a részeként érzékeljük, amelyen végig kell mennünk, hogy információt találjunk. Az alábbi kép mutatja, hogyan használhatjuk a folytonosság elvét, hogy olyan vizuális mintákat hozzunk létre, amelyek irányítják aa szem egy adott irányba.
A folytonosság elvének példája. A szerző képe.
A folytonosság használata a UX és UI tervezésben
Az Ön UX-kutatója bemutatott egy új jelentést, amelyből kiderül, hogy a felhasználók fő motivációja az "Il Mio Chef" alkalmazás használatára az ételek felfedezése, mivel minden héten új olasz éttermekhez férnek hozzá. Megnézi a metrikát, amely azt mutatja, hogy a jelenlegi UI-dizájnnal hányszor húzzák végig a lehetőségeket az alábbi képen (bal oldal), és látja, hogy soha nem húzzák végig kétszernél többször a gombot.átlagosan, hogy milyen lehetőségek állnak rendelkezésükre.
A folytonosság elvét alkalmazva (az alábbi kép jobb oldala) a UX tervezője segített növelni ezt a számot átlagosan 10 suhintásra. Hogyan történt ez? Azzal, hogy elrejtette a kép egy részét és kiemelte azt a tényt, hogy balra vagy jobbra kell suhintania, hogy lássa, mi van benne, a felhasználók szemét arra irányította, hogy szó szerint létrehozzák a "suhintás" mozdulatot, és motiváltabbak voltak arra, hogy több éttermet fedezzenek fel ésEz olyasmi, amire a korábbi design egyáltalán nem motivált, még akkor sem, ha már eleve motiváltak erre.
A folytonosság Gestalt-elvének használata a UX/UI tervezésben. A szerző képe.
Lásd még: A filmcímek tervezésének rövid történeteÖsszefoglalva , az ebben a cikkben bemutatott Gestalt-elvek alkalmazása a UX- és UI-tervezésben segíthet a felhasználóknak gyorsabban megtalálni és jobban megemészteni az információkat. Emellett növelheti a termékkel való elégedettségüket azáltal, hogy motiválja őket a számukra legkedvesebb műveletek elvégzésére.
A borító Philips Miklos Vectornatorban szerkesztett grafikáját tartalmazza.
Lásd még: Animációs prezentációs szoftvert keres? Itt van a 8 legjobb.
