Webshark Blog

A whitespace olyan üres felület a weboldalakon, amelynek funkciója van. Sokakat arra csábít, hogy tartalommal töltsék meg, pedig nélküle nem lehet hatékonyan vezetni a felhasználót az oldalon, nem lehet kiemelni fontos dolgokat. De hogyan használjuk a whitespace-t a weboldalunkon? (Frissítés, 2019.07.04. – Többek között egy új fejezettel bővítettünk, mely a whitespace két típusát mutatja be. De más pontokon is változott a szöveg.)

A webdesignerek feladata a tervezés során tulajdonképpen az, hogy a lehető legkreatívabb módon távolítsák el a weboldalakról a whitespace-t, töltsenek a nagy, fehér lapra tartalmat. Mindezt úgy, hogy aztán ne hasson az oldal sem túl zsúfoltnak, sem túl üresnek. Habár ez a webdesign egyik állandó és legfontosabb feladata, mégis az egyik legnehezebb is.

Sokan követik el azt a hibát, hogy túlzsúfolttá, túl színessé teszik a weboldalt azon törekvésükben, hogy a rendelkezésükre álló teret megtöltsék. És nem is feltétlenül szándékosan teszik ezt, egyszerűen így működik az ember. Pedig figyelni kell arra, hogy elkerüld a túlságosan összetett felületeket, és nagyobb üres tereket használj.

Mi az a whitespace és miért fontos?

A whitespace a webdesignban a negatív vagy üres teret jelenti a design egyes elemei között, vagyis magának a tartalomnak az ellentéte: fel nem használt terület egy weboldalon. Negatív tér található minden gomb, kép link és szöveg körül. Semmiképpen nem vonja magára a felhasználó figyelmét. Segítségével a tartalom lélegzethez jut, struktúrát és jelentést ad a weboldalnak. Vezeti a felhasználót anélkül, hogy felhívná magára a figyelmét.

Hibás megközelítés, amikor úgy tekintünk a whitespace-re, mint arra a térre, ami a megtervezett elemek között üresen marad. Azért hibás, mert az üres tér is egy designelem, amit gondosan meg kell tervezni. Gyakori hiba, hogy a whitespace-szel nem foglalkoznak egy weboldal tervezése során, vagy pedig ki akarják tölteni az üresen maradt teret.

A whitespace az egyik legtöbb vitát kiváltó vonatkozása a webdesignnak, hiszen a designerek szeretik használni, míg a weboldaltulajdonosok megtöltenék tartalommal. Utóbbiak szerint elpazarolt felület, míg a designerek tudják, hogy általa javítható a felhasználói élmény.

Úgy érdemes gondolni rá, mint a habarcsra a téglák, vagy a ragasztóanyagra az üvegmozaik darabkái között. Habár a szemünk a téglákat veszi észre, illetve azokat tekinti lényegesnek, az egészet a kötőanyag, vagyis a whitespace fogja össze, és segít formába önteni a designt. Ha a mozaik csak színes elemekből áll, térközök nélkül, akkor a mozaik sokkal inkább valami színes zűrzavarnak tűnik, nem pedig valamit ábrázoló képnek.

Két típusa van

A használatát tekintve a felületen a whitespace-t két típusba tudjuk sorolni:

• Aktív whitespace – ez olyan tér, melyet tudatos erőfeszítssel hozol létre hozzáadva a designhoz annak érdekében, hogy kihangsúlyozz egy elemet, vagy alakítsd a weboldal struktúráját.
• Passzív whitespace – ez az a típusú tér, mely természetes módon jelenik meg, mint például a tér a szavak között. A lényeg, hogy nem kifejezetten megtervezett a mérete.

Amikor tehát a whitespace megtervezéséről van szó, akkor aktív whitespace-t értünk alatt, és ebbe kell munkát fektetni, miközben azért nem szabad elfeledkezni a passzív negatív térről, és hogy az miként befolyásolja a designt.

Egy további felosztása a whitespace-nek a tartalomhoz viszonyított méret és sűrűség szerinti csoportosítás:

A whitespace két szintje

A negatív térnek két szintje van: mikró és makró szint. A mikró negatív tér az olyan kisebb weboldalelemek között található, mint a sorok, a szavak, a betűk, a bekezdések. De mikró térről beszélünk a rácsba rendezett képek közötti tér vagy a menü linkjei között elhelyezkedő tér esetében is.

A mikro whitespace-nek leginkább az olvashatóságra van jelentős hatása. Tehát egy bekezdés körül elhelyezett tér befolyásolja azt, hogy milyen gyorsan képes a felhasználó befogadni a szöveget. Ha a megszokottnál kisebb a tér, akkor az emberek lassabban tudják elolvasni.

