Proximity elv a UI/UX designban: mit jelent a közelség?

A proximity a Gestalt-pszichológia egyik alapelve: az egymáshoz közel elhelyezkedő elemeket gyakran összetartozónak érzékeljük. A webdesignban a térköz ezért nem egyszerű díszítés: segíti annak felismerését, melyik felirat melyik mezőhöz, melyik gomb melyik művelethez és melyik leírás melyik szolgáltatáshoz tartozik.

Miért fontosabb néha a térköz, mint a keret?

Ha a cím és az alatta lévő szöveg egymáshoz közelebb van, mint a következő blokk, az olvasó keret nélkül is könnyebben csoportként értelmezi őket. Ez gyakran letisztultabb felületet eredményez, és csökkentheti a felesleges vizuális elválasztóvonalak számát.

Proximity az űrlapokon

A mezőcímke legyen vizuálisan a saját beviteli mezőjéhez kötve. Ha két mező között ugyanakkora a távolság, mint egy címke és a mező között, könnyebben összekeverhető, melyik szöveg hová tartozik. A kapcsolódó mezők csoportosítása egy hosszabb űrlapot is áttekinthetőbbé tehet.

Proximity a navigációban és gomboknál

Az egymáshoz tartozó navigációs pontok lehetnek közelebb, míg az eltérő jelentésű műveleteket térköz választhatja el. Kritikus műveleteknél – például „Törlés” és „Mentés” – az elhelyezésnek segítenie kell a félrekattintások elkerülését.

Mobilon másképp működhet a csoportosítás

Asztali nézeten egy kétoszlopos elrendezés természetes csoportokat képezhet, mobilon viszont az egymás alá kerülő elemek elveszíthetik ezt a kapcsolatot. A reszponzív tervezés során ezért nem csupán a szélességet kell csökkenteni: a blokkhatárokat és távolságokat is újra kell értelmezni.

Öt gyakori UI-hiba

• A cím és a hozzá tartozó leírás túl messze kerül egymástól.
• Az űrlapmező címkéje közelebb áll az előző mezőhöz, mint a sajátjához.
• A szolgáltatáskártyán a gomb vizuálisan inkább a következő kártyához kapcsolódik.
• A navigáció és a keresőmező véletlenül ugyanazon csoportnak látszik.
• Mobilon eltűnik a kártyákat megkülönböztető térköz.

Hogyan tesztelheted?

Szürkeárnyalatos nézetben vagy egyszerű drótvázon is vizsgáld meg a felületet. Ha színek és keretek nélkül nem világos, melyik elem melyik csoportba tartozik, valószínűleg a távolságok nincsenek megfelelően kialakítva. A közelséget persze más jelzések – közös háttér, tipográfia, igazítás – is befolyásolhatják.