Web és dizájn. kreatív honlapkészítés

Átírás

1 Web és dizájn kreatív honlapkészítés

2 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

3 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

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

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

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ő: 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. 5 BERGSTRÖM, Bo (2009): Bevezetés a vizuális kommunikációba (Essentials of Visual Communication) Budapest: Scolar Kiadó 7

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 ( 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

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 ( 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

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 ( 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

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 ( 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

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 cí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 ) 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

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

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

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

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

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

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 INCHAUSTE, Francisco (2011): Visible vs. Invisible Design In: Friedman, Vitaly Lennartz, Sven Kopik, Iris (eds.): The Smashing Book #2: Freiburg: Smashing Media GmbH, pp 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

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

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 ( 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: 16 MARCOTTE, Ethan (2011): Responsive Web Design, New York: A Book Apart 20

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

21 lehetőségektől. Könnyű belesni abba a csapdába, hogy elkezdünk dekorálni, a lényeg pedig lassan kihámozhatatlanul elkeveredik a sok díszítő elem között. Matt Ward és Alexander Charchar a már korábban említett cikkben 22 a minimalizmus mellett teszik le a voksukat. De ez a fajta minimalizmus nem azt jelenti, hogy mindent a végsőkig leredukálunk, hanem inkább arra utal, hogy minden okkal kerül oda, ahova kerül. Hangsúlyozottan foglalkoznak a nagy elődök hagyatékával, az olyan nagy grafikusokéval, mint Paul Rand, Moholy-Nagy László, Josef Müller-Brockmann, Jan Tischold, Robert Bringhurst, stb. Kihangsúlyozzák, hogy az általuk képviselt nézetek ma is megállják a helyüket, és követendőek a webdizájn területén is. Hiszen az olyan alapfogalmak, mint forma, szín, negatív tér, illusztráció és tipográfia mindig örök érvényűek maradnak. Ha csak az éppen aktuális trendekre figyelünk, akkor meglehet, hogy egy tetszetős honlap kerül ki a kezünk közül, amely rövid időre talán népszerű is lesz, de egy-két év múlva, amikor már új szelek fújnak azok a grafikai elemek, amelyek csak dekorációs céllal, az éppen aktuális divatnak megfelelően kerültek oda, inkább kínosak lesznek. Időtállóvá úgy tehetünk egy dizájnt, ha mindent átgondolunk, és minden, ami a honlapon helyet kap, okkal kerül oda. Például a képeknek van jelentésük, kiegészítik és megerősítik a tartalmat, az üzenetet, nem csak az üres tér kitöltéséért kerülnek oda. Ahhoz, hogy elkerüljük a fent említett buktatókat, előtekintőnek kell lennünk. Ha némi időt szánunk a kezdeti szakaszban vázlatok készítésére, a későbbiekben sokszorosan megtérül ez a befektetett idő. És nem járunk úgy, mint az a kimerült favágó, aki annyira próbált teljesíteni, hogy a fejszéje megélesítésére sem fordított időt. Az ötlettől a kivitelezésig A dizájn egy folyamat, amelyben az ötletek lassan öltenek alakot, először megszületnek a tervező fejében, majd lassan, a vázlatolások során bontakoznak 22 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

22 ki. Fogalmazza meg Janko Jovanovic, 23 aki évek óta foglalkozik 24 felhasználóbarát rendszerek kidolgozásával. A folyamat első fázisa az ötletelés (ideation), amelynek minél zökkenőmentesebben kell történnie, ezért a legcélszerűbb egy papírt és ceruzát használni ilyenkor, sőt ebben a szakaszban a filctoll még alkalmasabb, mert azt radírozni sem lehet, így nem merülünk el túlságosan a részletekben hangsúlyozza Jovanovic. A cél ilyenkor az, hogy minél több ötlettel álljunk elő, nem számít, ha azok nagyon elrugaszkodottak, hiszen egyes részeik a későbbiekben még hasznosíthatóak lehetnek. Végül is, ebben a szakaszban még nincs mit veszíteni, nem egy félig kész honlapot kell kidobni, amelybe egy halom időt és energiát már belefektettünk. Az ötletelés tarthat néhány napot, vagy csak néhány órát, bár ajánlott legalább egyet aludni rá. Ha idegesek vagyunk, akkor ajánlott kicsit félretenni a feladatot, mert ilyenkor az agy jobban fókuszál az adott problémára, kevesebb teret enged az elvontabb gondolatoknak tanácsolja Jankovic. A kreativitást nagyban gátolja, ha idegesek vagyunk, hiszen ilyenkor csak egy apró szegmensre fókuszálunk, nem látjuk a fától az erdőt. Ezért fontos, hogy az ötletelés alatt nyugodt lelki állapotban legyünk. Ha már megszületett az ötlet és következhet a kivitelezés, akkor viszont nem árt fókuszáltnak lenni, ilyenkor jó, ha van határidő, és az is segít, ha kicsit szorosabb annál, mint amennyit elégségesnek gondolunk írja Don Norman (2004). Ha már megszületett az ötlet, sőt több is van belőle, akkor tanácsos minél hamarabb elkezdeni a kivitelezést. Ugyanis nagyon könnyen belecsöppenhetünk abba a problémába, hogy elkezdünk ötletet-ötletre halmozni, viszont egyikhez sem leszünk elég lojálisak, hogy ki is vitelezzük. Erre mondja Scott Belsky a Behance alapítója, hogy ötletről-ötletre szindróma. 25 Ebből az okból írja valószínűleg több félig megírt novella van a világon, mint befejezett. Ha állandóan újabb és újabb ötleteink születnek, akkor soha semmit nem fogunk megvalósítani, ezért ki kell fejlesztenünk egy immunrendszert, amely meg- 23 JOVANOVIC, Janko (2011): Sketching, Wireframing & Prototyping. In: Friedman, Vitaly Lennartz, Sven Kopik, Iris (eds.): The Smashing Book #2: Freiburg: Smashing Media GmbH, pp Belsky, Scott How to Overcome Idea-to-idea Syndrome 23

23 véd a kivitelezés fázisában attól, hogy egy korábban már elfogadott ötletünket cserben hagyjuk egy újabb, majd megint egy újabb kedvéért. Természetesen nem baj, ha az embernek vannak új ötletei, viszont, ha egyik sem kerül kivitelezésre, akkor csak körbe-körbe fogunk járni, mint Cronauer és Garlick a Jó reggelt Vietnám! című filmben, amikor több órai gyaloglás után a dzsungelben ugyanott kötöttek ki, mert Garlick sérült lába miatt kicsit mindig jobbra kanyarodott. Egy másik probléma, amivel szembesülünk a kivitelezéskor az, hogy nem érezzük magunkat eléggé felkészültnek. Úgy gondoljuk, hogy hiányosak az ismereteink, utána kell nézzünk még dolgoknak. Állandóan ott motoszkál bennünk a kétség, hogy felsülünk, lejáratjuk magunkat, nevetség tárgyává válunk. A feltevéseink nagyon sok szempontból igazak lehetnek. Valóban lehetnek hiányosak az ismereteink, valóban lesznek majd olyanok, akik ezt kiszűrik és kritizálni fognak emiatt és talán még nevetségessé is válhatunk némelyek szemében. Ez az az ok, ami miatt a legtöbbünk abbahagyja a rajzolást, amikor kellően felnőtt lesz ahhoz, hogy felismerje, tökéletlen, amit csinál. Ken Robinson 26 nemzetközileg elismert kreativitás szakértő véleménye szerint az emberek többségét legalább ugyanolyan mértékben tartják vissza a belső akadályok (önbizalomhiány, félelem, aggályok, stb.), mint a külső, rajtuk kívülálló okokból jelentkező tényezők (lehetőségek, környezet, stb.) Az első lépés, hogy elkezded írja 27 Jason Zimdars, a 37signals designere. Ha webdizájnt akarsz tanulni, akkor kezdj el honlapokat készíteni. A legtöbb esetben a valódi problémát a túl erős önkritika, és a kifogások keresése jelentik, és nem a tudás hiánya. A szükséges tudás menet közben meg lehet szerezni. A legfontosabb, hogy kezdjük el valahol, és akkor majd sorra jelentkeznek a kérdések, amelyeket meg kell válaszolnunk, és ha kellően érdekel bennünket, akkor biztosan utána fogunk nézni. Hasonló véleményen van Chris Coyier is, a népszerű CSS-Tricks 28 készítője: 26 ROBINSON, Ken (2009): The Element: How Finding Your Passion Changes Everything, New York: Penguin Group 27 The first step is to start

24 Csak fogd az ötleted és tanuld meg menet közben mindazt, amire szükséged van ahhoz, hogy megvalósítsd. Amikor honlapkészítésről van szó, nem csak egyetlen igaz járható út van. Élvezd az utazást. 29 Elrugaszkodás (a komfortzónából) Amikor az érzelmek szerepéről írtam, kihangsúlyoztam azt a számos szakértő által alátámasztott megállapítást, miszerint egy szép dizájn elégedettebb felhasználókat eredményezhet. Az alábbi fejezetben ezt szeretném egy kicsit tovább görgetni. Elrugaszkodás alatt azt értem, hogy néha el lehet engedni a fantáziánkat, lépjünk ki a komfortzónából és játszunk. Az emberek szeretnek játszani, a játékok maradandó élményt nyújtanak, ezért is van az, hogy amit játszva tanulunk meg, arra mindig emlékezni fogunk. A játékosság is hozzátartozhat egy weboldal személyiségjegyeihez. Persze vigyázni kell nehogy visszájára süljön el a dolog, hiszen a játéknak nincs mindenhol helye. Egy kórházi honlap például egyike ezeknek. Viszont tény, hogy egy játékos honlapra nagyobb valószínűséggel fogunk emlékezni, szívesebben térünk vissza rá, és ajánljuk barátainknak, ismerőseinknek. De mit jelent a játékosság egy honlap esetében? Talán példákkal tudnám a legjobban ábrázolni mindezt. Próbáltuk már beírni a Google keresőjébe a ferde szó angol megfelelőjét (askew)? Ha nem, tegyük meg most. Bizony, még egy ilyen óriás, mint a Google, is játszik. De elég, ha csak a kis illusztrációkra gondolunk, amelyek olykor felváltják a Google mindenki által ismert logóját, ezek az elhíresült Google firkák (Google doodles 30 ): Douglas Adams születésének 61-ik évfordulójáról így emlékezett meg a Google 29 Just Build Websites

25 Nők napján. Aki elég figyelmes, felleli a Google-t a sok nő között. A játékosság nem kell mindig ennyire látványos legyen, sok olyan játékos elem van, amelyet talán észre sem veszünk, nem is tudatosul bennünk, de ettől még hat ránk. A Google-nél maradva, bizonyára észrevettük, hogyan jelzi számunkra, ha rengeteg találat van egy adott kifejezésre: Nem annyira szembetűnő, mint a firkák, de a Gooooooooogle is egy ilyen játékos elem, amely valószínűleg mindannyiunk emlékezetébe bevésődött már. A játékosság nem feltétlenül kell grafikailag megnyilvánuljon, lehet csupán a szöveg is, viszont vigyázni kell, hogy ne legyen erőltetett vagy zavaró (emlékezzünk Krugnak az állásajánlat vs. hellómeló példájára). Korábban már említettem a Wufoo Shakespeare idézetét, ami jó példa erre, akárcsak a WordPress Hello, Dolly! bővítménye, amelynek köszönhetően, aki rendszeresen használja a WordPress-t, az már valószínűleg ismeri a Luis Armstrong által megénekelt Hello, Dolly! című dal szövegét. Hello, Dolly! idézetek a dal szövegéből 26

26 Lehet, hogy nem is tud róla, de minden egyes alkalommal, amikor bejelentkezik a WordPress kezelőfelületére, hogy egy újabb bejegyzést írjon blogjába, a jobb felső sarokban egy véletlenszerűen megjelenített sort talál a dal szövegéből. Ez nem csak egy bővítmény, egy egész generáció reményét és lelkesedését tartalmazza két szóba sűrítve, amelyet leghíresebben Louis Armstrong énekelt: Hello, Dolly. írja róla Matt Mullenweg 31 a WordPress egyik alapítója. A legnagyobb kihívás, amikor játékosság által is szeretnénk a honlapunkat maradandóbbá tenni, hogy tudjuk, mikor kell leállni. Túl sok poén elűzheti a látogatóinkat, bár van olyan eset is, amikor el lehet teljesen rugaszkodni. Ez persze kockázatos, de ha jól csináljuk, akkor egy feledhetetlen honlap lehet az eredmény írja Jeremy Girard És valóban, rengeteg jó példába lehet botlani az interneten. Egyik személyes kedvencem az Epipheo honlapja, amelyet feledhetetlen módon prezentálja önmagát, érdemes végiggörgetni

27 Ha már a görgetésnél tartunk, gyakran hallani, hogy egy honlap lényeges tartalmát érdemes besűríteni arra a felületre, amely még látszik görgetés nélkül (above the fold). Ez általában egy elég szűk területet jelent (600px körülit). Számos dizájner ragaszkodik ehhez a szabályhoz, mások szerint a görgetés egyáltalán nem jelent akadályt a felhasználók számára. Ezen a véleményen van Paddy Donnelly webdizájner és illusztrátor is, aki egy külön honlapot is szentel a témának. 33 A honlapot lefelé görgetve (ami egyáltalán nem fárasztó vagy kényelmetlen számomra) megtudhatjuk, hogy ezt a rossz berögződést az újságoktól vette át a webes szakma. Ott ugyanis fontos, hogy a törésvonal fölé olyan tartalom kerüljön, amely meg tudja nyerni az újságos bódé kirakatán keresztül is az arra járókat. A honlapok esetében azonban ez nem érvényes. Azzal, hogy mindent a törésvonal fölé helyezünk, egy zsúfolt, átláthatatlan felületet eredményezünk, amin ha nagy nehezen át is verekedi magát a felhasználó, tovább görgetve egy olyan részhez érkezik, ahol már semmi érdekeset nem talál, így csalódottan távozik. Inkább próbáljuk meg bevonni a látogatót tanácsolja Donnelly, nyerjük meg a tartalommal és engedjük, hogy felfedezze a honlapot. Egyébként, ha Donelly személyes portfólióhonlapjára vetünk egy pillantást, akkor a játékosságnak egy újabb jó példájára bukkanhatunk a honlap alján: A hír, miszerint a Plútó nem is igazi bolygó, úgy tűnik Donelly számára mély sebet hagyott. Korábban említettem, hogy a játékosságnak nincs mindig helye, ezt most helyesbíteném, és inkább úgy fogalmaznám meg, hogy vigyázni kell, nehogy sértő módon tegyük, esetleg gúnyt űzzünk mások érzéseiből. Jeremy Girard a már korábban említett cikkében kitér arra, hogy komoly té

28 Paddy Donnelly törekvése, hogy eloszlasson egy tévhitet vagy berögződést a honlaptervezést illetően: iampaddy.com/lifebelow600/ 29

29 mákhoz is lehet játékosan fordulni. Példaként említi egy honlapot, amely a modern kori rabszolgaságra hívja fel a világ figyelmét. A slaveryfootprint.org egy ötletesen (játékosan) kivitelezett kérdőív segítségével azt is kiszámolja, hány rabszolga dolgozik a világban azért, hogy nekünk meglegyen mindaz, ami a jelenlegi életvitelünk elengedhetetlen részét képezi. A slaveryfootprint.org egy olyan unalmas feladatot is, mint a kérdőívkitöltés, érdekessé, élvezetessé tud tenni. Ezekből példákból jól láthatjuk, hogy a gazdagon illusztrált honlapoknak igen is helye van. Sokszor jóval hatékonyabban lehet közvetíteni az információt, bevonni a látogatót, ha képeket vagy illusztrációkat is használunk. A látás a szavak előtt jár. A gyermek előbb nézi és felismeri a dolgokat, s csak azután tanul meg beszélni. írja Johan Berger 34 Nincs olyan terület, ami valaki számára ne lenne érdekes, miért nem tudjuk úgy prezentálni, hogy mindenki számára az legyen? teszi fel a kérdést 34 BERGER, Johan (1990): Mindennapi képeink, Budapest: Corvina 30

30 Don Norman (2004 o. 205.) Akkor tanulunk a legjobban, ha érzelmileg is be vagyunk vonva a témába, ebben pedig fontos szerepe van a diagramoknak, illusztrációknak, animációknak is fejti ki. Az információ gyönyörű Ez a címe David McCandless nagy sikerű könyvének 35 és honlapjának 36, amelyben nyers adatokat, adathalmazokat jelenített meg oly módon, hogy azok bárki számára érthetőek legyenek. De nem csak érthetőek, hanem érdekesek is egyben, hiszen a színes ábrák, grafikonok és illusztrációk segítségével szinte első pillantásra olyan összefüggések tárulnak a szemünk elé, amelyeket a megdöbbentő és ehhez hasonló jelzőkkel illetnénk. Úgy tűnik mindannyian szenvedünk az információ vagy adat túláradattól. És a jó hír az, hogy létezik erre egy egyszerű megoldás, ami a szemünket jobban kihasználja. Tehát információ vizualizálás, hogy láthassuk a fontos mintázatokat és kapcsolatokat és aztán a megjelenítés során érthetőbb lesz vagy egy egész történetet mond el, vagy lehetővé teszi, hogy csak a fontos adatokra összpontosítsunk. Ha más nem, legalább jól néz ki ezekkel a szavakkal indítja előadását McCandless a TED-en. 37 Újságíróként (is) tevékenykedő McCandless elmondja, hogy gyakran hallja a médiában manapság, hogy az adat az új olaj (data is the new oil). Arra szoktak utalni ezzel, hogy az információ mindenütt jelen van, könnyű kibányászni. Átformálhatjuk, új dolgokat nyerhetünk ki belőle. McCandless azonban felhívja a figyelmet arra, hogy ez nem egy túl szerencsés hasonlat, inkább ő úgy fogalmazná át, hogy az adat az új talaj (data is the new soil). Számára az adat egy termékeny, kreatív közeget jelent, amely az évek során felhalmozódott az interneten. És a vizualizációk, ábrák, infografikák, az adatnak a különböző ábrázolási módozatai az ebből nyíló virágok. 35 MCCANDLESS, David (2010): Az információ gyönyörű: Infografika, Budapest: Typotex McCandless, David: Az adatvizualizáció szépsége: data_visualization.html Fordított: Jóföldi Endre és Patai Anna 31

31 Egy személy napi teljes vízfogyasztása (részlet a könyvből) McCandless kitér arra is, hogy mindannyian ki vagyunk téve az információ áramlásának, ami ránk zúdul minden nap az interneten keresztül. Ebből kifolyólag mindannyian igényeljük ennek az adatáradatnak az átlátható módon történő megjelenítését. A vizualizált információnak az a csodálatos varázsa van, hogy nem igényel erőfeszítést a megértése. A legtöbb inger a szemünkön keresztül áramlik be mondja: A szem nagyon érzékeny a különböző mintákra, színekre, alakokra. Szereti ezeket és szépnek nevezi. Ez a szem nyelve. És ha a szem nyelvét az értelem nyelvével kombináljuk, ami szavakról, számokról és fogalmakról szól, akkor két nyelvet beszélünk párhuzamosan, egyikkel erősítve a másikat. Az adatvizualizáció másik jeles képviselője Hans Rosling, aki egy TED konferencia keretében 38 rendkívül szórakoztató módon mutat be olyan statisztikai adatokat, amelyeket ha szokványos módszerekkel, például egyszerű tábláza- 38 Hans Rosling: Stats that reshape your worldview: you_ve_ever_seen.html 32

32 ton keresztül néznénk, soha nem érnénk a végére, valószínűleg belealudnánk. Rosling-ék kifejlesztettek egy szoftvert (letölthető a honlapjukról: gapminder.org/), amelynek segítségével időben és vizuálisan végigkövethetjük például a világban végbement demográfiai változásokat (termékenységi mutatókat, halandóság, stb.) a 60-as évektől egészen a napjainkig egy mozgó grafikonon. Minden ország egy külön buborék, és egy adott tengelyen mozog aszerint, hogy milyen változások mentek végbe az időben. Rosling prezentálás közben: 33

33 Gyakorlati rész A diplomamunka egy nagyszerű lehetőséget nyújt arra, hogy ne szokványos módon közelítsünk meg egy adott feladatot. Ha kliens megrendelésére készülne a munka, akkor számos kompromisszumot kellene kötni. Egyrészt adva van egy feladat, nem kérhetjük egy fodrászszalon tulajdonosát, hogy inkább foglalkozzon túravezetéssel, mert akkor látványosabb honlapokat tudnánk készíteni. Most viszont a megrendelő és a kivitelező is egyazon személy, a feladat pedig lehet olyan, ami személyes kíváncsiságon alapul. Éppen ezért kihasználom a lehetőséget és a három honlapból, amit készíteni fogok, kettőnél szabadjára engedtem a fantáziámat, nevezzük ezeket kísérleti honlapoknak. Itt nem követem a webes konvenciókat, legalábbis nem olyan szigorúan. Nem azért rúgom fel őket, mert megtehetem, hanem a feladat jellegéből adódóan. Ahhoz, hogy jobban megértsük a webdizájnt, talán nem árt, ha az internet történetét ismerjük, legalább a fontosabb mozzanatait. Éppen ezért, az első honlap, amit készíteni fogok, ebbe nyújt majd betekintést. Aki már érdeklődött valaha az internet múltját illetően, bizonyára tudja, hogy egy nagyon kusza, rengeteg szálon futó történetről van szó, amelyet számtalan esemény befolyásolt, terelgetett. A Wikipédián (mind a magyar, mind az angol nyelvűn) egy terjedelmes cikk foglalkozik ezzel a történettel. Nagyon kell érdeklődjön az illető, ha elejétől végéig el akarja olvasni. Találhatunk rövidebb összefoglalókat is, amelyek egy idővonalon futnak, így már valamivel átláthatóbb, de még mindig túlságosan nyers, hiányzik a vizualitás. Nem látjuk a dolgok összefüggését, nem tudjuk kontextusba helyezni a történéseket. Az is nyilvánvaló, hogy az internet története szorosan kötődik a számítógépekéhez, tehát ezeknek is utána kell nézni. Aki lelkiismeretesen érdeklődik, az igencsak hosszú napnak néz elébe. Böngészőfülek végeláthatatlan sora vár az internet története után érdeklődőkre. 34

34 Az internet történetéről szóló hivatkozások, képi anyagok egy helyre összegyűjtve az Evernote segítségével 35

35 Említettem már, hogy az internet története több szálon fut. Ez egy jó kiindulási pontot jelenthet, hiszen vizuálisan is megjeleníthető, emellett a szálak utalhatnak az internetnek az amúgy is hálózati jellegére. Ebből kiindulva kezdtem el vázlatolgatni. Kezdeti szakasz, vázlatok készítése. 36

36 Megpróbáltam minél látványosabban, de ugyanakkor átlátható és egyszerű megoldással előrukkolni. A végeredmény egy infografika, amely egyaránt működik, mint statikus plakát és weboldal: Minden fontos mozzanatot egy külön négyzet jelöl: ez áll egy illusztrációból ami néhol konkrét, máshol elvontabb, a történés jellegéből adódóan, egy jól kiemelt évszámból és egy rövid leírásból. Aki többre kíváncsi, az a webes verziónál ráklikkelhet az adott történésre, ilyenkor az ablak kiemelkedik, megnagyobbodik és az alatta található mezőben is több információ lesz elérhető. 37

37 Részlet 38

38 Rögtön rá is térnék a második honlapra. Ez olyan idézeteknek lesz a gyűjtőhelye, amelyek valamilyen szinten hatást gyakoroltak rám. Ezt a projektet folytatni szeretném a megvédés után is, újabb és újabb idézetekkel fogom bővíteni az oldalt. A honlap a címen fog működni, ami magyarul annyit tesz: idézet kockák. Az első honlapnál a játszva tanulás egy fontos irányelv volt, hiszen arra törekedtem, hogy nyers, száraz adatokat minél érdekesebb és érthetőbb módon jelenítsek meg. Ez a második honlap esetében is fontos lesz, viszont itt még bekerül a játékosság is, amit elsősorban vizuálisan próbálok meg bevinni, a vidám színek és formák segítségével, illetve illusztrációkkal. A harmadik weboldal egy szokványosabb típus lesz, a személyes bemutatkozó honlapom (), amely fog állni egy portfólióból, egy blogból és még néhány aloldalból. Erről a két honlapról még nincsenek végleges tervek, ezért nem tartom célszerűnek ide betenni mindazt, amivel eddig elkészültem, mert még nagyban változhat a végeredmény. Aki kíváncsi, az majd az említett címeken megnézheti őket. Egy eredetileg nem betervezett negyedik honlap viszont már meg is született. Ezt részben a szükség, részben a kísérletezőkedv hozta létre. Ugyanis, miközben a szakdolgozatomhoz a bibliográfiát rendezgettem, a könnyebb átláthatóság érdekében úgy döntöttem, minden könyvnek kiírom a tartalomjegyzékét. Ekkor ötlött fel bennem, hogy milyen jó lenne egy könyvkatalógus, ahol semmi más nincs, csak a tartalomjegyzék, az is oldalszámok nélkül. Így született meg a honlap, amely reményeim szerint idővel gyarapodni fog a könyvek számát illetően. Kisebb gyűjtemények létrehozására is lesz majd lehetőség a már fenn levő könyvek összeválogatásával. A gyűjteményt bárki létrehozhatja, névtelenül vagy névvel. Utóbbi esetben a szakterületét is meg kell adja az illető és amennyiben akar egy honlapcímet is társíthat mellé (ez lehet a személyes honlap, LinkedIn profil, stb.) A szakterület megadását azért tartom hasznosnak, mert növeli a gyűjtemény értékét, hiszen látni, hogy hozzáértő ajánlja az adott könyveket. A katalógus csak szakkönyvek számára készült, eredetileg minden területről lehetett volna feltölteni könyveket, de úgy gondoltam, hogy ez egy idő után fenntarthatatlan módon elburjánzódhat, ezért leszűkítettem a kört a kreatív szakmákra: grafikusok, dizájnerek, írók, alkotó emberek számára. A határt, hogy mi tartozik ide és mi nem, sajnos csak önkényesen lehet meghúzni, de idővel majd körvonalazódni fog. 39

39 contentsataglance.com 40

40 Bibliográfia Könyvek: BEAIRD, Jason (2007): The Principles of Beautiful Web Design. Australia: Sitepoint BERGER, Johan (1990): Mindennapi képeink, Budapest: Corvina BERGSTRÖM, Bo (2009): Bevezetés a vizuális kommunikációba (Essentials of Visual Communication) Budapest: Scolar Kiadó CSÍKSZENTMIHÁLYI Mihály (1997): Flow. Az áramlat Budapest: Akadémia Kiadó HOLLIS, Richard (2001): Graphic Design: A Concise History. London: Thames&Hudson HUNT, Ben (2008): Save the Pixel: The Art of Simple Web Design. INCHAUSTE, Francisco (2011): Visible vs. Invisible Design In: Friedman, Vitaly Lennartz, Sven Kopik, Iris (eds.): The Smashing Book #2: Freiburg: Smashing Media GmbH JOVANOVIC, Janko (2011): Sketching, Wireframing & Prototyping. In: Friedman, Vitaly Lennartz, Sven Kopik, Iris (eds.): The Smashing Book #2: Freiburg: Smashing Media GmbH KRUG, Steve (2008): Ne törd a fejem! Felhasználóbarát webdizájn Budapest: HVG Kiadó MARCOTTE, Ethan (2011): Responsive Web Design, New York: A Book Apart MCCANDLESS, David (2010): Az információ gyönyörű: Infografika, Budapest: Typotex NIELSEN, Jakob (2002): Web-design. Typotex Kft. Elektronikus Kiadó 41

41 NORMAN, Donald (2004): Emotional Design: Why We Love (or Hate) Everyday Things. New York: Basic Books RAND, Paul (1987): Good Design Is Goodwill. In: Helen Armstrong (ed.): Graphic Design Theory: Reading from the Field. New York: Prinecton Architectural Press ROBINSON, Ken (2009): The Element: How Finding Your Passion Changes Everything, New York: Penguin Group WALTER, Aaron (2011): Designing for Emotion. New York: A book apart 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 Internet: David McCandless The beauty of data visualization: Don Norman 3 ways good design makes you happy: don_norman_on_design_and_emotion.html Ethan Marcotte Responsive Web Design: Hans Rosling Stats that reshape your worldview: rosling_shows_the_best_stats_you_ve_ever_seen.html Jason Zimdars The first step is to start: the-first-step-is-to-start Jeremy Girard A Fun Approach To Creating More Successful Websites: www. smashingmagazine.com/2012/02/24/a-fun-approach-to-creating-more-successful-websites/ Paddy Donnelly Life, Below 600px: Scott Belsky How to Overcome Idea-to-idea Syndrome: how-to-overcome-idea-to-idea-syndrome/ 42