Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2020-08-120 komment

Miről szól a “közelség elve” a webdesignban?

Korábban már ejtettünk szót a Gestalt-elvekről, melyek a webdesign esetében is működnek. Most ezek közül lássuk részletesebben a “közelség elvét”!

A XX. század első felében született Gestalt-elvekkel azt próbálták meg leírni a pszichológusok, hogy miként érzékelik az emberek az őket körülvevő világot. A Gestalt-elveket korábban már érintettük, olyan fogalmak tartoznak ide, mint a hasonlóság, a folytonosság, az alak és forma, szimmetria, rend, vagy a közelség. Itt elsősorban arról van szó, hogy miként döntik el az emberek bizonyos elemekről, hogy azok részei egy csoportnak vagy sem.

Mindez fontos a digitális felületek vizuális designjánál is. A UI design ugyanis erőteljesen épít a közelségre, illetve minden olyan elvre, mely befolyással van arra, hogy mit tekintenek a felhasználók egy csoportnak: azaz, hogy milyen elemek kapcsolódnak össze, kritikus tényező a felületekkel történő interakcióknál.

Mi az a közelség elve?

A közelség elve azt mondja ki, hogy az egymáshoz közel található elemek valószínűleg egy csoport részeinek tekinthetők, így hasonló a funkcionalitásuk vagy a tulajdonságaik. A közelség az egyik legfontosabb elv a csoportosításnál, mely megelőz olyan elveket is, mint a színek vagy formák hasonlósága. Érdemes egyébként ezzel kapcsolatban megnézni egy ábrát, ahol a különböző formák hatását felülírja a közelség elvét kihasználó csoportosítás.

A gyakorlatban a közelség elve úgy jelenik meg a UI designban, hogy a kapcsolódó elemeket egymás mellé helyezzük, míg a nem kapcsolódó elemeket elkülönítjük ezektől. Itt lép be a képbe a már sokszor emlegetett whitespace vagy negatív tér, mely biztosítja ezt az elkülönítést. Hogy jelenik meg ez a gyakorlatban? Az alábbi ábrán egy weboldal fejléce látható, ahol a keresés ugyan egy sorba került a navigációval, azonban a negatív tér segítségével két csoportot képeznek belőle, mely jelzi, hogy eltérő funkciókról van szó.

A közelség elvének működése egy weboldal fejlécében

De a közelség megjelenik egy jól formázott szövegtörzsben is, ahol bekezdésekbe rendezzük a mondatokat, és ezeket a bekezdéseket negatív tér választja el egymástól, ahogy ebben a blogbejegyzésben is. Amennyiben a címsorok esetében is megfelelően alkalmazzuk a közelség elvét és a whitespace-t, akkor az is világosan látszik, hogy melyik címsor melyik bekezdéshez kapcsolódik, hiszen a címsor közelebb helyezkedik el a vonatkozó bekezdéshez, és távolabb a nem kapcsolódó bekezdéstől.

A közelség ugyanúgy megjelenhet az űrlapok designjában is: a kapcsolódó mezők egy csoportba rendezhetők, ahogy arról az űrlapok kialakításánál is írtunk. Ezáltal az űrlap jobban áttekinthetővé válik, és kevésbé ijesztő a kitöltése. Tehát, míg egy 12 soros űrlap túl nagynak tűnik, addig három részre bontva ugyanez az űrlap sokkal barátságosabb képet mutat.

Hol hibázhatsz a közelséggel?

Ha nem egy nem kapcsolódó elemet helyezünk el egy csoportban, azzal gyakorlatilag elrejthetjük azt a felhasználók elől. De amikor a felhasználók nem találnak meg egy linket, egy gombot, vagy akár valamilyen információt, pedig ott van az orruk előtt, akkor azért is a közelség elve okolható, illetve annak megértésének hiánya.

A feladatukra összpontosító felhasználók ugyanis azt gondolják, hogy a releváns információk egybe vannak rendezve az oldalon. Ha viszont ezek nagy távolságokra szét vannak szórva, akkor úgy fogják érzékelni, hogy az oldalon nem találnak meg semmit. Ennek oka a “csőlátás”, vagyis, hogy a felhasználók fontos feladatok elvégzésénél egy helyre figyelnek, és nem látják, ami azon kívül esik.

Erre jó példa az alábbi oldal, ahol a felhasználók mind arra panaszkodtak, hogy az app használatához muszáj bejelentkezniük, pedig csak egyszerűen nem vették észre a bal felső sarokban található “Skip” gombot, mert az igen messze esik a fő CTA-tól, vagyis a bejelentkezéstől. Ezzel szemben, ha a Skip egyből a CTA-gomb alatt kap helyet, akkor nem lenne ilyen gondjuk.

A közelség elvének áthágása egy bejelentkezésnél

A közelségre külön kell figyelni a reszponzív felületek tervezésénél, ugyanis ahogy a weboldal igazodik a különböző kijelzőméretekhez, úgy változhat a csoportosítás. Egy kisebb kijelzőn lecsökkenhet például a távolság bizonyos nem kapcsolódó elemek között, míg kapcsolódó elemek távolra kerülnek egymástól. Ezzel pedig a weboldal értelmezhetetlenné válik.

Összességében tehát elmondható, hogy a megfelelő csoportosítás a közelség elvének figyelembevételével jelentős mértékben javítja egy weboldal vagy egy app használhatóságát. Így ugyanis a felhasználók könnyebben megtalálják az őket érdeklő információkat, és hatékonyabban összpontosítanak kizárólag azokra az elemekre, melyek az épp aktuális feladatukhoz kapcsolódnak.

(A bejegyzés ezen forrás felhasználásával készült.)

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.

Comments are closed.