Keresés
Header Háttér

Webshark Blog

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

2017-08-170 komment

Mi az a whitespace? És hogyan használjuk a webdesignban?

A whitespace az a nagy, ü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?

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. Ú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.

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. 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 kitöltetlenül 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 tekinti a 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.

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 akár fekete is.

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, a 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.

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.

Segíti elrendezni az elemeket

A felhasználók figyelmének irányítása mellett a whitespace-nek a weboldal elemei elrendezésében is fontos szerepe van. 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.

beatboxacademy

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!

Felhívja a figyelmet

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.

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.

A Mailchimp weboldala jól használt whitespace-szel

A Mailchimp weboldala jól használt whitespace-szel

Olvashatóvá teszi a tartalmat

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 lényeg, 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.

Jól néz ki

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.

Whitespace a missguided oldalán

Whitespace a missguided oldalán

É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. Itt lesz fontos, 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 egyzerű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:

1. 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.

2. 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?

3. 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.

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.