Ezzel szemben a makró negatív tér a nagyobb méretű blokkok, elemek körül található. Ez jellemzően nagyobb tér a nagyobb részek között. Ilyen makró tér található például a weboldalak tartalmi részének jobb és bal oldalán, vagy a nagyobb tartalmi blokkok között. A makró whitespace tárolóként funkcionál, és könnyebb észrevenni, mint a mikrót.

A whitespace nem feltétlenül fehér

Habár whitspace-nek hívjuk, azaz a nevében benne van a white, vagyis a fehér, mégsem arról van szó, hogy minden esetben fehérnek kellene lennie. Arra nincsen semmiféle szabály a webdesignban, hogy az egyes weboldalelemek közötti térnek milyen színűnek kell lennie. Adott esetben tehát a whitespace lehet fekete, szürke, színes vagy akár mintás.

Sőt, a most divatos egyoldalas honlapok esetén a weblapon belül akár váltani is lehet színt, vagyis váltakozhat az üres tér színe annak érdekében, hogy hatékonyan elkülönítsünk részeket a hosszan hömpölygő tartalmon belül. De hogy a helyzetet tovább bonyolítsuk, whitspace-ről beszélhetünk akkor is, ha minta, textúra, sőt egy háttérkép van az egy egyes weboldalelemek mögött.

Mire használhatjuk?

Miután már látjuk a fontosságát, érdemes azzal is foglalkozni, hogy milyen funkciói vannak a webdesignban. Ha jól használjuk, akkor teljesen megváltoztathat egy designt, és sokkal használhatóbbá teszi. A weboldalakon arra van szükség, hogy olyan felületet alakítsunk ki, melyet könnyen befogad a felhasználók tekintete, és nem riasztja el a látogatókat.

Felosztja a teret

A rendelkezésre álló tér megfelelő felosztása rendkívül fontos dolog a webdesignban. Amikor egy weboldalon túl sok az információ, de túl kevés a tér, akkor nagyon nehéz a felhasználóknak a lényeget megtalálniuk. A negatív tér időt ad a felhasználónak arra, hogy feldolgozza azt az információt, amit a weboldalon talál.

 

Ahogy egy szöveg esetében is használjuk az egyes bekezdések elkülönítésére, hogy azok könnyebben befogadhatók legyenek, úgy minden más designelem elrendezésére is megfelelő eszköz.

Fontos azonban, hogy mindig következetesen használjuk, vagyis mindig azonos méretű legyen a margóknál, az egyes szakaszoknál, a szövegek mellett és a grafikai elemeknél. A whitespeace nagy előnye, hogy könnyen lehet igazítani a méretén, ugyanakkor egészen komoly hatással lesz egy-egy változtatás a designra. Lehet bátran kísérletezni!

Vezeti a tekintetet

Ennek megértéséhez gondolj a Google keresőjének weboldalára! Habár a szemünk hagyományosan a weboldalak tetejét pásztázza először, mégis nagyon gyorsan megtaláljuk a középen lévő Google logót. Miért? A körülötte lévő whitespace miatt.

A Google oldalán rendkívül nagy üres tér található a fontos résznek számító logó és keresőmező felett. Ez vezeti a tekintetet a színes feliratig. Tehát, ha egy nagyobb, üres térbe helyezzük a fontosnak számító tartalmunkat, akkor arra a whitespace segítségével könnyen rá tudjuk irányítani a felhasználók figyelmét, mintegy kiemelve azt.

Ezzel tulajdonképpen ki is alakítottunk már egy egyszerű vizuális hierarchiát, mely a whitespace feladata. Hiszen segítségével alakíthatjuk és elválaszthatjuk a felület elemeit, így hozva létre hatékonyabb weboldal designt.

Megmutatja, hogy mi tartozik össze

Azokat az elemeket, melyek egymáshoz közelebb helyezkednek el, hasonlónak és egy csoportba tartozónak, és hasonlónak érzékeli az emberi szem. A legegyszerűbb példa erre egy bekezdés, mely egy információegységet testesít meg, így vizuálisan is összetartozóvá alakítjuk a benne szereplő szavakat és betűket.

Felhívja a figyelmet valamire

Köszönhetően a whitespace korábban már említett tulajdonságának, miszerint könnyen tudjuk vezetni a segítségével a felhasználó tekintetét, abban is közreműködik, hogy ráirányítsuk a figyelmét az általunk fontosnak tartott dolgokra. Arra építve, hogy a weboldalelemek elrendezése esetén következetesen, szinte ritmusosan alkalmazzuk, amikor megtörjük a mintát, az egyből felkelti a felhasználó figyelmét.

