A webdesign-ban a white space megfelelő használatával hatékonyan tudod növelni a weboldalak esztétikumát és használhatóságát.
A white space – amire a magyarban nem is igazán van megfelelő kifejezés – nevével ellentétben nem feltétlenül jelent fehéret. Sajnos elég sok téves elmélet kering a neten a fogalommal kapcsolatban, ezért sokan félreértelmezik. A white space a webdesign-ban egy olyan területet jelent, amelyet üresen hagyunk, nincs rajta szöveg, kép vagy bármilyen egyéb grafikai elem. A grafikusok azért szeretik, mert segítségével elemeket csoportosíthatnak vagy éppenséggel távolíthatnak el egymástól, ami az oldal teljes megjelenésére és felhasználói élményére is pozitív hatással van. De nézzük egy kicsit részletesebben miről is van szó.
A white space definíciója
Ahogy az említettem, a white space lényege nem az, hogy fehér legyen, sokkal inkább egy olyan területet jelöl a weboldal design-ban, amely „üresen” marad, nem rakunk rá semmilyen elemet, úgy mint szöveget, ikont, képet, illusztrációt, animációt … stb. A white-space a valóságban bármilyen színű lehet, a lényeg az, hogy üresen hagyjuk.
Két fő típusa van a white space-nek a webdesign-ban:
- Aktív white space – ez az a típus, amelynek feladata az, hogy struktúrálja a weboldalad tartalmát és ezáltal jobban befogadhatóvá tegy-sed. Az akt A white space a webdesign-ban egy olyan területet jelent, amelyet üresen hagyunk, nincs rajta szöveg, kép vagy bármilyen egyéb grafikai elemív white space gyakran aszimmetrikus, amitől a design izgalmassá, dinamikussá válik.
- Passzív white space – ez az amelyik mindenfajta tervezés nélkül magától is előfordul például szavak között vagy a szöveg sorai között. Ez az ami például a grafikus elemeket elválasztja egymástól.
Ha a white space-re figyelsz, akkor elsősorban az aktív típust kell szem előtt tartanod, bár fontos tudni arról is, hogy a passzív milyen szerepet játszik a felhasználói élményben.
Miért fontos a white space?
Míg a képek és a szöveg az információt hordozza a látogató felé, addig a white space feladata ezen információ tagolása oly módon, hogy az könnyen befogadható legyen.
Sok évvel ezelőtt volt népszerű az a design illetve tartalom rendezési elv, melynek során megpróbáltunk minél több információt minél kisebb helyre beszorítani, mert úgy gondoltuk, hogy ez jó lesz a felhasználónak. Aztán ahogy teltek az évek és elterjedtek a különböző analitikai eszközök, úgy vált egyértelművé, hogy szakítani kell ezzel a módszerrel, mert a túlzsúfolt oldal inkább elijeszti a látogatót, semmint szimpatikussá teszi az oldalt.
A túlzsúfolt oldalak elkerülésének egyik fő mozgatórugója a white space, amely képest a tartalmi részeket tördelni, jól elkülöníteni egymástól ezzel a látogató figyelmét kizárólag egy területre fókuszálva sokkal hatékonyabb információ átadást tudunk elérni.
Elég csak megnézni ebben a témában az Apple weboldalát. Hatalmas üres területek tagolják a viszonylag kevés szöveges tartalmat, amelyet óriási képekkel próbálnak meg még könnyebben emészthetővé tenni. Ez most a white space használatának abszolút a csúcsa.
Persze amikor egy konkrét projektről van szó, akkor már korántsem tűnik ennyire egyszerűnek a helyzet. Ügyfeleink a white space használata során elsősorban arra panaszkodnak, hogy túl sokat kell görgetni, kevés információ látszik egyszerre az oldalon. A valóság az, hogy pont ez teszi az oldalt felhasználói szempontból kiemelkedővé.
Így használd a white space-t a weboldalad tervezése során
Íme pár ötlet ahhoz, hogyan tudod az előbb elmondottakat a gyakorlatban is alkalmazni.
1. Hagyd meg a nagyobb területeket üresnek
A white space használatával a felhasználó figyelmét egy adott tartalomra tudod fókuszálni. Éppen ezért ne félj attól, hogy a nagyobb üres területeket kihasználatlanul hagyod.
2. Ne használj szegélyeket
A white space méretét növelni tudod, ha elhagyod a felesleges grafikai elemeket, mint például a szegélyeket. Ne feledd a szegélyeket, ikonokat és egyéb alakzatokat csak akkor használd, ha plusz értéket adnak a design-hoz.
3. Nagyítsd fel a háttérképet
Használj nagy méretű háttérképeket, amely önmagában is izgalmassá teheti a white space-t. Ráadásul így nem lesz az ügyfélnek az az érzése, hogy kihasználatlan, felesleges terület árválkodik az oldalán.
4. Alkalmazz színes hátteret
Egy egyszínű háttér kiválóan alkalmas arra, hogy white space-nek használd, ráadásul az egyes összetartozó elemek körül alkalmazott eltérő háttérszínek még jobban elkülönítik a tartalmakat egymástól, így nem fognak összefolyni a látogató szemében sem.
5. Növeld a betűközöket
A betűköz növelésével vagy pont ellentétesen csökkentésével vizuálisan is jól elkülöníthető blokkokba tudod rendezni a szövegeidet, amely még több passzív white space használatára ad lehetőséget.
6. Alkalmazz padding-ot
Az egyes elemek körül lévő whites pace-t növeni tudod, ha megnövelt padding-ot alkalmazol.
7. Használj szegélyeket
Tudom, hogy ez pont a második ponttal ellentétes, mégis vannak olyan helyzetek, mikor a szegély alkalmazásával tudsz egy nagyobb üres területen megjelenő szövegre felhívni a figyelmet. Elég csak egy szolid keret a szöveg köré és azonnal ráirányul a figyelem.
Összefoglalás
A kevés néha több, ez a mondás a webdesign-ban is megállja a helyét különösen az utóbbi években. A kérdés már nem azon van hogyan tudunk egyszerre minél több információt szem előtt tartani, hanem pont az ellenkezője. Hogyan érem el, hogy a látogatónak egyszerre csak egy dologra kelljen koncentrálnia így biztosítva azt, hogy nem csak átfutja, hanem valóban be is fogadja a weboldalon megjelenő tartalmat.
Az elmélet és a gyakorlat sokszor nagyon távol áll egymástól. Ez különösen igaz akkor, mikor a weboldal grafikai terveit prezentálod ügyfelednek és ő sokkal sűrűbben megjelenő tartalmakat kér valamint a „felesleges” nagy területek törlését. Ilyenkor jön jól, ha pontosan tisztában vagy a white space használatának esztétikai és user experience előnyeivel, mert sokkal egyszerűbben tudod meggyőzni a döntés helyességéről.
A bejegyzést Tusnádi Istvántól kaptuk a www.usernet.hu-ról