|
Úvod
V minulom článku K niektorým problémom grafického dizajnu
webových sídiel sme sa podrobnejšie venovali grafickému dizajnu webových sídiel
(Makulová 2007 b). Zdôraznili sme nutnosť informačného dizajnu pred grafickým
dizajnom, ktorý sme demonštrovali na praktických príkladoch. Počas vyše
desaťročnej existencie webových sídiel môžeme hovoriť o určitých zásadách
dizajnu, ktoré by sme mali dodržiavať. Grafický dizajn webového sídla je veľmi
dôležitý, pretože podľa výsledkov prieskumov veľa používateľov pri hodnotení
sídla ešte stále kladie veľký dôraz na vizuálnu stránku.
V dnešnom článku si povieme niečo o najčastejších
chybách pri dizajne webových sídiel a kritériách hodnotenia webových sídiel
podľa grafického dizajnu.
Grafický dizajn zohľadňujúci použiteľnosť webových
sídiel
Vytvorenie stránky webového sídla by malo byť výsledkom
spolupráce odborníkov viacerých vedných disciplín. Trendy súčasného dizajnu sú
predovšetkým funkčnosť a použiteľnosť. Pri analýze najčastejších chýb pri
dizajne webových sídiel budeme vychádzať predovšetkým z prác odborníka na
použiteľnosť Jakoba Nielsena, ktorý sa analýze najčastejších chýb venuje
v svojom elektronickom spravodaji USEIT.COM od roku 1995. Hneď úvodom by sme
chceli zdôrazniť, že tak ako sa menil vývoj grafických sídiel s vývojom
informačných technológií, tak sa aj postupne objavovali nové chyby pri dizajne
webových sídiel. Jakob Nielsen zdôrazňuje v svojich článkoch predovšetkých
použiteľnosť (usability) webových sídiel. Použiteľnosť môžeme charakterizovať
ako 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. Použiteľnosť definujeme prostredníctvom
piatich kvalitatívnych zložiek:
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?
Výkonnosť
Ak sa používatelia oboznámili s dizajnom, ako rýchlo dokážu
vykonať dané úlohy?
Zapamätovateľnosť
Ak sa používateľ vráti po čase na stránku, pamätá si
usporiadanie a ovládanie webu?
Chybovosť
Koľko a aké chyby robia používatelia? Dokážu sa s nimi rýchlo
vysporiadať?
Spokojnosť
Ako príjemné je využívanie dizajnu webu?
Najčastejšie chyby grafického dizajnu webových sídiel
Najčastejšie chyby pri dizajne stránky znižujúce
použiteľnosť
Používatelia internetu si postupne vytvárajú vzťah k webovým
sídlam, na ktorých radi nakupujú, získavajú informácie, prípadne sa prídu zabaviť
a pod. Preto je samozrejmé, že tvorcov webových sídiel zaujíma, čo od nich
očakávajú a čo ich najviac hnevá.
Podľa prieskumov spoločnosti Hostway až 70 % respondentov
odpovedalo, že by už viac nekupovalo od webového sídla, ktoré ich nahnevalo, dokonca
by sa už viac naň ani nevrátili. Najviac návštevníkov webových sídiel sa sťažuje
na (Aull, 2005):
- automaticky otvárajúce sa okná reklamy (93 %),
- požiadavku na inštalovanie nového softvéru na zobrazenie obsahu
stránky (89 %),
- mŕtve spojenia (86 %),
- zlú navigáciu (84 %),
- ak sa na získanie obsahu vyžaduje registrácia (83 %),
- pomaly sa naťahujúce stránky (83 %),
- neefektívny systém vyhľadávania na stránke (80 %).
Tvorcovia stránok majú už dnes k dispozícii celý rad
nástrojov, pomocou ktorých môžu zabrániť, aby sa uvedené chyby na ich stránke
vyskytli. Na zistenie mŕtvych spojení sú k dispozícii validátory spojení,
prostredníctvom ktorých by sme mali aspoň raz mesačne skontrolovať spojenia v rámci
webového sídla, ako aj externé spojenia. W3C ponúka na svojom sídle W3C Link Checker
(http://validator.w3.org/checklink), kde
jednoducho zadáme URL adresu a otestujeme sídlo.
Veľmi dôležitá je aj rýchlosť načítavania stránky. Podľa
výsledkov výskumov, používatelia pri presune zo stránky na stránku očakávajú, že
rýchlosť odozvy bude rýchlejšia ako jedna sekunda. Samozrejme, že pri webových
sídlach pri pomalšom pripojení je ťažké dodržať uvedenú požiadavku, ale výskumy
ukazujú, že hranica únosnosti je 10 sekúnd. Jakob Nielsen uvádza v svojej publikácii
Web.Design zaujímavé závery práce Roberta B. Millera (2002, s. 53).
- Desatina sekundy (0,1) je limit, v ktorom používateľ získa pocit,
že systém okamžite reaguje na jeho príkazy.
- Jedna sekunda je limit (1,0), kedy ešte používateľ nemá pocit,
že reakcia je pomalá a preto ešte nie je potrebná žiadna spätná väzba od systému.
- Desať sekúnd je maximálny limit (10,0), keď je ešte
používateľova pozornosť upriamená na stránku.
Samozrejme, že rýchlosť odozvy závisí od veľa faktorov, z
ktorých mnohé nemôžeme ovplyvniť. Je to predovšetkým spôsob pripojenia
používateľa k internetu, preťaženie internetu a pod. Existuje však veľa spôsobov,
ako môžu tvorcovia webových sídiel ovplyvniť rýchlosť načítavania stránky.
Niektoré z nich si uvedieme.
Na celkový vzhľad stránky by sa mali používať kaskádové
štýly a nie tabuľky
Ešte veľa stránok využíva na grafický layout stránky
tabuľky. Zbytočne vyžadujú na načítanie dlhší čas a aj dlhší zdrojový kód. Ak
uložíme grafický layout stránky v externom súbore, tento sa načíta iba raz a
uloží sa na počítači používateľa. Tabuľkový layout, ktorý je uložený v HTML
súbore, sa načítava zakaždým pri naťahovaní stránky.
Na zobrazenie textu by sa nemala používať grafika
V našich článkoch sme viackrát zdôrazňovali potrebu
informačného dizajnu pred grafickým. Ak použijeme miesto grafických tlačidiel text,
tento veľmi ľahko zindexuje robot vyhľadávacieho nástroja a stránka má lepšiu
nájditeľnosť. Podobne môžeme pri návrhu využiť kaskádové štýly.
Mali by sme minimalizovať biely priestor v zdrojovom kóde
Ak si pozrieme zdrojový kód mnohých stránok, zistíme, že je
tam veľa prázdneho miesta. Pritom každé jedno prázdne miesto zaberá 1 byte.
Odstránením bielych miest a zbytočných poznámok môžeme ušetriť až 10 % veľkosti
súboru.
Mali by sme používať relatívne adresy namiesto absolútnych
Absolútne adresy vyžadujú viac miesta, a preto namiesto <a
href="http://www.URL.sk/subor.htm"> použijeme <a
href="/subor.htm">.
JavaScripty a kaskádové štýly by mali byť uložené v
externých súboroch
Pre kaskádový štýl v externom súbore používame príkaz
<link type="text/css" rel="stylesheet"
href="menosuboru.css" />
Na JavaScript v externom dokumente používame príkaz:
<script language="JavaScript"
src="menosuboru.js" type="text/javascript"></script>
Každý externý súbor sa načíta iba raz a uloží sa na
počítač používateľa. Podobne môžeme použiť viac externých súborov. Aj v
prípade kaskádových štýlov môžeme mať jeden hlavný a ostatné špecifické pre
špeciálne časti webového sídla.
Na konci adresárových spojení by sme mali používať lomku
(/)
Nemali by sme robiť toto: <a
href="http://www.URL.com/menoadresara">,
ale toto: <a
href="http://www.URL.com/menoadresara/">
V prípade, že sa na konci adresára nenachádza lomka, server
nevie, či spojenie ukazuje na súbor alebo adresár. Ak dáme lomku, server vie, že URL
adresa ukazuje na adresár a nemusí strácať čas nad zisťovaním, či je spojenie na
adresár alebo súbor.
Jakob Nielsen, ktorý je právom považovaný za experta v
použiteľnosti webových sídiel, v svojom elektronickom spravodaji pravidelne
uverejňuje zoznam chýb, ktorých sa dopúšťajú grafickí dizajnéri. Tieto chyby sú
ovplyvnené používanými informačnými technológiami, ako aj vývojom štandardov vo
W3C. Podľa Nielsena sa v roku 2005 najčastejšie na webových sídla vyskytovali
nasledujúce chyby (2005):
1. Problémy s čitateľnosťou, ktoré
spôsobuje používanie malých fontov alebo fontov s absolútnou veľkosťou, ktorých
veľkosť sa nedá meniť nastavením prehliadača. Problémom je aj tiež malý kontrast
medzi fontom a pozadím.
2. Používanie neštandardných odkazov.
Odkazy by mali byť vždy farebne odlíšené od textu a podčiarknuté. K vážnym
problémom patrí nerozlišovanie navštívených a nenavštívených odkazov.
Používatelia by mali vedieť, čo nájdu na druhom konci odkazu. Odporúča sa
používať alternatívne popisy odkazov, ktoré navyše zlepšia pozíciu vo
vyhľadávačoch. Neodporúča sa používať JavaScript alebo iné okrasné techniky.
Odkazy by sa mali otvárať v novom okne iba v prípade, ak ide o PDF dokumenty.
3. Používanie flashu. Sídla, ktoré
využívajú flash, nespĺňajú zásady prístupnosti. V prípade pomalšieho pripojenia
trvá dlho, kým sa načítajú. Používatelia internetu už nechcú stránky s bohatou
grafikou a animáciami, ale užitočné informácie. Veľmi nešťastným riešením je
používanie navigácie vo flashi.
4. Obsah, ktorý nespĺňa zásady písania pre
web. Ak píšeme pre web, mali by sme tvoriť krátky a výstižný obsah, ktorý sa
dá jednoducho prečítať zoskenovaním. Pri čítaní by mal používateľ nájsť
odpovede na otázky, ktoré ho zaujímajú. Aby získal vysoké umiestnenie vo
vyhľadávačoch a bol nájditeľný, treba používať jazyk používateľa.
5. Zlé vyhľadávanie. O tom, že
vyhľadávanie patrí k dôležitým pilierom informačnej architektúry, sme hovorili v
článku K niektorým problémom vyhľadávania na webových sídlach. Pri návrhu
vyhľadávania zohľadňujeme mentálny model používateľov a rešpektujeme
odporúčania informačných architektov (Makulová 2007 a).
6. Nekompatibilita prehliadačov. V
poslednom čase sa na trhu začínajú čoraz väčšmi presadzovať prehliadače, ako je
Mozilla, Firefox a Opera. Počet používateľov Internet Exploreru sa logicky znižuje, a
preto sa dostáva do popredia otázka kompatibility prehliadačov. Webovú stránku je
potrebné testovať na viacerých typoch prehliadačov.
7. Ťažkopádne
formuláre. Veľa používateľov sa sťažuje na zbytočne rozsiahle formuláre s
množstvom nerelevantných otázok. Jakob Nielsen odporúča pri tvorbe formulárov
dodržiavať nasledujúce pravidlá:
- Vyhodiť všetky nepodstatné otázky.
- Ak to nie je nutné, nevytvárať zbytočne povinné polia.
- Podporovať automatické vyplnenie formulárov.
- Používať flexibilné polia pre špecifické polia (čísla
kreditných kariet, telefónne čísla a pod.).
- Nezabúdať, že formulár môžu vypĺňať aj používatelia z
iných krajín, kde sú iné smerovacie čísla, jednotky miery, štandardy a pod.
Absencia kontaktných informácií alebo iných informácií o
spoločnosti. Je dokázané, že spoľahlivé kontaktné informácie sú znakom
kredibility webového sídla. Používateľ vie, kto za stránkou stojí. Najžiadanejšie
kontaktné informácie sú telefónne čísla a emailové adresy. Na stránke kontaktov je
potrebné mať aj fyzickú adresu. Odporúča sa aj dať informácie o členoch
spoločnosti vrátane stručného životopisu a fotografie.
Fixný layout s pevnou šírkou stránky. Tento problém sa
vzťahuje na používateľov s veľkými alebo malými monitormi. K ďalším problémom
patrí tlač stránky, ktorá sa oreže. Je to hlavne v prípade Európy, kde je užší
format A4 ako v USA.
Neadekvátne zväčšenie obrázka. Ak si chce používateľ
zväčšiť obrázok, treba mu dať možnosť pozrieť si obrázok najlepšie na celej
obrazovke. V prípade veľkého zväčšenia je nútený rolovať obrázok. Treba
byť opatrný aj na veľkosť obrázku, aby sa zbytočne dlho nenaťahoval.
Hodnotenie grafického dizajnu webových sídiel
Pri hodnotení grafického dizajnu webového sídla by sme si mali
zamyslieť nad odpoveďou na nasledujúci okruh zásad, ktoré by sme pri grafickom
dizajne mali dodržiavať:
- Grafický dizajn stránky by mal mať jednoduchú a konzistentnú
navigáciu.
- Dizajn by mal byť konzistentný a rešpektovať korporatívnu
identitu organizácie.
- Stránka by sa mala načítať do prehliadača max. do 10 sekúnd.
- Pri čítaní by sme nemali používať horizontálne rolovanie.
- Text by mal byť čierny na bielom podklade. V prípade farebného
textu by mal byť dostatočne silný kontrast medzi farbou a pozadím.
- Na stránke by sa nemali používať neštandardné kombinácie
farieb.
- Webové sídlo by nemalo využívať technológiu rámcov ani
flashové animácie.
- Stránky by sa nemali otvárať v nových oknách prehliadača s
výnimkou formátu pdf, kedy by mal byť používateľ na to vopred upozornený.
- Stránky by mali byť bezchybné v najpoužívanejších verziách a
typoch prehliadačoch (Internet Explorer, Mozilla, Opera).
- Na stránke by sa nemala používať kurzíva a blikajúci text.
- Podčiarkovanie textu by malo byť vždy iba pre hypertextové
spojenie.
- Na webovom sídle by sa mal používať vždy štandardný font.
- Používateľ by mal mať možnosť si zväčšiť alebo zmenšiť
font.
- Na grafický dizajn stránky by sa mali používať kaskádové
štýly, ktoré by mali byť uložené v externom súbore.
- Na stránke by sa mali odlišovať navštívené a nenavštívené
spojenia.
- Vystavované obrázky a fotografie by mali byť v náhľadovej
veľkosti s možnosťou zväčšenia.
- Kvalita grafických obrázkov by mala byť na profesionálnej
úrovni.
- Obrázky by mali byť opísané výstižným sprievodným textom a
pre znevýhodnených používateľov alternatívnym textom.
- Obrázky by mali byť vo formáte JPEG alebo GIF.
- Na stránkach by sa nemali nachádzať reklamné prúžky a ďalšie
reklamné grafické objekty.
- Stránka by mala prejsť validátorom HTML kódu, CSS validátorom,
validátorom funkčnosti spojení
a testom na prístupnosť.
Záver
Grafický dizajn webového sídla patrí k dôležitým pilierom
informačnej architektúry. Pri jeho návrhu je potrebná úzka spolupráca odborníkov z
viacerých disciplín, predovšetkým grafika, informačného architekta a programátora.
Vychádzame vždy z cieľov webového sídla a požiadaviek jednotlivých skupín
používateľov. Striktne dodržiavame štandardy W3C a odporúčania informačných
architektov. Nesmieme zabúdať, že používatelia webového sídla chcú nájsť
informácie, a preto ich nezaťažujeme rozsiahlou grafikou. Jednoznačne preferujeme
informačný dizajn pred dizajnom grafickým.
Gerry McGovern (2001) uvádza v svojom článku výsledky
rozsiahleho prieskumu názoru verejnosti na internet publikovaného Markle Foundation v
roku 2001. Výsledky prieskumu ukazujú, že verejnosť nevníma internet ako nákupné
stredisko alebo banku, ale ako knižnicu, dôležitý zdroj informácií. Funkčné
webové sídlo potrebuje ľudí so schopnosťami organizovať informácie (informačných
architektov) a odborníkov, ktorí vedia písať pre web. Dizajn webu je o rozsiahlom
obsahu, jeho dokonalej organizácii (metadáta, klasifikácia, navigácia a
vyhľadávanie) a jednoduchom, čistom a čitateľnom layoute stránky. Ak sa budeme
držať uvedených zásad, vytvoríme funkčné a úspešné webové sídlo s vysokou
nájditeľnosťou.
Literatúra
AUL, D. 2005. The seven deadly sins of web design. In Webcredible.
September 2005 [online], [cit. 2007-10-05]. Dostupné na internete <http://www.webcredible.co.uk/user-friendly-resources/web-usability/web-design-sins.shtml>
Graphic design. 2007. In Wikipedia, the free encyclopedia
[online], [cit. 2007-10-05]. Dostupné na internete <http://en.wikipedia.org/wiki/Graphic_design>
MAKULOVÁ, S. 2005 a. Hodnotenie webových stránok.
Ikaros [online]. 2005, roč. 9, č. 11 [cit. 2007-10-05]. 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. 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. K niektorým problémom grafického
dizajnu webových sídiel. In ITlib. Informačné technológie a knižnice
[online], 2007, č. 3 [cit. 2007-10-05].
Dostupné na internete: <http://www.cvtisr.sk/itlib/itlib073/makulova.htm>
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 Gerry. 2001. Information Architecture Versus Graphic
Design [online]. In Click Z Today. 12 -27-2001. [cit. 2007-10-05].
Dostupné na internete: <http://www.clickz.com/design/site_design/article.php/945631>.
NIELSEN, J. 2005. Top Ten Web Design Mistakes of 2005
[online]. October 3rd, 2005. [cit. 2007-10-05]. Dostupné na internete: <http://www.useit.com/alertbox/designmistakes.html>.
NIELSEN, J. 2002. WebDesign. Praha : SoftPress s.r.o.,
2002, 382 s.
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.
|