Egy jó példa erre talán az, amikor egy egybefüggő szövegben egyetlen szónál a betűk között nagyobb térközt hagyunk, így egyből kiemelkedik a szövegből az adott szó. Ugyanígy az egyes kiemelendő weboldal-elemeknél is érdemes próbálkozni az üres tér növelésével.

Egy jó design képes vezetni a felhasználó tekintetét a tartalomban, és ráirányítani a figyelmet a legfontosabb üzenetre. Mivel könnyű túl-tervezni egy weboldalt, fontos, hogy elkerüld a szükségtelen zsúfoltságot, mert így eltűnnek a kiemelendő elemek a zajban. A letisztultság nem unalmat jelent, hanem a fontos dolgok kihangsúlyozásának lehetőségét.

Javítja a használhatóságot

A whitespace segítségével teheted felhasználóbarátabbá a weboldalad. És persze tudjuk, hogy a jó használhatóság elengedhetetlen egy jól működő weboldalhoz. Ehhez tudnod kell, hogy kik a felhasználóid, mit néznek meg a weboldaladon, milyen feladatot akarnak végrehajtani rajta? Ezekre a kérdésekre kell választ adnod még azelőtt, hogy belevágnál a desginba. Ha már megvan a cél, akkor a whitespace-t egy hatékony eszközként használhatod arra, hogy az embereket irányítsd a weboldalalon, és segíts nekik elérni a céljaikat.

Segíti a megértést és az olvashatóságot

A weboldalad jó használhatóságának kulcsa az olvashatóság. Ehhez persze sok tényező hozzájárul: a betűtípus, méret, szín, bekezdések mérete, sorok hossza, stb. Köztük van azonban a negatív tér is, melynek segítségével elrendezheted az egyes szövegelemeket a betűktől a bekezdésekig.

A két legfontosabb dolog a könnyű olvashatóság szempontjából a bekezdés margóinak kialakítása és a sorok közötti távolság. Utóbbi a teljes szöveg olvashatóságának nagymértékben javíthat.

Kutatások szerint a whitespace megfelelő használata a sorok és a bekezdések között, valamint a jobb és a bal margó esetében 20 százalékkal javítja a megértését egy szöveges tartalomnak.

Fontos tehát, hogy hagyd a tartalmad lélegezni! Tudatosan határozd meg a sorok és a betűk közötti távolságokat, hogy az embereknek minél könnyebb legyen olvasni a szövegedet.

Egy kis pihenő a felhasználóknak

A web egyre bonyolultabbá válik, egyre több rajta az információ, mely terheli az embereket. Néha túl sok lesz nekik. Miért ne adnál nekik egy lélegzetvételnyi szünetet azzal, hogy a weboldalad egyszerűvé, és csak a fontos dolgokat emeled ki rajta a whitespace segítségével? Ne zavard össze a felhasználókat, csak azt mutasd nekik, ami fontos lehet számukra! Körülöttük pedig hagyd meg a teret.

A zsúfolt dolgok fárasztják az embereket, és talán nem is tudatosan, de kerülni fogják az oldalad, ha az túlzsúfolt. A nagy whitespace alkalmazására az egyik legjobb példa a Google főoldala. Amikor elkészült, azon kevés weboldal közé tartozott, mely sok whitespace-t használt. Ennek oka pedig az volt, hogy a tesztek során bebizonyosodott: jobban kedvelik ezt a megoldást a felhasználók. Mindenesetre a tesztek során az oldal legaljára elhelyezték az adatvédelmi linket a tervezők, hogy a felhasználók megértsék: ott vége is az oldalnak.

Vonzó és eleganciát, megbízhatóságot, profizmust jelez

Egy egyszerű webdesign sok-sok whitespace-szel nem csak használhatóbbá teszi a weboldalad, hanem vonzóbbá is. Azok a weboldalak, melyek sok negatív teret használnak általában profibbnak és megbízhatóbbnak néznek ki. Különösen, ha webáruházakról van szó, fontos, hogy a termékek körül legyen egy plusz tér, melyek által még különlegesebbnek tűnnek.

A whitespace sok weboldalnak a központi elemévé válik, mivel azok egy bizonyos hangulatot, érzést akarnak kifejezni. A sok whitespace-ről általában a luxusra és a kifinomultságra asszociálunk.

Beindítja a képzeletet, érzelemtelivé teszi a designt

