Web és dizájn kreatív honlapkészítés
Tartalomjegyzék Bevezető 4 A weboldalkészítés mérnöki és művészi megközelítése 5 Ne törd a fejem! 9 Az érzelmek és a szépség szerepe 11 A tervezőgrafika és a webdizájn viszonya 17 A honlapok felépítése 19 Időtálló dizájn 21 Az ötlettől a kivitelezésig 22 Elrugaszkodás (a komfortzónából) 25 Az információ gyönyörű 31 Gyakorlati rész 34 Bibliográfia 41 Könyvek 41 Internet 42
Bevezető A webdizájnról és a weboldalkészítésről írni, illetve ennek keretében készíteni el a diplomamunkámat talán merész vállalkozásnak tűnhet, hiszen egy rendkívül dinamikus szakmáról van szó, ami alig több mint húsz éves múltja ellenére rengeteget változott, illetve folyamatosan változik. Fiatal korát jelzi az a tény is, hogy a megnevezését illetően sincs teljes egyetértés: a magyarban egyaránt használják a honlaptervezés, weblaptervezés, webgrafika, web-design, illetve webdizájn kifejezéseket. Bárhogyan hívjuk is, egy dolog eléggé nyilvánvaló: a weboldalak tervezése szorosan kapcsolódik a grafikai tervezéshez (graphic design). Bár jól sugallja a konszenzus hiányát, hogy ez utóbbi kijelentésben is élesen megoszlanak a vélemények. Vannak, akik szerint honlapot tervezni sokkal inkább mérnöki megközelítést igényel, mintsem művészit, ők a funkcionalitásra helyezik a hangsúlyt. Mások szerint az ötletességen, megjelenésen áll vagy bukik minden. Valószínűnek tartom, hogy az igazság mint oly sokszor valahol középen van. Hiszen a weboldalak felépítéséből és interaktivitásából adódóan tényleg szükség van a mérnöki szemüvegre. Vannak szabályok, szabályszerűségek, amelyeknek a figyelmen kívül hagyása használhatatlan honlapokat fog eredményezni. De ugyanúgy szükség van a művészi vénára is, hiszen egy étel esetében sem csak a tápértéket nézzük, hanem az ízvilág is számít, sőt olykor felül is írja az előbbit. 4
A weboldalkészítés mérnöki és művészi megközelítése A mérnöki szemléletnek talán legismertebb képviselője Jakob Nielsen, aki a Web-design 1 című könyvében a honlapok tervezésének módját teljesen tudományos alapokra helyezi. Bár azt elismeri, hogy szükség van művészi kivitelezésre, jópofa megoldásokra, de úgy tartja, hogy egy honlap tervezésekor a legfontosabb irányelv a használhatóság, azaz a gyakorlati műveletek megkönynyítése kell legyen. Nielsen gyakran használja a webergonómia kifejezést, amikor honlaptervezésről beszél, ezzel is utalva annak céljára: a könnyen használható, súrlódásmentes, azaz ergonomikus webfelület kialakítása. Kétségtelen, hogy a felhasználófelület (User Interface, UI) megtervezésekor a mérnöki megközelítésnek fontos szerep kell jusson, az is nyilvánvaló, hogy vannak olyan irányelvek, amelyeknek a figyelmen kívül hagyása elégedetlen, frusztrált felhasználókat fog eredményezni, de egy honlap grafikai megjelenése, illetve élvezhetősége szintén sokat nyom a latba. Jól szemlélteti ezt számunkra Aaron Walter, aki a Designing for Emotion 2 című könyvében Maslow szükségletpiramisát alapul véve felállítja a felhasználó szükségletpiramisát, amely négy szintet foglal magába: Funkcionalitás (Functional) Megbízhatóság (Reliable) Használhatóság (Usable) Élvezhetőség (Pleasurable) A legalsó szinten található a funkcionalitás: egy honlap, amit a látogató nem tud használni, nem tudja a célját elérni rajta, csak elégedetlenséget szül. Ha a funkcionalitással minden rendben, a felhasználó elvárja, hogy a honlap megbízható legyen, azaz elérhető, működőképes, ha a szerver félpercenként leáll, akkor hamar távozni fog. A harmadik szinten találjuk a használhatóságot, felhasználhatóságot. Ez arra utal, hogy mennyire könnyen tudunk megbirkózni egy adott feladattal, mennyire megterhelő számunkra például egy repülőjegy lefoglalása, ha könnyen boldogulunk, az azt jelenti, hogy felhasználóbarát honlappal van dolgunk. 1 NIELSEN, Jakob (2002): Web-design. Typotex Kft. Elektronikus Kiadó 2 WALTER, Aaron (2011): Designing for Emotion. New York: A book apart 5
Számos weboldal ha egyáltalán eljut addig leragad a harmadik szinten, az élvezhetőség a legtöbb esetben háttérbe szorul. Pedig nem lenne jobb, ha amellett, hogy elvégezzük a feladatunkat, még jól is érezzük magunkat? Netán megmosolygunk egy-két leleményes megoldást? Miért elégszünk meg csupán a használhatósággal, amikor egy honlap egyaránt lehet használható és élvezetes? Aaron Walter Egy honlap, amelynek személyisége van és valamilyen pozitív érzést is kivált belőlünk emlékezetesebb marad számunkra, és ezáltal gyakrabban visszatérünk, mint arra, amelyik hűvös közönnyel, formális módon közli velünk mondandóját, utasít a feladatokra. Asmallorange.com játékos rajzaival előidézi belőlünk a gyermeket, úgy, hogy mindez nem megy a használhatóság, átláthatóság rovására Jason Beaird a The Principles of Beautiful Web Design című könyvében 3 szintén kitér arra, hogy általában két megközelítéssel vagy ha úgy tetszik véglettel találkozunk, amikor a webdizájn területét kutatjuk: a felhasználóbarát megközelítéssel, amely a funkcionalitásra, hatékonyságra fókuszál, illetve a művészi megközelítéssel, amely a látványra helyezi a hangsúlyt. Szerinte annak érdekében, hogy elérjük és fenntartsuk az érdeklődést mindkettőre maximális 3 BEAIRD, Jason (2007): The Principles of Beautiful Web Design. Australia: Sitepoint pp. 4. 6
mértékben szükségünk van. Ha olyan honlapot készítünk, amely jól működik, de csúnya vagy nem passzol az ügyfél arculatához, senki se fogja használni. Hasonlóan rossz, ha olyan honlapot készítünk, ami jól néz ki, viszont használhatatlan. Egy jól megtervezett honlap esetében a tartalom könnyen átlátható kell legyen, a dizájn nem zavarhatja mindezt, hanem egyfajta csatornaként kell szolgálnia a felhasználó és az információ között. A design nem művészet, hanem tudomány, célja a kommunikáció, és weblapok esetében különösen fontos, hogy ezt minél egyszerűbben és hatékonyabban próbálja meg véghezvinni hívja fel a figyelmünket Ben Hunt a Save the Pixel 4 című könyvében. Amikor egy látogató érkezik a honlapunkra, tudnunk kell, hogy csak korlátolt figyelemmel rendelkezik, ezt a gyorsan és könnyen elillanó figyelmet kell nekünk a leghatékonyabban megragadni, ezen áll vagy bukik, hogy célt érünk-e. Ezt csak úgy érhetjük el, ha minél kevesebb a zaj, a fölösleges elem a honlapon, azaz ha spórolunk a pixellel. Paddy Donnelly demonstrálja számunkra, hogy mi mindent össze lehet sűríteni 4 pixelbe, például egy egész filmet. Érdekes kísérlet és az üzenet is mindenképp megszívlelendő: http://iampaddy.com/4pixelsorless/ A figyelem felkeltését könnyedén elérhetjük a szöveg és kép hatékony kombinációja által fejti ki számunkra Bo Bergström 5 könyvében. Az érdekes, kontrasztos színek és formák mágnesként vonzzák a tekintetet. Bár olykor a csend, az üres tér által nagyobb figyelmet tudunk magunkra vonni. Azt is tudnunk kell, hogy agyunk nem lenne képes azt a hatalmas ingerhalmazt feldolgozni, amely naponta éri, ezért szelektál, kiszűri a lényegtelen információt, a lényegeset pedig kiválasztja és tovább értelmezi. Amellett, hogy kiszelektálunk ingere- 4 HUNT, Ben (2008): Save the Pixel: The Art of Simple Web Design. http://savethepixel.org/ 5 BERGSTRÖM, Bo (2009): Bevezetés a vizuális kommunikációba (Essentials of Visual Communication) Budapest: Scolar Kiadó 7
ket, fel is idézünk korábbiakat, ezért az emlékeink befolyásolják az új jelek befogadásának módját. Ezért fontos, hogy az üzenet hasson az egyén emlékeire. A kérdés viszont nem az, hogy magunkra tudjuk-e vonni a figyelmet, hanem az, hogy mit kezdünk vele? teszi fel a kérdést Bergström. Éreztetünk kell azzal, akinek a figyelmét felkeltettük, hogy okkal tettük mindezt, ha ez nem történik meg, akkor az illető úgy fogja érezni, hogy becsaptuk. A képnek és az üzenetnek egyeznie kell, ki kell egészítsék egymást. A meztelenség és vér hatékony, de olcsó trükkök a figyelem felkeltésére. Csíkszentmihályi Mihály nagy sikert aratott könyvében, a Flow-ban 6 részletesen taglalja a figyelem jellemzőit. Megállapítja, hogy a figyelem egy pszichikai energia, ebből kifolyólag korlátolt kapacitással rendelkezik: Mivel a figyelem határozza meg, hogy mi az, ami feltűnik a tudatban vagy kiszorul onnan, és mivel más olyan feladatok is vannak, amelyeket el kell végeznie mint például az emlékezés, a gondolkodás, az érzés és a döntéshozatal, hasznos, ha a figyelemre úgy gondolunk, mint pszichés energiára. A figyelem olyan energia, amely nélkül nem lehet semmilyen munkát elvégezni, és a munka elvégzése során felhasználódik. Csíkszentmihályi (1997 28. o.) Fontos, hogy a figyelemmel, ezzel a meglehetősen könnyen kimeríthető erőforrással, óvatosan gazdálkodjunk, amikor valamilyen információt próbálunk meg közvetíteni. A kevesebb több elvét, ahol csak tudjuk, alkalmazzuk. Csíkszentmihályi leírja, hogy az információ vagy azért lép be a tudatba, mert szándékosan ráirányítjuk a figyelmünket, vagy biológiai (pl. vonzó női alak), esetleg társadalmi (pl. egy Ferrari fényképe) beidegződések hatására. A figyelmet egyfajta szűrőként is felfoghatjuk, ami a lehetséges és elérhető több millió információegységből kiválasztja a lényegeseket, majd az emlékezetet segítségül hívva kiértékel és meghozza a szükséges döntést. Azonban az idegrendszer korlátokkal rendelkezik, csak adott mennyiségű információt tud továbbítani adott időegység alatt, tehát ha túl sok az információ, akkor azok elkezdik egymást kiszorítani, és a figyelem lankadni kezd. Itt 6 CSÍKSZENTMIHÁLYI Mihály (1997): Flow. Az áramlat Budapest: Akadémia Kiadó 8
jön képbe Steve Krug jól ismert webergonómiai törvénye, amelyet a következő alfejezetben taglalok. Ne törd a fejem! Aligha van webdizájner, aki ne ismerné Steve Krug első számú webergonómiai törvényét, ami egyben az első könyvének a címe is: Ne törd a fejem! (Don t Make Me Think!) 7 De mit is takar ez a különös szabály? Először következzen néhány sorban, ahogyan azt a szerző megfogalmazta:...azt jelenti, hogy amennyire az emberileg lehetséges, minden weboldalnak magától értetődőnek, nyilvánvalónak és egyértelműen használhatónak kell lennie. Felhasználóként minden különösebb erőfeszítés és fejtörés nélkül meg kell értenem, mi mire jó, és mi hogyan használható. Krug (2008 21. o.) Minden egyes honlapon elhelyezett elem, amiről nem derül ki egyértelműen, első ránézésre, hogy micsoda, potenciális zavarforrást jelent. A dolgok megnevezése, a szaknyelvi kifejezések, vagy a marketinges okokból kiagyalt kifejezések (pl. Hellómelló az Állásajánlat helyett), illetve az olyan linkek és gombok, amelyekről nem derül ki ránézésre, hogy kattinthatóak, mind-mind zavarhoz vezethetnek, amely elvonja figyelmünket az aktuális feladatról, ez pedig frusztrációt és bizalmatlanságot eredményez a weboldal üzemeltetőivel szemben. A Ne törd a fejem! axióma létjogosultságát jobban alátámaszthatjuk, ha megismerkedünk azzal a három törvényszerűséggel, amelyet Steve Krug fogalmazott meg, miután az emberek internetezési szokásait több éven át vizsgálta: Nem olvassuk végig az oldalakat, csak átfutjuk őket Nem a lehető legjobb döntésre törekszünk, csak megragadjuk az első elfogadható lehetőséget Nem gondoljuk végig, hogyan működik valami, inkább átverekedjük magunkat a problémákon A legtöbb esetben, nem olvassuk végig egy honlap tartalmát, csak olyan kulcsszavak után kutatunk, amelyek érdekelnek bennünket, vagy amelyekről azt feltételezzük, hogy kapcsolódnak az aktuális problémánkhoz. Az első törvény- 7 KRUG, Steve (2008): Ne törd a fejem! Felhasználóbarát webdizájn Budapest: HVG Kiadó 9
szerűség egyenes következménye a második, azaz, amint találunk egy linket, amiről azt feltételezzük, hogy a keresett tartalomhoz vezet, próba szerencse alapon azonnal ráklikkelünk, hiszen, ha tévedtünk, könnyen orvosolhatjuk a Vissza gombbal. A legtöbb esetben a felhasználók nem mérlegelnek minden egyes lépését, erre sem idejük, sem türelmük nincs, megragadják az első elfogadhatónak tűnő lehetőséget. A harmadik törvényszerűségben Krug arra hívja fel a figyelmet, hogy az emberek többsége úgy használ bizonyos dolgokat, hogy fogalmuk sincs arról hogyan működnek. Ha jelentkezik valamilyen technikai probléma, sokan úgy próbálják meg orvosolni, hogy átverekedik magukat rajta. Nem olvassák el a használati utasítást, ahogyan azt a gyártók/tervezők elgondolták. Rengeteg embert láttam, amint hatékonyan használtak szoftvereket és weboldalakat úgy, hogy az elképzeléseik köszönő viszonyban sem voltak a tervezők szándékaival. Krug (2008 36. o.) Jó példa erre, amikor a böngésző címsávja helyett a Google keresőmezőjébe gépelnek be teljes weboldalcímeket. Steve Krug miután felvázolta a lehetséges buktatókat, amelyek a weboldaltervező elképzeléseinek a felhasználói realitásokkal való összeférhetetlenségéből származnak, a könyve további részében ennek orvosolására ad hasznos ötleteket, amelyet érdemes minden honlapkészítőnek elolvasni. Helyszűkében nem térnék ki mindenre, csupán egyetlen tanácsra, amely a 3. fejezet alcíme: óriásplakátokat írjunk, ne regényt. Ha a felhasználók úgy viselkednek a honlapunkon, mintha egy autópályán suhannának el egy hirdetőtábla előtt, akkor tervezzünk hirdetőtáblákat, azaz: Hozzunk létre egyértelmű vizuális hierarchiát minden oldalon! Használjuk ki a webes konvenciókat! (pl. logó a bal felső sarokban, kereső a jobb oldalon) Osszuk az oldalt világosan elkülöníthető részekre! Legyen világos, mire lehet kattintani! Minimalizáljuk a zajt! 10
Az érzelmek és a szépség szerepe A kizárólag a funkcióra és használhatóságra fókuszáló tervezésnek a legszembetűnőbb hiányossága abban nyilvánul meg, hogy nem fordít kellő hangsúlyt az emberi érzelmeknek a döntéshozatalban betöltött fontos szerepére. Jóllehet egy fejlett, kifinomult társadalomban igyekszünk háttérbe szorítani, de az érzelmeknek fontos szerepük van a döntéshozatalban, abban ahogyan gondolkodunk fejti ki Donald Norman az Emotional Design 8 című könyvében. Az érzelmeink szerves részét képezik a mindennapjainknak. Minden, amit teszünk befolyásolva van általuk, bár legtöbbször ez nincs tudatunkban. Norman elismeri, hogy a 80-as években egy korábbi könyvében (The Design of Everyday Things) ő is elkövette azt a hibát, hogy nem számolt az érzelmekkel, mint tényezővel, a hangsúlyt akkor ő is csak a használhatóságra, funkcionalitásra helyezte. Egy 2003-as TED konferencia keretében a következő mondattal indítja előadását: Az új énem a szépség. (Nevetés) Igen, az emberek azt mondogatták, tudod, Norman okés, de ha követed azt amit mond, minden használható lesz, ugyanakkor ronda ( ) Az új életem megérteni azt, hogy miről szól a szépség, a báj és az érzelmek. Az új énem csak arról szól, hogy bájos és vidám dolgokat alkossak. ( ) Igazán úgy érzem, hogy a kellemes dolgok jobban működnek és ezt sosem fogtam fel, amíg rá nem jöttem Don Norman 9 A neves szakértő álláspontja azért is változott, mert azóta a tudomány jelentős felfedezéseket tett az emberi agy működésének megértésében, és nyilvánvalóvá vált, hogy az érzelmeink és a gondolkodásunk szorosan összefonódnak. Az érzelmeknek jelentős szerepük van a mindennapi életben: a hasznosság és használhatóság fontos tényezők, de a szórakozás és gyönyör, vidámság és izgatottság nélkül, vagy az aggódás és indulat, félelem és düh hiányában az életünk nem lenne teljes. Norman (2004 8. o.) Érzelmek nélkül majdhogynem döntésképtelenek lennénk, az érzelmi reakció mindig megelőzi a tudatosat, és sokszor felül is írja azt. Norman megemlíti 8 Norman, Donald (2004): Emotional Design: Why We Love (or Hate) Everyday Things. New York: Basic Books 9 http://www.ted.com/talks/don_norman_on_design_and_emotion.html 11
Antonio Damasio neurológus kísérletét, melyben olyan embereket vizsgált, akik agykárosodást szenvedtek, és ez az érzelmi képességeik fogyatékosságát eredményezte, de minden más tekintetben egészségesek voltak. Mint kiderült, ezek az emberek képtelenek voltak a döntéshozatalra, nem tudták eldönteni, hogy hol éljenek, mit egyenek, milyen termékeket vegyenek és használjanak. A kísérlet teljesen ellentmondott annak az akkoriban általánosan elfogadott megállapításnak miszerint a döntéseinket többnyire racionális, logikus érvek alapján hozzuk. A tudatunkkal értelmezzük és megmagyarázzuk a körülöttünk lévő világot, míg az érzelmeink segítenek a gyors döntéshozásban. Általában érzelmileg hamarabb reagálunk egy adott szituációra, mint tudatosan, hiszen a túlélés fontosabb, mint a megértés. Norman szerint az érzelmekkel együtt az esztétikum szintén fontos tényező. Ma már bizonyított tény, hogy egy kellemes megjelenésű tárgyal szívesebben és hatékonyabban dolgozunk. Az is fontos szempont, hogy pozitív érzelmi állapotban kreatívabbak vagyunk, ezáltal a felmerülő problémákat is hatékonyabban le tudjuk küzdeni. Ha frusztráltak vagyunk, aggódunk, az agy jobban fókuszál az adott problémára, leszűkül a látókörünk, így sokszor a legelemibb feladatokkal is nehezen birkózunk meg, ott az orrunk előtt, de nem látjuk. Ideges állapotban hajlamosak vagyunk újra és újra ugyanazt a műveletet csinálni, nem nézünk más lehetséges megoldás után. Ez a való világban még működhet is, hiszen egy porszívó, ami nem kapcsol be elsőre, talán bekapcsol, ha kicsit erősebben megnyomjuk a gombot. Viszont számítógépes programok és honlapok esetében ugyanannak a műveletnek a megismétlése mindig ugyanazt az eredményt vagy eredménytelenséget fogja kiváltani. Ha újra és újra ugyanazzal próbálkozunk, csak a frusztrációnk növekszik, előre viszont nem sok lépést teszünk. Például: téves emailcímmel próbál meg valaki belépni egy honlapra, ha újra és újra begépeli ugyanazt a címet, ugyanaz a visszautasító üzenet fog megjelenni. Azonban, ha nyugodt lelki állapotban van amihez hozzájárulhat egy nem csak funkcionális, de jó megjelenésű dizájn, akkor nyitottabb lesz más megoldások irányába is, így elkerülhető a frusztráció. A frusztrációt okozhatja a felhasználó saját magának (mint a téves email) vagy a honlap (például karbantartási munkálatok miatt szünetel), a következmény azonban mindig egy elégedetlen felhasználó, aki ha érzelmileg is kötődik már az adott honlaphoz, akkor jóval megbocsájtóbb lesz (mint ahogy az anyák is 12
elnézőbbek a saját gyermekükkel szemben). Ez persze nem azt jelenti, hogy egy jó megjelenésű dizájnnal egy használhatatlan termék is eladható. Viszont azt mindenképp érdemes szem előtt tartani, hogy a megnyerő külsejű dolgok vidámabb felhasználókat eredményeznek, akik kreatívabbak a problémamegoldás terén, és elnézőbbek az apróbb hibákkal szemben (Norman, 2004). A fenti gondolatmenetet talán Paul Rand szavaival zárhatnám a legjobban: Egy működő, de rosszul dizájnolt termék nem kevésbé etikátlan, mint az, amelyik szép, de működésképtelen. Az előbbi semmibe veszi a felhasználót, az utóbbi átveri. A dizájn, amelyikből hiányzik az ötlet és csak a formai megoldásokon alapul, birtokolhat ugyan némi charme-ot, de ugyanakkor teljesen semmitmondó. Másrészt viszont, az a dizájn, amelyik kizárólag a tartalmon alapul, valószínűleg annyira unalmas lesz, hogy nem lesz érdemes ránézni. Paul Rand 10 Norman (2004) arra is kitér, hogy mindig számolni kell a dizájnernek a személyes tényezőkkel is, amelyekre nem lehet hatással. Kedvenc tárgyaink közé sokszor olyanok tartoznak, amelyek kívülállók számára csak ócska kacatnak tűnnének, de számunkra fontosak, mert egy emlék, egy történet kötődik hozzájuk. Ilyenkor a dizájnnak nem sok szerep jut. Nem kell feltétlenül egy fizikai tárgyra vonatkoztatni a fentieket, lehet, hogy makacsul kitartunk egy adott márka mellett, mert pozitív emlékek kötnek hozzá, és az sem számít, ha jobb alternatíva is a rendelkezésre áll. Személyes példával éve: makacsul kitartok a Mozilla Firefox böngésző mellett, annak ellenére, hogy elismerem, jelent meg ugyanolyan jó, vagy talán jobb böngésző is. De ugyanez vonatkozhat a kedvenc keresőnkre, email szolgáltatónkra, hírportálunkra, stb. Nem objektív tényezők alapján döntünk, nagyban befolyásol bennünket számos személyes tényező, tapasztalat, emlék, amelyet az évek során gyűjtöttünk. Norman a dizájnnak három különböző szintjét említi, amelyek az embernek a külső világhoz való viszonyulásán alapulnak: Zsigeri szint (visceral level) 10 RAND, Paul (1987): Good Design Is Goodwill. In: Helen Armstrong (ed.): Graphic Design Theory: Reading from the Field. New York: Prinecton Architectural Press, pp. 64. saját fordítás 13
Viselkedési szint (behavioral level) Reflektív szint (reflective level) A zsigeri dizájn az érzékelésnek a legelemibb, biológiai szintjére hat. Ilyenkor az ingerekre ösztönösen, zsigerből reagálunk, például: szeretjük az élénk színeket, a szimmetrikus arcot, az édes ízt, nem szeretjük az erős zajt, a hideget, a forróságot, a keserűt, stb. Honlapok esetében a zsigeri szinten a külső megjelenés (színek, erős kontrasztok, betűtípus, stb.) számít. A viselkedési szint található középen. Nem tudatosan történik. A mindennapi viselkedésünk, a rutinos dolgok, ahogyan járunk-kelünk a világban, ezen a szinten játszódnak. Itt jön képbe a funkcionalitás, használhatóság. Az illető tudja-e használni az adott alkalmazást vagy sem? Mennyire intuitív a kezelőfelület? Ha minden nagyon zavaros, akkor ezen a szinten a termék elbukik, frusztrációt és negatív érzelmeket fog kiváltani. Legfelül található reflektív szint, amely már tudatos. Erre a szintre tervezni azt jelenti, hogy az ember személyiségébe és a világról alkotott képébe kell beilleszteni az adott terméket. Ez a szint már nagy különbségeket mutat egyénenként és felül tudja írni az előző kettőt. Ilyenkor az illető azonosul a termékkel, beépül a saját imagebe, például egy Rolex karóra, de egy környezettudatos autó is ide tartozhat. A reflektív szint abban is eltér az előző kettőtől, hogy időben is kiterjed. Míg a zsigeri és viselkedési dizájn a jelenben fejti ki hatását, addig a reflektív dizájn hosszú távon (is) működik, hatnak rá a múltbéli tapasztalatok, az emlékek, stb. Ezért is tud egy jól felépített brand hosszútávon működni. Zsigeri szinten minden ember hasonló, kisebb eltérések lehetnek, például egyeseknek alig van tériszonyuk, másoknak pedig nagyon erős. A viselkedési szint viszont már nagyon érzékeny a külső hatásokra: a kultúra, oktatás, tapasztalatok, mind-mind befolyásolják. A legfelső szint pedig teljesen egyéni, személyiséghez kötődő. Egy termék mindhárom szintre hat egyszerre, ezért egy dizájnernek mindet figyelembe kell vennie. Viszont azt is fel kell ismernie, hogy nem járhat mindenki kedvébe, lesznek megoldások, amelyek bizonyos rétegeknek nem fognak tetszeni, ezért fontos a célközönség megválasztása és ismerése. 14
Ha Norman kutatásainak eredményeit át szeretnénk ültetni a webdizájn területére, akkor mindenképp szerezzük be Aaron Walter Designing for Emotion (2011) című könyvét. A könyv egésze az érzelmek szerepének fontosságát taglalja, hasznos példákkal alátámasztva mindezt a webdizájn területéről. Többek között megemlíti a Wufoo-t, 11 amely szakított a megszokott konvenciókkal és teljesen új oldalról közelítette meg egy egyébként nem túl érdekes feladatnak a kivitelezését. A Wufoo űrlapok készítését teszi lehetővé egy webes felületen, amelyeket aztán más honlapokba ágyazhatunk, vagy önmagukban is felhasználhatunk. Nem egy izgalmas feladat, a konkurenciája ezért nem is próbálkozott az élvezetesebbé tételével. A Wufoo felismerte mindezt és teljesen szembe ment vele. A könyv idézi Kevin Halet az alapítók egyikét aki elmondja, hogy amikor a Wufoo-t tervezték, elképzelték a leendő felhasználóikat, amint egy ablaktalan irodában, a főnök állandó sürgetése közben megpróbálnak időben elkészülni egy webes űrlappal. Ezeknek a felhasználóknak próbáltak meg egy kis vidámságot becsempészni a rutinos mindennapjaikba. Mindezt azáltal, hogy egy vidám, személyiséggel felruházott honlapot készítettek, amelyben a színek, a formák, mind-mind könnyedséget, vidámságot sugároznak, de ugyanakkor nem erőltetett módon, és szem előtt tartva, hogy ne menjen mindez a használhatóság rovására. Vidám színek, lekerekített formák, frappáns (de nem zavaró) fogalmazás, és egy Shakespeare idézet a bal felső sarokban. Mind-mind a Wufoo személyiségjegyeihez tartoznak 11 http://www.wufoo.com/ 15
A Wuffo egy program, de olyan mintha egy élő emberi lény lenne írja róla Aaron Walter. A honlapnak személyisége van és ez elengedhetetlen ahhoz, hogy a felhasználókat érzelmileg is megérintse. Elfelejtettük, hogy egy üzleti vállalkozás mögött is húsvér emberek vannak, miért nem hagyjuk ezt visszatükröződni a cég honlapján is? teszi fel a kérdést (o. 15.) Kilépéskor így próbál meg maradásra késztetni a Wufoo Gyakran emberi tulajdonságokkal ruházunk fel dolgokat pusztán a képzeletünk révén. Ezért látunk oly gyakran a felhők absztrakt formáiból emberi arcokat kirajzolódni. Néha csak az arányok révén válik valami emberivé. Erre jöttek rá az ókori görögök is, amikor felfedezték az aranymetszés szabályát, egy matematikai arányt (1.618), amely a természetben számos helyen és formában fellelhető, többek között az emberi testben is. Nem véletlen, hogy ami ezt az arányt követi, azt az emberi agy alapból szépnek észleli. Az aranymetszés szabályát azóta számos területen alkalmazzák, kezdve az építészettől a tervezőgrafikáig, de még filmek vágásakor is. Ahhoz, hogy egy honlap ne csak használható legyen, hanem élvezhető is, olyan megoldásokat is alkalmazni kell, amelyek nem csak a funkcióra, hanem a látványra is kiterjednek, ehhez pedig elengedhetetlen a tervezőgrafika módszereinek mélyebb ismerete. 16
A tervezőgrafika és a webdizájn viszonya Richard Hollis 12 meghatározása alapján a tervezőgrafika az a szakma, amelyben a különböző jeleknek a készítése és/vagy használata által próbálunk meg valamilyen üzenetet célba juttatni. A tervezőgrafikában a képek többet jelentenek a dolgok konkrét illusztrálásánál. A jelentésük nagyban függ a kontextustól, amelyben használják őket, ebből kifolyólag teljesen más jelentést is hordozhatnak, mint amit valójában ábrázolnak. Elég gyakran a szöveget és képet együtt használják és általában önmagában egyik sem hordozza azt az üzenetet, amit így együtt közvetítenek. A webdizájn és a tervezőgrafika szoros kapcsolatban vannak egymással, de ugyanakkor számos tekintetben különböznek is. Talán a legfontosabb eltérés a web interaktivitásából adódik. A nyomtatott anyagok esetében általában olvasóról, esetleg befogadóról beszélünk, a webnél viszont felhasználóról, azaz olyan személyről, aki nem csak passzívan befogad, hanem hozzá is akar szólni, vissza akar jelezni valamilyen módon, esetleg bővíteni akarja a tartalmat. Különösen igaz ez a web 2.0 elterjedése óta, azaz a 2000-es évek közepétől. A web 2.0 nagy mérföldkövet jelentett az internet történetében, amely egyszerű befogadókból aktív felhasználókat varázsolt, akik már nem csak olvassák a webet, hanem aktívan szerkesztik, írják, tartalommal töltik fel (tipikus web 2.0- ra épülő szolgáltatások a blogok, kép- és videómegosztók, közösségi portálok, stb.) A felhasználó nagyon sok esetben valamilyen konkrét céllal érkezik, például fórumon egy bizonyos témáról szeretné kikérni mások véleményét, vagy egy termékről szeretne többet megtudni, esetleg a saját tapasztalatait akarja megosztani, vagy csak egyszerűen szörfözik, kikapcsolódik. Bármelyik legyen is, fontos, hogy ne ütközzön akadályokba, zavartalanul tudja azt véghezvinni. Igen, még a céltalan böngészés esetében is zavartalan kell legyen a folyamat. Egy weboldalon minden zavaró tényezőnek számít, amiről a felhasználó nem tudja egyértelműen megállapítani, hogy miért van ott. Egy honlap kezelőfelülete intuitív kell legyen, erről akkor beszélhetünk, ha a felhasználó számára magától értetődő, hogy mi mire használ, mi miért van ott. A dizájnhoz úgy általában ugyanúgy hozzátartozik az is, amit nem látunk, 12 HOLLIS, Richard (2001): Graphic Design: A Concise History. London: Thames&Hudson 17
mint az, ami látható írja Francisco Inchauste. 13 A dizájn együtt fejlődött velünk, mindenhol jelen van, részét képezi a hétköznapjainknak, olyannyira, hogy már fel se tűnik számunkra, csak akkor, ha hirtelen változás történik. Például a óramutató jobb-bal irányba haladva jelzi az időt, vagy az ajtókilincset fordítva szerelték fel. Inchauste egy gyors visszatekintést végez a dizájn történetében. Leírja, hogy kezdetben csak a testünkre hagyatkozhattunk, aztán elkezdtünk eszközöket használni. Például először csak a kezünkkel ittunk, aztán elkezdtünk kagylót használni, ez már előrelépésnek számított. Idővel már nem csak azt használtuk, ami a természetben amúgy is jelen volt, hanem létrehoztunk eszközöket, de nem csak fizikai eszközöket, mint a kalapács, hanem jóval elvontabbakat is, mint például a nyelv, amely az egyik legnagyobb (dizájn) vívmány, amit valaha alkottunk. De ez az alkotás nem egy tudatos folyamat volt, láthatatlanul ment végbe. A dizájn ma is ilyen láthatatlan fejlődési folyamaton megy keresztül. Beszélni, levelet írni, egy kalapácsot használni, mind-mind magától értetődő számunkra. Lassan kialakulnak olyan szabályok, amit mindenki követni kezd, ezek egy idő után annyira általánossá válnak, hogy megváltoztatásuk azonnal érezhető, észlelhető lesz, és nagy valószínűséggel zavart is okoz. A webdizájn is egy fejlődési szakaszon megy keresztül. Azt is figyelembe kell venni, hogy nem a nulláról indult, hanem sok átfedés tapasztalható a jóval tekintélyesebb korral rendelkező tervezőgrafikával és sok más területtel. Fiatal szakmaként még nagyon sok dologban nincs konszenzus, viszont kialakultak már olyan szabályszerűségek, amelyeknek figyelmen kívül hagyása szinte biztos, hogy zavart okoz. Mivel szoros a viszonya a tervezőgrafikával, a webdizájnernek szintén jártasnak kell lenni a tervező grafika számos területén, viszont mivel nem egy statikus felületről van szó a folyamatot is szem előtt kell tartania, amikor honlapot tervez. Matt Ward és Alexander Charchar a Smashing Book második kiadásában 14 13 INCHAUSTE, Francisco (2011): Visible vs. Invisible Design In: Friedman, Vitaly Lennartz, Sven Kopik, Iris (eds.): The Smashing Book #2: Freiburg: Smashing Media GmbH, pp. 50-71. 14 WARD, Matt Charchar, Alexander (2011): The Principles of Great Graphic Design In: Friedman, Vitaly Lennartz, Sven Kopik, Iris (eds.): The Smashing Book #2: Freiburg: Smashing Media GmbH, pp. 14-47. 18
szintén górcső alá veszik a webdizájn és a tervezőgrafika viszonyát. Kihangsúlyozzák a felhasználófelület (User Interface, UI) és felhasználói élmény (User Experience, UX) szerepét, és azt, hogy ezekről csak a webdizájn esetében beszélhetünk. Sőt fontos részét képezik, vannak külön erre a területre specializálódott szakemberek, bár az gyakoribb, hogy ezek a feladatkörök is a webdizájnerre hárulnak. A tervezőgrafika legfőbb célja a kommunikáció, mégpedig vizuális elemek révén. Ez azonban nem fedi a webdizájn teljes területét, hiszen az UI és az UX nem korlátozódik csupán a vizualitásra. A felhasználó el tud igazodni? Meg találja és tudja értelmezni a navigációt? El tudja gyorsan végezni a feladatát? Pozitív élményben van része? Ezek mind olyan kérdések, amelyekkel a tervezőgrafika nem foglalkozik, bár kétségtelen, hogy fontos szerepe van ezekben, de elsősorban az UI és UX hatáskörébe tartoznak, amely a pszichológiától a biológiáig számos területet segítségül hív ezek elemzéséhez és megértéséhez. Mindez ellenére, a webdizájn nagyon sokat kölcsönöz a jóval hosszabb múlttal rendelkező tervezőgrafikától: a kompozíció, kontraszt, tipográfia, forma, illusztráció, a szín elméletek, a rácsszerkezet, stb. használata szintén bevett gyakorlat a weboldalak tervezése során. Ezek ismerete tehát elengedhetetlen egy webdizájner számára is. A honlapok felépítése Ahogyan az embernek is van egy csontváza, úgy egy honlapnak is kell legyen egy szerkezete, ami bár láthatatlan, de egy egységes tartást ad neki, lehet rá építeni, és ha jól ki van találva, akkor nem kell attól tartanunk, hogy minden darabjaira esik szét. Talán nem a legmegfelelőbb hasonlattal éltem, amikor az emberi csontvázat vettem példaként. Azért is nem, mert ma már nem nagyon beszélhetünk stabil, rögzített szerkezetről, ami mindig és minden körülmények között egységesen fog kinézni. Ez is egy újabb tényező, ami megkülönbözteti a webdizájnt a hagyományos tervezőgrafikától, ahol milliméter pontosan lehet tervezni. Egy honlapnak viszont jobb esetben alkalmazkodnia kell a böngésző méretéhez, ami lehet olyan kicsi, mint egy okos telefon kijelzője, de olyan hatalmas is, mint egy plazmatévé. Ezt nevezik angol nyelven Responsive Web Design-nak, ami annyira új kifejezés, hogy a magyarban még nincs is egységes fordítása. Ethan Marcotte használta először egy 2010-ben íródott cikké- 19
ben, 15 később egy rövid könyvet is írt ezen a címen. 16 A dolog nem új keletű, igazából a legtöbb megoldás korábban is létezett, Ethan Marcotte viszont egy zászló alá gyűjtötte és nevet adott neki. A responsive szó jelentése: érzékeny, felelő, és arra utal, hogy a honlap reagál a böngésző méretére és annak megfelelően rendezi az egyes elemeket. Abban különbözik az alkalmazkodó webdizájntól (adaptive web design), hogy teljesen flexibilis, nincsen semminek sem rögzített mérete, így a legkisebb böngészőméret változásra is reagál. Az adaptív webdizájn viszont lehet teljesen rögzített szerkezetű és lépcsőzetesen alkalmazkodik a gyakoribb böngésző méretekhez, például 320, 768, 1024 pixelfelbontásoknál. Természetesen függ a honlap komplexitásától, de általában több elemből áll egy honlap: lenni szokott egy fejléc, egy fő navigáció, a tartalom, másodlagos tartalom, esetleg oldalsáv és lábléc. Fejléc szokta tartalmazni a honlap identitásához elengedhetetlen logót és legtöbb esetben a navigációt. Fontos, hogy a fejléc minden oldalon (nagyjából) ugyanúgy nézzen ki, kisebb eltérések lehetnek, főleg a főoldal esetében, de nem szabad túlzásba esni, ellenkező esetben a felhasználó nem fogja érezni, hogy még mindig ugyanazon a honlapon van. Tanácsos a tervezés első fázisaiban mellőzni a számítógépet. Mindenek előtt a szükséges információkat kell beszerezni a klienstől a készítendő honlapról. Minél többet tudunk, annál könnyebb dolgunk lesz a későbbiekben. Jason Beaird (2007 3. o.) első lépésben a következő kérdések tisztázását ajánlja: Mivel foglalkozik az adott vállalat? Milyen beosztása van az illetőnek, akivel nekünk kell egyeztetni? Van-e már létező arculat? Milyen célból készül a honlap? Milyen információt kívánnak a honlapon közölni? Ki a célközönség? Vannak olyan közös jellemzők (pl. lakhely, nem, kor, stb.), amely alapján leírhatnánk őket? Kik a versenytársak és van-e azoknak honlapjuk? 15 Responsive Web Design: http://alistapart.com/article/responsive-web-design 16 MARCOTTE, Ethan (2011): Responsive Web Design, New York: A Book Apart 20
A beosztás felől érdeklődni udvariatlan dolognak tűnhet, viszont azért fontos ezt tudni, mert lehet, hogy a döntéseket nem a kapcsolattartó személy hozza, így hiába egyeztünk meg vele egy dologban, ha a főnök másképp akarja. Könnyen megtörténhet, hogy kétszer vagy háromszor annyit fogunk dolgozni, attól függően, hogy hány kézen megy át a megbízás, amíg eljut a végső döntéshozóhoz. A fenti kérdések természetesen csak egy átfogó képet nyújthatnak, kiindulási pontnak jók, de a későbbiekben ennél több információra lesz szükségünk. Számos kérdőív található 17 a weben, sokat közülük neves működő webdizájn ügynökséges bocsátottak a dizájnerek, webfejlesztők számára teljesen ingyen. Ezzel is segítve őket és végső soron azt a sok millió felhasználót, akik a weben próbálnak meg adott területen, adott témában informálódni. Ha már rendelkezünk a szükséges információkkal, a következő fázisban még mindig tanácsos a számítógépet mellőzni, ugyanis egy papír és egy ceruza segítségével sokkal könnyebben tudunk ötletelni, vázlatokat készíteni. Bár nem kifejezetten erre a célra készült, köztudott, hogy a honlapok nagy részét Adobe Photoshopban tervezik, bár létezik másfajta megközelítés is: a böngészőben történő tervezés. 18 A Photoshop mellett a Fireworks is nagy népszerűségnek örvend(ett) a webdizájnerek körében, ezért is meglepő, hogy az Adobe úgy döntött, 19 nem folytatja tovább a program fejlesztését, nem kis felháborodást keltve ezáltal. 20 Rendelkezésre áll még egy nyílt forráskódú alternatíva a GIMP 21 is. Bár szerényebb képességekkel rendelkezik a Photoshophoz képest, de meglepően sokat tud, és nem mellékes, hogy mindezt ingyen teszi. Időtálló dizájn Mielőtt azonban túlságosan elmerülnénk a fent említett programok valamelyikében, gondoljuk át, mit miért teszünk, mire van szükségünk az információ közléséhez. És ne ragadtassuk el túlságosan magunkat a program kínálta 17 http://goo.gl/5h6st 18 http://goo.gl/sltca 19 http://blogs.adobe.com/fireworks/2013/05/the-future-of-adobe-fireworks.html 20 http://blogs.adobe.com/fireworks/2013/05/the-future-of-adobe-fireworks.html#comments 21 http://www.gimp.org/ 21