WEBERGONÓMIA
A HONLAPKÉSZÍTÉS ERGONÓMIÁJA
ERGONÓMIA Ergonómia: „a dolgozó és a munkakörnyezet közötti kapcsolat tanulmányozása” 1. Ez a szó a görög “ergos” szóból származik, ami munkát jelent, és a “nomos” szóból, ennek jelentése törvény. „Az ergonómia fogalom jelentése a „munkafolyamatokkal, illetve ezeknek az ember számára gazdaságos és a legkisebb erőkifejtést igénylő kialakításával foglalkozó tudomány”2. Ergonómikus a tervezésben: a test és a lélek sajátosságait tudatosan figyelembe vevő. Ergonómikus a kivitelezésben:
a használó testét és lelkét nem károsító. Forrás: http://erg.bme.hu/Emania/1999/Bara0001/ergo.html, 2012. Az Idegen Szavak Gyűjteménye: http://idegen-szavak.hu/ergon%C3%B3mia, 2012.
WEBERGONÓMIA A webergonómia az ergonómiának az internetes világra értelmezett formája, amelyik a használható weboldalak megtervezésével és kialakításával foglalkozik. „Azt értjük egy weboldal használhatósága alatt, hogy használható-e bárki, átlagos (vagy akár átlag alatti) képességekkel és tapasztalatokkal rendelkező számára rendeltetésszerűen. Egy weboldal használhatósága annál jobb, minél kevesebb erőfeszítést kell tennie a felhasználónak a kezelése során.” (Steve Krug)
HASZNÁLHATÓSÁG − USABILITY A használhatóság (usability) fogalmát a szakirodalomban, illetve a különböző szabványokban eltérően definiálják. Tekintsünk át ezek közül néhányat!
1. ISO 9241-11 (Guidance on Usability, 1998) definíció: „Annak mértéke, ahogy a terméket meghatározott felhasználók meghatározott célokért eredményesen, hatékonyan és elégedetten használják egy adott környezetben.”
2. ISO/IEC 9126 (Software product evaluation – Quality characteristics and guidelines for their use,1991) definíció: „A használhatóság a jellemzők azon összegzése, amelyet a használathoz szükséges erőfeszítés mértéke, illetve a felhasználók által arról kialakított értékelés határoz meg.”
HASZNÁLHATÓSÁG − USABILITY 3. A szabvány továbbfejlesztett változatában (ISO/IEC FDIS 9126-1) a használhatóság a következőképp van meghatározva: „A szoftvertermék azon adottsága, hogy a felhasználó számára érthető, tanulható, használható és vonzó, amikor azt meghatározott feltételek mellett használja.”
Összefoglalva: Az ISO szabványokban a használhatóság két szerepkörben is megjelenik, egyrészt egy szoftver tervezési tevékenységként, másrészt egy olyan átfogó célként, hogy a szoftver teljesítse a felhasználói igényeket (Bevan, 1999).
HASZNÁLHATÓSÁG − USABILITY A következő idézet Krugtól, a használhatóság mellett, nagyon sokat elárul a weben szörföző felhasználók hozzáállásáról és weblaphasználati szokásairól.
„Gyakran felteszik nekem a következő kérdést: „Mi a legfontosabb teendőm, „Gyakran felteszik szeretnék nekem a következő „Mi a legfontosabb teendőm, ha olyan honlapot készíteni,kérdést: amit biztosan könnyen lehet használni?” Ahaválasz Nem olyasmi, hogy: „Ami lényeges, nem lehet lehethasználni?” távolabb két olyan egyszerű. honlapot szeretnék készíteni, amit biztosan könnyen kattintásnál”, vagy „Beszéld a felhasználók nyelvét!”, és nem is az, hogy A válasz egyszerű. Nem olyasmi, hogy: „Ami lényeges, nem lehet távolabb két „Légy következetes!” Csupán ennyi: „NE TÖRD A FEJEM!”” kattintásnál”, vagy „Beszéld a felhasználók nyelvét!”, és nem is az, hogy „Légy következetes!” Csupán ennyi: „NE TÖRD A FEJEM!”” A lényeg tehát, hogy minél kevesebb erőfeszítésébe teljen a felhasználónak az oldal használata. Azaz ne terheljük feleslegesen az agyát felesleges döntéshozások elvárásával, minden legyen egyértelműen megfogalmazva és vizuálisan megjelenítve. FORRÁS: KRUG, Steve: Ne törd a fejem! Felhasználóbarát webdizájn. HVG Kiadói Zrt., Bp. 2008. 18. p.
MEGFOGALMAZÁSRA PÉLDA A példában a felhasználó egy állást keres, nézzük meg, hogy a különböző szöveges megfogalmazásokra miként reagál gondolatban.
VIZUÁLIS MEGJELENÍTÉSRE PÉLDA Miként lehet egyértelműsíteni vizuálisan azt, hogy valamire rá lehet kattintani?
HASZNÁLHATÓSÁGI FAKTOROK U S A B
• Megtanulhatóság (Learnability): Amikor a felhasználó először találkozik a felülettel, mennyire egyszerű számára az alapvető feladatok elvégzése? • Hatékonyság (Efficiency): Ha a felhasználó már megismerkedett a felülettel, akkor milyen gyorsan tud különböző feladatokat megoldani?
L
• Megjegyezhetőség (Memorability): Amennyiben a felhasználó egy ideig nem használta a felületet, a korábban megszerzett tudását mennyire gyorsan tudja újra felidézni?
I
• Hibák (Errors): Hány hibát ejt a felhasználó, milyen mértékűek ezek, és mennyire tudják a hibáikat könnyen javítani?
I
T Y
• Elégedettség (Satisfaction): Mennyire megfelelő, kényelmes a felület használata a felhasználó számára?
FELHASZNÁLÓI SZOKÁSOK Ahhoz, hogy érthetőbbé váljon számunkra, mivel tudjuk a felhasználók számára használhatóbbá (magától érthetővé) tenni weboldalainkat ismernünk kell a felhasználók viselkedését. 1. A felhasználók nem olvassák végig az oldalakat, csak átfutják. 2. Nem a lehető legjobb döntésre törekszenek, hanem megragadják az első elfogadható lehetőséget. 3. Nem gondolják végig, hogy hogyan működik valami, csak használják azt valahogyan.
FELHASZNÁLÓK VISELKEDÉSE •
A tartalomra koncentrálnak, ha nem releváns, a lap további felépítésével sem törődnek
•
Amikor az oldalra érnek, figyelmen kívül hagyják a navigációs sávokat és átfogó szerkezeti elemeket.
•
Nem értik, hol tartózkodnak a website egészét tekintve
•
Rendkívül célirányosak
•
Fő stratégia a keresésre hagyatkozás
•
Elkerülik a reklámokat, szlogeneket…
•
Ha az oldal irreleváns, hamar otthagyják…
•
Ha nem értenek valamit az oldalon, nem szánnak
•
időt az elsajátításra…
FELHASZNÁLÓI ÉLMÉNY − USER EXPERIENCE Olyan formában adjuk az információt, amely a felhasználói szokásoknak megfelel. Cél, hogy a felhasználó jól és biztonságban érezze magát a felületen. •
Jelezni kell, ha a felhasználónak várnia kell
•
Jól nyomtatható oldalakat kell létrehozni
•
Ne kelljen a felhasználónak emlékeznie korábbi oldalakon lévő információra
•
Jól használható Gyakran ismételt kérdések gyűjtemény biztosítása
1. VIZSGÁLATI MÓDSZEREK • Analitikus módszerek – A felhasználók várható tevékenységének szimulálása • Irányelv vizsgálat • Heurisztikus módszerek • Bejárások • Empirikus módszerek – Az alkalmazást, vagy annak működő prototípusát vizsgáljuk • Megfigyelés • Használhatósági teszt (pl. Papír prototípus) Papír prototípus A rendszer egy papíron megvalósított változata, amelyen a felhasználók egy reprezentatív csoportjával a valós életben is előforduló feladatok interaktív tesztelése történhet, a kísérletet vezető személy (facilitátor) működtetése által.
SZEMMOZGÁSVIZSGÁLAT Mozgásútvonal, időzítés hossza
Hőtérképes felvétel
A WEBLAPOK ERGONÓMIA ELVEI ÉS TIPIKUS HIBÁK 1. Tartalomtervezés (Fontos a tartalomtervezés és a megjelenés szétválasztása) 2. Oldaltervezés 3. Linkek (hivatkozások) 4. Olvashatóság (A szöveggel kapcsolatos tudnivalók) 5. Navigáció 6. Megjelenés (design, színek, grafika) 7. Multimédiás tartalom
1. TARTALOMTERVEZÉS Jakob Nielsen vizsgálatai ébresztették rá a weblapfejlesztőket arra, hogy a felhasználók a weben nem olvasnak, hanem „scannelnek”, azaz csak végigpásztázzák az oldalt kulcsszavakat és fontos információkat keresve => a lényeget akarják kiszűrni. 1. A felhasználók elsősorban a tartalomra koncentrálnak nem a designra! 2. A látogatók a főcímeket, szövegeket tekintik át először. 3. Összefoglalással kezdődjön az oldal! 4. Legyünk tömörek! 5. Könnyű áttekinthetőség. 6. Rövid szövegek (lassabban olvasunk a képernyőről, mint könyvből (230/250 szó/perc nyomtatásban, képernyőről kb. 25%-kal kevesebb.)
7. Bekezdésenként egy gondolat! 8. Az oldal felső része értékesebb, mert gördítés nélkül elérhető.
A TEKINTETEK HŐTÉRKÉPES MEGJELENÍTÉSE Eltérő tartalomnál a mintázatok különböznek, 3 alapoldal típus létezik: – Bemutatkozás jellegű oldal (┌ akasztófa) – Termékbemutató (F betű) – Kereső találati oldal (E betű)
Forrás: http://www.useit.com/alertbox/reading_pattern.html
ÉRTÉKES INFORMÁCIÓTARTALOM
- 31% keret (oprsz. és böngésző) - kék - 20% értékes információ (térkép) - zöld - 23% navigáció - sárga - 10% hirdetés - rózsaszín - 16% kihasználatlan terület - fehér
Jakob Nielsen vizsgálatainak köszönhetően alakították a szoftverfejlesztők a böngészőket úgy, hogy kisebb helyet foglaljanak el a képernyőből!
2. OLDALTERVEZÉS ALAPELVEK 1. Mindig értékes és érdekes tartalom jelenjen meg az oldalon! 2. A tartalom töltse ki legalább az oldal felét, de jobb ha a 80%-ához közelít! 3. A navigációt a minimálisra kell csökkenteni! 4. Ne legyenek túlságosan nagy méretű, „üres” képek az oldalon! 5. A hirdetéseket jobb volna teljesen kihagyni használhatósági szempontból! 6. Tartalom-kiemelés és elhagyás elve. 7. A fehér terület fontos szerepe (tipográfiailag, oldalelrendezésben). => 8. Böngészőben való megjelenítés! (fix szélességű, alkalmazkodó szélességű (liquid), rugalmas (responsible))
OLDALTERVEZÉS
Weblaptervezési normák, sémák
Szabvány •
Logó az oldal bal felső sarkában van (ráklikkelve visszatérés a főoldalra)
•
Keresődoboz a nyitóoldalon
•
Bevezető Splash oldalak mellőzése
•
Vízszintes nyomvonal morzsa (breadcrumb, kenyérbél) navigáció
Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)
OLDALTERVEZÉS
Weblaptervezési normák, sémák
Közmegegyezés •
A laptérkép neve: laptérkép, vagy oldaltérkép
•
A látogatott link színét meg kell változtatni
•
Webáruházaknál a bevásárlókosár linkje a jobb felső sarokban legyen
•
Testvérterületekre mutató linkek megléte
•
Segítség elhelyezése jobb felső sarokban
•
A bejelentkezési folyamat a jobb felső sarokban
Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)
OLDALTERVEZÉS
Weblaptervezési normák, sémák
Homályos: • A fő navigációs sémák (oszlop balkézről, felső sáv/fülek, középre tolt telefonkönyv, stb…) • Keresőszolgáltatás elhelyezése (Balra fent, jobbra fent, középen…)
Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)
3. LINKEK, LINKEK FAJTÁI • Beágyazott link: Aláhúzott szöveg a főszövegben, ami jelzi hogy bővebb információ található egy másik oldalon. • Strukturális link A lapszerkezet különböző szintjeire (testvér, gyermek) Mutatnak. • Asszociatív linkek (külső linkek) Aktuális oldalhoz hasonló, ahhoz kapcsolódó oldalak eléréséhez.
LINKEK SZÍNE ÉS ALÁHÚZÁSA A linkek színe •
Még nem látott és már meglátogatott linkek színét meg kell különböztetni.
(Ajánlott a kék illetve lila színek megtartása, a szabványos színek használata elősegíti a felhasználók tájékozódását. Ha megváltoztatjuk, akkor ugyanazon szín eltérő árnyalatait érdemes használni.)
•
A piros linkszínek kerülendők!
A linkek aláhúzása: •
A link legyen aláhúzva! Kivételt jelenthet a navigációs menü és a linklista.
•
Ami nem link, az NE legyen aláhúzva, félrevezeti a felhasználót!
•
A linkek ne kerüljenek túl közel egymáshoz!
LINKEK HASZNÁLATA Linkek hossza, elnevezése: •
Ne legyen a link túl hosszú, 2-4 szó, max. 60 karakter
•
A „kattintson ide” kifejezés nem szerencsés
•
Önmagában értelmes legyen a link neve!
Linkekhez fűzött rövid magyarázat – Milyen típusú információt várhat a felhasználó a linktől? • A hivatkozott oldal neve • Oldalrész neve • Milyen információ található a céloldalon • Figyelmeztetés az esetleges problémára (pl. csak regisztrált felhasználóknak)
ROSSZ!
JÓ!
4. SZÖVEGGEL KAPCSOLATOS KÖVETELMÉNYEK A WEBEN • Értékes információtartalom
-> a weboldal tartalmában valami, fontosat, újat közöljön -> a többség számára érdekes és figyelemfelkeltő legyen
• Jól megfogalmazott szövegek (nyelvezet!) -> objektív (tényszerűen közöljük) -> tömören fogalmazzunk -> világosan fogalmazzunk
• Gyors és könnyű információszerzés
-> a felhasználók javarészt az információért jönnek a weboldalainkra -> cél az információ gyors és hatékony megszerzése - > legyen belső kereső beépítve - > figyelnünk kell a letöltési időre, ne legyenek nagy méretű animációk
• Jól olvashatóság -> karakterméret -> karakterszín -> karakter háttér színe
• Jól tagoltság ->kiemelések alkalmazása ->listák, felsorolások és számozások alkalmazása
OLVASHATÓSÁG •
Relatív betűméretet használjunk ne abszolútat! (pl. 120%, 90%)
•
Már az alap betűméret is elég nagy legyen, legalább 10pt-nak megfelelő. Idősebb célközönség esetén legalább 12pt.
•
Alternatív, nagybetűs, nagy kontrasztú stílus változat javasolt a gyengénlátó felhasználóknak.
•
Ellentétes színek használata a háttér és a szöveg elkülönítésére
•
pozitív szöveg: fehér háttér, fekete szöveg (sötétszürke jobb)
•
negatív szöveg: fekete háttér, fehér szöveg (világosszürke jobb)
•
A szokatlanabb lelassítja a felhasználót, a színpreferenciánk befolyásolja az olvashatóságot
OLVASHATÓSÁG •
Egyszínű, finom mintájú háttér használata
•
Kevésbé olvashatónak tartunk olyan szöveget, amely olyan háttéren van, ami nem tetszik nekünk…
•
Statikus (mozdulatlan) szöveget használjunk
•
Hosszú, folyó szöveget balra igazítsunk
•
Listáknál is a balra igazított a jól olvasható
•
A kisebb szövegek talp nélküli betűkészlettel jobban olvashatóak (Arial, Verdana)
•
NE ÍRJUNK CSUPA NAGY BETŰS SZÖVEGET • •
Lassabban olvasható (kb. 10%-kal) Kiabálás
WEBES TIPOGRÁFIA KORLÁTAI • Korlátozott (rendszerenként változó) betűkészlet • Nincs elválasztás, így a sorkizárt elrendezés csúnya lesz keskenyebb oszlopok esetén. • Nincs befolyásunk az egalizálásra (alávágásra) és a szóközökkel való feltöltésre. • Nem lehet tudni, hogy hol és hogyan nézik majd meg a munkát, így a designereknek minden képernyőméretre, felbontásra és környezetre gondolniuk kell.
Forrás: http://dev.opera.com/articles/view/11-tipografia-a-weben/
Tipográfia: kép és szöveg együttes elrendezésével foglalkozik. A tipográfiát hagyományosan a grafikai tervezéssel, főként a nyomdai termékek tervezésével kapcsolatosan szokás említeni.
A weboldalakon alkalmazandó sok szabály nagy része a nyomdászat régi szabályai közül került át.
5. NAVIGÁCIÓ • Hol vagyok? • Hol jártam már / honnan jöttem? • Hova mehetek innen? • Hát itt meg mit lehet csinálni?
5. NAVIGÁCIÓ • Hol vagyok? (Helyzetjelzők) – A látogató külső linkről is érkezhetett az oldalunkra. Fel kell tüntetni, hogy milyen oldalon, a struktúra milyen szintjén helyezkedik el. – Segít: logó szerepeltetése, az aktuális menüpont kiemelése, rovatra jellemző vizuális hatások • Hol jártam már? (Színnel való megkülönböztetés) – A visszafele gomb az egyik leggyakrabban használt funkció a böngészőkben – Lehet egyfajta history is, vagy az adott site felépítésének vertikális metszete • Hova mehetek innen? (Lehetőségek megmutatása) – Lehetséges továbbhaladási irányok feltüntetése – Logikus, könnyen használható menürendszer
HOSSZÚ OLDALAK ESETÉN A NAVIGÁCIÓ: • Hosszú oldalak esetén legyen megjelenítve tartalom menü is – Ezzel a felhasználók a lap megfelelő részére ugorhatnak. – Fontos, hogy legyen Vissza link is
MORZSANAVIGÁCIÓ BREADCRUMB – NYOMVONAL MORZSA • Az oldal tetején kell elhelyezni • Hierarchikus felépítésű lapoknál működik • Megmutatja, hogy az aktuális oldal milyen gyűjtőoldalak alá tartozik • Az elemek közé > jelet, vagy / jelet érdemes tenni. • A kezdőlapot nem kell szerepeltetni, mert oda a logóra kattintással is eljutunk (elvileg)
MENÜSOR • A menüsornak színezett hátteret kell adni, hogy a tartalomtól elválasztott legyen • Az oldal bal felén kell lennie, vagy vízszintesen felül – Megjegyzés: • A jobboldali igazítás előnyösebb lenne, de a normától való eltérés miatt nem szerencsés használni • A jobbra igazított menü közelebb van a gördítősávhoz, az egérmozgás csökkenne ezzel a megoldással…
OLDALTÉRKÉP
MENÜ, AMELY ELTÉR A SZOKÁSOSTÓL
A SZOKÁSOSTÓL ELTÉRŐ NAVIGÁCIÓ
NAVIGÁCIÓS HIBÁK • Navigációs eszközök hibái – Nem egyértelmű navigációs eszközök
Link? Nem, csak Aláhúzott szöveg!
6. DESIGN, MEGJELENÉS • Áttekinthetőség – Nem egységes oldalkinézet • Design /olvashatóság – Zavaró színek – Szövegszerkesztési hibák – Nem megfelelő háttér és szöveg színek
– Nem koordinált megjelenés – Gyenge minőségű képek használata – Túl nagy, vagy kis méretű szövegek használata – Nem megfelelő háttérkép – Átlátszó képek nem megfelelő használata
SZÍNSÉMA BEÁLLÍTÁS (TIPP) Hasznos oldal: http://colorschemedesigner.com/
SZÖVEGSZERKESZTÉSI HIBÁK
NEM MEGFELELŐ HÁTTÉR ÉS SZÖVEGSZÍN
GYENGE MINŐSÉGŰ KÉPEK, KOORDINÁLATLAN MEGJELENÉS
TÚLSÁGOSAN NAGY/KICSI MÉRETŰ BETŰK
NEM MEGFELELŐ HÁTTÉRKÉP
ÁTLÁTSZÓ KÉPEK NEM MEGFELELŐ HASZNÁLATA
Mind helytelen
Az első jó, a többi helytelen
7. MULTIMÉDIÁS TARTALOM 7.1. Válaszidők • A multimédiás tartalom letöltése lassú – a fájlformátumot, méretet, lejátszási időt tüntessük fel • Előzetest tegyünk fel – pl. videoból kivágott képkockákat
ESETTANULMÁNY • Látszik a videóelőzetes, a tartalom rövid leírása, elérhető a videó teljes szövegű leírása, megtekinthető on-line a felvétel és letölthető különböző formátumokban is. • (Forrás: Abonyi-Tóth Andor: A SCORM és WCAG szabványnak megfelelő e-tananyagok fejlesztési módszerei és tapasztalatai az ELTE Informatikai Karán)
VIDEÓ • A sávszélesség növekedésével egyre nagyobb szerepet kap – WEB-es TV adások – Videómegosztók (pl. youtube.com, indavideo.hu) – Távoktatás (beszélő személyiségének átvitele) – Tananyagok gazdagítása • Probléma lehet – rossz kép- és hangminőség
HANG • Magyarázó, segítő szövegek lejátszása • Zenei illusztrációk
– Csak indokolt esetben használjuk • Letöltési sebesség • Idegesítő tulajdonságok (ugyanaz a hangminta perceken keresztül) • Munkahelyen zavaró • Legyen kikapcsolható, lehalkítható
ANIMÁCIÓ • Lefoglalják az ember periférikus látását – Nehéz a tartalomra koncentrálni • Ne hagyjuk az animációt végtelen ciklusban futni – Még a ma már elavult GIF formátumban is volt lehetőség az animációs állományban rögzíteni, hogy hányszor menjen végbe az animáció.
KÉPEK KIVÁGÁSA, MÉRETEZÉSE • Sok az indokolatlan grafika – képként megjelenített szöveg • Egy kép felér 1000 szóval – letöltéskor mindenképp :-) • Kép kicsinyítése – lényegkiemelő képkicsinyítés • Körbevágás, képkicsinyítés
MANIPULÁCIÓ A KÉPEKKEL Egy kép különböző részlete mást-mást sugallhat!
AZ AKADÁLYMENTESÍTÉS A KÓD SZINTJÉN TÖRTÉNIK
Forrás: Tömösközi Péter
FORRÁSOK •
Abonyi-Tóth Andor: A weblapkészítés ergonómiája, példák, elvek, módszerek és eszközök (előadás - FSZK KKOP IKT képzés, 2012)
•
KRUG, Steve (2008): Ne törd a fejem! Felhasználóbarát webdizájn. HVG Kiadói Zrt., Budapest. ISBN: 9789639686533.
AJÁNLOTT IRODALOM • NIELSEN, Jakob (2002): Web-design. Typotex Kft. Elektronikus Kiadó, Budapest. ISBN: 109639548162. • KRUG, Steve (2008): Ne törd a fejem! Felhasználóbarát webdizájn. HVG Kiadói Zrt., Budapest. ISBN: 9789639686533. • LEISZTER, Attila (2011): Webergonómia - Jakob Nielesen nyomán. Typotex Kft. Elektronikus Kiadó, Budapest. ISBN: 9789632795782.
AJÁNLOTT IRODALOM •
ABONYI-TÓTH Andor; PATAKI Máté, MÁTÉTELKI Péter (2011): Bevezetés az info-kommunikációs akadálymentesítés világába I., Fogyatékos Személyek Esélyegyenlőségéért Közalapítvány, ISBN: 978-615-5043-18-5.
• PATAKI Máté, ABONYI-TÓTH Andor (2011): Bevezetés az infokommunikációs akadálymentesítés világába II., Fogyatékos Személyek Esélyegyenlőségéért Közalapítvány, ISBN: 978615-5043-62-8.
AJÁNLOTT IRODALOM BEAIRD, Jason: The beautiful web design. Sitepoint Pty. Ltd., Australia, 2007. (~170 old.) FORGÓ, Sándor-HAUSER Zoltán-KIS-TÓTH Lajos:Médiainformatika. Líceum Kiadó, Eger, 2001 (~400 old.)
ITTEN, Johannes: A színek művészete (A szubjektív élmény és objektív megismerés, mint a művészethez vezető utak). Göncöl Kiadó, Bp., 1978. (~100 old.) RUNG, András-KISS, Orhidea Edith: Felhasználóbarát honlapok − Webergonómiai tanulmányok. Gondolat Kiadó, Bp., 2006. (205 old.) TÖREKY Ferenc: Vizuális kommunikáció (Látáskultúra, rajzkultúra, képi látás). Nemzeti tankönyvkiadó Rt., Bp., 2002. (214 old.) VIRÁGVÖLGYI, Péter: A tipográfia mestersége számítógéppel. Osiris Kiadó, Bp., 1999. WEST, Suzan: Stílusgyakorlatok − A tipográfia és az oldaltervezés hagyományos és modern megközelítése. Virágvölgyi Péter fordításában. ÚR Könyvkiadó, 1999. (~220 old.) WILLIAMS, Robin: Tervezz bátran – Oldartervezés és tipográfia egyszerűen. Bp., Scolar Design, 2006.)
AJÁNLOTT LINKEK • http://juex.blog.hu/ • http://ergomania.blog.hu/ • http://www.webreference.com/greatsite.html • http://www.useit.com/ • http://www.usability.gov/pdfs/guidelines.html • http://weblabor.hu/ • http://onlinemarketing.blog.hu/
