K niektorým problémom grafického dizajnu webových sídiel
Krok za krokom|
Úvod Grafický dizajn webových sídiel patrí k dôležitým pilierom informačnej architektúry. V článku Hodnotenie webových stránok (Makulová, 2005) sme zdôraznili, že internet sa stáva čoraz významnejším komunikačným, informačným, obchodným, reklamným a marketingovým médiom, prostredníctvom ktorého v súčasnosti komunikuje viac ako jedna miliarda používateľov na celom svete. V súčasnosti na vytvorenie domovskej stránky nestačí ovládať jazyk HTML. V čase, kedy sme doslova zavalení miliardami webových sídiel, je potrebné, aby stránka bola výnimočná, aby upútala. Podľa Gerry McGoverna (2002, s. 234) informačná architektúra stojí na štyroch pilieroch: metadáta a klasifikácia, navigácia, vyhľadávanie a grafický dizajn. O navigačných systémoch (Makulová, 2006 a) a systéme vyhľadávania (Makulová, 2006 b, Makulová, 2007) sme hovorili v predchádzajúcich článkoch. V dnešnom článku sa zameriame na ďalší z dôležitých pilierov informačnej architektúry, ku ktorému patrí grafický dizajn webového sídla. Význam a vývoj grafického dizajnu webového sídla World Wide Web môžeme charakterizovať ako globálnu sieť prepojených rôznorodých webových sídiel. Tieto môžu byť rôzne. Niektoré obsahujú iba text, ale dnes už na internete nájdeme väčšinou interaktívne multimediálne publikácie. Aby bolo možné definovať obsah WWW sídla, bolo potrebné vyvinúť metódu, ktorá by zvládla veľké množstvo textu, ale zároveň umožnila vkladať multimediálne prvky a kombinácie hypertextových odkazov, ktoré sa môžu vyskytovať na ľubovoľnej stránke. Umožňoval to jazyk HTML, ktorý vytvoril Tim Berners-Lee v roku 1991. Prvá verzia HTML 0.9 umožňovala do textu vkladať obrázky, hypertextové odkazy, vytvárať logické úrovne a zvýrazňovať text. Vzhľadom na zvyšujúce sa požiadavky používateľov vytvárali producenti prehliadačov nové prvky, ktoré Tim Berners-Lee zhrnul v štandarde HTML 2.0, ktorý už plne vyhovuje štandardu SGML (ISO 8879, r. 1986). V roku 1996 vzniklo HTML 3.0, v roku 1997 HTML 4.0 a o dva roky opravená verzia HTML 4.01, ktorá je poslednou vývojovou verziou HTML. HTML teda predstavuje značkovací jazyk umožňujúci publikovať hypertext na WWW. Vývoj HTML skončil a HTML má svojich nasledovníkov v jazyku XHTML, čo je nástupca jazyka HTML založený na XML. Podrobné informácie o jazyku HTML a spôsobe písania pre web nájdete na webovom sídle “Ako písať web, návod na html stránky” na URL adrese http://www.jakpsatweb.cz/index-sk.html. Grafický dizajn patrí medzi najdôležitejšie faktory pôsobiace na návštevníka stránky, v podstate vytvára prvý dojem, ktorému z psychologického hľadiska často patrí viac než 50 % úspešnosti. Vývoj webových sídiel sa vyvíja a je výsledkom mnohých normalizačných tendencií W3C. V roku 1994 väčšina stránok poskytovala základné informácie o spoločnosti, produkte a pod. V podstate išlo o typ elektronickej informačnej brožúrky. Od roku 1995 sa začal klásť dôraz na grafickú prezentáciu a obsah jednotlivých stránok, o rok neskôr sa začala plne využívať najdôležitejšia vlastnosť webu, a to interaktivita. V roku 1997 sa stretávame s personalizovanými stránkami a rok 1998 je poznačený predovšetkým multimédiami, virtuálnou realitou a čoraz väčšou interaktivitou. Súčasná grafická úroveň stránok je veľmi vysoká, umožňuje ju predovšetkým použitie kaskádových štýlov. Veľký dôraz sa kladie na prístupnosť stránky podľa WCAG a dodržiavanie štandardov a konvencií informačnej architektúry, ktorej cieľom je zorganizovať informácie v digitálnom priestore tak, aby ich ľudia dokázali nájsť. Vytvorenie webového sídla dnes nemôže byť otázkou práce jednotlivca, ale predpokladá spoluprácu odborníkov viacerých disciplín, ako napr. z oblasti kognitívneho dizajnu, grafického dizajnu, trojdimenzionálnej reality, teórie hypertextov, knižničnej a informačnej vedy, manažmentu dokumentov, používateľnosti a pod. Už z výpočtu uvedených disciplín je zrejmé, že názory, že na vytvorenie webovej stránky stačí mať k dispozícii niektorý z dostupných editorov a zvládnuť základy jazyka HTML, podceňujú zložitosť problematiky. Aj znalosť písania ešte z nikoho neurobí spisovateľa. Jedno je isté – pokrok v oblasti internetových technológií nás núti k neustálej inovácii a zmene, o čom svedčí aj vývoj webových sídiel v archíve internetu (http://www.archive.org). Informačný dizajn oproti grafickému dizajnu Zatiaľ čo hlavne v prvých rokoch bola tvorba webových sídiel doménou grafikov, neskôr sa prichádza na to, že používatelia internetu prichádzajú na web s cieľom nájsť potrebné informácie k práci, štúdiu, ale aj zábave a pod., teda sa začína väčšmi uprednostňovať informačný dizajn pred dizajnom grafickým. Jeho priekopníkom je predovšetkým Gerry McGovern, ktorý nazýva používateľov internetu aj čitateľmi a zdôrazňuje, že informáciu, ktorú nikto nenájde, ani nikto neprečíta. Informačný dizajn významne zvyšuje nájditeľnosť webového sídla.
Obr. č. 1 Nové webové sídlo SNK uprednostňuje informačný dizajn pred dizajnom grafickým
Obr. č. 2 Webové sídlo SNK pred redizajnom, kde väčšina odkazov predstavovala obrázky Jedným z najčastejších problémov je ešte stále priveľký dôraz na grafické princípy dizajnu webových stránok, čo je potom dôsledok tvorby často neefektívnych a nepoužiteľných webových sídiel. Dizajn webových stránok by mal podporovať princípy dizajnu informačnej architektúry. Dôvodov je viacero (McGovern 2001):
Používatelia prichádzajú na web predovšetkým s cieľom získať informácie, o čom svedčia aj výsledky pravidelných prieskumov. Z toho vyplýva, že hlavnými stavebnými prvkami by mali byť slová, a nie obrázky, ako stále presadzujú niektorí grafici. Grafický dizajn by mal podporovať informačnú architektúru sídla voľbou vhodných navigačných prvkov, rozvrhnutím štruktúry sídla, voľbou správnej typografie, farieb a pod. Grafický dizajn sa zaoberá tým, ako stránka vyzerá, dizajn informačnej architektúry sídla sa zaoberá tým, ako sa stránka číta.
Najdôležitejšou vlastnosťou webu je interaktivita, možnosť spätnej väzby, vyhľadávanie, sledovania hypertextových spojení. Správne zvolená informačná architektúra podporuje metódy rozhodovania prostredníctvom jej pilierov, ako je navigácia, klasifikácia, vyhľadávanie a metaprvky.
Už zo samotných technických obmedzení počítačovej obrazovky, problémov prenosu a sťahovania obrázkov vyplýva, že web nemôže poskytnúť taký vizuálny zážitok, ako napríklad časopis, prípadne kino, veľká televízna obrazovka a pod.
Už svojou povahou sú počítače určené na prácu a na vzdelávanie.
Pravidelné výskumy používateľov dokazujú, že používatelia nie sú ochotní čakať na naťahovanie stránky viac ako 10 sekúnd. Z toho vyplýva aj nutnosť optimalizácie grafiky pre webové sídla.
Efektívna informačná architektúra webu znamená organizáciu a klasifikáciu obsahu takým spôsobom, aby sa dal jednoducho nájsť a čítať, počúvať alebo prezerať. AOL, eBay, IBM, Microsoft, Oracle, CNN, Google, Yahoo!, Amazon.com, Napster a Cisco sú príklady zahraničných spoločností, ktoré pristúpili skôr k informačnému dizajnu stránok ako ku grafickému. Našťastie aj v prostredí slovenského internetu nachádzame čoraz viac stránok uprednostňujúcich obsah, a tým aj informačný dizajn. Na pridanú hodnotu webových sídiel prostredníctvom obsahu kladie dôraz aj celosvetová súťaž hodnotenia multimédií World Summit Award, európska súťaž EuroPrix Top Talent Award, ako aj slovenská súťaž o najlepšie webové sídlo knižnice TOP WebLib. Potreba informačného dizajnu sa zdôrazňuje aj v smerniciach Google pre tvorcov webových sídiel, ktoré sa týkajú dizajnu a obsahu stránky. Pravidlo č. 1 hovorí: “Vytvor webové sídlo s jasnou hierarchiou a textovými spojeniami. Každá stránka by mala byť dosiahnutá aspoň z jedného statického spojenia” (Webmaster Guidelines, 2007). Pod textovým spojením chápeme spojenie, ktoré využíva text, nie obrázok. Statické textové spojenie predpokladá spojenie v správnom HTML kóde, ktoré sleduje robot vyhľadávacieho nástroja, a nie spojenie využívajúce Javascript, Flash alebo inú technológiu neprístupnú pre robot vyhľadávacieho nástroja. Čím je stránka prístupnejšia pre znevýhodnených občanov, tým je prístupnejšia aj pre roboty vyhľadávacích nástrojov. Textové spojenia vytvárajú prístupné webové stránky. Dnešné redakčné systémy umožňujú vytvárať veľmi jednoducho textové spojenia. V prípade, že obrázky predstavujú väčšiu časť navigácie na sídle, je dôležité dať popisky k obrázkom prostredníctvom ALT tagov, čo je tiež súčasťou pravidla text verzus obrázky. Na obrázku č. 1 vidíme nové webové sídlo Slovenskej národnej knižnice v Martine po redizajne s textovými spojeniami. Ak si pozrieme nasledujúci obrázok, ktorý bol prevzatý z archívu internetu (http://www.webarchive.org), väčšina odkazov predstavovala obrázky, ktoré navyše nemali popisy vo forme ALT tagov. Uprednostňovanie grafického dizajnu pred dizajnom informačným malo za následok nižšiu nájditeľnosť a slabú indexovateľnosť webového sídla robotmi prieskumových strojov. V pravidle sa ďalej odporúča, aby na každé webové sídlo viedlo aspoň jedno statické spojenie. Tým sa splní zásada prístupnosti pre znevýhodnených občanov, ako aj pre roboty vyhľadávacích nástrojov. Statické spojenie sa dá dosiahnuť aj mapou webového sídla. Podľa Gerryho McGoverna (2001) web je predovšetkým veľkou univerzálnou knižnicou. Informačná architektúra znamená urobiť poriadok v knižnici tak, aby sa všetky dokumenty nachádzali na mieste, kde ich čitatelia dokážu nájsť. Zásady grafického dizajnu Pretože súčasný jazyk HTML sa sústreďuje viac na prezentačnú funkciu a nič nehovorí o obsahu dokumentu, jednotlivé záznamy zindexujú roboty vyhľadávacích nástrojov na základe naprogramovaného algoritmu. Pri vyhľadávaní je rozhodujúca kvalita indexu. Preto sa odporúča dodržiavať nasledujúce zásady: Osobitnú pozornosť treba venovať výstižnému textu nadpisov (hlavičky) a abstraktov.
Pri dizajne treba rešpektovať vlastnosti elektronického média a automaticky neaplikovať zvyklosti z tlačených médií. Opäť platia konvencie a odporúčané zásady, ktoré by sme mali dodržiavať:
Na vrchu každej stránky býva hlavná hlavička (masthead), ktorá by mala obsahovať:
V spodnej časti každej stránky by mala byť pätička s týmito informáciami:
Dizajn grafického rozhrania Pri tvorbe grafického dizajnu by sme mali kombinovať formu a funkčnosť tak, aby sme vytvorili intuitívne používateľské rozhranie. Trendy súčasného dizajnu sú funkčnosť a použiteľnosť. Použiteľnosť je kvalitatívny atribút internetových stránok, ktorý určuje, ako ľahko sa na nich používateľ orientuje, ako rýchlo pochopí ich usporiadanie a ovládanie a aký zážitok si z nich odnesie. Jakob Nielsen definuje použiteľnosť prostredníctvom piatich kvalitatívnych zložiek: 1. Naučiteľnosť Ako rýchlo sa dokážu používatelia naučiť vykonať základné úlohy, ak sa prvýkrát stretnú so stránkou? 2. Výkonnosť Ak sa používatelia oboznámili s dizajnom, ako rýchlo dokážu vykonať dané úlohy? 3. Zapamätovateľnosť Ak sa používateľ vráti po čase na stránku, pamätá si usporiadanie a ovládanie webu? 4. Chybovosť Koľko a aké chyby robia používatelia, dokážu sa s nimi rýchlo vysporiadať? 5. Spokojnosť Ako príjemné je využívanie dizajnu webu? Naším cieľom by malo byť tvoriť dobre použiteľné stránky, ktoré sú prehľadné, zrozumiteľné a ľahko ovládateľné. Na zle použiteľných stránkach sa používatelia cítia stratení, tápajú, nedokážu dosiahnuť svoj cieľ a odchádzajú sklamaní. Použiteľnosť je však taktiež odborná disciplína, ktorá exaktnými metódami skúma príčiny používateľských úspechov i neúspechov pri práci s internetovými stránkami. Dokáže napríklad vysvetliť, prečo si mnoho používateľov vloží vybraný tovar do nákupného košíka, ale iba málo z nich dokončí objednávku (Makulová, 2007 b). Moderné webové sídla spĺňajú zásady prístupnosti, majú vysokú použiteľnosť, validný HTML kód a využívajú technológiu CSS. Skôr ako sa rozhodneme vytvoriť nový dizajn, mali by sme prejsť fázou brainstormingu. Zúčastniť by sa ho mali kreatívni aj technickí pracovníci. Niekedy najkreatívnejšie riešenie znamená práve použitie modernejšej technológie. Definovanie dobrého dizajnu Dobrý dizajn webového sídla by mal vychádzať z cieľov sídla a mal by vyhovovať požiadavkám používateľov sídla pri zachovaní funkčnosti. Treba sa zamerať na spokojnosť návštevníkov a nie na ambície dizajnéra. Tvorba dobrého dizajnu znamená pozrieť sa na sídlo očami súčasného aj potenciálneho používateľa. Aby sme dokázali vytvoriť dobrý dizajn, mali by sme sa naučiť myslieť tak ako naši návštevníci. K najdôležitejším krokom patrí zbieranie informácií o používateľoch webového sídla, určenie ich kategórií a zistenie, aké informácie hľadajú na sídle, no predovšetkým, aké sú ich očakávania. Je potrebné pozrieť sa na sídlo očami obyčajného používateľa a prekonzultovať s tvorcami HTML kódu všetky nezrovnalosti a otázky, ktoré by mohli spôsobiť bežnému používateľovi problém. O tom, ako sa návštevníci správajú pri návšteve vašej stránky, sa môžete presvedčiť, ak ju zaregistrujete v profesionálnom systéme NAJ.sk na meranie a analýzu návštevnosti stránok. Pre uvedený tarif sa archivujú údaje 24 mesiacov a k dispozícii sú aj mesačné PDF reporty s podrobnými analýzami a štatistikami. Pred samotným grafickým návrhom webového sídla je potrebné určiť jeho informačnú architektúru. V tomto štádiu potrebujete:
Obr. č. 3 Ukážka časti mesačného pdf reportu INZERCIA.sk Keď je navrhnutá informačná architektúra sídla, odporúča sa vytvoriť malé prototypy častí sídla a testovať použiteľnosť sídla. Prototyp sídla umožňuje testovať navigáciu a zároveň pomáha dizajnérom vytvoriť používateľské rozhranie (interfejs). Výsledným produktom tohto štádia by mali byť nasledujúce dokumenty:
Kreatívny proces sa neodohráva vo vákuu. Počas typického brainstormingu o farbách, fontoch a rozložení textu musia dizajnéri premýšľať aj o technických a štrukturálnych otázkach (použitie CSS, JavaScriptu, DHTML…), pričom treba vychádzať aj z technických možností používateľov. Dobrý dizajn by sa nemal stať otrokom technológií, použité technológie by mali podporovať splnenie cieľov sídla. Juraj Plávka vo svojej diplomovej práci Teoretické a praktické problémy redizajnu webového sídla (2006, s. 35) uvádza dva prístupy k tvorbe dizajnu. Tradičný s použitím ceruzky a papiera a moderný s použitím počítača. V tejto časti sa začína experimentovať s farbami a rozložením sídla. Dizajnéri tvoria dovtedy, kým nevzniknú dva až tri dobré návrhy.
Obr. č. 4 Ručné a počítačové počiatočné návrhy dizajnu (Plávka, 2006, s. 36) Vytvorenie grafických šablón Grafické šablóny sú prípravou na optimalizáciu a tvorbu HTML kódu. Šablóna predstavuje grafický vrstvený súbor, ktorý je pripravený pre produkciu. Šablónu môžeme pripraviť napríklad v softvéri Adobe Photoshop. Všeobecné pravidlo pre tvorbu šablón je, že by sme mali vytvoriť šablóny pre tieto typy stránok:
Pre menšie projekty väčšinou stačí pár šablón. Ak navrhujeme väčšie sídlo, môžeme potrebovať desať aj viac šablón. Po návrhu šablón by mal byť vytvorený Dizajn manuál, kde sú opísané prvky, ktoré sa opakujú pri tvorbe a správe sídla, ako napríklad použitá paleta farieb, písmo, štýl, navigácie a záhlavia, bočné textové lišty, tlačidlá a pod. Dizajn manuál nám zabezpečí konzistentnosť grafických prvkov a celého webového sídla pri ďalšej tvorbe a aktualizácii. Využíva sa aj pri správe, zmenách a aktualizácii webového sídla. Záver Grafický dizajn patrí k dôležitým pilierom informačnej architektúry webového sídla. Od dobrého dizajnu spĺňajúceho štandardy W3C a odporúčania informačných architektov záleží aj nájditeľnosť webového sídla. Grafický dizajn sa vyvíja spolu s informačnými technológiami. Dôležité je, že použitie kaskádových štýlov umožňuje oddelenie obsahu od formy. Ešte stále veľa dizajnérov robí veľa chýb, ktoré majú za následok nižšiu použiteľnosť webového sídla. O najčastejších chybách pri dizajne webových sídiel a kritériách hodnotenia budeme hovoriť v budúcom čísle. Literatúra: Graphic design. 2007. In Wikipedia, the free encyclopedia. Dostupné na internete: http://en.wikipedia.org/wiki/Graphic_design MAKULOVÁ, S. 2002. Vyhľadávanie informácií v internete : problémy, východiská, postupy. Bratislava : EL&T, 2002. 376 s. ISBN 80-88812-16-X MAKULOVÁ, S. 2005 a. Hodnotenie webových stránok. Ikaros [online]. 2005, roč. 9, č. 11 [cit. 2007-05-17]. Dostupný na internete: <http://www.ikaros.cz/node/2036> MAKULOVÁ, S. 2005 b. Informačná architektúra. Ikaros [online]. 2005, roč. 9, č. 9 [cit. 2007-05-17]. Dostupný na internete: <http://www.ikaros.cz/node/2007> MAKULOVÁ, S. 2006 a. Systém navigácie na WWW stránkach. In: ITlib. Informačné technológie a knižnice [online], 2006 , č. 2 [cit. 2007-05-16]. Dostupné na internete: <http://www.cvtisr.sk/itlib/itlib062/makulova2.htm> MAKULOVÁ, S. 2006 b. K niektorým problémom vyhľadávania na webových sídlach. In: ITlib. Informačné technológie a knižnice [online], 2006, č. 4, [cit. 2007-05-16]. Dostupné na internete: <http://www.cvtisr.sk/itlib/itlib064/makulova.htm> MAKULOVÁ, S. 2007 a. Návrh vyhľadávania na webových sídlach rešpektujúci odporúčania informačných architektov. In: ITlib. Informačné technológie a knižnice [online], 2007, č. 1 [cit. 2007-05-17]. Dostupné na internete: <http://www.cvtisr.sk/itlib/itlib071/makulova.htm>. ISSN 1336-0779 MAKULOVÁ, S. 2007 b. Použiteľnosť webových sídiel ako základný predpoklad ich úspešnosti. In Newsletter. 3. marec 2007 [online], [cit. 2007-05-19]. Dostupné na internete: <http://www.elet.sk/?pouzitelnost-pristupnost&sprava=pouzitelnost-webovych-sidiel-ako-zakladny-predpoklad-ich-uspesnosti> MAKULOVÁ, S., BISTA, R. 1998. Návrh obsahu pre webovské stránky tretieho tisícročia. In: Internet v riadení a obchode firmy. Bratislava : EL&T, 1998, s. 59-68. McGOVERN, G. 2002. The Web Content style Guide. London : Pearson Education Limited, 2002. 246 s. ISBN 0 273 65605 8 McGovern, G. 2001. Information Architecture Versus Graphic Design [online]. In Click Z Today. 12 -27-2001 [cit. 2007-05-16]. Dostupné na internete: <http://www.clickz.com/design/site_design/article.php/945631> NIELSEN, J. 2002. Web.Design. Praha : SoftPress, s. r. o., 2002, 382 s. PLÁVKA, J. 2006. Teoretické a praktické problémy redizajnu webového sídla. [Diplomová práca.] Bratislava : Filozofická fakulta Univerzity Komenského, 2005. 94 s. Webmaster Guidelines 2007 [cit. 2007-05-163]. Dostupné na internete: <http://www.google.com/support/webmasters/bin/answer.py?answer=35769>
Príspevok bol spracovaný v rámci vedeckého grantového projektu VEGA 1/2481/05 Využívanie informácií pri informačnom správaní vo vzdelávaní a vede. |
