Najčastejšie chyby pri dizajne webových sídiel a kritériá jeho hodnotenia

 

Ú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.

 

prof. PhDr. Soňa Makulová, PhD. (makulova@elet.sk)
KKIV FiF UK v Bratislave

 

 

 


In ITlib. Informačné technológie a knižnice [online], 2007, č. 04 [cit. 2007-12-21].
Dostupné na internete <http://www.cvtisr.sk/itlib/itlib074/makulova.htm>. ISSN 1336-0779.

ITlib. Informačné technológie a knižnice