Proximity elv
A proximity elv szerint a térben egymáshoz közel lévő elemeket az emberek hajlamosak egy csoportként értelmezni. A spacing ezért közvetlenül hat az információs struktúra érthetőségére.
Röviden
A proximity elv szerint a térben egymáshoz közel lévő elemeket az emberek hajlamosak egy csoportként értelmezni. A spacing ezért közvetlenül hat az információs struktúra érthetőségére.
Vizuálisan
A közelségből a felhasználó kapcsolatot feltételez
Ugyanazt a helyzetet kétféleképp nézd meg: először a tipikus hibát, utána azt a megoldást, amelyik jobban támogatja a felhasználó feladatát.
×
GYAKORI HIBA
A label közelebb van a rossz mezőhöz
nev@pelda.hu
Telefonszám
+36 30…
Számlázási adatok
A szem automatikusan összekapcsolja a közel lévő elemeket. Rossz spacinggel a helyes tartalom is félreérthetővé válik.
✓
HELYES IRÁNY
A kapcsolódó elemek vizuális csoportot alkotnak
nev@pelda.hu
Telefonszám
+36 30…
Számlázási adatok
A label és a mező szoros egység, a következő mezőcsoport előtt pedig nagyobb elválasztás jelenik meg.
Mit jelent a proximity elv?
A proximity elv szerint a térben egymáshoz közel lévő elemeket az emberek hajlamosak egy csoportként értelmezni. A spacing ezért közvetlenül hat az információs struktúra érthetőségére.
A felhasználó gyakran még azelőtt csoportosítja a tartalmat vizuálisan, hogy elolvasná. Ha a távolságok ellentmondanak a logikai kapcsolatnak, félreérthetővé válhat a felület.
A legfontosabb alapelvek
- Összetartozó címke és mező legyen közel.
- Külön csoportok között nagyobb távolság legyen.
- A spacing legyen erősebb jel, mint a felesleges keretek.
- Mobilon is őrizd meg a csoportlogikát.
Gyakorlati példa
Egy árkártyán az ár legyen közelebb a csomagnévhez, mint a következő csomag tartalmához. Ha minden elem között ugyanaz a 24px távolság, a csoporthatárok elmosódnak.
A térköz csoportokat hoz létre
Cím + leírás
nagyobb tér
következő csoport
Gyakori hibák
- Azonos spacing minden szinten.
- Vonalakkal és boxokkal túlkompenzálni a rossz térközt.
- A labelt távolabb tenni saját inputjától, mint a fölötte lévő mezőtől.
Hogyan alkalmazd a saját felületeden?
Ne izolált szabályként kezeld a témát. A proximity elv akkor működik jól, ha a felhasználó céljával, a tartalom fontossági sorrendjével és a teljes felület többi döntésével együtt vizsgálod.
Teszteld valós feladattal: adj a felhasználónak konkrét célt, figyeld meg, hol bizonytalanodik el, mit ért félre, és mely pontokon kell indokolatlanul gondolkodnia. A jó UI/UX döntés nem attól jó, hogy látványos, hanem attól, hogy kiszámíthatóbbá és könnyebbé teszi a feladat elvégzését.
A vizuális minőség és a használhatóság nem egymás ellenfelei. A jó felület mindkettőt ugyanannak a felhasználói célnak rendeli alá.
Hogyan ellenőrizd a layoutot?
Nézd meg a képernyőt először tartalomolvasás nélkül. Hunyoríts, kicsinyítsd le a nézetet vagy készíts grayscale screenshotot: még így is látszania kell, mi a fő üzenet, hol vannak a nagy csoportok és melyik akció elsődleges. Ez jó gyors teszt arra, hogy a struktúrát valóban a layout hordozza-e.
Ezután próbáld ki több valós tartalomhosszal és viewporton. A jó layout nem csak a tökéletes design-mockupon működik: hosszabb cím, több kártya, hiányzó kép vagy keskenyebb képernyő mellett is megőrzi a csoportokat és a prioritást.
- 5 másodperces pásztázás után felismerhető a fő cél
- a spacingből látszanak a csoporthatárok
- hosszabb tartalommal sem omlik össze a hierarchia
Gyakori kérdések
Miért fontos a proximity elv?
A felhasználó gyakran még azelőtt csoportosítja a tartalmat vizuálisan, hogy elolvasná. Ha a távolságok ellentmondanak a logikai kapcsolatnak, félreérthetővé válhat a felület.
Mikor érdemes tesztelni?
Már korai wireframe vagy prototípus szinten is. Minél később derül ki egy alapvető használhatósági probléma, annál drágább lehet a javítása.