Végül pedig a negatív tér arra is képes, hogy egy érzelmi elemet vigyen bele a weboldaladhoz. Ezt úgy éri el, hogy szabadon szárnyalóvá teszi a képzeletet, melynek révén aztán erősebb lesz a weboldal tartalmára adott érzelmi választ. Ha egy kép körül nagy a negatív tér, akkor könnyebben elkalandozik vele kapcsolatban a képzelet.

Ebből a szempontból lesz fontos az is, hogy a whitespace-nek nem muszáj fehérnek lennie: lehet bármilyen színe, formája, mintája. Akár egy háttérképnek, akár a háttérszíneknek is jelentős érzelmi hatása lehet a felhasználóra.

Emellett alkalmazhatsz még különféle effekteket, például a parallax görgetést, hogy a whitespace interaktívvá és szórakoztatóbbá váljon. Vagy egyszerűen csak használhatsz színátmeneteket, mintákat. Az a tónus, amit a whitespace-szel meghatározol, hatással lesz arra, hogy az emberek miként fogadják be a tartalmaidat.

Aki eddig nem ismerte a whitespace-t, most remélhetőleg másként látja már szerepét. Egy olyan elemként, melynek funkciója van a webdesingban. És bátran tekintse a kísérletezés terepének a térrel való játékot.

Hogyan alakítsd ki a whitespace-t?

A whitespace kialakítása mindig attól függ, hogy hol alkalmazzuk. Ez azt is jelenti egyben, hogy nem igazán vannak ökölszabályok arra vonatkozóan, hogy mikor, hol mennyi whitespace-t kell vagy érdemes használni egy weboldalon. Ugyanakkor néhány tanácsot érdemes megfontolni a whitespace használata során:

Legfeljebb 15 olyan pont legyen a weboldalon, melyre fel akarod hívni a látogatók figyelmét!

Ez Paul Boag designer javaslata, aki szerint minden elem, amit a weboldaladhoz adsz, egy pontot ér. Ha azonban van olyan elem a weboldaladon, mely fontosabb a többinél, akkor ahhoz rendelj további pontokat, hiszen kiemelkedővé akarod tenni. Ha ilyen pontrendszert alkalmazva tervezed a weboldalad, akkor mindjárt világos lesz, hogy nem fogsz tudni minden elmondani rajta, amit csak szeretnél.

Hogy ez pontosan miként néz ki a gyakorlatban? A UX Planet egy ábrán így szemlélteti:

Ha ezen a 14 ponton kívül továbbiakat kellene hozzáadni, akkor más elemeket el kell venni az oldalból. A pontrendszer alkalmazása révén tehát megvalósítható, hogy ne zsúfolj túl sok dolgot egyetlen weboldalra.

Tartsd szem előtt az olvashatóságot!

Mielőtt nekiállnál a weboldalad tervezésének, érdemes létrehoznod egy interface-listát. Ez egy olyan gyűjtemény, melynek darabjaiból áll össsze a weboldalad felülete. Ez lista nem csak megteremti az alapját a designnak és a következetességnek, hanem a tartalom is láthatóvá válik általa.

A következő lépés a tartalom drótvázának kialakítása, hogy felmérhesd, mekkora térre van szükséged, miközben megtartod az olvashatóságot. Az olvashatóségba beletartozik az egyes betűk és szavak jó olvashatósága, valamint a tartalom könnyű átfuthatósága.

Két fontos dolog, amit a szöveg optimalizálása során figyelembe kell venni: a bekezdések közötti távolság és a sorközök. A sorközök növelésével jelentős mértékben tudsz javítani a kenyérszöveg olvashatóságán. Általában minél nagyobb a sorok között a távolság, annál jobb a felhasználói élmény olvasás közben. Nyilván túlzásokba nem kell esni, mert túl nagy távolságok esetén megszakad a szöveg egysége. A megfelelő egyensúlyt kell tehát megtalálni. Látod a különbséget?

Legyen célja a whitespace-nek!

Az esztétika csak az egyik vonatkozása a whitespace-nek, hiszen mint korábban már jeleztük: jó néhány funkciója van. Az egyik legfontosabb az, hogy felhívjuk a figyelmet az üzenetünkre vagy a call to actionre. Hogy ezt a feladatot ellátja-e, elsősorban a felhasználói tesztek mutathatják meg.

Végül pedig azt sem árt tudni, hogy a megfelelő whitespace-t kialakításához meglehetősen nagy gyakorlatra van szükség. Így ha ezzel kísérletezel, lehet, hogy érdemes inkább egy gyakorlott webdesigner segítségét igénybe venni.