SlideShare a Scribd company logo
1 of 59
UNIVERZITA SV. CYRILA A METODA V TRNAVE
FAKULTA MASMEDIÁLNEJ KOMUNIKÁCIE
NÁVRH A TVORBA WEB STRÁNKY
Bakalárska práca
2014 Ivan Štefunko
UNIVERZITA SV. CYRILA A METODA V TRNAVE
FAKULTA MASMEDIÁLNEJ KOMUNIKÁCIE
NÁVRH A TVORBA WEB STRÁNKY
Bakalárska práca
Študijný program: masmediálna komunikácia
Študijný odbor: 3.2.3 masmediálne štúdiá Bc. KOMU: 7218700
Školiace pracovisko: katedra masmediálnej komunikácie
Školiteľ: PhDr. Peter Murár, PhD.
2014 Ivan Štefunko
SEM VLOŽTE ZADANIE S ORIGINÁLNYMI PODPISMI[14 b.]
ZODPOVEDNÝCH
Čestné vyhlásenie
Vyhlasujem, že som predkladanú bakalársku prácu „Návrh a tvorba web stránky“
spracoval samostatne a pod odborným vedením školiteľa bakalárskej práce. Použitú
literatúru uvádzam v zozname použitej literatúry a zároveň osvedčujem použité citáty.
Potvrdzujem tiež, že elektronická forma predkladanej bakalárskej práce je 100% identická
s tlačenou formou.
V Trnave dňa ...................................
..............................................................
vlastnoručný podpis
ABSTRAKT
ŠTEFUNKO, Ivan: Návrh a tvorba web stránky. [Bakalárska práca] / Ivan Štefunko –
Univerzita sv. Cyrila a Metoda v Trnave. Fakulta masmediálnej komunikácie; Katedra
masmediálnej komunikácie. – Školiteľ: PhDr. Peter Murár, PhD. – Stupeň odbornej
kvalifikácie: Doktor. - Trnava : FMK UCM, 2014. počet s. 45
Bakalárska práca s názvom Dizajn a tvorba web stránky sa zaoberá problematikou
webových stránok so zameraním na použiteľnosť. Práca má teoreticko-empirický charakter
a je rozdelená do niekoľkých kapitol. V prvých kapitolách približuje problematiku web
stránok vo všeobecnosti. V ďalších častiach sa zameriava na dôležité aspekty tvorby web
stránok a v kapitole Metodika, práca objasňuje detaily použitých metód. Na základe
výsledkov testovania použiteľnosti práca navrhuje riešenia vo forme prototypu.
Kľúčové slová: Dizajn. Web. Internet. Web stránka. Tvorba webovej stránky. Webový
dizajn. Použiteľnosť. Prototyp.
ABSTRACT
ŠTEFUNKO, Ivan: Design and Development of website [Bachelor Thesis] / Ivan
Štefunko. – University of Ss. Cyril and Methodius in Trnava. Faculty of Mass Media
Communication; Department of Mass Media Communication – Supervisor: PhDr. Peter
Murár, PhD. Degree of professional qualification: Doctor. - Trnava: FMK UCM, 2014. 45
p.
Bachelor thesis, titled Design and Development of website, deals with issues about
websites with focus on its usability. Thesis has theoretical – empirical nature and it is
divided into several chapters. In the first chapters, thesis is approaching the issue of
websites in general. Following sections are focused on the important aspects of website
development and in Methodic section, thesis clearifies details of the used methods. Based
on the results of the usability testing, work proposes a solution in the form of a prototype.
Key words: Design. Web. Internet. Website. Development of website. Web design.
Usability. Prototype.
1
PREDHOVOR
Internet je v súčasnosti neodmysliteľným aspektom životného štýlu mnohých ľudí.
Výsledok ľudskej vynaliezavosti a tvorivosti mení naše zvyky, správanie, vzťahy i náhľad
na svet. Internet je teda pre ľudí veľmi dôležitým aspektom života. Webové stránky ako
základný kameň internetu, je však mnoho krát výsledok dlhého snaženia jednotlivcov
alebo tímov. V bakalárskej práci som sa pokúsil priblížiť pohľad „za oponu“ tvorby
webových stránok. Kľúčovým faktorom pri výbere témy bakalárskej práce bola aj osobná
iniciatíva v oblasti webového dizajnu. Pri spracovávaní témy som vychádzal zo
svetovej odbornej literatúry a dostupných zdrojov na internete. Keďže sa jedná o tému
relatívne novú oproti ostatným, dostupnosť kvalitných knižných zdrojov je porovnateľná
s kvalitnými odbornými zdrojmi dostupnými na internete.
V teoretickej časti práca podrobnejšie spracováva problematiku dizajnu a tvorby
web stránok a v metodickej časti podrobne opisuje zvolené metódy, ktoré mi umožnili
dosiahnuť kvalitné výsledky. Na základe výsledkov som navrhol prototyp, ktorý prezentuje
riešenia na nedostatky v dizajne stránky.
Touto cestou by som sa chcel poďakovať PhDr. Petrovi Murárovi, PhD., ktorý mi
poskytoval odborné a cenné rady pri písaní bakalárskej práce. Zároveň ďakujem svojej
rodine, ktorý mi bola oporou v najťažších chvíľach tvorby.
Bakalárska práca má 86 399 znakov.
2
Obsah
PREDHOVOR......................................................................................................................1
1 Úvod do problematiky .................................................................................................4
1.1 Význam web stránky...............................................................................................5
1.1.1 Ciele a potreby používateľov...........................................................................5
1.1.2 Modely užívateľov podľa informačnej potreby ...............................................6
1.2 Výskum užívateľov.................................................................................................7
1.2.1 Kontextové dotazovanie...................................................................................7
1.2.2 Analýza úloh....................................................................................................8
1.2.3 Užívateľské testovanie.....................................................................................8
1.2.4 Metóda tvorby tzv. Persony.............................................................................8
1.3 Ciele a potreby prevádzkovateľov stránky..............................................................9
1.3.1 Meranie cieľov...............................................................................................10
2 Návrh webovej stránky..............................................................................................11
2.1 Informačná architektúra ........................................................................................12
2.2 Navigácia...............................................................................................................15
2.2.1 Vstavané navigačné systémy .........................................................................16
2.2.2 Doplnkové navigačné systémy.......................................................................18
2.3 Grafické spracovanie navigačných systémov .......................................................18
2.4 Text........................................................................................................................19
2.5 Vizuálny dizajn web stránky.................................................................................20
3 User Experience..........................................................................................................21
3.1 User Centered Design............................................................................................22
4 Použiteľnosť...............................................................................................................22
4.1 Metódy hodnotenia použiteľnosti .........................................................................23
5 Metodika .....................................................................................................................27
5.1 Výskumný problém...............................................................................................27
5.2 Výskumný cieľ ......................................................................................................27
5.3 Charakteristika objektu skúmania .........................................................................27
5.4 Metóda výskumu...................................................................................................28
3
5.5 Vzorka pre testovanie............................................................................................28
5.6 Miesto a nástroje testovania ..................................................................................30
5.7 Postup testovania...................................................................................................30
6 Výsledky výskumu .....................................................................................................32
6.1 Výsledky heuristického hodnotenia ......................................................................32
6.1.1 Navigácia .......................................................................................................32
6.1.2 Vyhľadávanie a výsledky vyhľadávania........................................................33
6.1.3 Reklamné bannery..........................................................................................34
6.2 Výsledky užívateľského testovania.......................................................................34
6.3 Zhrnutie výsledkov................................................................................................37
7 Návrh riešenia ............................................................................................................38
ZÁVER........................................................................................................................42
ZOZNAM LITERATÚRY A ZDROJOV ...............................................................43
PRÍLOHY...................................................................................................................46
4
1 Úvod do problematiky
Masová komunikácia je fenoménom dnešnej doby. Sme obklopený masovo
komunikačnými prostriedkami , ktoré sa stali súčasťou našich životov. Z definície masovej
komunikácie vyplýva, že informácie sa z jedného miesta šíria k miliónom anonymným
recipientov. Internet však ponúka na poli masovej komunikácie väčšiu variabilitu.
Oxfordský slovník definuje internet ako “globálnu sieť počítačov poskytujúcu
rozmanité informácie a komunikačné nástroje, fungujúce na vzájomne prepojených sieťach
používajúcich štandardizované komunikačné protokoly.“1 Súčasťou internetu sú nástroje,
ktoré každodenne používame na prácu, zábavu alebo vzdelanie. Dve najdôležitejšie zložky
internetu sú webové stránky a emailová komunikácia. Oba nástroje môžu slúžiť aj ako
nástroj osobnej komunikácie, ale aj ako nástroj masovej komunikácie. Emailovú
komunikáciu môžeme využiť aj ako nástroj osobnej komunikácie, ale aj ako nástroj
masového komunikovania s veľkým množstvom recipientov. Rovnakou funkcionalitou
oplývajú aj webové stránky. Práve tie sa stali na poli masovej internetovej komunikácie
obľúbeným nástrojom. Webové stránky sú priestorom pre rôzne druhy komunikácie. Môže
ísť o komunikáciu jedného človeka k početnému publiku alebo môže ísť o komunikáciu
publika s jednotlivcom (komentáre pod článkom / videom / statusom 2 alebo služby
podobné Ask.fm). Diskusné fóra sú príkladom komunikácie veľkého množstva
jednotlivcov medzi sebou. Podobných príkladov by sme mohli na internete nájsť viacero.
Táto rôznorodosť komunikácie je jedným s dôvodov, prečo je v súčasnosti internet
populárny. Avšak formy komunikácie, ktoré poznáme z tradičných médií, príchodom
nových nezanikli. V internetovej sieti majú pevné miesto aj stránky, ktoré zastupujú
funkciu periodík v elektronickom svete. Tieto web stránky sú často sústredené okolo
klasických médií, ktoré vlastnia mediálne spoločnosti. Tieto spoločnosti pochopili
obrovskú silu a možnosti v komunikovaní prostredníctvom webovej platformy. „Internet je
priestorom, ktorý umožňuje tradičným médiám neustále sa vyvíjať a dostať sa
1 Definition of Internet in English. [online]. [2010-01-01]. Dostupné na:
<http://www.oxforddictionaries.com/definition/english/Internet >.
2 Status – v problematike sociálnych sietí ho môžeme označiť ako krátku správu jednotlivca vysielanú
prostredníctvomsociálnej siete svojim priateľom.
5
k užívateľovi aj iným spôsobom. Médiá sa prispôsobujú novým možnostiam internetu“3.
Prístup k používateľom internetu je však mierne odlišný od recipientov tradičných médii,
pretože internetové stránky poskytujú užívateľom široké spektrum možnosti spätnej väzby,
hodnotenia a výberu média alebo komunikátu.
1.1 Význam web stránky
Žiadna web stránka sa nenachádza vo webovom priestore len tak. I keď to
užívateľovi na prvý pohľad nemusí byť jasné, každá web stránka má svoj účel. Niektoré
stránky vo webovom priestore komunikujú informácie vo forme blogov, portálov,
aplikácii alebo video služieb. Iné užívateľovi predávajú ponúkaný produkt alebo sa ho
snažia presvedčiť k registrácii. Niektoré webové stránky sú len súčasťou marketingovej
alebo mediálnej komunikácie. Webová rôznorodosť stránok, nachádzajúca sa v digitálnom
priestore, je obrovská. Rovnaká je aj rôznorodosť používateľov navštevujúcich tieto
stránky. Dôležitým ukazovateľom sú pre tvorcov potreby cieľového publika.
V nasledujúcej kapitole sa zameriame na identifikáciu správania a potrieb používateľov.
1.1.1 Ciele a potreby používateľov
Prvým krokom uspokojenia potrieb používateľov web stránky je ich správna
identifikácia. Pri navrhovaní a tvorbe stránky je jednoduché nadobudnúť dojem, že tvoríte
web pre tzv. idealizovaného používateľa. Ten zväčša býva podobný samotnému tvorcovi.
Idealizovaný užívateľ však neexistuje. Web stránku tvoríme pre reálnych ľudí, ktorí majú
odlišné potreby, zážitky, skúsenosti a schopnosti, predurčujúce ich k rôznemu chovaniu
pri prezeraní web stránky. Rozdelenie užívateľov podľa vybraných kritérií pomôže
tvorcom stránky sa zamerať na špecifické oblasti, ktoré očakávajú pri používaní.
Demografické údaje o používateľoch
Demografické údaje ponúkajú náhľad na používateľov webu z hľadiska údajov o pohlaví,
veku, rodinnom stave alebo príjme. Tieto údaje sa zväčša získavajú pomocou nástrojov pre
výskum trhu. Pri úprave reálnej stránky, vieme tieto dáta nadobudnúť aj nahliadnutím do
štatistík návštevnosti webovej stránky.
Psychografické profily užívateľov
3 LUHA, M.: Masová komunikácia na zjedenie.[online]. [2014-02-06]. Dostupné na:
<http://www.masmedialne.info/marian-luha-masova-komunikacia-na-zjedenie-koncentracia-kontorola-a-
globalizacia-medii/>.
6
„Psychografické profily opisujú postoje a vnímanie, ktoré majú užívatelia o svete
alebo o predmete vašej stránky.“4 Tieto profily často súvisia s demografickými údajmi,
keďže ľudia v rovnakých demografických kategóriách majú podobné názory a vnímanie.
Neplatí to však vždy a pri skúmaní týchto profilov môžete zistiť, že mnoho ľudí v rovnakej
demografickej kategórii má odlišné postoje.
Pri definovaní vzorky návštevníkov webu je dôležité analyzovať postoje
a skúsenosti s používaním webu. Je potrebné zisťovať, či je používanie internetu ich
každodennou činnosťou alebo sa s internetom stretávajú zriedka.
1.1.2 Modely užívateľov podľa informačnej potreby
Vyššie spomenuté aspekty vo veľkej miere ovplyvňujú správanie užívateľa na
webe. Jeho správanie nie je pri hľadaní informácie rovnaké. Závisí napríklad od toho, či
len prechádza stránky s cieľom niečo zistiť, alebo skúma či sa na webe nachádza konkrétna
informácia. Morville a Rosenfeld definujú niekoľko modelov informačnej potreby, ktoré
ovplyvňujú správanie sa užívateľa na stránke.
 Known-item seeking - jedná sa o najjednoduchší model, kde užívateľ vie, akú
informáciu hľadá; vie kde ju hľadať a hľadá ju dovtedy, dokiaľ ju nenájde.
 Exploratory seeking – v tomto modeli je užívateľ nevie s určitosťou stanoviť
informáciu, ktorú hľadá. Model „exploratory seeking“ zväčša nekončí nájdením
správnej odpovede. Užívateľ sa často uspokojí s „dostatočnou“ informáciou, ktorá
môže byť základ pre ďalšie hľadanie. Nemôžeme preto definitívne určiť kedy sa
fáza tohto typu vyhľadávania končí.
 Exhaustive research - užívateľ vyhľadáva všetky dostupné informácie k zvolenej
téme. V tomto modeli má užívateľ viacero možností ako vyjadriť svoju potrebu
a veľmi často využíva opakované vyhľadávanie. Ak užívateľ nenájde požadované
výsledky pri hľadaní istého kľúčového slova, kľúčové slovo mení a skúša rôzne
varianty kľúčových slov v rámci témy, ktorej sa hľadanie týka.
 Re-finding - tento model opisuje informačnú potrebu v situácií, keď užívateľ
natrafí na informáciu, ktorú hľadá ale nemá čas alebo možnosti ju spracovať v čase
4 GARRETT, J. J.: The Elements of User Experience: User-Centered Design for the Web and Beyond. 2.
vyd. Berkeley: New Riders, 2011, s.44
7
nálezu. Odkaz na informáciu si ukladá a vracia sa k nej v čase, keď mám možnosť
túto informáciu spracovať. 5
Spomenuté modely informačnej potreby nie sú jediné, ale väčšinu užívateľov je
možné do jedného z týchto modelov zaradiť
1.2 Výskum užívateľov
„Pre porozumenie toho, čo naši užívatelia potrebujú, musíme najprv zistiť, kto
vlastne sú. Oblasť výskumu používateľov je určená pre zber dát potrebných k rozvinutiu
poznania6“. K spoznaniu návštevníkov webu nám môžu pomôcť niektoré nástroje, ktoré
slúžia predovšetkým na výskum trhu. Tieto nástroje slúžia k nadobudnutiu presných
informácii o užívateľoch. Výsledky týchto metód závisia od dôkladnej prípravy a správnej
formulácie otázok, ktoré užívateľom položíme.
Nástroje ako interview alebo focus groups sú vhodné pre zber informácii ohľadom
postojov a názorov. Testovanie používateľov alebo terénny výskum naopak slúžia na
zhromaždenie špecifických aspektov používateľského správania. Vo všeobecnosti platí, že
čím viac času venujeme užívateľom pri výskume, tým detailnejšie informácie dostaneme.6
Nástroje na výskum trhu môžeme rozdeliť do dvoch globálnych kategórii:
Primárne poskytujú nesprostredkované údaje priamo od ľudí. Podľa stanovených otázok
môžeme určovať, aký typ informácii sa nám vráti. Do primárnych metód výskumu trhu
môžeme zaradiť dotazníky, rozhovory alebo metódy priameho pozorovania. Medzi
nevýhody patrí ich finančná a časová náročnosť. Pri sekundárnych ide prevažne
o sprostredkované informácie, z ktorých si môžeme vyberať. V tejto kategórii metód teda
nemáme kontrolu nad informáciami, ktoré dostaneme. Avšak finančne sú tieto metódy
výhodné 7.
V nasledujúcej časti bližšie popíšeme niektoré z metód výskumu trhu
1.2.1 Kontextové dotazovanie
5 MORVILLE, P. – ROSENFELD, L.: Information Architecture for the World Wide Web. Sebastopol:
O’Reilly Media, 2006, s. 34
6 GARRETT, J. J.: The Elements of User Experience: User-Centered Design for the Web and Beyond. 2.
vyd. Berkeley: New Riders, 2011, s.46
7 Market research methods. [online]. [2014-05-16]. Dostupné na: <http://www.business.qld.gov.au/business/
starting/market-customer-research/market-research-basics/market-research-methods >.
8
Kontextové dotazovanie ponúka výskumníkovi informácie o súvislostiach
používania. V tejto metóde sú užívateľom najprv položené otázky a následne sú
pozorovaní pri práci. Pri práci im moderátor kladie otázky. Metóda kontextového
dotazovania prináša reálnejšie dáta ako dáta z laboratórií. Túto metódu je odporúčané
používať na začiatku procesu navrhovania, keďže ponúka bohaté informácie
o užívateľskom sociálnom, technickom a psychickom prostredí a o užívateľských
nástrojoch a technikách. 8 Výsledky pomáhajú výskumníkovi definovať užívateľské
potreby a postoje. Nevýhoda tejto metódy je v jej časovej a finančnej náročnosti.
1.2.2 Analýza úloh
Analýza úloh je menej časovo a finančne náročná metóda. Neponúka však tak
podrobné výsledky ako kontextové dotazovanie. Princípom tejto metódy je analýza úloh
,ktoré musí urobiť užívateľ aby splnil stanovený cieľ. Môže ísť o kroky všeobecné, napr.
kúpa fotoaparátu, alebo sú to kroky veľmi špecifické - vyhľadanie detailných špecifikácii
konkrétnej služby a i.. Analýza úloh môže prebiehať pomocou priameho sledovania
účastníka pri vykonávaní úloh alebo prostredníctvom interview, kde opýtaný opisuje svoje
skúsenosti s úlohou. 9
1.2.3 Užívateľské testovanie
Treťou dôležitou metódou výskumu užívateľov je užívateľské testovanie. Metóda
je založená na pozorovaní účastníka pri interakcii so skúmaným objektom. Táto metóda je
však bližšie analyzovaná v kapitole 7.1.1. Metódy hodnotenia použiteľnosti.
1.2.4 Metóda tvorby tzv. Persony
Vyhodnocovanie dát, poskytnutých vyššie uvedenými metódami, môže byť
komplikované. Pre lepší prehľad ľudí, ktorí navštevujú konkrétne stránky, je vhodné
vytvoriť si s nazbieraných dát tzv. persony. „Persona je vymyslená osobnosť vytvorená na
to, aby reprezentovala potreby všetkých reálnych užívateľov.“ 10 Tieto osobnosti sú
vytvárané na základe dát z výskumu užívateľov a analýzy webového sídla (ak analyzujeme
už reálnu web stránku). Web usability.gov definuje efektívnosť persón niekoľkými
charakteristikami:
8 Contextual Inquiry. [online]. [2010-01-01]. Dostupné na: <http://www.usabilitybok.org/contextual-
inquiry>.
9 GARRETT, J. J.: The Elements of User Experience: User-Centered Design for the Web and Beyond. 2.
vyd. Berkeley: New Riders, 2011, s.47
10 GARRETT, J. J.: The Elements of User Experience: User-Centered Design for the Web and Beyond. 2.
vyd. Berkeley: New Riders, 2011, s.49
9
- reprezentuje väčšinovú skupinu používateľov pre vybranú web stránku
- vyjadruje potreby a očakávania cieľovej skupiny
- jasne definuje očakávania a predstavy ako by chceli užívatelia používať web stránku
- popisuje skutočných ľudí, ich pozadie, ciele a hodnoty. 11
Vytvorené persony majú obsahovať:
- vymyslené meno,
- titul,
- vek,
- vzdelanie,
- rodinný stav
- fyzické, sociálne a technologické prostredie
- fotografiu.
Takto spracovaná persona pomáha tvorcom jednoduchšie navrhovať web, aby
spĺňal požiadavky stanovenej cieľovej skupiny.
1.3 Ciele a potreby prevádzkovateľovstránky
V internetovom dialógu zväčša stoja na opačných stranách dva postoje.
Používatelia, ktorí by sa radi na internetovej stránke niečo dozvedeli a uspokojili svoje
potreby. Na strane druhej sú však tvorcovia, ktorí stránku prevádzkujú a internetovou
stránkou sledujú stanovený cieľ. Ciele prevádzkovateľov sú často odlišné od cieľov
používateľov. Existuje mnoho cieľov a plánov, ktoré môžu webové stránky sledovať.
Môžu to byť biznis plány na zvýšenie ziskov, podpora značky alebo poskytovanie istého
druhu služieb a informácii. Pri stanovení cieľov je potrebné dbať na to, aby spĺňali kritériá
definované Meyerom ako tzv. SMART kritériá. Ciele stránky majú byť v uvedenom
zmysle:
- konkrétne (Specific)
- merateľné (Measurable) –
- reálne – dosiahnuteľné (Achievable)
- relevantné (Relevant)
- časovo ohraničené (Time-bound) 12
11 Personas.[online]. [2014-06-03]. Dostupné na: <http://www.usability.gov/how-to-and-
tools/methods/personas.html>.
10
Takýto druh cieľov môže vyzerať nasledovne:
- Zvýšiť návštevnosť o 50% za 6 mesiacov
- Zvýšiť online predaj produktu X o 20% za obdobie mesiaca
- Zvýšiť online povedomie o produkte X a tým zvýšiť predaj produktu o 30%
v obchodoch
- Zvýšiť počet predplatiteľov o 200 za obdobie pol roka
1.3.1 Meranie cieľov
Stanovenie cieľov, ktoré chcú prevádzkovatelia dosiahnuť, je základom úspechu.
Pri plnení týchto cieľov je nevyhnutné ich v správny čas vyhodnotiť. Pre vyhodnocovanie
a analýzu cieľov sú nemenej dôležité aj údaje získané z účtovníctva, napr. náklady, výška
tržieb atď. Dôležité sú aj údaje poskytnuté analýzou webovej štatistiky, napr. počet
unikátnych návštevníkov, najvyhľadávanejšie kľúčové slová, zdroje návštevníkov atď. Z
ekonomického hľadiska je cieľom analýzy webu porozumieť správaniu potenciálnych a
reálnych zákazníkov a využiť túto vedomosť na optimalizáciu webu s cieľom zvýšiť
príjmy plynúce z webu. 13 Existuje mnoho spôsobov čo a ako merať na web stránke.
Webové štatistiky nám ponúkajú veľké množstvo informácii, ktoré je možné sledovať
a merať. Medzi dôležité ukazovatele pri analýze webu patrí:1415
 Počet zobrazení – vyjadruje počet vyžiadaní obsahu na stránke. Nemusí ísť pritom
o obsah, ktorý užívateľ reálne vidí. Ide len o komunikáciu medzi prehliadačom
užívateľa a serverom.
 Počet návštevníkov – počet ľudí, ktorí navštívili web v sledovanom období. Ide
o počet IP adries, ktoré sa na web pripojilo. Tento údaj sa niekedy udáva aj ako
počet unikátnych návštevníkov.
 Strávený čas – ide o vyjadrenie času, ktorý užívateľ aktívne strávil na stránke.
Ukazovateľom je priemerný čas strávený na webe jedným užívateľom.
 Konverzný pomer - je pomer medzi návštevníkmi, ktorí vykonali požadovanú
činnosť a všetkými návštevníkmi, ktorí mohli túto činnosť vykonať. Konverzný
12 MEYER, P.: Attitude Is Everything: If You Want to Succeed Above and Beyond. Scotts Valley: Meyer
Resource Group, 2003, s. 15
13 Google Analytics. [online]. [2013]. Dostupné na: < http://www.saraseo.sk/seo-sluzby/google-analytics>.
14 Use of Key Performance Indicators in Web Analytics : WebSideStory, 2004. [online]. [2004]. Dostupné
na: < http://www.4everywhere.com/documents/KPI.pdf >.
15 YOUNG, W.: Key Metrics For Success With A Local Business Website.[online]. [2013-09-16]. Dostupné
na: <http://searchengineland.com/key-metrics-for-success-with-a-local-business-website-171734>.
11
pomer slúži primárne na sledovanie efektívnosti webu pri zmene užívateľa na
zákazníka.
 Hĺbka návštevy – ide o zobrazenie záujmu užívateľa o ponúkaný obsah web
stránkou. Ide o pomer počtu zobrazenia stránok a počtu návštev. Tento údaj je
dôležitý pre stránky ponúkajúce mediálny obsah.
Hlavný ukazovateľ, ktorý pred rokom 2007 určoval úspešnosť web stránky bol počet
zobrazení stránky. V roku 2007 Agentúra Nielsen/Netratings, líder vo výskume
internetového trhu, predstavila nový spôsob určovania úspešnosti webových stránok. Ten
je založený predovšetkým na sledovaní celkového množstva času, ktorý užívateľ na webe
strávi.16 Zmena je reakciou na nový typ stránok, ktorý v roku 2007 začal byť veľkou
súčasťou internetu. Išlo o streamované médiá a internetové aplikácie, ktoré užívateľov
nenútili obnovovať stránku, ale motivovali ich k čo najdlhšiemu strávenému času
stráveného pri konkrétnom obsahu. Všeobecne existuje niekoľko metrík na meranie webu.
Každá z metrík sa zameriava na inú oblasť v rámci analýzy webu. 17
1. Konverzná metrika (Conversion metrics) – túto metriku využívajú prevažne
stránky predávajúce produkt alebo službu. Zameriava sa na sledovanie
konverzného pomeru a na sledovanie štatistiky predaja, predajných formulárov,
stiahnutí propagačných materiálov.
2. Metrika oddanosti (Engagement metrics) – pri tvorbe stránky, ktorá poskytuje
užívateľom informácie o biznise konkrétnej organizácie, je dôležité sledovať
oddanosť užívateľov. V tejto metrike sú dôležité: strávený čas na stránke, počet
návštevníkov, hĺbka návštevy, sociálne zdieľanie a komentovanie.
3. Akvizičná metrika (Acquisition metrics) – webové stránky, ktorých zameraním je
vytvoriť povedomie o organizácii, merajú úspešnosť/neúspešnosť pomocou
nasledujúcich ukazovateľov: počet unikátnych návštevníkov, počet zobrazení a
zdroj návštev. Akvizičná metrika je dobrým indikátorom ako efektívne vaše
marketingové snaženie.
2 Návrh webovejstránky
16 BAUSCH, S.: Nielsen//Netratings adds “totalminutes” metric to syndicated service as best measure of
online engagement. [online]. [2007-07-10]. Dostupné na: <http://www.nielsen-
online.com/pr/pr_070710.pdf>.
17 How to Measure Your Site’s Success.[online]. [2013-09-08]. Dostupné na: <
http://www.yola.com/blog/how-to-measure-your-sites-success/>.
12
Ak už sme si zadefinovali cieľové publikum, identifikovali informácie, ktoré chceme
komunikovať a stanovili ciele, môžeme pokračovať do fázy návrhu webového rozhrania.
Ešte pred grafickými náčrtmi budúceho rozhrania si ale musíme zadefinovať stratégiu
usporiadania informácii.
2.1 Informačná architektúra
Internetovú stránku môžeme označiť ako súhrn informácii, ktoré chceme predať
návštevníkovi. Informácie musíme predovšetkým roztriediť, zaradiť a usporiadať do
logických prvkov aby ich mohol ktokoľvek jednoducho a efektívne nájsť. Gray definuje
informačnú architektúru ako „kombináciu organizačných, označovacích, vyhľadávacích
a navigačných systémov v rámci webovej stránky alebo intranetu“. 18Cieľom informačnej
architektúry je umožniť návštevníkom jednoducho nachádzať informácie, ktoré potrebujú
a napĺňať ciele. Najbežnejším spôsobom je zlučovanie informácií do informačných uzlov
(stránok) na základe ich charakteru. Existuje však viacero iných prístupov
k štruktúrovanou informácii. Garret opisuje štyri hlavné prístupy štruktúrovania informácii.
19
1. Hierarchická štruktúra pracuje na princípe Parent – Child ( Rodič – Dieťa), kde sa
informácie rozvetvujú a bod informácie sa môže vetviť. Platí, že nie každý bod má
dieťa (child) ale každé dieťa má rodiča (parent). Užívatelia poznajú koncept
hierarchických vzťahov z iných odvetví, preto je tento typ štruktúry
najpoužívanejší.
Obrázok č. 1 Model hierarchickej štruktúry
Zdroj: J.J.Garret - The Elements of User Experience, User-Centered Design for the Web and Beyond (2nd
Edition)
18 GRAY, D.: Profesionální design na webu. Brno: Soft Press s.r.o., 1999. s. 4
19 GARRETT, J. J.: The Elements of User Experience: User-Centered Design for the Web and Beyond. 2.
vyd. Berkeley: New Riders, 2011, s.93
13
2. Matrix štruktúra pracuje na princípe pohybu užívateľa pozdĺž dvoch a viac
dimenzii. Matrix štruktúra umožňuje užívateľom s rôznymi potrebami prechádzať
rovnakými informáciami rôznym spôsobom. Napríklad môže užívateľ prechádzať
obsah v zoradení podľa ceny alebo podľa obľúbenosti.
Obrázok č. 2 Model matrix štruktúry
Zdroj: J.J.Garret - The Elements of User Experience, User-Centered Design for the Web and Beyond (2nd
Edition)
3. Organická štruktúra je taká, v ktorej nenájdeme žiadne znaky vzoru. Zoradenie
informácii nedodržiava pevne dané rozdelenie podľa sekcií, ale podľa charakteru
informácie. Organická štruktúra je vhodná pri stránkach, kde je podporované voľné
objavovanie a prechádzanie obsahu. Nachádza využitie pri výukových stránkach
alebo stránkach slúžiacich na pobavenie. Užívateľ môže však v tejto štruktúre
ťažšie hľadať cestu späť.
Obrázok č. 3 Model organickej štruktúry
14
Zdroj: J.J.Garret - The Elements of User Experience, User-Centered Design for the Web and Beyond (2nd
Edition)
4. Sekvenčná štruktúra je najbežnejší typ štruktúry informácii. Najpoužívanejšia je
pri offline médiách ako sú knihy, správy alebo hudba. Vychádza z toku jazyka,
ktorý plynie a nerozvetvuje sa. Vždy je komunikovaná len jedna informácia. Táto
štruktúra je vhodná pre inštruktážne materiály alebo samostatné články.
Obrázok č. 4 Model sekvenčnej štruktúry
Zdroj: J.J.Garret - The Elements of User Experience, User-Centered Design for the Web and Beyond (2nd
Edition)
Kathryn Whitentonová rozdeluje hierarchickú štruktúru na dva typy štruktúr: FLAT
a DEEP. 20 V štruktúre FLAT vychádza z hlavnej kategórie osem hlavných kategórií
z ktorých každá má 6 podkategórii. V štruktúre DEEP vychádzajú z domovskej stránky len
štyri kategórie z ktorých každá obsahuje 2 podkategórie, ktoré sa ďalej členia. Na obrázku
môžeme vidieť rozdiely v týchto štruktúrach.
Obrázok č. 5
Model FLAT a DEEP hierarchickej štruktúry
Zdroj: http://www.nngroup.com/articles/flat-vs-deep-hierarchy/
Whitentonová sa domnieva, že tvar hierarchie má obrovský dopad na užívateľa. Tvrdí, že
obsah je možné jednoduchšie objaviť, ak nie je skrytý pod niekoľkými vrstvami.
Whitentonová tiež tvrdí, že špecificky definované kategórie, ktoré nepresahujú do iných sú
20 WHITENTON, K.: Flat vs. Deep Website Hierarchies. [online]. [2013-11-10]. Dostupné na:
<http://www.nngroup.com/articles/flat-vs-deep-hierarchy/>.
15
ľahšie rozpoznateľné. Takéto kategórie sú špecifické pre typ štruktúry FLAT. Užívateľ
v tomto type nemusí prechádzať mnohými vrstvami a tak môže nájsť informáciu
jednoduchšie a rýchlejšie. Kategórie informácií v hierarchii DEEP sú príliš obšírne
a nekonkrétne. Existujú však prípady, kedy je vhodné uprednostniť DEEP hierarchiu pred
FLAT. Ide najmä o prípady, kedy je príliš mnoho informácii v rovnakej vrstve. Vtedy je
vhodné informácie rozšíriť do vertikálnej roviny.
2.2 Navigácia
„Ľudia nebudú používať váš web, pokiaľ sa v ňom nezorientujú“21
V skutočnom svete sa orientujeme podľa rôznych navigačných prvkov
rozmiestnených po okolí. Môžu to byť mapy, názvy ulíc alebo názvy oddelení v obchode.
Vo webovom priestore však tieto navigačné prvky neexistujú vo forme, na akú sme zo
skutočného sveta zvyknutí, ale sú prispôsobené prostrediu, v ktorom sa nachádzajú . Tieto
prvky sú sústredené do navigačných systémov, ktoré sú neoddeliteľnou súčasťou
informačnej architektúry stránky. Mnoho navigačných systémov vychádza priamo
z hierarchickej štruktúry informačnej architektúry. Navigačné systémy kopírujúce
hierarchické systémy avšak v praxi bývajú nepoužiteľné. Morville a Rosenfeld sa
domnievajú, že uvedené systémy sú veľmi nepraktické pri prechádzaní medzi vetvami
štruktúry (horizontálne) a medzi jednotlivými vrstvami štruktúry (vertikálne)22 Fungovanie
webových stránok na základe hypertextových odkazov umožňuje veľkú slobodu
používania, keďže podporujú vertikálnu a horizontálnu navigáciu v rámci informačnej
štruktúry. Tento typ navigácie umožňuje voľný pohyb po strome štruktúry, takže užívateľ
môže slobodne preskakovať zo stránky na stránku bez ohľadu na aktuálnu polohu v rámci
štruktúry.
Garret definuje tri ciele, ktoré musí úspešná navigácia spĺňať:
- navigácia musí poskytnúť užívateľovi informácie, ako sa dostať z jedného bodu do
druhého,
- z dizajnu navigácie musí byť užívateľovi jasný vzťah medzi prvkami, ktoré obsahuje,
21 KRUG, S.: Nenuťte uživatele přemýšlet!. Brno: Computer Press, 2006, s. 45
22 MORVILLE, P. – ROSENFELD, L.: Information Architecture for the World Wide Web. Sebastopol:
O’Reilly Media, 2006, s. 121
16
- dizajn navigácie, musí tiež jasne komunikovať vzťah medzi obsahom navigácie
a obsahom stránky, ktorú užívateľ práve prehliada. 23
Na stránkach môžeme zvyčajne nájsť niekoľko typov navigačných systémov. Morville
a Rosenfeld rozdeľujú navigačné systémy na dve hlavné skupiny:
- Vstavané navigačné systémy
- Doplnkové navigačné systémy. 24
2.2.1 Vstavané navigačné systémy
Do tejto kategórie Morville a Rosenfeld zaradujú globálne, lokálne a kontextové navigačné
systémy. Tieto systémy sú zvyčajne integrovanou súčasťou web stránky a poskytujú
dôležitú oporu pre používateľa pri pohybe na stránke.
2.2.1.1 Globálna navigácia
Globálna navigácia je prítomná na všetkých stránkach konkrétneho serveru. Na
akejkoľvek stránke webového sídla ponúka užívateľovi prístup ku všetkých kľúčovým
oblastiam a funkciám. Tiež ponúka užívateľovi prehľad, kde sa v rámci hierarchie stránok
nachádza. Na hlavnej stránke môže byť navigácia rozšírená o viaceré položky, a teda sa
mierne odlišuje od navigácie na ostatných stránkach. Podľa Kruga by globálna navigácia
mala obsahovať niekoľko základných prvkov:
1. Logo a odkaz na domovskú stránku – na väčšine serverov je odkaz na domovskú
stránku spracovaný práve pomocou loga serveru. „Logo reprezentuje server ako
celok, ktorý znamená, že sa jedná o najvyšší stupeň v hierarchii.“ 25 Logo je
umiestnené zvyčajne na ľavej strane navigácie. Na arabských alebo hebrejských
stránkach môžeme nájsť logo servera na pravej strane.
2. Sekcie – základný stavebný kameň navigácie. Sú to odkazy na kategórie/časti
stránok, ktoré sa venujú spoločnej téme.
3. Pomôcky – ide o odkazy na dôležité prvky serveru, ktoré nie sú priamou súčasťou
hierarchie.
23 GARRETT, J. J.: The Elements of User Experience: User-Centered Design for the Web and Beyond. 2.
vyd. Berkeley: New Riders, 2011, s.118-119
24 MORVILLE, P. – ROSENFELD, L.: Information Architecture for the World Wide Web. Sebastopol:
O’Reilly Media, 2006, s. 116
25 KRUG, S.: Nenuťte uživatele přemýšlet!. Brno: Computer Press, 2006, s. 56
17
4. Vyhľadávanie – vyhľadávacie pole má byť súčasťou navigácie pre užívateľov,
ktorí poznajú cieľ svojej cesty a nechcú sa zdržiavať prehľadávaním stránky. Pre
veľké internetové obchody je vyhľadávanie kľúčovým prvkom. 26
Obrázok č. 6
Model globálnej navigácie
Zdroj: J.J.Garret - The Elements of User Experience, User-Centered Design for the Web and Beyond (2nd
Edition)
2.2.1.2 Lokálna navigácia
Na veľkých serveroch je globálna navigácia podporená lokálnou navigáciou, ktorá
umožňuje užívateľovi preskúmať stránky, ktoré sú v okolí jeho aktuálnej pozície v rámci
štruktúry stránok. V hierarchickej štruktúre stránok bývajú v lokálnej navigácii zastúpené
stránky na rovnakej a nižšej úrovni. Vo voľnejšej architektúre sú v architektúre zastúpené
položky, ktoré by mohli užívateľa zaujímať.
Obrázok č. 7
Model lokálnej navigácie
Zdroj: J.J.Garret - The Elements of User Experience, User-Centered Design for the Web and Beyond (2nd
Edition)
2.2.1.3 Kontextuálna navigácia
Niektoré stránky vyžadujúce unikátny prístup, spracovanie a umiestnenie, je ťažké
zaradiť do predchádzajúcich dvoch typov navigácii. Preto kontextuálna navigácia
26 KRUG, S.: Nenuťte uživatele přemýšlet!. Brno: Computer Press, 2006, s. 57
18
zachytáva odkazy na unikátne stránky, ktoré logicky nepatria do všeobecných navigačných
systémov. V praxi ide predovšetkým o odkazy v rámci slov v texte, ktoré svojim obsahom
reprezentujú špecifickú stránku, na ktorú odkazujú. Tento typ navigácie môžeme vidieť
napríklad v internetových obchodoch alebo na spravodajských portáloch, kde odkazy
s textom „viac“ alebo „podrobnosti“ ponúkajú návštevníkovi odkaz na špecifickú stránku
s detailnými informáciami o produkte. Návrh kontextuálnej navigácie vychádza
predovšetkým zo znalosti potrieb užívateľov. Ak sú však potreby a ciele používateľov
určené nesprávne, môže kontextuálna navigácia spôsobiť frustráciu užívateľa.
2.2.2 Doplnkové navigačné systémy
Do tejto kategórie môžeme zaradiť mapy stránok a indexy, ktoré sa nachádzajú
mimo hlavného obsahu stránky. Sú to komplementárne spôsoby ako môže užívateľ odhaliť
hierarchiu a obsah serveru. Morville a Rosenfeld sa domnievajú27, že doplnková navigácia
je kriticky dôležitá pre použiteľnosť veľkých serverov s veľkým počtom stránok.
2.2.2.1 Mapa stránok
Mapa stránok ponúka užívateľom náhľad na štruktúru stránok na serveri. Zobrazuje
ich podľa hierarchie servera. Ponúka odkazy na stránky umiestnené na najvyšších stupňoch
hierarchie. Tento navigačný prvok sa zvyčajne nachádza na serveroch s väčším množstvom
stránok.
2.2.2.2 Index
Pojem index je základným pojmom v problematike webu. Okrem súborového
názvu domovskej stránky sa pojmom Index označuje abecedný zoznam tém dostupný na
serveri. Cez tento navigačný prvok sa užívateľ môže rýchlo presunúť na stránku, o ktorú
má záujem. Je to užitočný navigačný prvok pri serveroch, ktoré sa zaoberajú veľkým
množstvom rozličných tém.
2.3 Grafické spracovanie navigačnýchsystémov
V predchádzajúcich kapitolách sme načrtli problematiku navigácie
a zosumarizovali si vlastnosti jednotlivých navigačných prvkov. Funkcionalita
navigačných prvkov na stránke však závisí aj od grafického spracovania, ktoré v užívateľ
uvidí a použije. Nesprávne grafické spracovanie môže negatívne ovplyvniť použiteľnosť
27 MORVILLE, P. – ROSENFELD, L.: Information Architecture for the World Wide Web. Sebastopol:
O’Reilly Media, 2006, s. 131
19
navigačných prvkov. Unifikované pravidlá pre grafické spracovanie zatiaľ neexistujú,
preto nemôžeme jednoznačne určiť „správne“ alebo „nesprávne“ spracovanie navigačných
prvkov. Za základný predpoklad pri navrhovaní grafiky môžeme stanoviť dodržiavanie
kontrastu medzi textom a pozadím. Správna viditeľnosť textu v navigácii je kľúčová.
Mnohé súčasné grafické spracovania globálnej navigácie však vychádzajú z trendu
„záložiek“, ktorý bol populárny pred niekoľkými rokmi. Záložky využívajú najmä veľké
servery, ktoré majú veľa kategórii a podkategórii. Krug opisuje 4 dôvody, prečo sú
záložky vhodným riešením globálnej navigácie pre veľké servery:
 Sú zrejmé – systém záložiek pochopí aj neskúsený užívateľ internetu.
 Sú ťažko prehliadnuteľné – mnoho užívateľov sa okamžite sústreduje na obsah
stránky a tak prehliadajú hlavičku stránky, kde sídli navigácia. Záložky sú vizuálne
zreteľné pôsobia ako rozdelenie medzi navigáciou a dizajnou. Preto ich užívateľ
ťažšie prehliadne.
 Sú elegantné – dizajn webových stránok stále napreduje a stránky sa stávajú
vizuálne zaujímavejšie. Záložky spájajú eleganciu a funkčnosť, preto sú
obľúbeným východiskovým bodom webových dizajnérov pri navrhovaní navigácie.
 Budia dojem priestoru – vizualizácia prechodu obsahu aktívnej záložky do
popredia napomáha užívateľovi ihneď pochopiť funkcionalitu navigácie. 28
Kvalitne spracované navigačné systémy sú základom pre tvorbu kvalitnej stránky.
Webstránka však nepozostáva len z navigačných systémov. Základným prvkom
webstránky je nejaká informácia, resp. súbor informácii, ktoré chceme prostredníctvom
danej webstránky komunikovať.
2.4 Text
Text je hlavným nosičom informácie vo webovom priestore. Preto je potrebné pri
navrhovaní klásť dôraz na správne spracovanie textových výstupov. Tvorba textu pre web
je odlišná od vytvárania textu pre klasické tlačené médiá. Na webovej stránke musí autor
zaujať najmä pútavým názvom článku alebo inej komunikovanej informácie. Na rozdiel od
tlačených médií, kde titulok môže len naznačovať obsah textu, na webe je titulok oveľa
dôležitejší. Titulok sa vo webovom priestore môže nachádzať aj samostatne, mimo celého
článku. Titulok musí stručne, jasne a výstižne popisovať obsah článku. Titulok je, podobne
ako pri iných médiách, zväčšený oproti ostatnému textu a zvýraznený tučným písmom.
28 KRUG, S.: Nenuťte uživatele přemýšlet!. Brno: Computer Press, 2006, s. 69
20
Štruktúra textu je na webe je taktiež odlišná od iných médii. Štruktúra vychádza
z faktu, že užívatelia web nečítajú ale prehliadajú. 29 Preskakujú text, hľadajú titulky,
nadpisy alebo obrázky. Aj štúdia J. Nielsena potvrdzuje, že užívatelia čítajú na webe len
veľmi zbežne.30 Komunikovaná informácia má byť na webe čo najvýstižnejšia. Pri tvorbe
textu je vhodné vynechať zbytočné slová a súvetia a ísť rovno k podstate. Nielson tiež
odporúča pridať do textu zoznamy s odrážkami alebo zvýraznené kľúčové slová. 31
Taktiež je vhodné deliť dlhší text na viac odsekov a v každom odseku rozoberať
maximálne jednu myšlienku.
Text má na webe okrem funkcie nosiča informácie schopnosť ovplyvňovať poradie
a dostupnosť konkrétnej stránky vo webových vyhľadávačoch. Automatizované roboty,
ktoré vyhľadávajú stránky pre veľké vyhľadávače, sa riadia výlučne podľa textu
obsiahnutého na stránke. Skenujú obsah a zameranie stránky, dostupnosť odkazov a rôzne
značky v HTML kóde, podľa ktorých vyhodnotia a zaradia konkrétnu stránku do
vyhľadávača podľa relevantnosti.
2.5 Vizuálny dizajn web stránky
Webové stránky sú založené primárne na komunikovaní informácie
prostredníctvom textovej formy. Ich grafické spracovanie však v niektorých prípadoch
môže narušiť bezproblémovú komunikáciu medzi stránkou a návštevníkom. Tento
komunikačný šum následne môže narušiť zrozumiteľnosť a príjem informácie. Správne
navrhnutý vzhľad stránky dokáže tento šum eliminovať a podnietiť užívateľa k záujmu
o web a obsah. Pri tvorbe webového dizajnu by sme mali dbať na niekoľko základných
princípov vizuálneho dizajnu: 32
 Jednota a Celistvosť - všetky elementy na stránke by mali pôsobiť zjednotene.
Umiestnenie elementov v rámci štruktúry je kľúčové. Ak všetky elementy na
stránke budú umiestnené správne, bude stránka pôsobiť ako celok .
 Priestor - priestor na stránke zlepšuje čitateľnosť a znižuje komunikačný šum
 Hierarchia - informácie a elementy majú byť zoradené podľa dôležitosti
 Vyváženosť - vyváženosť informácii a elementov v rámci stránky
29 KRUG, S.: Nenuťte uživatele přemýšlet!. Brno: Computer Press, 2006, s. 28
30 NIELSEN, J.: How Little Do Users Read?. [online]. [2008-05-06]. Dostupné na: <
http://www.nngroup.com/articles/how-little-do-users-read/>.
31 NIELSEN, J.: How Users Read on the Web. [online]. [1997-10-01]. Dostupné na: <
http://www.nngroup.com/articles/how-users-read-on-the-web/>.
32 Visual Design Basics. [online]. [2014-06-03]. Dostupné na: < http://www.usability.gov/what-and-
why/visual-design.html>.
21
 Kontrast - dôležitý prvok ovplyvňujúci čitateľnosť informácii. Informácie by mali
vystupovať z pozadia a nie sním splývať.
 Veľkosť - pomocou veľkosti elementu môžeme komunikovať dôležitosť
a významnosť daného elementu v porovnaní z ostatnými
 Dominancia - zaoberá sa vyzdvihnutím jedného alebo dvoch elementov, ktoré
upútajú zrak návštevníka.
 Podobnosť - vytvára kontinuitu webovej stránky bez pocitu priamej duplicity.
Vizuálne vnímanie web stránky ovplyvňuje aj zvolená farebná schéma. Je
všeobecne známe, že farby podvedome ovplyvňujú naše vnímanie. Tento fakt platí
aj v problematike web stránok, preto by mali byť tvorcovia opatrní akú farebnú
schému na webe zvolia.
3 User Experience
User experience (Skratka UX) znamená v preklade užívateľská skúsenosť. Podľa
Nielsena a Normana pojem „User Experience“ zahŕňa všetky aspekty interakcie
koncového používateľa s firmou.33 Môže ísť o služby, produkty, zákaznícky servis alebo
dizajn obalu produktu a mnoho iného. V problematike web stránok ide o pocit, ktorý si
odnesie užívateľ s používaním webu. Sféra používateľskej skúsenosti sa komplikovane
meria, pretože ide zväčša o subjektívne dojmy a emócie. Jakub Španihel, odborník na UX
definoval 9 princípov používateľskej skúsenosti:
- Zamerajte sa na užívateľa a jeho potreby
- Najprv zaistite funkciu, potom dizajn
- Prispôsobte sa cieľom používateľov
- Navrhujte pre obecné prípady
- Neodrádzajte užívateľov od ich cieľov
- Uľahčíte užívateľom učenie
- Komunikujte informácie, nie dáta
- Nezdržujte užívateľa
- Testujte na užívateľoch34
33 NIELSEN, J. – NORMAN, D.: The Definition of User Experience. [online]. [1997-10-01]. Dostupné na: <
http://www.nngroup.com/articles/definition-user-experience/>.
34 ŠPANIHEL, J.: 9 principů User Experience. [online]. [1997-10-01]. Dostupné na:
<http://uzivatelsketestovani.cz/wiki/doku.php/9-principu-ux>.
22
Španihel tiež tvrdí, že: „Dodržanie týchto princípov nezaručuje kvalitný web, ale
veľmi uľahčí jeho vývoj a správu.“35 Zo spomenutých pravidiel je jasné, že pri tvorbe
webu, zameraného na kladnú používateľskú skúsenosť, sa musíme zamerať primárne na
užívateľa. Tvorbu takéhoto dizajnu nazývame User–centered dizajn.
3.1 User CenteredDesign
Mnoho webových stránok je tvorených so zámerom dosiahnutia firmou
stanovených cieľov, alebo so zámerom zvýšenia ziskov z predaja atď. Tento prístup však
niekedy nemusí byť vhodný pre používateľov stránky, ktorým tá stránka nemusí ponúknuť
odpovede a riešenia na ich problémy. V takom prípade obe strany zostávajú sklamané.
Riešením môže byť používateľsky orientovaný dizajn, ktorý kladie do popredia
požiadavky a ciele užívateľa. Makulová definuje používateľsky orientovaný dizajn takto:
„Používateľsky orientovaný dizajn je filozofia a proces. Je to filozofia, ktorá kladie do
centra diania človeka a nie vec. Je to proces, ktorý sa zameriava na kognitívne faktory ako
vnímanie, pamäť, učenie sa, riešenie problémov a pod., ktoré prichádzajú do úvahy počas
interakcie ľudí so systémom.“36 Používateľsky orientovaný dizajn je teda spôsob ako
miesto nútenia užívateľa sa prispôsobiť stránke a prostrediu do ktorého vstúpil, adaptovať
prostredie a mechanizmy na potreby a ciele, ktoré má užívateľ. Kľúčovou súčasťou
užívateľsky orientovaného dizajnu je použiteľnosť stránky.
4 Použiteľnosť
1. Norma ISO 9241-11 definuje37 použiteľnosť ako využívanie produktu špeciálnymi
používateľmi na dosiahnutie špecifických cieľov s efektívnosťou, výkonnosťou a
uspokojením, v špeciálnom kontexte využitia. Použiteľnosť je súčasťou filozofie
dizajnu orientovaného na užívateľa (User-centered design), ktorý ma za cieľ zlepšiť
použiteľnosť a užitočnosť. Nielsen tvrdí, že použiteľnosť je kvalitatívny atribút
a definuje ju pomocou piatich kvalitatívnych častí:
35 ŠPANIHEL, J.: 9 principů User Experience. [online]. [1997-10-01]. Dostupné na:
<http://uzivatelsketestovani.cz/wiki/doku.php/9-principu-ux>.
36 MAKULOVÁ, S.: Použiteľnosť webových sídiel ako základný predpoklad ich úspešnosti.[online]. [2007-
03-03]. Dostupné na: < http://www.elet.sk/?pouzitelnost-pristupnost&sprava=pouzitelnost-webovych-sidiel-
ako-zakladny-predpoklad-ich-uspesnosti>.
37 ISO 9241-171. Ergonomics of human-systeminteraction -- Part 171: Guidance on software accessibility.
2008.
23
2. Naučiteľnosť – ako jednoducho budú užívatelia schopná splniť základné úlohy pri
prvom stretnutí s dizajnom?
3. Efektívnosť – ak sú užívatelia už oboznámení z dizajnom, ako rýchlo dokážu
vykonať dané úlohy?
4. Zapamätateľnosť – ak sa užívatelia po čase nepoužívanie vrátia k dizajnu ako
rýchlo a jednoducho bude schopný zopakovať kroky?
5. Chyby – aký počet a druh chýb užívatelia pri prechádzaní robia a ako sa s nimi
dokážu vysporiadať?
6. Uspokojenie – ako príjemné je používanie dizajnu? 38
4.1 Metódy hodnotenia použiteľnosti
Použiteľnosť je pre webové stránky kľúčová. Ak sa užívateľovi s webom ťažko pracuje,
tak po niekoľkých minútach odíde. Na zle použiteľných stránkach sa užívatelia cítia
stratení, a ak nedokážu naplniť svoje ciele, tak odchádzajú. Užívateľ má pri prechádzaní
stránkou mnoho dôvodov odísť a použiteľnosť sa týmito dôvodmi zaoberá. Tvorcovia
stránky môžu zlepšiť použiteľnosť webu pomocou niekoľkých metód hodnotenia
použiteľnosti. „Účel hodnotenia môže byť zlepšenie použiteľnosti produktu ako súčasť
dizajnu/vývoja (Formative evaluation), alebo posúdenie do akej miery boli dosiahnuté
ciele použiteľnosti (Summarative evaluation).“ 39 Metódy hodnotenia použiteľnosti
môžeme teda rozdeliť do dvoch kategórii.
 Formative evaluation je kategória metód hodnotenia použiteľnosti, ktorá sa
využíva pri tvorbe a vývoji služby alebo produktu. Testy a hodnotenia prebiehajú
v rámci tímu tvorcov, počas vývoja stránky. Asociácia profesionálov v oblasti UX
40 sem zaraďuje metódy: heuristické hodnotenie, kontrola užívateľského rozhrania,
pluralistická prechádzaka, kognitívna prechádzka a i.
 Summarative evaluation - metódy hodnotenia v rámci tejto kategórie sa využívajú
pri testovaní a hodnotení hotového produktu. Testy a hodnotenia prebiehajú
v realistických podmienkach, kde sa testuje, či produkt alebo služba splnila
38 NIELSEN, J.: Usability Engineering. Mountain View: Morgan Kaufmann, 1993, s. 26
39 Usability Evaluation Methods.[online]. [2010-01-01]. Dostupné na:
<http://www.usabilitybok.org/usability-evaluation-methods>.
40 Formative Evaluation. [online]. [2010-01-01]. Dostupné na: <http://www.usabilitybok.org/formative-
evaluation>.
24
stanovené ciele. Môžeme tam zaradiť: užívateľské testovanie, vzdialené testovanie
a i.
V nasledujúcej časti objasníme bližšie metódu užívateľského testovania a heuristického
hodnotenia, keďže v analytickej časti práce spomínané metódy využívame.
4.1.1.1 Užívateľské testovanie
Najzákladnejšou a najužitočnejšou metódou je užívateľské testovanie. Užívateľské
testovanie však nie je metóda určená výhradne na analyzovanie použiteľnosti. Ak je však
primárnou úlohou práve analýza použiteľnosti, tak sa môžeme stretnúť aj s pojmom
testovanie použiteľnosti (Usability testing). Pri tejto metóde si prevádzkovatelia stránky
pozvú niekoľkých typických návštevníkov testovanej web stránky do testovacieho
laboratória. Práve výber vhodných účastníkov je pri testovaní jednou z kľúčových častí.
Účastníci testovania by mali patriť do cieľovej skupiny webovej stránky. Mali by to byť
ľudia, ktorí so stránkou neprišli do styku a neboli ani inak zainteresovaní v analyzovanej
web stránke. Účastníci v testovaní slobodne plnia úlohy, ktoré užívatelia najčastejšie na
stránke vykonávajú. Zadanie týchto úloh by malo byť pre účastníkov ľahko pochopiteľné
a mali by odrážať reálne úkony, ktoré užívatelia na stránke robia, alebo sú pre web
dôležité. Pri plnení týchto úloh ich prevádzkovatelia pozorujú, zapisujú dáta a sledujú
prípadné ťažkosti, do ktorých sa môžu účastníci pri testovaní dostať. V prípade nejasností
môžu prevádzkovatelia testovania položiť účastníkom doplňujúce otázky a dotvoriť si tak
celkový obraz o výsledku testovania. K testovaniu použiteľnosti môžeme pristupovať
kvalitatívne, ale aj kvantitatívne.
Kvantitatívny prístup sa zameriava na počet úspechov a neúspechov pri plnení úloh, čas
potrebný na dokončenie úlohy, počet omylov a pochybení v priebehu plnenia úlohy.41
Kvantitatívny prístup vyžaduje minimálne 20 účastníkov, pretože zvolený prístup by mal
prinášať štatisticky významné výsledky.42 Keďže tento prístup vyžaduje väčšie množstvo
účastníkov môžeme si z toho odvodiť jeho časovú náročnosť a organizačnú náročnosť.
Kvalitatívny prístup sa zameriava primárne na identifikáciu problémov, ktoré vznikajú
užívateľom pri prechádzaní webom. Taktiež odhaľuje rôzne cesty akými sa užívatelia
41 NIELSEN, J.: Usability Metrics. [online]. [2001-01-21]. Dostupné na:
<http://www.nngroup.com/articles/usability-metrics/>.
42 NIELSEN, J.: How Many Test Users in a Usability Study?. [online]. [2001-04-06]. Dostupné na: <
http://www.nngroup.com/articles/how-many-test-users/>
25
dopracovávajú k riešeniu zadanej úlohy. Poskytuje detailnejší náhľad na postoje a názory
užívateľov cez odpovede účastníkov na otvorené otázky. Kvalitatívny prístup je relatívne
časovo nenáročný, keďže postačuje testovať približne 5 účastníkov43 pre zistenie väčšiny
problémov použiteľnosti.
4.1.1.2 Heuristické hodnotenie
Jakob Nielsen vo svojej knihe opisuje metódu heuristického hodnotenia veľmi jednoducho.
„Heuristické hodnotenie sa vykonáva tak, že sa pohľadom na rozhranie sa snažíte dôjsť na
to, čo je s rozhraním dobre, a čo zle.“44 „Cieľom heuristického hodnotenia je identifikovať
problémy použiteľnosti v dizajne používateľského rozhrania...“ 45 Ideálne by metódu
heuristického hodnotenia mal vykonávať odborník na použiteľnosť a používateľské
rozhranie. Ten potom na základe svojich skúseností, vedomostí a niekoľkých princípov
použiteľnosti (heuristík) zhodnotí analyzovanú web stránku. Svetovo uznávaný expert na
použiteľnosť J.Nielsen v roku 1995 definoval 10 heuristík použiteľnosti, ktoré sa využívajú
dodnes.
1. Viditeľnosť stavu systému - systém by mal užívateľovi poskytovať informáciu
o tom, čo sa deje, a kde sa práve nachádza prostredníctvom adekvátnej spätnej
väzby v rozumnom čase.
2. Spojitosť systému a reálneho sveta - použitý systém by mal komunikovať jazykom
užívateľov. Mal by používať slová, frázy a pojmy, ktoré sú používateľovi známe.
Mal by nasledovať zvyklosti reálneho sveta a poskytovať tak informácie
v prirodzenej a logickej forme.
3. Plná kontrola a sloboda používateľa - užívatelia často volia systémové funkcie
náhodou. Preto je potrebné, aby mali kedykoľvek k dispozícii tzv. „únikový
východ“ a jednoducho, bez nadbytočného dialógu, nechcenú funkciu opustiť.
Systém by mal podporovať funkcie „undo“ a „redo“.
4. Súdržnosť a štandardy - užívatelia by nemali pri používaní webu premýšľať, či
rovnaké slová, situácie alebo úkony znamenajú rovnaké veci. Webová stránka by
mala dodržiavať všeobecne platné konvencie pre webové prostredia.
43 NIELSEN, J.: Why You Only Need to Test with 5 Users. [online]. [2000-19-03]. Dostupné na:
<http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/>
44 NIELSEN, J.: Usability Engineering. Mountain View: Morgan Kaufmann, 1993, s. 155
45 NIELSEN, J.: Usability Engineering. Mountain View: Morgan Kaufmann, 1993, s. 167
26
5. Prevencia chýb – dobrý dizajn by spolu s dobrými chybovými hláseniami mal
v prvom rade predchádzať chybám. a problém. Ak problémy nie je možné
odstrániť, je vhodné aspoň pridať možnosť nahlásenia.
6. Rozpoznanie pred spomínaním - objekty, akcie a funkcie majú byť na stránke
jasne viditeľné, jednoducho rozlíšiteľné od ostatného obsahu stránky. Týmto sa
minimalizujú pamäťové nároky užívateľa. Používateľ nie je nútený si pamätať
informácie z jedného formulára do druhého. Systémové inštrukcie by mali byť
viditeľné a jednoducho použiteľné z ktoréhokoľvek miesta na stránke.
7. Flexibilita a efektivita používania - systémové prostredie má podporovať ako
skúsených používateľov, tak aj začiatočníkov a všetky jeho funkcie by mali byť
použiteľné efektívne.
8. Estetický a minimalistický dizajn - dialóg vedený s užívateľom by nemal
obsahovať zbytočné a nepotrebné informácie. Každá ďalšia nepotrebná informácia
pridaná do tohto dialógu zmenšuje viditeľnosť podstatných informácii.
9. Pomoc rozpoznať problémy a vyriešiť ich - chybové hlásenia by mali byť
vyjadrené pomocou obyčajného jazyka a nie cez kódy. Hlásenia by mali presne
indikovať problém a navrhnúť konštruktívne riešenie.
10. Podpora a dokumentácia - systém by mal užívateľovi jednoduchou cestou
poskytnúť riešenie v prípade potreby pomoci. Táto informácia by mala byť pre
užívateľa ľahko dostupná, zameraná na užívateľov problém, spracovaná ako postup
zostavený z niekoľkých krokov a nie príliš obsiahla. 46
Zaplatenie odborníka na použiteľnosť, môže byť príliš drahé. Nielsen však tvrdí, že
heuristické hodnotenie môžu vykonávať aj ľudia s minimálnym alebo žiadnym vzdelaním
v oblasti použiteľnosti.47 Zároveň však dodáva, že skupina hodnotiacich s minimálnym
alebo žiadnym vzdelaním, odhalí len približné štvrtinu všetkých problémov
použiteľnosti. 48 Táto skutočnosť však môže poskytnúť základný pohľad na problémy
použiteľnosti a ušetriť finančné prostriedky.
46 NIELSEN, J.: 10 Usability Heuristics for User Interface Design. [online]. [2000-19-03]. Dostupné na:
<http://www.nngroup.com/articles/ten-usability-heuristics/>
47 NIELSEN, J.: Usability Engineering. Mountain View: Morgan Kaufmann, 1993, s. 162
48 NIELSEN, J.: Usability Engineering. Mountain View: Morgan Kaufmann, 1993, s. 161
27
5 Metodika
5.1 Výskumný problém
Doména dvepercenta.sk bola pri svojom vzniku určená čisto pre informačné účely
o možnostiach darovania 2% a ponúkala informácie o problematike darovanie daní.
Stránku v roku vzniku 2004 zastrešovala nezisková organizácia Komunitná nadácia
Bratislava. V roku 2006 však doménu prebrala nezisková organizácia WellGiving, ktorá na
doméne vytvorila vyhľadávač neziskových organizácii.
Stránka pri vzniku bola vizuálne poplatná svojej dobe. Návštevnosť webu sa
pohybovala v desiatkach užívateľov za týždeň. Postupne však naberal tento trend stúpajúci
charakter. Nikdy však stránka nebola navštevovaná veľkým množstvom ľudí. Frekvencia
návštev sa menila počas roka a tak podľa slov zakladateľky organizácie WellGiving
stránka „žije“ len v mesiacoch odovzdávania daňových priznaní. Užívatelia zväčša
vyhľadávali na stránke kontaktné informácie, formuláre pre darovanie 2%, alebo využívali
web ako východisko pre ďalšie pátranie. Vizuálne sa stránka však od doby svojho vzniku
v roku 2006 nezmenila. Poskytovala užívateľom jednoduché rozhranie vyhľadávača. Dbalo
sa hlavne o funkcionalitu a dizajn, použiteľnosť zostávala v úzadí. Ako však čas plynul,
stránka neprešla funkčnou ani vizuálnou zmenou. Za najväčšiu zmenu môžeme považovať
pridanie reklám v roku 2010. Táto zmena však mala skôr negatívny charakter ako
pozitívny. Funkcionalita a vizuál sa nemenil, čo môže byť v roku 2014 pre užívateľa
problémom.
5.2 Výskumný cieľ
Za výskumný cieľ si kladieme zlepšiť komunikáciu web stránky s verejnosťou,
prispôsobiť vizuálnu stránku súčasným trendom a zlepšiť užívateľskú prístupnosť
a použiteľnosť webovej stránky s ohľadom na ciele prevádzkovateľov aj užívateľov.
5.3 Charakteristika objektuskúmania
Za objekt testovania použiteľnosti web stránky bola vybraná web stránka
www.dvepercenta.sk. Túto stránku môžeme definovať ako vyhľadávač informácii
o neziskových organizáciách. Za touto stránkou stojí organizácia Well Giving, ktorá sa tiež
venuje poskytovaniu pomoci ľudom, ktorí to potrebujú. Okrem vybraného webu
28
organizácia prevádzkuje aj weby www.dakujeme.sk a www.zdobrychruk.sk, ktoré sa
taktiež venujú poskytovaniu pomoci a podpore ľudí so zdravotným postihnutím.
Webové sídlo dvepercentá.sk považujem sa dôležité miesto v internetovom
priestore pri vyhľadávaní a výbere neziskovej organizácie, ktorej môže verejnosť darovať
svoje 2% z daní. Výber stránky bol motivovaný tiež neuspokojivým stavom stránky
v oblasti použiteľnosti a UX z portfólia stránok neziskovej organizácie Well Giving.
5.4 Metóda výskumu
Existuje množstvo nástrojov na testovanie použiteľnosti webu. Pre svoj výskum
som sa zameral na tie spôsoby, ktoré nám môžu poskytnúť najkomplexnejší pohľad na
rozoberaný problém . Pre zber údajov k odhaleniu chýb v návrhu web stránky som teda
využil metódu užívateľského testovania. Je to forma pozorovania, pri ktorom sa účastníci
riadia úlohami, ktoré im moderátor zadá 49 . Spôsob výskumu pomocou užívateľských
testovaní nám poskytne reálnejší pohľad na chovanie užívateľa na danom webe a poskytne
aj bezprostrednú emocionálnu reakciu.
Aby bolo možné pri analyzovaní sledovať reakcie užívateľov na priebeh testovania,
plnenie ich úloh zaznamenáva kamera. V priebehu testovania sa taktiež zaznamenáva
pohyb užívateľa na stránke. Záznam obrazovky sa uskutočňoval pomocou programu
Camtasia Studio 7 od spoločnosti TechSmith. Účastníkov testovania sme zároveň vyzvali,
aby počas vykonávania úloh nahlas opisovali svoje kroky.
Pri hodnotení použiteľnosti vo svojej bakalárskej práci používam metódu
heuristického hodnotenia. Zvolená metóda mi poskytne základný prehľad o problémoch
použiteľnosti a východiskový bod pre užívateľské testovanie, v ktorom mám za cieľ
odhaliť a identifikovať kritické problémy použiteľnosti. Webové sídlo sme hodnotili na
základe desiatich heuristík, ktoré sú bližšie charakterizované v teoretickej časti v kapitole
7.1.1.2 heuristické hodnotenie. Taktiež som vychádzal zo svojich znalostí a skúseností
nadobudnutých z štúdia a práce v oblasti grafického a webového dizajnu.
5.5 Vzorka pre testovanie
Pri výbere vzorky pre testovanie sme zvolili účelový výber. Zvolili sme variantu
stratifikovaného účelového výberu, kde základný súbor rozdeľujeme do určitých vrstiev na
49 Usability Testing.[online]. [2010-01-01]. Dostupné na: < http://www.usabilitybok.org/usability-testing>.
29
základe vybraných kritérii. 50 Podľa analýzy webového sídla sme vytvorili vzorku ľudí,
ktorá majoritne navštevuje testovanú web stránku. Vychádzali sme z údajov
poskytovanými štatistickým úradom SR. Predpokladáme, že vybranú web stránku
navštevujú ľudia v produktívnom veku. Produktívny vek je stanovený podľa štatistického
úradu na 15 až 64 rokov51. Osoby vo veku 15 až 18 rokov sme odstránili z výberu nakoľko
nemajú predpoklad pre podávanie daňového priznania. Predpokladaná vzorka
návštevníkov webu sú teda ľudia v produktívnom veku, zamestnaní s kladným vzťahom
k výpočtovej technike a teda budú tvoriť základný súbor. Základným predpokladom je
schopnosť používať počítač na základnej úrovni. Zadefinovaný súbor sme si rozdelili
podľa vekovej štruktúry do piatich kategórií:
1. od 18 do 26 rokov
2. od 27 do 35 rokov
3. od 36 do 44 rokov
4. od 45 do 53 rokov
5. od 54 do 64 rokov
Následne sme do každej z týchto kategórií vybrali jedného účastníka, ktorý spĺňal
vyššie spomenuté kritéria.
Pri výbere počtu účastníkov do testu sme vychádzali z štúdie, ktorá pri
kvalitatívnom výskume odporúča piatich účastníkov testovania. Nieslen tvrdí, že už pri
testovaní piatich účastníkov odhalíme 82% problémov použiteľnosti.52 „Ako pridávate viac
a viac účastníkov, odhalíte stále menšie a menšie množstvo problémov, pretože budete
sledovať tie isté veci stále dookola“. 53 Vzhľadom na použitú kvalitatívnu metodológiu,
neočakávame štatistickú významnosť.
Na základe týchto tvrdení sme do testovania zvolili piatich účastníkov v zložení 3
ženy a dvaja muži. Priložená tabuľka zobrazuje štruktúru testovanej vzorky účastníkov
podľa veku, pohlavia, vzdelania a skúsenosti s používaním internetu.
50 MIOVSKÝ, M.: Kvalitativní přístup a metody v psychologickém výzkumu. Praha: Grada, 2006. s. 135
51Vekové zloženie obyvateľstva Slovenskejrepubliky.[online]. Bratislava : Štatistický úrad Slovenskej
republiky, 2011. Dostupné na: <http://portal.statistics.sk/files/Sekcie/sek_600/Demografia/Obyvatelstvo/
vek_zloz_obyv/metodika_11.pdf>
52 NIELSEN, J.: Why You Only Need to Test with 5 Users. [online]. [2000-19-03]. Dostupné na:
<http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/>
53 NIELSEN, J.: Why You Only Need to Test with 5 Users. [online]. [2000-19-03]. Dostupné na:
<http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/>
30
Tabuľka č. 1
Štruktúra testovanej vzorky účastníkov
veková
kategória
18 – 26 r. 27 – 35 r. 36 – 44 r. 45 – 53r. 54 – 64 r.
pohlavie žena muž žena muž žena
vzdelanie
všeobecné
stredoškolské
odborné
stredoškolské
vysokoškolské
3. stupňa
odborné
stredoškolské
vysokoškolské
2. stupna
zamestnanie súkromný sektor
súkromný
sektor
štátna správa verejná správa verejná správa
meno účastníka Jana Richard Zuzana Peter Dagmar
frekvencia
používania
internetu
každý deň každý deň
3 krát za
týždeň
5 krát za
týždeň
5 krát za
týždeň
5.6 Miesto a nástroje testovania
Keďže všetci účastníci testovania sú zamestnaní na trvalý pracovný pomer bolo pre
väčšinu obtiažne sa prispôsobiť a prísť na stanovené miesto v určitý čas. Po prehodnotení
vlastného technického príslušenstva som zvolil osobné stretnutia s účastníkmi testovania.
Pri testovaní sme využívali:
 počítač s webkamerou
 internetové pripojenie
 internetový prehliadač
 mikrofón
 softvér na sledovanie obrazovky (Camrecorder od spoločnosti Techsmith)
 poznámkový blok
5.7 Postup testovania
1. Používateľské testovanie pozostáva z nasledujúcich krokov, ktoré budú
podrobnejšie popísané v ďalších kapitolách:
2. Kladenie otázok užívateľom v úvode a v závere testovania
3. Samotné testovanie - zadanie a riešenie úloh
31
4. Moderátor testovania si popri vyššie uvedených krokoch zapisuje poznatky
z testovania, ktoré mu pomôžu pri analýze dát dotvoriť si celkový obraz
o účastníkovi a priebehu testovania. Kladenie otázok nám pomáha dotvoriť si
celkový obraz o myslení užívateľa pri používaní webu. Aj pri formulácii otázok
sme sa vyhli použitiu žargónu, dvojjazyčnosti a iným aspektom, ktoré by mohli
vyvolať nesprávne pochopenie otázok u respondentov. Otázky boli rozdelené do
dvoch častí: otázky, položené pred začatím testovania a otázky, ktoré sú položené
hneď po skončení. Otázky položené pred testovaním nám pomáhajú bližšie spoznať
a pochopiť účastníkov testovania. Otázky sme zvolili nasledovné:
5. Poznáte túto stránku?
( Predchádzajúca skúsenosť so stránkou by mohla ovplyvniť výsledky testovania.)
6. Na čo slúži, podľa vás táto stránka?
( Odpovede na túto otázku, môžu naznačiť chybnú komunikáciu web stránky.)
7. Otázky položené po testovaní:
8. Aký je váš dojem z používania stránky?
9. Ako by ste ohodnotili váš pocit z hľadiska jednoduchosti používania
10. Ako by ste ohodnotili váš pocit z hľadiska intuitívnosti používania
11. Aký prvok/funkcia vám pri používaní najviac nevyhovoval?
12. Účastníci testovania boli vyzvaní aby sformulovali voľne štruktúrovanú odpoveď
a následne aj škálovanú odpoveď v kategóriách:
13. Veľmi dobrý
14. Skôr lepší
15. Ani dobrý, ani zlý
16. Skôr horší
17. Veľmi zlý
18. Neviem
19. Zadanie a riešenie úloh
20. Úlohy sú jednou s najdôležitejších častí testovania použiteľnosti. Preto je ich
správna formulácia a nastavenie kľúčové. Do testovania sme zahrnuli úkony, ktoré
užívatelia najčastejšie na webe vykonávajú. Vo väčšine prípadov to bolo
vyhľadávanie rôznych informácii o neziskových organizáciách a vyhľadávanie
kontaktných údajov. Niektoré úlohy boli navrhnuté tak, aby užívateľ musel čo
najviac využívať navigáciu stránky. Tento typ úloh nám priniesol cenné dáta
o použiteľnosti navigačného systému webu. Pri konkrétnej formulácii úloh sme
32
dodržiavali niekoľko zásad.54 Úlohy neobsahujú žargón, dvojjazyčnosť a ani
akúkoľvek doslovnú spojitosť s žiadnym prvkom v testovanej web stránke.
Znamená to, že sme pri formulácii výskumnej úlohy nahradili napríklad slovo
„mesto“, ktoré sa nachádzalo priamo v navigačnom systéme stránky, iným slovným
spojením s rovnakým významom – v našom prípade „miesto bydliska“. Úloha by
mala byť jednoduchá na pochopenie a zároveň navodzovať reálnu situáciu.
21. Úlohy sme formulovali takto:
22. Predstavte si, že chcete vedieť viac informácií o organizácii "Well Giving". Ako by
ste postupovali?
23. Ste rozhodnutý/á darovať svoje 2% vybranej organizácii a potrebujete len stiahnuť
potrebné tlačivá….
24. Vráťte sa na domovskú stránku.
25. Ak by ste chceli zistiť aké organizácie pôsobia vo Vašom mieste
bydliska/pôsobiska, ako by ste to urobili?
26. Povedzme, že chcete zistiť aké neziskové organizácie vo Vašom meste sa venujú
"organizovaniu táborov". Ako by ste ich našli?
6 Výsledky výskumu
6.1 Výsledky heuristického hodnotenia
Pri hodnotení, sme analyzovanú web stránku porovnávali a hodnotili na základe
desiatich heuristík stanovených J.Nielsenom. Vychádzal som taktiež zo skúseností
a vedomostí nadobudnutých pri štúdiu a práci v oblasti webového a grafického dizajnu.
Výsledky sme rozdelili do menších častí, podľa hodnotených častí stránky.
6.1.1 Navigácia
Globálnu navigáciu na stránke dvepercenta.sk môžeme nájsť spoločne v jednom
riadku s možnosťami vyhľadávania. Je spracovaná rovnakým písmom, veľkosťou
a vizuálne splýva s možnosťami vyhľadávania. Oddelená je len jemnou čiarou, ktorá sa
v celkovom pojatí stráca. Je umiestnená medzi široký oranžový pás hlavičky a reklamný
banner, ktorý svojou veľkosťou a farebným spracovaním púta pozornosť. Tieto nedostatky
môžu užívateľa zmiasť a zvyšovať frustráciu a negatívnu emóciu pri prechádzaní stránkou.
54 RUBIN, J. – CHISNELL, L.: Handbook of Usability Testing, Second Edition:How to Plan, Design, and
Conduct Effective Tests. 2. vyd. Indianapolis: Wiley Publishing, 2008. s. 83
33
6.1.2 Vyhľadávanie a výsledky vyhľadávania
Analyzovanú webovú stránku môžeme označiť ako vyhľadávač neziskových
organizácii. Nosným prvkom vyhľadávača je teda vyhľadávacie pole a výsledky
vyhľadávania. Vyhľadávacie pole je ale relatívne malé a priľahlý výrazný reklamný text je
vizuálne dominantný. Ako bolo už spomenuté, vyhľadávanie je primárna funkcia stránky
preto by malo byť práve vyhľadávacie pole dominantou stránky.
K vyhľadávaciemu poľu sa viaže aj nastavenie vyhľadávania. To môžeme nájsť
priamo pod logom 2%, vedľa globálnej navigácie. Nastavenia vyhľadávania sa logicky a
opticky viažu k vyhľadávaciemu poľu. Nastavenia sú však umiestnené ďalej od
vyhľadávacieho poľa, oddelené reklamou. K poľu vyhľadávania sa nijako opticky neviažu
a užívateľ si pri vyhľadávaní nemusí spojiť tieto dva prvky stránky.
Funkcionalita nastavenia vyhľadávania na stránke je ale mierne odlišná ako jej
názov napovedá. Mohli by sme ju definovať skôr ako funkciu tzv. kategorizovania
vyhľadávania. V praxi ide o to, že užívateľ ešte pred zadaním kľúčového slova do
vyhľadávacieho poľa musí premýšľať, či je hľadaná fráza názvom organizácie, názvom
mesta alebo „kľúčovým slovom“. Užívateľ, môže mať s takouto kategorizáciou problém
a pri zlom výbere môže výrazne ovplyvniť výsledky vyhľadávania alebo úplne zamedziť
používateľovi v plynulom pokračovaní priechodom stránky. Pri používaní sa môže
u neskúsenejšieho používateľa dostaviť frustrácia alebo negatívna emócia spojená
s vyhľadávaním na analyzovanej web stránke.
Medzi najdôležitejšie funkcie vyhľadávača patrí jednoznačne funkcia zobrazenia
relevantných výsledkov vyhľadávania pre zadané slovné spojenie. V prípade správneho
zadania kľúčových slov a správneho nastavenia „kategorizácie vyhľadávania“, funkcia
pracuje správne a zobrazí relevantné výsledky z ktorých si užívateľ dokáže bez problémov
vybrať. Avšak pri nesprávnom zvolení kľúčového slova alebo pri nesprávnom zaradení
kľúčového slova do príslušnej „kategórie“ vyhľadávania, užívateľovi stránka neposkytne
žiadne výsledky vyhľadávania alebo ich relevancia nie je dostatočná na to, aby si užívateľ
s ponuky vybral. Tento scenár neúspešného vyhľadávania môže viesť k opakovaným
pokusom vyhľadávania alebo k úplnému odchodu zo stránky.
Výsledky vyhľadávania sú pri poskytnutí viacerých výsledkov dobre čitateľné
a okamžite viditeľné. Avšak pri poskytnutí len jedného alebo dvoch výsledkov
vyhľadávania sa výsledky strácajú medzi reklamnými bannermi, ktoré ich obklopujú.
Užívateľ musí v tomto prípade dôkladne skenovať stránku aby našiel poskytnuté výsledky
34
vyhľadávania. Keďže ide o dôležitú funkciu web stránky, ktorá je zameraná na
vyhľadávanie, tak považujem spracovanie tejto funkcie za veľmi nevhodné.
6.1.3 Reklamné bannery
Reklama je pre webové sídla neziskových organizácii veľmi dôležitá. Pomáha
organizáciám financovať chod a údržbu stránky. V prípade analyzovanej web stránky, nie
je reklama riešená veľmi vhodne. Reklamné bannery spolu s reklamným textom na hlavnej
stránke pôsobia veľmi nekonzistentne a rušivo. Rušivosť podporuje aj fakt, že reklamy sa
náhodne menia a blikajú. Rozmermi sú reklamné bannery väčšie ako iné dôležité prvky
stránky a tým pútajú na seba príliš veľkú pozornosť. To môže viesť k nesprávnej
identifikácii kľúčových prvkov stránky a k spôsobeným chybám pri používaní.
6.2 Výsledky užívateľského testovania
Užívateľské testovanie pomohlo identifikovať niekoľko problémov použiteľnosti.
Medzi problémy s najvyššou prioritou patrili:
 Nesprávne pochopenie „kategorizácie“ vyhľadávania
 Absencia rozšíreného vyhľadávania
 Ponuka nerelevantných výsledkov vyhľadávania
 Nesprávna identifikácia reklám používateľom
 Veľkosť nedôležitých oznámení v kontraste s dôležitými.
Spomenuté problémy sú pre plynulý a používateľsky prívetivý web kritické a preto
sú pre nás tieto problémy vo fáze návrhu prototypu najdôležitejšie. Pri užívateľskom
testovaní sme objavili aj menej kritické problémy, ktoré ovplyvňujú plynulý priechod
stránkou a napĺňanie cieľov len minimálne.
 Nevýrazné tlačidlá pre stiahnutie darovacích formulárov.
 Nevýrazná veľkosť vyhľadávacieho poľa.
Počas testovania sme objavili viacero problémov použiteľnosti a preto môžeme
považovať testovanie za úspešné. Pri testovaní sa nám potvrdili niektoré nedostatky, ktoré
sme uviedli v heuristickom hodnotení.
V nasledujúcej časti bližšie opíšeme vyššie spomenuté problémy, ktoré sa vyskytli
pri testovaní.
6.2.1.1 Nesprávne pochopenie „kategorizácie“ vyhľadávania
35
Niektorí používatelia pri testovaní úplne ignorovali „kategorizovanie“
vyhľadávania a zadávali kľúčové slová do vyhľadávacieho poľa. Napríklad používateľka
Zuzana pri vyhľadávaní organizácii v mieste jej pôsobiska zadala do vyhľadávacieho poľa
„Karlova Ves“ aj keď bola zvolená kategória vyhľadávania „Názov organizácie“. Až po
zobrazení nerelevantných výsledkov, začala Zuzana preskúmavať stránku podrobnejšie.
Dôkladnejším skúmaním našla správnu kategóriu vyhľadávania. Iný typ očakávaní mal
používateľ Peter, ktorý uviedol, že pri kliknutí na kategóriu „mesto“, očakával, že mu
stránka ponúkne zoznam miest na Slovensku.
6.2.1.2 Absencia rozšíreného vyhľadávania
Návštevník webu problém absencie akéhokoľvek rozšíreného vyhľadávania
nepocíti, ak potrebuje vyhľadať jednoduchú informáciu 55 . Pokiaľ má však užívateľ
náročnejšie požiadavky na vyhľadávanie, stránka mu neposkytuje žiadnu pohodlnú cestu
ako svoju požiadavku naplniť. Úloha 5. v našom testovaní predstavovala komplikovanejšiu
požiadavku užívateľa na vyhľadávanie. V úlohe sa však nachádzajú hľadané výrazy, ktoré
by sme mohli zaradiť do viacerých kategórii vyhľadávania. Účastníci k zadanej úlohe
pristupovali rôzne. Jana zvolila stratégiu hľadania cez kľúčové slová, kde do poľa
vyhľadávania zadala „bratislava tábor“. S ponúknutými výsledkami sa síce uspokojila, ale
zároveň dodala že zvolený postup nepovažuje za najlepší. Iný prístup zvolila Dagmar,
ktorá najprv vyhľadala miesto jej pôsobiska – Bratislava. Keďže s ponúknutými
výsledkami nebola spokojná dúfala, že kliknutím na „Kľúčové slová“ bude môcť jej
vyhľadávanie rozšíriť. Stránka jej však ponúkla nové hľadanie pomocou vybranej
kategórie, kde Dagmar zadala „tábor“. Výsledky vyhľadávania jej nepriniesli vhodné
výsledky a preto zhodnotila, že úlohu dokončiť nevie. Zároveň sa vyjadrila, že by ocenila
na stránke rozšírené vyhľadávanie. Podobne hodnotili úlohu aj Peter, Richard aj Zuzana.
6.2.1.3 Ponuka nerelevantných výsledkov vyhľadávania
Vyhľadávače akýchkoľvek informácii by si mali na ponuke relevantných výsledkov
vyhľadávania zakladať. Z uvedeného hľadiska je zistený problém pre stránku kľúčový.
Príčiny priamo súvisia s problémami popísanými vyššie. Užívateľ je často na stránke
limitovaný zaradením svojho kľúčového výrazu do kategórie vyhľadávania. Ako
obmedzenie pri vyhľadávaní môžeme chápať aj absenciu rozšíreného vyhľadávania. Tento
55 Pod týmto pojmom rozumieme informácie ako napríklad: meno organizácie, názov mesta, dediny, aktivitu
alebo iný výraz, ktorý by sme mohli jednoducho zaradiť do troch ponúkaných kategórii.
36
aspekt limituje užívateľa v slobode vyhľadávania a ovplyvňuje výsledky, keďže sa
užívateľ musí prispôsobovať týmto obmedzeniam a meniť stratégiu vyhľadávania.
6.2.1.4 Nesprávna identifikácia reklám používateľom
Reklamy sú dôležitou súčasťou webových stránok neziskových organizácii.
Pomáhajú udržiavať web stránku online a môžu motivujú tvorcov k jej ďalšiemu rozvoju.
Reklamné bannery ale môžu užívateľov vyrušovať pri plynulom prechádzaní stránkou. Pri
testovaní sme objavili problém, pri ktorom niektorí používatelia nerozpoznali reklamu od
ostatných prvkov na stránke. Napríklad používateľ Peter sa po testovaní vyjadril, že pri
prechode stránkou vyhodnotil blok troch reklám na úvodnej obrazovke nie ako reklamný
blok ale ako „posledne použité položky“ alebo „náhodne sa objavujúce výsledky“.
Negatívny postoj zaujímali aj ostatní účastníci testovania. Vyrušovali ich pri najmä
blikajúce reklamy.
6.2.1.5 Veľkosť nedôležitých oznámení v kontraste s dôležitými.
Veľkosť dôležitých oznámení na stránke je kľúčová z hľadiska komunikácie web
stránky s užívateľom. Ak nie je dodržaná hierarchia (dôležitá informácia – najväčšia;
najmenej dôležitá informácia – najmenšia) nemusí byť informácia správne prijatá
recipientom. Dagmar pri plnení úlohy č. 2 najskôr preskenovala zrakom celú stránku, kým
našla potrebné východisko v zadanej úlohe. Richard pri plnení rovnakej úlohy ako
Dagmar, nenašiel vhodné tlačidlá pre stiahnutie potrebných tlačív. Tieto dve situácie
vhodne ilustrujú objavený problém, kde spomínané tlačidlá boli umiestnené v strede
stránky. Boli však príliš malé a obklopené ostatnými prvkami stránky.
Na záver kapitoly uvádzame tabuľku so štatistickým výskytom konkrétneho
problému. Čísla v stĺpci „početnosť výskytu“ reprezentujú počet užívateľov v testovaní
u ktorých sme zaznamenali konkrétny problém.
37
Tabuľka č. 2
Početnosť výskytu objavených projektov.
popis problému početnosť výskytu
nesprávne pochopenie „kategorizácie“
vyhľadávania
3x
nesprávna identifikácia reklám 1x
detailné skenovanie stránky 4x
nespokojnosť s zobrazenými výsledkami 2x
neschopnosť dokončiť zadanú úlohu 2x
6.3 Zhrnutie výsledkov
V analytickej časti tejto práce sme využili dva nástroje na zistenie nedostatkov
použiteľnosti stránky. Heuristické hodnotenie a užívateľské testovanie. Na základe dát,
ktoré nám poskytli tieto nástroje sme identifikovali niekoľko problémov v dizajne stránky.
Technika heuristického hodnotenia nám poskytla predbežný pohľad na problémy
v užívateľskom rozhraní. Tieto informácie nám slúžia ako predbežný rámec problémov na
ktorý sa v testoch použiteľnosti zamerať. V praktickej časti práce sme analyzovali
jednotlivé prvky web stránky. Pri analýze sme vychádzali s desiatich heuristík 56 pre
UID57, ktoré definoval svetovo uznávaný expert na použiteľnosť J. Nielsen. Ako kľúčové
prvky stránky sme vyhodnotili Navigáciu, Vyhľadávanie a Reklamné bannery, ktoré sme
podrobili heuristickému hodnoteniu.
V globálnej navigácii sme vyhodnotili ako nedostatok: formátovanie písma
a umiestnenie navigácie na stránke. Prvok vyhľadávania sme hodnotili v troch
kategóriách.
 Vyhľadávacie pole
 Možnosti vyhľadávania
 Zobrazenie relevantných výsledkov
V prvej menovanej sme ako nedostatok označili veľkosť a umiestnenie
vyhľadávacieho pola. Ako chybu použiteľnosti vnímame aj funkcionalitu možností
56 NIELSEN, J.: 10 Usability Heuristics for User Interface Design. [online]. [2000-19-03]. Dostupné na:
<http://www.nngroup.com/articles/ten-usability-heuristics/>
57 UID – User Interface Design
38
vyhľadávania, ktorú môžeme definovať skôr ako funkciu tzv. kategorizovania
vyhľadávania. Tento nedostatok v dizajne stránky vážne ovplyvňuje relevanciu výsledkov
vyhľadávania.
Heuristické hodnotenie nám poskytlo vhodnú východiskovú situáciu pre
užívateľské testovanie. V tomto testovaní sme presnejšie identifikovali niekoľko
problémov použiteľnosti. Medzi problémy s najvyššou prioritou patrili:
 Nesprávne pochopenie „kategorizácie“ vyhľadávania
 Absencia rozšíreného vyhľadávania
 Ponuka nerelevantných výsledkov vyhľadávania
 Nesprávna identifikácia reklám používateľom
 Veľkosť nedôležitých oznámení v kontraste s dôležitými.
Tieto problémy sme bližšie popísali v predchádzajúcich kapitolách. Pri
užívateľskom testovaní sme identifikovali aj menej kritické problémy, ktoré ovplyvňujú
plynulý priechod stránkou len minimálne. Zaradujeme tam nasledovné:
 Nevýrazné tlačidlá pre stiahnutie darovacích formulárov.
 Nevýrazná veľkosť vyhľadávacieho poľa.
Na základe zistených nedostatkov v použiteľnosti sme navrhli riešenia a vytvorili
prototyp, ktorý reprezentuje doporučené riešenia na zlepšenie použiteľnosti analyzovanej
web stránky.
7 Návrh riešenia
Pri navrhovaní riešenia som ako prvý krok zvolil tvorbu jednoduchého wireframu
nakresleného na papier. Wireframe môžeme definovať ako predbežný jednoduchý model
budúceho používateľského prostredia v ktorom sú zachované všetky dôležité prvky
stránky. Wireframe má slúžiť ako jednoduchá prezentácia budúceho prototypu, ktorý má
za cieľ vyriešiť všetky objavené problémy. Existujú viaceré formy wireframu, ale v tejto
fáze som zvolil jednoduchý drôtený model na papieri. Táto forma mi poslúži ako
východiskový pre tvorbu pokročilejšieho interaktívneho prototypu, ktorý bude lepšie
reprezentovať funkcionalitu a vzhľad.
39
Následne som tento wireframe prepracoval do digitálnej a interaktívnej podoby. Na
vytvorenie prototypu som si vybral program Axure RP pre jednoduchosť
používania, komplexnosť a rozsah ponúkaných možností. Axure RP je profesionálny
nástroj pre tvorbu wireframov a interaktívnych prototypov, ktorý je zameraný na tvorbu
desktopových a webových užívateľských prostredí. Využil som preto 14 dňovú bezplatnú
verziu pre návrh interaktívneho prototypu, ktorý pomôže vyriešiť väčšinu identifikovaných
chýb použiteľnosti na stránke a zlepší užívateľský zážitok z prezerania.
7.1.1.1 Základné zobrazenie
Pri tvorbe prototypu som sa riadil nadobudnutými poznatkami o chybách
použiteľnosti, ktoré sme objavili pri užívateľskom testovaní. Pri návrhu som predovšetkým
dbal na oblasti vyhľadávania. Prototyp rieši logickú nenadväznosť možností vyhľadávania
s vyhľadávacím poľom. Umiestnil som prvky možností vyhľadávania priamo
k vyhľadávaciemu poľu a umiestnil som obi dva prvky do šedého rámu aby som zvýraznil
ich logickú príslušnosť. Vyhľadávacie pole som pri navrhovaní zväčšil aby sa z oblasť
vyhľadávania stala opticky dominantnou (viď. príloha B).
Globálna navigácia sa v prototype nachádza na pravej strane v oranžovom páse. Na
tomto mieste ju užívateľ pri tomto type stránok obvykle očakáva.58 Je spracovaná bielym
tučným písmom aby bola na stanovenom mieste dobre vidieť.
Povahu, veľkosť a tvar reklamných bannerov som pri návrhu zachoval, ale
umiestnil som ich do šedého rámu, ktorým potlačím optickú disharmóniu a šum pri
prehliadaní, ktorý vďaka týmto reklamám, na domovskej stránke panoval. V šedom rámci
pôsobia stabilne a usporiadane, pričom sa nemení povaha ani spracovanie jednotlivých
reklám.
7.1.1.2 Výsledky vyhľadávania
Stránka s ponukou výsledkov vyhľadávania je veľmi neprehľadná v prípade ak sa
užívateľovi zobrazí len jeden alebo dva výsledky (viď. príloha C). Dizajn stránky núti
používateľa pohľadom skenovať celú stránku a hľadať nevýrazný výsledok vyhľadávania.
Výsledky potláča najmä reklama, ktorá sa nachádza priamo pod navigáciou. Pri niektorých
zobrazeniach môže byť len textová, no prevažuje štvorcový reklamný banner, ktorý svojou
veľkosťou a zasadením do príliš širokého žltého rámu, opticky potláča najdôležitejšiu
informáciu na stránke – výsledok vyhľadávania. Preto som v prototype umiestnil túto
58 http://www.webdesignerdepot.com/2011/11/navigation-patterns-for-ten-common-types-of-websites/
40
reklamu na pravú stranu (viď. príloha D). Navrhnuté riešenie ponúka zobrazenie reklamy
na rovnako výhodnom mieste na stránke, ale nezasahuje tak radikálne do ponúknutých
výsledkov.
Panel, ktorý užívateľovi ponúkal informácie o počte nájdených organizácii som pri
návrhu zväčšil a umiestnil na dominantnejšiu pozíciu v akej je v aktuálnej verzii stránky.
Text som zväčšil a oddelil pre lepšiu čitateľnosť a prehľadnosť. Reklamy, ktoré sa
nachádzajú na spodnej strane stránky som umiestnil do šedého rámu ako pri domovskej
stránke.
Stránka užívateľom však neponúka len jeden výsledok vyhľadávania. Vo väčšine prípadov
ponúka väčšie množstvo výsledkov (viď príloha E). V takom prípade je situácie mierne
odlišná. Výsledky vyhľadávania sa svojím počtom stávajú dominantou a nestrácajú sa tak
v obklopení reklám. Paradoxne sa situácia mení natoľko, že spodný pás reklám, bežný
užívateľ nemusí ani uvidieť ak mu stránka ponúkne veľa výsledkov vyhľadávania. Je to
spôsobené tým, že je veľmi pravdepodobné, že si užívateľ z veľkého množstva
poskytnutých vyberie, alebo stratí záujem si prezrieť všetky ponúknuté výsledky. Aj keď
reklamy môžu užívateľov otravovať, tak pre prevádzkovateľov stránky sú dôležitým
zdrojom financií na prevádzku web stránky. Pri navrhovaní prototypu som dbal aj na túto
skutočnosť a umiestnenie reklamných bannerov som umiestnil na pravú stranu, hneď vedľa
výsledku vyhľadávania (viď. príloha F). Tieto bannery sú rovnomerne rozmiestnené pozdĺž
všetkých výsledkov vyhľadávania. Pri tomto kroku som dbal, na rovnomerné
rozmiestnenie, keďže vysoká frekvencia zobrazovaných reklám pri výsledkoch by mohla
užívateľa vyrušovať.
7.1.1.3 Stránka vybranej organizácie
Pri návrhu riešenie pre stránku vybranej organizácie som sa hlavne zameral na
sprehľadnenie ponúkaných informácii. Všetky informácie sú na stránke uvedené veľmi
malým písmom (viď príloha G). Pri navrhovaní prototypu som kládol dôraz na
sprehľadnenie komunikovaných informácii a zvýraznenie kľúčových prvkov stránky.
Veľkosť písma bola zväčšená a kontaktné informácie boli vložené do šedého rámu aby boli
opticky zdôraznené a nezanikali pri ostatných textoch na stránke (viď príloha H). Podľa
vyjadrenia prevádzkovateľov webu, ktorí uviedli, že preferujú darovanie dvoch percent cez
systém Ďakujeme.sk sme tlačidlo pre darovanie cez tento systém posunuli vyššie oproti
pôvodnej verzii. Tlačidlá na stiahnutie potrebných tlačív pre darovanie dvoch percent sme
zväčšili a umiestnili pod kontaktné údaje organizácie. Reklamné bloky sme po vzore
41
predchádzajúcich stránok umiestnili do šedého rámu. Ich pozícia na stránke však zostala
rovnaká.
7.1.1.4 Odporúčania
V rámci odporúčaní by bolo vhodné aplikovať zmeny navrhnuté v predchádzajúcej
kapitole. Domnievam sa, kategorizácia vyhľadávania je prvkom, ktorý komplikuje prácu
a pochopenie. Preto si myslím, že primárna funkcia vyhľadávania, by mohla byť
spracovaná po vzore ostatných popredných svetových vyhľadávačov. Konkrétne ide
o odstránenie funkcie kategorizácie vyhľadávania a ponechanie vyhľadávacieho poľa
samostatne. Vyhľadávací systém, by teda podľa zadaného výrazu automaticky vyhľadal
a ponúkol najrelevantnejšie výsledky, bez ohľadu na to či je výraz v nejakej kategórii.
Kategorizáciu vyhľadávania by bolo vhodné ponechať ako doplnkovú službu, ktorú si
návštevník zvolí sám v prípade potreby. Aplikácia takejto zmeny môže byť ale pre
neziskovú organizáciu finančne zaťažujúca. Vyhľadávacie systémy pozostávajú so
zložitých algoritmov, ktorých upravenie môže stáť organizáciu veľa penazí. Keďže som
dbal na to aby navrhnutý prototyp v predchádzajúcej kapitole ponúkal reálne riešenia pre
neziskovú organizáciu, tento návrh som tam nezapracoval.
42
Záver
Práca ponúka prehľad problematiky dizajnu webových stránok, kde sme
analyzovali postavenie webovej stránky v rámci masovej komunikácie, ako aj popísali
problematiku užívateľov a prevádzkovateľov webových stránok. V ďalších kapitolách sme
načrtli problematiku návrhu webovej stránky, v ktorej sme sa sústredili na jej podstatné
elementy ako sú informačná architektúra a navigačné systémy. Nevynechali sme ani
ostatné aspekty tvorby webových stránok, napríklad text a grafické spracovanie. V závere
teoretickej časti sme sa venovali oblasti User Experience, kde sme podrobnejšie rozobrali
problematiku použiteľnosti webových stránok.
V praktickej časti časti práce sme podrobne popísali vybrané metódy hodnotenia
použiteľnosti stránky. Z výsledkov heuristického hodnotenia a užívateľského testovania
vybranej stránky vyplynulo niekoľko okruhov problémov, ktoré sme podrobne opísali
a definovali ich závažnosť. Poskytli nám východisko pre návrh riešenia a tvorbu prototypu
stránky. Dúfam, že vytvorený prototyp nájde v budúcnosti uplatnenie v praxi a pomôže
stránke dvepercenta.sk eliminovať identifikované problémy. Zároveň verím, že skúsenosti
nadobudnuté na pri tvorbe bakalárskej práce v budúcnosti využijem, či už v profesnom
alebo osobnom živote.
43
8 Zoznam Literatúry a zdrojov
MORVILLE, P. – ROSENFELD, L.: Information Architecture for the World Wide Web. 3.
vyd. Sebastopol : O’Reilly Media, 2006. 528 s. ISBN-10: 0-596-52734-9.
GARRETT, J. J.: The Elements of User Experience: User-Centered Design for the Web
and Beyond. 2. vyd. Berkeley: New Riders, 2011. 191 s. ISBN 10: 0-321-68368-4
NIELSEN, J.: Usability Engineering. Mountain View: Morgan Kaufmann, 1993, 352 s.
ISBN: 1-12-518406-9
KRUG, S.: Nenuťte uživatele přemýšlet!. 2. vyd. Brno: Computer Press, 2006, 167 s.
ISBN: 80-251-1291-8
GRAY, D.: Profesionální design na webu. Brno: Soft Press s.r.o., 1999. 223 s. ISBN 80-
902824-1-5
MEYER, P.: Attitude Is Everything: If You Want to Succeed Above and Beyond. Scotts
Valley: Meyer Resource Group, 2003, 26 s. ISBN: 978-0-89811-304-4
MIOVSKÝ, M.: Kvalitativní přístup a metody v psychologickém výzkumu. Praha: Grada,
2006. 332 s. ISBN 80-247136-2-4
RUBIN, J. – CHISNELL, L.: Handbook of Usability Testing, Second Edition: How to
Plan, Design, and Conduct Effective Tests. 2. vyd. Indianapolis: Wiley Publishing, 2008.
386 s. ISBN: 978-0-470-18548-3.
Internetové zdroje:
LUHA, M.: Masová komunikácia na zjedenie. [online]. [2014-02-04]. Dostupné na:
<http://www.masmedialne.info/marian-luha-masova-komunikacia-na-zjedenie-
koncentracia-kontorola-a-globalizacia-medii/>.
Contextual Inquiry. [online]. [2010-01-01]. Dostupné na:
<http://www.usabilitybok.org/contextual-inquiry>.
Personas. [online]. [2014-06-03]. Dostupné na: <http://www.usability.gov/how-to-and-
tools/methods/personas.html>.
ŠTEFUNKO - Návrh a tvorba webovej stránky BP
ŠTEFUNKO - Návrh a tvorba webovej stránky BP
ŠTEFUNKO - Návrh a tvorba webovej stránky BP
ŠTEFUNKO - Návrh a tvorba webovej stránky BP
ŠTEFUNKO - Návrh a tvorba webovej stránky BP
ŠTEFUNKO - Návrh a tvorba webovej stránky BP
ŠTEFUNKO - Návrh a tvorba webovej stránky BP
ŠTEFUNKO - Návrh a tvorba webovej stránky BP
ŠTEFUNKO - Návrh a tvorba webovej stránky BP
ŠTEFUNKO - Návrh a tvorba webovej stránky BP

More Related Content

Viewers also liked

Empowering Change Through Open Source - Dozuki Workshop Series
Empowering Change Through Open Source - Dozuki Workshop SeriesEmpowering Change Through Open Source - Dozuki Workshop Series
Empowering Change Through Open Source - Dozuki Workshop SeriesDozuki Software
 
The Basics of ISO Certification
The Basics of ISO CertificationThe Basics of ISO Certification
The Basics of ISO CertificationDozuki Software
 
iFixit's Plan to Train the World - Dozuki Workshop Series
iFixit's Plan to Train the World - Dozuki Workshop SeriesiFixit's Plan to Train the World - Dozuki Workshop Series
iFixit's Plan to Train the World - Dozuki Workshop SeriesDozuki Software
 
Nuevos métodos y técnicas periodisticas para llegar al ciudadano
Nuevos métodos y técnicas periodisticas para llegar al ciudadanoNuevos métodos y técnicas periodisticas para llegar al ciudadano
Nuevos métodos y técnicas periodisticas para llegar al ciudadanoSergio López
 
The Factory Hackathon: Manufacturing Innovation - Dozuki Workshop Series
The Factory Hackathon: Manufacturing Innovation - Dozuki Workshop SeriesThe Factory Hackathon: Manufacturing Innovation - Dozuki Workshop Series
The Factory Hackathon: Manufacturing Innovation - Dozuki Workshop SeriesDozuki Software
 
Training Within Industry (TWI) 101 - Dozuki Workshop Series
Training Within Industry (TWI) 101 - Dozuki Workshop SeriesTraining Within Industry (TWI) 101 - Dozuki Workshop Series
Training Within Industry (TWI) 101 - Dozuki Workshop SeriesDozuki Software
 

Viewers also liked (9)

Empowering Change Through Open Source - Dozuki Workshop Series
Empowering Change Through Open Source - Dozuki Workshop SeriesEmpowering Change Through Open Source - Dozuki Workshop Series
Empowering Change Through Open Source - Dozuki Workshop Series
 
The Basics of ISO Certification
The Basics of ISO CertificationThe Basics of ISO Certification
The Basics of ISO Certification
 
iFixit's Plan to Train the World - Dozuki Workshop Series
iFixit's Plan to Train the World - Dozuki Workshop SeriesiFixit's Plan to Train the World - Dozuki Workshop Series
iFixit's Plan to Train the World - Dozuki Workshop Series
 
Nuevos métodos y técnicas periodisticas para llegar al ciudadano
Nuevos métodos y técnicas periodisticas para llegar al ciudadanoNuevos métodos y técnicas periodisticas para llegar al ciudadano
Nuevos métodos y técnicas periodisticas para llegar al ciudadano
 
Подорож до Країни Читалії
Подорож до Країни ЧиталіїПодорож до Країни Читалії
Подорож до Країни Читалії
 
Visita a la Biblioteca, curso 2015-16
Visita a la Biblioteca, curso 2015-16Visita a la Biblioteca, curso 2015-16
Visita a la Biblioteca, curso 2015-16
 
The Factory Hackathon: Manufacturing Innovation - Dozuki Workshop Series
The Factory Hackathon: Manufacturing Innovation - Dozuki Workshop SeriesThe Factory Hackathon: Manufacturing Innovation - Dozuki Workshop Series
The Factory Hackathon: Manufacturing Innovation - Dozuki Workshop Series
 
Training Within Industry (TWI) 101 - Dozuki Workshop Series
Training Within Industry (TWI) 101 - Dozuki Workshop SeriesTraining Within Industry (TWI) 101 - Dozuki Workshop Series
Training Within Industry (TWI) 101 - Dozuki Workshop Series
 
UCM MCQ
UCM MCQUCM MCQ
UCM MCQ
 

Similar to ŠTEFUNKO - Návrh a tvorba webovej stránky BP

Master‘s Thesis - Mobile technologies used in journalism
Master‘s Thesis - Mobile technologies used in journalismMaster‘s Thesis - Mobile technologies used in journalism
Master‘s Thesis - Mobile technologies used in journalismMartin Honisek
 
The impact of social media on position of web site in search engine
The impact of social media on position of web site in search engineThe impact of social media on position of web site in search engine
The impact of social media on position of web site in search engineJakub Slámka
 
Diplomova praca_Lukas Dzuroska
Diplomova praca_Lukas DzuroskaDiplomova praca_Lukas Dzuroska
Diplomova praca_Lukas DzuroskaLukas Dzuroska
 

Similar to ŠTEFUNKO - Návrh a tvorba webovej stránky BP (7)

Master‘s Thesis - Mobile technologies used in journalism
Master‘s Thesis - Mobile technologies used in journalismMaster‘s Thesis - Mobile technologies used in journalism
Master‘s Thesis - Mobile technologies used in journalism
 
The impact of social media on position of web site in search engine
The impact of social media on position of web site in search engineThe impact of social media on position of web site in search engine
The impact of social media on position of web site in search engine
 
Bachelor thesis
Bachelor thesisBachelor thesis
Bachelor thesis
 
Diplomova praca_Lukas Dzuroska
Diplomova praca_Lukas DzuroskaDiplomova praca_Lukas Dzuroska
Diplomova praca_Lukas Dzuroska
 
Obchodná značka
Obchodná značkaObchodná značka
Obchodná značka
 
zaverecna_prace (1)
zaverecna_prace (1)zaverecna_prace (1)
zaverecna_prace (1)
 
LEAD USER FINAL PDF
LEAD USER FINAL PDFLEAD USER FINAL PDF
LEAD USER FINAL PDF
 

ŠTEFUNKO - Návrh a tvorba webovej stránky BP

  • 1. UNIVERZITA SV. CYRILA A METODA V TRNAVE FAKULTA MASMEDIÁLNEJ KOMUNIKÁCIE NÁVRH A TVORBA WEB STRÁNKY Bakalárska práca 2014 Ivan Štefunko
  • 2. UNIVERZITA SV. CYRILA A METODA V TRNAVE FAKULTA MASMEDIÁLNEJ KOMUNIKÁCIE NÁVRH A TVORBA WEB STRÁNKY Bakalárska práca Študijný program: masmediálna komunikácia Študijný odbor: 3.2.3 masmediálne štúdiá Bc. KOMU: 7218700 Školiace pracovisko: katedra masmediálnej komunikácie Školiteľ: PhDr. Peter Murár, PhD. 2014 Ivan Štefunko
  • 3. SEM VLOŽTE ZADANIE S ORIGINÁLNYMI PODPISMI[14 b.] ZODPOVEDNÝCH
  • 4. Čestné vyhlásenie Vyhlasujem, že som predkladanú bakalársku prácu „Návrh a tvorba web stránky“ spracoval samostatne a pod odborným vedením školiteľa bakalárskej práce. Použitú literatúru uvádzam v zozname použitej literatúry a zároveň osvedčujem použité citáty. Potvrdzujem tiež, že elektronická forma predkladanej bakalárskej práce je 100% identická s tlačenou formou. V Trnave dňa ................................... .............................................................. vlastnoručný podpis
  • 5. ABSTRAKT ŠTEFUNKO, Ivan: Návrh a tvorba web stránky. [Bakalárska práca] / Ivan Štefunko – Univerzita sv. Cyrila a Metoda v Trnave. Fakulta masmediálnej komunikácie; Katedra masmediálnej komunikácie. – Školiteľ: PhDr. Peter Murár, PhD. – Stupeň odbornej kvalifikácie: Doktor. - Trnava : FMK UCM, 2014. počet s. 45 Bakalárska práca s názvom Dizajn a tvorba web stránky sa zaoberá problematikou webových stránok so zameraním na použiteľnosť. Práca má teoreticko-empirický charakter a je rozdelená do niekoľkých kapitol. V prvých kapitolách približuje problematiku web stránok vo všeobecnosti. V ďalších častiach sa zameriava na dôležité aspekty tvorby web stránok a v kapitole Metodika, práca objasňuje detaily použitých metód. Na základe výsledkov testovania použiteľnosti práca navrhuje riešenia vo forme prototypu. Kľúčové slová: Dizajn. Web. Internet. Web stránka. Tvorba webovej stránky. Webový dizajn. Použiteľnosť. Prototyp.
  • 6. ABSTRACT ŠTEFUNKO, Ivan: Design and Development of website [Bachelor Thesis] / Ivan Štefunko. – University of Ss. Cyril and Methodius in Trnava. Faculty of Mass Media Communication; Department of Mass Media Communication – Supervisor: PhDr. Peter Murár, PhD. Degree of professional qualification: Doctor. - Trnava: FMK UCM, 2014. 45 p. Bachelor thesis, titled Design and Development of website, deals with issues about websites with focus on its usability. Thesis has theoretical – empirical nature and it is divided into several chapters. In the first chapters, thesis is approaching the issue of websites in general. Following sections are focused on the important aspects of website development and in Methodic section, thesis clearifies details of the used methods. Based on the results of the usability testing, work proposes a solution in the form of a prototype. Key words: Design. Web. Internet. Website. Development of website. Web design. Usability. Prototype.
  • 7. 1 PREDHOVOR Internet je v súčasnosti neodmysliteľným aspektom životného štýlu mnohých ľudí. Výsledok ľudskej vynaliezavosti a tvorivosti mení naše zvyky, správanie, vzťahy i náhľad na svet. Internet je teda pre ľudí veľmi dôležitým aspektom života. Webové stránky ako základný kameň internetu, je však mnoho krát výsledok dlhého snaženia jednotlivcov alebo tímov. V bakalárskej práci som sa pokúsil priblížiť pohľad „za oponu“ tvorby webových stránok. Kľúčovým faktorom pri výbere témy bakalárskej práce bola aj osobná iniciatíva v oblasti webového dizajnu. Pri spracovávaní témy som vychádzal zo svetovej odbornej literatúry a dostupných zdrojov na internete. Keďže sa jedná o tému relatívne novú oproti ostatným, dostupnosť kvalitných knižných zdrojov je porovnateľná s kvalitnými odbornými zdrojmi dostupnými na internete. V teoretickej časti práca podrobnejšie spracováva problematiku dizajnu a tvorby web stránok a v metodickej časti podrobne opisuje zvolené metódy, ktoré mi umožnili dosiahnuť kvalitné výsledky. Na základe výsledkov som navrhol prototyp, ktorý prezentuje riešenia na nedostatky v dizajne stránky. Touto cestou by som sa chcel poďakovať PhDr. Petrovi Murárovi, PhD., ktorý mi poskytoval odborné a cenné rady pri písaní bakalárskej práce. Zároveň ďakujem svojej rodine, ktorý mi bola oporou v najťažších chvíľach tvorby. Bakalárska práca má 86 399 znakov.
  • 8. 2 Obsah PREDHOVOR......................................................................................................................1 1 Úvod do problematiky .................................................................................................4 1.1 Význam web stránky...............................................................................................5 1.1.1 Ciele a potreby používateľov...........................................................................5 1.1.2 Modely užívateľov podľa informačnej potreby ...............................................6 1.2 Výskum užívateľov.................................................................................................7 1.2.1 Kontextové dotazovanie...................................................................................7 1.2.2 Analýza úloh....................................................................................................8 1.2.3 Užívateľské testovanie.....................................................................................8 1.2.4 Metóda tvorby tzv. Persony.............................................................................8 1.3 Ciele a potreby prevádzkovateľov stránky..............................................................9 1.3.1 Meranie cieľov...............................................................................................10 2 Návrh webovej stránky..............................................................................................11 2.1 Informačná architektúra ........................................................................................12 2.2 Navigácia...............................................................................................................15 2.2.1 Vstavané navigačné systémy .........................................................................16 2.2.2 Doplnkové navigačné systémy.......................................................................18 2.3 Grafické spracovanie navigačných systémov .......................................................18 2.4 Text........................................................................................................................19 2.5 Vizuálny dizajn web stránky.................................................................................20 3 User Experience..........................................................................................................21 3.1 User Centered Design............................................................................................22 4 Použiteľnosť...............................................................................................................22 4.1 Metódy hodnotenia použiteľnosti .........................................................................23 5 Metodika .....................................................................................................................27 5.1 Výskumný problém...............................................................................................27 5.2 Výskumný cieľ ......................................................................................................27 5.3 Charakteristika objektu skúmania .........................................................................27 5.4 Metóda výskumu...................................................................................................28
  • 9. 3 5.5 Vzorka pre testovanie............................................................................................28 5.6 Miesto a nástroje testovania ..................................................................................30 5.7 Postup testovania...................................................................................................30 6 Výsledky výskumu .....................................................................................................32 6.1 Výsledky heuristického hodnotenia ......................................................................32 6.1.1 Navigácia .......................................................................................................32 6.1.2 Vyhľadávanie a výsledky vyhľadávania........................................................33 6.1.3 Reklamné bannery..........................................................................................34 6.2 Výsledky užívateľského testovania.......................................................................34 6.3 Zhrnutie výsledkov................................................................................................37 7 Návrh riešenia ............................................................................................................38 ZÁVER........................................................................................................................42 ZOZNAM LITERATÚRY A ZDROJOV ...............................................................43 PRÍLOHY...................................................................................................................46
  • 10. 4 1 Úvod do problematiky Masová komunikácia je fenoménom dnešnej doby. Sme obklopený masovo komunikačnými prostriedkami , ktoré sa stali súčasťou našich životov. Z definície masovej komunikácie vyplýva, že informácie sa z jedného miesta šíria k miliónom anonymným recipientov. Internet však ponúka na poli masovej komunikácie väčšiu variabilitu. Oxfordský slovník definuje internet ako “globálnu sieť počítačov poskytujúcu rozmanité informácie a komunikačné nástroje, fungujúce na vzájomne prepojených sieťach používajúcich štandardizované komunikačné protokoly.“1 Súčasťou internetu sú nástroje, ktoré každodenne používame na prácu, zábavu alebo vzdelanie. Dve najdôležitejšie zložky internetu sú webové stránky a emailová komunikácia. Oba nástroje môžu slúžiť aj ako nástroj osobnej komunikácie, ale aj ako nástroj masovej komunikácie. Emailovú komunikáciu môžeme využiť aj ako nástroj osobnej komunikácie, ale aj ako nástroj masového komunikovania s veľkým množstvom recipientov. Rovnakou funkcionalitou oplývajú aj webové stránky. Práve tie sa stali na poli masovej internetovej komunikácie obľúbeným nástrojom. Webové stránky sú priestorom pre rôzne druhy komunikácie. Môže ísť o komunikáciu jedného človeka k početnému publiku alebo môže ísť o komunikáciu publika s jednotlivcom (komentáre pod článkom / videom / statusom 2 alebo služby podobné Ask.fm). Diskusné fóra sú príkladom komunikácie veľkého množstva jednotlivcov medzi sebou. Podobných príkladov by sme mohli na internete nájsť viacero. Táto rôznorodosť komunikácie je jedným s dôvodov, prečo je v súčasnosti internet populárny. Avšak formy komunikácie, ktoré poznáme z tradičných médií, príchodom nových nezanikli. V internetovej sieti majú pevné miesto aj stránky, ktoré zastupujú funkciu periodík v elektronickom svete. Tieto web stránky sú často sústredené okolo klasických médií, ktoré vlastnia mediálne spoločnosti. Tieto spoločnosti pochopili obrovskú silu a možnosti v komunikovaní prostredníctvom webovej platformy. „Internet je priestorom, ktorý umožňuje tradičným médiám neustále sa vyvíjať a dostať sa 1 Definition of Internet in English. [online]. [2010-01-01]. Dostupné na: <http://www.oxforddictionaries.com/definition/english/Internet >. 2 Status – v problematike sociálnych sietí ho môžeme označiť ako krátku správu jednotlivca vysielanú prostredníctvomsociálnej siete svojim priateľom.
  • 11. 5 k užívateľovi aj iným spôsobom. Médiá sa prispôsobujú novým možnostiam internetu“3. Prístup k používateľom internetu je však mierne odlišný od recipientov tradičných médii, pretože internetové stránky poskytujú užívateľom široké spektrum možnosti spätnej väzby, hodnotenia a výberu média alebo komunikátu. 1.1 Význam web stránky Žiadna web stránka sa nenachádza vo webovom priestore len tak. I keď to užívateľovi na prvý pohľad nemusí byť jasné, každá web stránka má svoj účel. Niektoré stránky vo webovom priestore komunikujú informácie vo forme blogov, portálov, aplikácii alebo video služieb. Iné užívateľovi predávajú ponúkaný produkt alebo sa ho snažia presvedčiť k registrácii. Niektoré webové stránky sú len súčasťou marketingovej alebo mediálnej komunikácie. Webová rôznorodosť stránok, nachádzajúca sa v digitálnom priestore, je obrovská. Rovnaká je aj rôznorodosť používateľov navštevujúcich tieto stránky. Dôležitým ukazovateľom sú pre tvorcov potreby cieľového publika. V nasledujúcej kapitole sa zameriame na identifikáciu správania a potrieb používateľov. 1.1.1 Ciele a potreby používateľov Prvým krokom uspokojenia potrieb používateľov web stránky je ich správna identifikácia. Pri navrhovaní a tvorbe stránky je jednoduché nadobudnúť dojem, že tvoríte web pre tzv. idealizovaného používateľa. Ten zväčša býva podobný samotnému tvorcovi. Idealizovaný užívateľ však neexistuje. Web stránku tvoríme pre reálnych ľudí, ktorí majú odlišné potreby, zážitky, skúsenosti a schopnosti, predurčujúce ich k rôznemu chovaniu pri prezeraní web stránky. Rozdelenie užívateľov podľa vybraných kritérií pomôže tvorcom stránky sa zamerať na špecifické oblasti, ktoré očakávajú pri používaní. Demografické údaje o používateľoch Demografické údaje ponúkajú náhľad na používateľov webu z hľadiska údajov o pohlaví, veku, rodinnom stave alebo príjme. Tieto údaje sa zväčša získavajú pomocou nástrojov pre výskum trhu. Pri úprave reálnej stránky, vieme tieto dáta nadobudnúť aj nahliadnutím do štatistík návštevnosti webovej stránky. Psychografické profily užívateľov 3 LUHA, M.: Masová komunikácia na zjedenie.[online]. [2014-02-06]. Dostupné na: <http://www.masmedialne.info/marian-luha-masova-komunikacia-na-zjedenie-koncentracia-kontorola-a- globalizacia-medii/>.
  • 12. 6 „Psychografické profily opisujú postoje a vnímanie, ktoré majú užívatelia o svete alebo o predmete vašej stránky.“4 Tieto profily často súvisia s demografickými údajmi, keďže ľudia v rovnakých demografických kategóriách majú podobné názory a vnímanie. Neplatí to však vždy a pri skúmaní týchto profilov môžete zistiť, že mnoho ľudí v rovnakej demografickej kategórii má odlišné postoje. Pri definovaní vzorky návštevníkov webu je dôležité analyzovať postoje a skúsenosti s používaním webu. Je potrebné zisťovať, či je používanie internetu ich každodennou činnosťou alebo sa s internetom stretávajú zriedka. 1.1.2 Modely užívateľov podľa informačnej potreby Vyššie spomenuté aspekty vo veľkej miere ovplyvňujú správanie užívateľa na webe. Jeho správanie nie je pri hľadaní informácie rovnaké. Závisí napríklad od toho, či len prechádza stránky s cieľom niečo zistiť, alebo skúma či sa na webe nachádza konkrétna informácia. Morville a Rosenfeld definujú niekoľko modelov informačnej potreby, ktoré ovplyvňujú správanie sa užívateľa na stránke.  Known-item seeking - jedná sa o najjednoduchší model, kde užívateľ vie, akú informáciu hľadá; vie kde ju hľadať a hľadá ju dovtedy, dokiaľ ju nenájde.  Exploratory seeking – v tomto modeli je užívateľ nevie s určitosťou stanoviť informáciu, ktorú hľadá. Model „exploratory seeking“ zväčša nekončí nájdením správnej odpovede. Užívateľ sa často uspokojí s „dostatočnou“ informáciou, ktorá môže byť základ pre ďalšie hľadanie. Nemôžeme preto definitívne určiť kedy sa fáza tohto typu vyhľadávania končí.  Exhaustive research - užívateľ vyhľadáva všetky dostupné informácie k zvolenej téme. V tomto modeli má užívateľ viacero možností ako vyjadriť svoju potrebu a veľmi často využíva opakované vyhľadávanie. Ak užívateľ nenájde požadované výsledky pri hľadaní istého kľúčového slova, kľúčové slovo mení a skúša rôzne varianty kľúčových slov v rámci témy, ktorej sa hľadanie týka.  Re-finding - tento model opisuje informačnú potrebu v situácií, keď užívateľ natrafí na informáciu, ktorú hľadá ale nemá čas alebo možnosti ju spracovať v čase 4 GARRETT, J. J.: The Elements of User Experience: User-Centered Design for the Web and Beyond. 2. vyd. Berkeley: New Riders, 2011, s.44
  • 13. 7 nálezu. Odkaz na informáciu si ukladá a vracia sa k nej v čase, keď mám možnosť túto informáciu spracovať. 5 Spomenuté modely informačnej potreby nie sú jediné, ale väčšinu užívateľov je možné do jedného z týchto modelov zaradiť 1.2 Výskum užívateľov „Pre porozumenie toho, čo naši užívatelia potrebujú, musíme najprv zistiť, kto vlastne sú. Oblasť výskumu používateľov je určená pre zber dát potrebných k rozvinutiu poznania6“. K spoznaniu návštevníkov webu nám môžu pomôcť niektoré nástroje, ktoré slúžia predovšetkým na výskum trhu. Tieto nástroje slúžia k nadobudnutiu presných informácii o užívateľoch. Výsledky týchto metód závisia od dôkladnej prípravy a správnej formulácie otázok, ktoré užívateľom položíme. Nástroje ako interview alebo focus groups sú vhodné pre zber informácii ohľadom postojov a názorov. Testovanie používateľov alebo terénny výskum naopak slúžia na zhromaždenie špecifických aspektov používateľského správania. Vo všeobecnosti platí, že čím viac času venujeme užívateľom pri výskume, tým detailnejšie informácie dostaneme.6 Nástroje na výskum trhu môžeme rozdeliť do dvoch globálnych kategórii: Primárne poskytujú nesprostredkované údaje priamo od ľudí. Podľa stanovených otázok môžeme určovať, aký typ informácii sa nám vráti. Do primárnych metód výskumu trhu môžeme zaradiť dotazníky, rozhovory alebo metódy priameho pozorovania. Medzi nevýhody patrí ich finančná a časová náročnosť. Pri sekundárnych ide prevažne o sprostredkované informácie, z ktorých si môžeme vyberať. V tejto kategórii metód teda nemáme kontrolu nad informáciami, ktoré dostaneme. Avšak finančne sú tieto metódy výhodné 7. V nasledujúcej časti bližšie popíšeme niektoré z metód výskumu trhu 1.2.1 Kontextové dotazovanie 5 MORVILLE, P. – ROSENFELD, L.: Information Architecture for the World Wide Web. Sebastopol: O’Reilly Media, 2006, s. 34 6 GARRETT, J. J.: The Elements of User Experience: User-Centered Design for the Web and Beyond. 2. vyd. Berkeley: New Riders, 2011, s.46 7 Market research methods. [online]. [2014-05-16]. Dostupné na: <http://www.business.qld.gov.au/business/ starting/market-customer-research/market-research-basics/market-research-methods >.
  • 14. 8 Kontextové dotazovanie ponúka výskumníkovi informácie o súvislostiach používania. V tejto metóde sú užívateľom najprv položené otázky a následne sú pozorovaní pri práci. Pri práci im moderátor kladie otázky. Metóda kontextového dotazovania prináša reálnejšie dáta ako dáta z laboratórií. Túto metódu je odporúčané používať na začiatku procesu navrhovania, keďže ponúka bohaté informácie o užívateľskom sociálnom, technickom a psychickom prostredí a o užívateľských nástrojoch a technikách. 8 Výsledky pomáhajú výskumníkovi definovať užívateľské potreby a postoje. Nevýhoda tejto metódy je v jej časovej a finančnej náročnosti. 1.2.2 Analýza úloh Analýza úloh je menej časovo a finančne náročná metóda. Neponúka však tak podrobné výsledky ako kontextové dotazovanie. Princípom tejto metódy je analýza úloh ,ktoré musí urobiť užívateľ aby splnil stanovený cieľ. Môže ísť o kroky všeobecné, napr. kúpa fotoaparátu, alebo sú to kroky veľmi špecifické - vyhľadanie detailných špecifikácii konkrétnej služby a i.. Analýza úloh môže prebiehať pomocou priameho sledovania účastníka pri vykonávaní úloh alebo prostredníctvom interview, kde opýtaný opisuje svoje skúsenosti s úlohou. 9 1.2.3 Užívateľské testovanie Treťou dôležitou metódou výskumu užívateľov je užívateľské testovanie. Metóda je založená na pozorovaní účastníka pri interakcii so skúmaným objektom. Táto metóda je však bližšie analyzovaná v kapitole 7.1.1. Metódy hodnotenia použiteľnosti. 1.2.4 Metóda tvorby tzv. Persony Vyhodnocovanie dát, poskytnutých vyššie uvedenými metódami, môže byť komplikované. Pre lepší prehľad ľudí, ktorí navštevujú konkrétne stránky, je vhodné vytvoriť si s nazbieraných dát tzv. persony. „Persona je vymyslená osobnosť vytvorená na to, aby reprezentovala potreby všetkých reálnych užívateľov.“ 10 Tieto osobnosti sú vytvárané na základe dát z výskumu užívateľov a analýzy webového sídla (ak analyzujeme už reálnu web stránku). Web usability.gov definuje efektívnosť persón niekoľkými charakteristikami: 8 Contextual Inquiry. [online]. [2010-01-01]. Dostupné na: <http://www.usabilitybok.org/contextual- inquiry>. 9 GARRETT, J. J.: The Elements of User Experience: User-Centered Design for the Web and Beyond. 2. vyd. Berkeley: New Riders, 2011, s.47 10 GARRETT, J. J.: The Elements of User Experience: User-Centered Design for the Web and Beyond. 2. vyd. Berkeley: New Riders, 2011, s.49
  • 15. 9 - reprezentuje väčšinovú skupinu používateľov pre vybranú web stránku - vyjadruje potreby a očakávania cieľovej skupiny - jasne definuje očakávania a predstavy ako by chceli užívatelia používať web stránku - popisuje skutočných ľudí, ich pozadie, ciele a hodnoty. 11 Vytvorené persony majú obsahovať: - vymyslené meno, - titul, - vek, - vzdelanie, - rodinný stav - fyzické, sociálne a technologické prostredie - fotografiu. Takto spracovaná persona pomáha tvorcom jednoduchšie navrhovať web, aby spĺňal požiadavky stanovenej cieľovej skupiny. 1.3 Ciele a potreby prevádzkovateľovstránky V internetovom dialógu zväčša stoja na opačných stranách dva postoje. Používatelia, ktorí by sa radi na internetovej stránke niečo dozvedeli a uspokojili svoje potreby. Na strane druhej sú však tvorcovia, ktorí stránku prevádzkujú a internetovou stránkou sledujú stanovený cieľ. Ciele prevádzkovateľov sú často odlišné od cieľov používateľov. Existuje mnoho cieľov a plánov, ktoré môžu webové stránky sledovať. Môžu to byť biznis plány na zvýšenie ziskov, podpora značky alebo poskytovanie istého druhu služieb a informácii. Pri stanovení cieľov je potrebné dbať na to, aby spĺňali kritériá definované Meyerom ako tzv. SMART kritériá. Ciele stránky majú byť v uvedenom zmysle: - konkrétne (Specific) - merateľné (Measurable) – - reálne – dosiahnuteľné (Achievable) - relevantné (Relevant) - časovo ohraničené (Time-bound) 12 11 Personas.[online]. [2014-06-03]. Dostupné na: <http://www.usability.gov/how-to-and- tools/methods/personas.html>.
  • 16. 10 Takýto druh cieľov môže vyzerať nasledovne: - Zvýšiť návštevnosť o 50% za 6 mesiacov - Zvýšiť online predaj produktu X o 20% za obdobie mesiaca - Zvýšiť online povedomie o produkte X a tým zvýšiť predaj produktu o 30% v obchodoch - Zvýšiť počet predplatiteľov o 200 za obdobie pol roka 1.3.1 Meranie cieľov Stanovenie cieľov, ktoré chcú prevádzkovatelia dosiahnuť, je základom úspechu. Pri plnení týchto cieľov je nevyhnutné ich v správny čas vyhodnotiť. Pre vyhodnocovanie a analýzu cieľov sú nemenej dôležité aj údaje získané z účtovníctva, napr. náklady, výška tržieb atď. Dôležité sú aj údaje poskytnuté analýzou webovej štatistiky, napr. počet unikátnych návštevníkov, najvyhľadávanejšie kľúčové slová, zdroje návštevníkov atď. Z ekonomického hľadiska je cieľom analýzy webu porozumieť správaniu potenciálnych a reálnych zákazníkov a využiť túto vedomosť na optimalizáciu webu s cieľom zvýšiť príjmy plynúce z webu. 13 Existuje mnoho spôsobov čo a ako merať na web stránke. Webové štatistiky nám ponúkajú veľké množstvo informácii, ktoré je možné sledovať a merať. Medzi dôležité ukazovatele pri analýze webu patrí:1415  Počet zobrazení – vyjadruje počet vyžiadaní obsahu na stránke. Nemusí ísť pritom o obsah, ktorý užívateľ reálne vidí. Ide len o komunikáciu medzi prehliadačom užívateľa a serverom.  Počet návštevníkov – počet ľudí, ktorí navštívili web v sledovanom období. Ide o počet IP adries, ktoré sa na web pripojilo. Tento údaj sa niekedy udáva aj ako počet unikátnych návštevníkov.  Strávený čas – ide o vyjadrenie času, ktorý užívateľ aktívne strávil na stránke. Ukazovateľom je priemerný čas strávený na webe jedným užívateľom.  Konverzný pomer - je pomer medzi návštevníkmi, ktorí vykonali požadovanú činnosť a všetkými návštevníkmi, ktorí mohli túto činnosť vykonať. Konverzný 12 MEYER, P.: Attitude Is Everything: If You Want to Succeed Above and Beyond. Scotts Valley: Meyer Resource Group, 2003, s. 15 13 Google Analytics. [online]. [2013]. Dostupné na: < http://www.saraseo.sk/seo-sluzby/google-analytics>. 14 Use of Key Performance Indicators in Web Analytics : WebSideStory, 2004. [online]. [2004]. Dostupné na: < http://www.4everywhere.com/documents/KPI.pdf >. 15 YOUNG, W.: Key Metrics For Success With A Local Business Website.[online]. [2013-09-16]. Dostupné na: <http://searchengineland.com/key-metrics-for-success-with-a-local-business-website-171734>.
  • 17. 11 pomer slúži primárne na sledovanie efektívnosti webu pri zmene užívateľa na zákazníka.  Hĺbka návštevy – ide o zobrazenie záujmu užívateľa o ponúkaný obsah web stránkou. Ide o pomer počtu zobrazenia stránok a počtu návštev. Tento údaj je dôležitý pre stránky ponúkajúce mediálny obsah. Hlavný ukazovateľ, ktorý pred rokom 2007 určoval úspešnosť web stránky bol počet zobrazení stránky. V roku 2007 Agentúra Nielsen/Netratings, líder vo výskume internetového trhu, predstavila nový spôsob určovania úspešnosti webových stránok. Ten je založený predovšetkým na sledovaní celkového množstva času, ktorý užívateľ na webe strávi.16 Zmena je reakciou na nový typ stránok, ktorý v roku 2007 začal byť veľkou súčasťou internetu. Išlo o streamované médiá a internetové aplikácie, ktoré užívateľov nenútili obnovovať stránku, ale motivovali ich k čo najdlhšiemu strávenému času stráveného pri konkrétnom obsahu. Všeobecne existuje niekoľko metrík na meranie webu. Každá z metrík sa zameriava na inú oblasť v rámci analýzy webu. 17 1. Konverzná metrika (Conversion metrics) – túto metriku využívajú prevažne stránky predávajúce produkt alebo službu. Zameriava sa na sledovanie konverzného pomeru a na sledovanie štatistiky predaja, predajných formulárov, stiahnutí propagačných materiálov. 2. Metrika oddanosti (Engagement metrics) – pri tvorbe stránky, ktorá poskytuje užívateľom informácie o biznise konkrétnej organizácie, je dôležité sledovať oddanosť užívateľov. V tejto metrike sú dôležité: strávený čas na stránke, počet návštevníkov, hĺbka návštevy, sociálne zdieľanie a komentovanie. 3. Akvizičná metrika (Acquisition metrics) – webové stránky, ktorých zameraním je vytvoriť povedomie o organizácii, merajú úspešnosť/neúspešnosť pomocou nasledujúcich ukazovateľov: počet unikátnych návštevníkov, počet zobrazení a zdroj návštev. Akvizičná metrika je dobrým indikátorom ako efektívne vaše marketingové snaženie. 2 Návrh webovejstránky 16 BAUSCH, S.: Nielsen//Netratings adds “totalminutes” metric to syndicated service as best measure of online engagement. [online]. [2007-07-10]. Dostupné na: <http://www.nielsen- online.com/pr/pr_070710.pdf>. 17 How to Measure Your Site’s Success.[online]. [2013-09-08]. Dostupné na: < http://www.yola.com/blog/how-to-measure-your-sites-success/>.
  • 18. 12 Ak už sme si zadefinovali cieľové publikum, identifikovali informácie, ktoré chceme komunikovať a stanovili ciele, môžeme pokračovať do fázy návrhu webového rozhrania. Ešte pred grafickými náčrtmi budúceho rozhrania si ale musíme zadefinovať stratégiu usporiadania informácii. 2.1 Informačná architektúra Internetovú stránku môžeme označiť ako súhrn informácii, ktoré chceme predať návštevníkovi. Informácie musíme predovšetkým roztriediť, zaradiť a usporiadať do logických prvkov aby ich mohol ktokoľvek jednoducho a efektívne nájsť. Gray definuje informačnú architektúru ako „kombináciu organizačných, označovacích, vyhľadávacích a navigačných systémov v rámci webovej stránky alebo intranetu“. 18Cieľom informačnej architektúry je umožniť návštevníkom jednoducho nachádzať informácie, ktoré potrebujú a napĺňať ciele. Najbežnejším spôsobom je zlučovanie informácií do informačných uzlov (stránok) na základe ich charakteru. Existuje však viacero iných prístupov k štruktúrovanou informácii. Garret opisuje štyri hlavné prístupy štruktúrovania informácii. 19 1. Hierarchická štruktúra pracuje na princípe Parent – Child ( Rodič – Dieťa), kde sa informácie rozvetvujú a bod informácie sa môže vetviť. Platí, že nie každý bod má dieťa (child) ale každé dieťa má rodiča (parent). Užívatelia poznajú koncept hierarchických vzťahov z iných odvetví, preto je tento typ štruktúry najpoužívanejší. Obrázok č. 1 Model hierarchickej štruktúry Zdroj: J.J.Garret - The Elements of User Experience, User-Centered Design for the Web and Beyond (2nd Edition) 18 GRAY, D.: Profesionální design na webu. Brno: Soft Press s.r.o., 1999. s. 4 19 GARRETT, J. J.: The Elements of User Experience: User-Centered Design for the Web and Beyond. 2. vyd. Berkeley: New Riders, 2011, s.93
  • 19. 13 2. Matrix štruktúra pracuje na princípe pohybu užívateľa pozdĺž dvoch a viac dimenzii. Matrix štruktúra umožňuje užívateľom s rôznymi potrebami prechádzať rovnakými informáciami rôznym spôsobom. Napríklad môže užívateľ prechádzať obsah v zoradení podľa ceny alebo podľa obľúbenosti. Obrázok č. 2 Model matrix štruktúry Zdroj: J.J.Garret - The Elements of User Experience, User-Centered Design for the Web and Beyond (2nd Edition) 3. Organická štruktúra je taká, v ktorej nenájdeme žiadne znaky vzoru. Zoradenie informácii nedodržiava pevne dané rozdelenie podľa sekcií, ale podľa charakteru informácie. Organická štruktúra je vhodná pri stránkach, kde je podporované voľné objavovanie a prechádzanie obsahu. Nachádza využitie pri výukových stránkach alebo stránkach slúžiacich na pobavenie. Užívateľ môže však v tejto štruktúre ťažšie hľadať cestu späť. Obrázok č. 3 Model organickej štruktúry
  • 20. 14 Zdroj: J.J.Garret - The Elements of User Experience, User-Centered Design for the Web and Beyond (2nd Edition) 4. Sekvenčná štruktúra je najbežnejší typ štruktúry informácii. Najpoužívanejšia je pri offline médiách ako sú knihy, správy alebo hudba. Vychádza z toku jazyka, ktorý plynie a nerozvetvuje sa. Vždy je komunikovaná len jedna informácia. Táto štruktúra je vhodná pre inštruktážne materiály alebo samostatné články. Obrázok č. 4 Model sekvenčnej štruktúry Zdroj: J.J.Garret - The Elements of User Experience, User-Centered Design for the Web and Beyond (2nd Edition) Kathryn Whitentonová rozdeluje hierarchickú štruktúru na dva typy štruktúr: FLAT a DEEP. 20 V štruktúre FLAT vychádza z hlavnej kategórie osem hlavných kategórií z ktorých každá má 6 podkategórii. V štruktúre DEEP vychádzajú z domovskej stránky len štyri kategórie z ktorých každá obsahuje 2 podkategórie, ktoré sa ďalej členia. Na obrázku môžeme vidieť rozdiely v týchto štruktúrach. Obrázok č. 5 Model FLAT a DEEP hierarchickej štruktúry Zdroj: http://www.nngroup.com/articles/flat-vs-deep-hierarchy/ Whitentonová sa domnieva, že tvar hierarchie má obrovský dopad na užívateľa. Tvrdí, že obsah je možné jednoduchšie objaviť, ak nie je skrytý pod niekoľkými vrstvami. Whitentonová tiež tvrdí, že špecificky definované kategórie, ktoré nepresahujú do iných sú 20 WHITENTON, K.: Flat vs. Deep Website Hierarchies. [online]. [2013-11-10]. Dostupné na: <http://www.nngroup.com/articles/flat-vs-deep-hierarchy/>.
  • 21. 15 ľahšie rozpoznateľné. Takéto kategórie sú špecifické pre typ štruktúry FLAT. Užívateľ v tomto type nemusí prechádzať mnohými vrstvami a tak môže nájsť informáciu jednoduchšie a rýchlejšie. Kategórie informácií v hierarchii DEEP sú príliš obšírne a nekonkrétne. Existujú však prípady, kedy je vhodné uprednostniť DEEP hierarchiu pred FLAT. Ide najmä o prípady, kedy je príliš mnoho informácii v rovnakej vrstve. Vtedy je vhodné informácie rozšíriť do vertikálnej roviny. 2.2 Navigácia „Ľudia nebudú používať váš web, pokiaľ sa v ňom nezorientujú“21 V skutočnom svete sa orientujeme podľa rôznych navigačných prvkov rozmiestnených po okolí. Môžu to byť mapy, názvy ulíc alebo názvy oddelení v obchode. Vo webovom priestore však tieto navigačné prvky neexistujú vo forme, na akú sme zo skutočného sveta zvyknutí, ale sú prispôsobené prostrediu, v ktorom sa nachádzajú . Tieto prvky sú sústredené do navigačných systémov, ktoré sú neoddeliteľnou súčasťou informačnej architektúry stránky. Mnoho navigačných systémov vychádza priamo z hierarchickej štruktúry informačnej architektúry. Navigačné systémy kopírujúce hierarchické systémy avšak v praxi bývajú nepoužiteľné. Morville a Rosenfeld sa domnievajú, že uvedené systémy sú veľmi nepraktické pri prechádzaní medzi vetvami štruktúry (horizontálne) a medzi jednotlivými vrstvami štruktúry (vertikálne)22 Fungovanie webových stránok na základe hypertextových odkazov umožňuje veľkú slobodu používania, keďže podporujú vertikálnu a horizontálnu navigáciu v rámci informačnej štruktúry. Tento typ navigácie umožňuje voľný pohyb po strome štruktúry, takže užívateľ môže slobodne preskakovať zo stránky na stránku bez ohľadu na aktuálnu polohu v rámci štruktúry. Garret definuje tri ciele, ktoré musí úspešná navigácia spĺňať: - navigácia musí poskytnúť užívateľovi informácie, ako sa dostať z jedného bodu do druhého, - z dizajnu navigácie musí byť užívateľovi jasný vzťah medzi prvkami, ktoré obsahuje, 21 KRUG, S.: Nenuťte uživatele přemýšlet!. Brno: Computer Press, 2006, s. 45 22 MORVILLE, P. – ROSENFELD, L.: Information Architecture for the World Wide Web. Sebastopol: O’Reilly Media, 2006, s. 121
  • 22. 16 - dizajn navigácie, musí tiež jasne komunikovať vzťah medzi obsahom navigácie a obsahom stránky, ktorú užívateľ práve prehliada. 23 Na stránkach môžeme zvyčajne nájsť niekoľko typov navigačných systémov. Morville a Rosenfeld rozdeľujú navigačné systémy na dve hlavné skupiny: - Vstavané navigačné systémy - Doplnkové navigačné systémy. 24 2.2.1 Vstavané navigačné systémy Do tejto kategórie Morville a Rosenfeld zaradujú globálne, lokálne a kontextové navigačné systémy. Tieto systémy sú zvyčajne integrovanou súčasťou web stránky a poskytujú dôležitú oporu pre používateľa pri pohybe na stránke. 2.2.1.1 Globálna navigácia Globálna navigácia je prítomná na všetkých stránkach konkrétneho serveru. Na akejkoľvek stránke webového sídla ponúka užívateľovi prístup ku všetkých kľúčovým oblastiam a funkciám. Tiež ponúka užívateľovi prehľad, kde sa v rámci hierarchie stránok nachádza. Na hlavnej stránke môže byť navigácia rozšírená o viaceré položky, a teda sa mierne odlišuje od navigácie na ostatných stránkach. Podľa Kruga by globálna navigácia mala obsahovať niekoľko základných prvkov: 1. Logo a odkaz na domovskú stránku – na väčšine serverov je odkaz na domovskú stránku spracovaný práve pomocou loga serveru. „Logo reprezentuje server ako celok, ktorý znamená, že sa jedná o najvyšší stupeň v hierarchii.“ 25 Logo je umiestnené zvyčajne na ľavej strane navigácie. Na arabských alebo hebrejských stránkach môžeme nájsť logo servera na pravej strane. 2. Sekcie – základný stavebný kameň navigácie. Sú to odkazy na kategórie/časti stránok, ktoré sa venujú spoločnej téme. 3. Pomôcky – ide o odkazy na dôležité prvky serveru, ktoré nie sú priamou súčasťou hierarchie. 23 GARRETT, J. J.: The Elements of User Experience: User-Centered Design for the Web and Beyond. 2. vyd. Berkeley: New Riders, 2011, s.118-119 24 MORVILLE, P. – ROSENFELD, L.: Information Architecture for the World Wide Web. Sebastopol: O’Reilly Media, 2006, s. 116 25 KRUG, S.: Nenuťte uživatele přemýšlet!. Brno: Computer Press, 2006, s. 56
  • 23. 17 4. Vyhľadávanie – vyhľadávacie pole má byť súčasťou navigácie pre užívateľov, ktorí poznajú cieľ svojej cesty a nechcú sa zdržiavať prehľadávaním stránky. Pre veľké internetové obchody je vyhľadávanie kľúčovým prvkom. 26 Obrázok č. 6 Model globálnej navigácie Zdroj: J.J.Garret - The Elements of User Experience, User-Centered Design for the Web and Beyond (2nd Edition) 2.2.1.2 Lokálna navigácia Na veľkých serveroch je globálna navigácia podporená lokálnou navigáciou, ktorá umožňuje užívateľovi preskúmať stránky, ktoré sú v okolí jeho aktuálnej pozície v rámci štruktúry stránok. V hierarchickej štruktúre stránok bývajú v lokálnej navigácii zastúpené stránky na rovnakej a nižšej úrovni. Vo voľnejšej architektúre sú v architektúre zastúpené položky, ktoré by mohli užívateľa zaujímať. Obrázok č. 7 Model lokálnej navigácie Zdroj: J.J.Garret - The Elements of User Experience, User-Centered Design for the Web and Beyond (2nd Edition) 2.2.1.3 Kontextuálna navigácia Niektoré stránky vyžadujúce unikátny prístup, spracovanie a umiestnenie, je ťažké zaradiť do predchádzajúcich dvoch typov navigácii. Preto kontextuálna navigácia 26 KRUG, S.: Nenuťte uživatele přemýšlet!. Brno: Computer Press, 2006, s. 57
  • 24. 18 zachytáva odkazy na unikátne stránky, ktoré logicky nepatria do všeobecných navigačných systémov. V praxi ide predovšetkým o odkazy v rámci slov v texte, ktoré svojim obsahom reprezentujú špecifickú stránku, na ktorú odkazujú. Tento typ navigácie môžeme vidieť napríklad v internetových obchodoch alebo na spravodajských portáloch, kde odkazy s textom „viac“ alebo „podrobnosti“ ponúkajú návštevníkovi odkaz na špecifickú stránku s detailnými informáciami o produkte. Návrh kontextuálnej navigácie vychádza predovšetkým zo znalosti potrieb užívateľov. Ak sú však potreby a ciele používateľov určené nesprávne, môže kontextuálna navigácia spôsobiť frustráciu užívateľa. 2.2.2 Doplnkové navigačné systémy Do tejto kategórie môžeme zaradiť mapy stránok a indexy, ktoré sa nachádzajú mimo hlavného obsahu stránky. Sú to komplementárne spôsoby ako môže užívateľ odhaliť hierarchiu a obsah serveru. Morville a Rosenfeld sa domnievajú27, že doplnková navigácia je kriticky dôležitá pre použiteľnosť veľkých serverov s veľkým počtom stránok. 2.2.2.1 Mapa stránok Mapa stránok ponúka užívateľom náhľad na štruktúru stránok na serveri. Zobrazuje ich podľa hierarchie servera. Ponúka odkazy na stránky umiestnené na najvyšších stupňoch hierarchie. Tento navigačný prvok sa zvyčajne nachádza na serveroch s väčším množstvom stránok. 2.2.2.2 Index Pojem index je základným pojmom v problematike webu. Okrem súborového názvu domovskej stránky sa pojmom Index označuje abecedný zoznam tém dostupný na serveri. Cez tento navigačný prvok sa užívateľ môže rýchlo presunúť na stránku, o ktorú má záujem. Je to užitočný navigačný prvok pri serveroch, ktoré sa zaoberajú veľkým množstvom rozličných tém. 2.3 Grafické spracovanie navigačnýchsystémov V predchádzajúcich kapitolách sme načrtli problematiku navigácie a zosumarizovali si vlastnosti jednotlivých navigačných prvkov. Funkcionalita navigačných prvkov na stránke však závisí aj od grafického spracovania, ktoré v užívateľ uvidí a použije. Nesprávne grafické spracovanie môže negatívne ovplyvniť použiteľnosť 27 MORVILLE, P. – ROSENFELD, L.: Information Architecture for the World Wide Web. Sebastopol: O’Reilly Media, 2006, s. 131
  • 25. 19 navigačných prvkov. Unifikované pravidlá pre grafické spracovanie zatiaľ neexistujú, preto nemôžeme jednoznačne určiť „správne“ alebo „nesprávne“ spracovanie navigačných prvkov. Za základný predpoklad pri navrhovaní grafiky môžeme stanoviť dodržiavanie kontrastu medzi textom a pozadím. Správna viditeľnosť textu v navigácii je kľúčová. Mnohé súčasné grafické spracovania globálnej navigácie však vychádzajú z trendu „záložiek“, ktorý bol populárny pred niekoľkými rokmi. Záložky využívajú najmä veľké servery, ktoré majú veľa kategórii a podkategórii. Krug opisuje 4 dôvody, prečo sú záložky vhodným riešením globálnej navigácie pre veľké servery:  Sú zrejmé – systém záložiek pochopí aj neskúsený užívateľ internetu.  Sú ťažko prehliadnuteľné – mnoho užívateľov sa okamžite sústreduje na obsah stránky a tak prehliadajú hlavičku stránky, kde sídli navigácia. Záložky sú vizuálne zreteľné pôsobia ako rozdelenie medzi navigáciou a dizajnou. Preto ich užívateľ ťažšie prehliadne.  Sú elegantné – dizajn webových stránok stále napreduje a stránky sa stávajú vizuálne zaujímavejšie. Záložky spájajú eleganciu a funkčnosť, preto sú obľúbeným východiskovým bodom webových dizajnérov pri navrhovaní navigácie.  Budia dojem priestoru – vizualizácia prechodu obsahu aktívnej záložky do popredia napomáha užívateľovi ihneď pochopiť funkcionalitu navigácie. 28 Kvalitne spracované navigačné systémy sú základom pre tvorbu kvalitnej stránky. Webstránka však nepozostáva len z navigačných systémov. Základným prvkom webstránky je nejaká informácia, resp. súbor informácii, ktoré chceme prostredníctvom danej webstránky komunikovať. 2.4 Text Text je hlavným nosičom informácie vo webovom priestore. Preto je potrebné pri navrhovaní klásť dôraz na správne spracovanie textových výstupov. Tvorba textu pre web je odlišná od vytvárania textu pre klasické tlačené médiá. Na webovej stránke musí autor zaujať najmä pútavým názvom článku alebo inej komunikovanej informácie. Na rozdiel od tlačených médií, kde titulok môže len naznačovať obsah textu, na webe je titulok oveľa dôležitejší. Titulok sa vo webovom priestore môže nachádzať aj samostatne, mimo celého článku. Titulok musí stručne, jasne a výstižne popisovať obsah článku. Titulok je, podobne ako pri iných médiách, zväčšený oproti ostatnému textu a zvýraznený tučným písmom. 28 KRUG, S.: Nenuťte uživatele přemýšlet!. Brno: Computer Press, 2006, s. 69
  • 26. 20 Štruktúra textu je na webe je taktiež odlišná od iných médii. Štruktúra vychádza z faktu, že užívatelia web nečítajú ale prehliadajú. 29 Preskakujú text, hľadajú titulky, nadpisy alebo obrázky. Aj štúdia J. Nielsena potvrdzuje, že užívatelia čítajú na webe len veľmi zbežne.30 Komunikovaná informácia má byť na webe čo najvýstižnejšia. Pri tvorbe textu je vhodné vynechať zbytočné slová a súvetia a ísť rovno k podstate. Nielson tiež odporúča pridať do textu zoznamy s odrážkami alebo zvýraznené kľúčové slová. 31 Taktiež je vhodné deliť dlhší text na viac odsekov a v každom odseku rozoberať maximálne jednu myšlienku. Text má na webe okrem funkcie nosiča informácie schopnosť ovplyvňovať poradie a dostupnosť konkrétnej stránky vo webových vyhľadávačoch. Automatizované roboty, ktoré vyhľadávajú stránky pre veľké vyhľadávače, sa riadia výlučne podľa textu obsiahnutého na stránke. Skenujú obsah a zameranie stránky, dostupnosť odkazov a rôzne značky v HTML kóde, podľa ktorých vyhodnotia a zaradia konkrétnu stránku do vyhľadávača podľa relevantnosti. 2.5 Vizuálny dizajn web stránky Webové stránky sú založené primárne na komunikovaní informácie prostredníctvom textovej formy. Ich grafické spracovanie však v niektorých prípadoch môže narušiť bezproblémovú komunikáciu medzi stránkou a návštevníkom. Tento komunikačný šum následne môže narušiť zrozumiteľnosť a príjem informácie. Správne navrhnutý vzhľad stránky dokáže tento šum eliminovať a podnietiť užívateľa k záujmu o web a obsah. Pri tvorbe webového dizajnu by sme mali dbať na niekoľko základných princípov vizuálneho dizajnu: 32  Jednota a Celistvosť - všetky elementy na stránke by mali pôsobiť zjednotene. Umiestnenie elementov v rámci štruktúry je kľúčové. Ak všetky elementy na stránke budú umiestnené správne, bude stránka pôsobiť ako celok .  Priestor - priestor na stránke zlepšuje čitateľnosť a znižuje komunikačný šum  Hierarchia - informácie a elementy majú byť zoradené podľa dôležitosti  Vyváženosť - vyváženosť informácii a elementov v rámci stránky 29 KRUG, S.: Nenuťte uživatele přemýšlet!. Brno: Computer Press, 2006, s. 28 30 NIELSEN, J.: How Little Do Users Read?. [online]. [2008-05-06]. Dostupné na: < http://www.nngroup.com/articles/how-little-do-users-read/>. 31 NIELSEN, J.: How Users Read on the Web. [online]. [1997-10-01]. Dostupné na: < http://www.nngroup.com/articles/how-users-read-on-the-web/>. 32 Visual Design Basics. [online]. [2014-06-03]. Dostupné na: < http://www.usability.gov/what-and- why/visual-design.html>.
  • 27. 21  Kontrast - dôležitý prvok ovplyvňujúci čitateľnosť informácii. Informácie by mali vystupovať z pozadia a nie sním splývať.  Veľkosť - pomocou veľkosti elementu môžeme komunikovať dôležitosť a významnosť daného elementu v porovnaní z ostatnými  Dominancia - zaoberá sa vyzdvihnutím jedného alebo dvoch elementov, ktoré upútajú zrak návštevníka.  Podobnosť - vytvára kontinuitu webovej stránky bez pocitu priamej duplicity. Vizuálne vnímanie web stránky ovplyvňuje aj zvolená farebná schéma. Je všeobecne známe, že farby podvedome ovplyvňujú naše vnímanie. Tento fakt platí aj v problematike web stránok, preto by mali byť tvorcovia opatrní akú farebnú schému na webe zvolia. 3 User Experience User experience (Skratka UX) znamená v preklade užívateľská skúsenosť. Podľa Nielsena a Normana pojem „User Experience“ zahŕňa všetky aspekty interakcie koncového používateľa s firmou.33 Môže ísť o služby, produkty, zákaznícky servis alebo dizajn obalu produktu a mnoho iného. V problematike web stránok ide o pocit, ktorý si odnesie užívateľ s používaním webu. Sféra používateľskej skúsenosti sa komplikovane meria, pretože ide zväčša o subjektívne dojmy a emócie. Jakub Španihel, odborník na UX definoval 9 princípov používateľskej skúsenosti: - Zamerajte sa na užívateľa a jeho potreby - Najprv zaistite funkciu, potom dizajn - Prispôsobte sa cieľom používateľov - Navrhujte pre obecné prípady - Neodrádzajte užívateľov od ich cieľov - Uľahčíte užívateľom učenie - Komunikujte informácie, nie dáta - Nezdržujte užívateľa - Testujte na užívateľoch34 33 NIELSEN, J. – NORMAN, D.: The Definition of User Experience. [online]. [1997-10-01]. Dostupné na: < http://www.nngroup.com/articles/definition-user-experience/>. 34 ŠPANIHEL, J.: 9 principů User Experience. [online]. [1997-10-01]. Dostupné na: <http://uzivatelsketestovani.cz/wiki/doku.php/9-principu-ux>.
  • 28. 22 Španihel tiež tvrdí, že: „Dodržanie týchto princípov nezaručuje kvalitný web, ale veľmi uľahčí jeho vývoj a správu.“35 Zo spomenutých pravidiel je jasné, že pri tvorbe webu, zameraného na kladnú používateľskú skúsenosť, sa musíme zamerať primárne na užívateľa. Tvorbu takéhoto dizajnu nazývame User–centered dizajn. 3.1 User CenteredDesign Mnoho webových stránok je tvorených so zámerom dosiahnutia firmou stanovených cieľov, alebo so zámerom zvýšenia ziskov z predaja atď. Tento prístup však niekedy nemusí byť vhodný pre používateľov stránky, ktorým tá stránka nemusí ponúknuť odpovede a riešenia na ich problémy. V takom prípade obe strany zostávajú sklamané. Riešením môže byť používateľsky orientovaný dizajn, ktorý kladie do popredia požiadavky a ciele užívateľa. Makulová definuje používateľsky orientovaný dizajn takto: „Používateľsky orientovaný dizajn je filozofia a proces. Je to filozofia, ktorá kladie do centra diania človeka a nie vec. Je to proces, ktorý sa zameriava na kognitívne faktory ako vnímanie, pamäť, učenie sa, riešenie problémov a pod., ktoré prichádzajú do úvahy počas interakcie ľudí so systémom.“36 Používateľsky orientovaný dizajn je teda spôsob ako miesto nútenia užívateľa sa prispôsobiť stránke a prostrediu do ktorého vstúpil, adaptovať prostredie a mechanizmy na potreby a ciele, ktoré má užívateľ. Kľúčovou súčasťou užívateľsky orientovaného dizajnu je použiteľnosť stránky. 4 Použiteľnosť 1. Norma ISO 9241-11 definuje37 použiteľnosť ako využívanie produktu špeciálnymi používateľmi na dosiahnutie špecifických cieľov s efektívnosťou, výkonnosťou a uspokojením, v špeciálnom kontexte využitia. Použiteľnosť je súčasťou filozofie dizajnu orientovaného na užívateľa (User-centered design), ktorý ma za cieľ zlepšiť použiteľnosť a užitočnosť. Nielsen tvrdí, že použiteľnosť je kvalitatívny atribút a definuje ju pomocou piatich kvalitatívnych častí: 35 ŠPANIHEL, J.: 9 principů User Experience. [online]. [1997-10-01]. Dostupné na: <http://uzivatelsketestovani.cz/wiki/doku.php/9-principu-ux>. 36 MAKULOVÁ, S.: Použiteľnosť webových sídiel ako základný predpoklad ich úspešnosti.[online]. [2007- 03-03]. Dostupné na: < http://www.elet.sk/?pouzitelnost-pristupnost&sprava=pouzitelnost-webovych-sidiel- ako-zakladny-predpoklad-ich-uspesnosti>. 37 ISO 9241-171. Ergonomics of human-systeminteraction -- Part 171: Guidance on software accessibility. 2008.
  • 29. 23 2. Naučiteľnosť – ako jednoducho budú užívatelia schopná splniť základné úlohy pri prvom stretnutí s dizajnom? 3. Efektívnosť – ak sú užívatelia už oboznámení z dizajnom, ako rýchlo dokážu vykonať dané úlohy? 4. Zapamätateľnosť – ak sa užívatelia po čase nepoužívanie vrátia k dizajnu ako rýchlo a jednoducho bude schopný zopakovať kroky? 5. Chyby – aký počet a druh chýb užívatelia pri prechádzaní robia a ako sa s nimi dokážu vysporiadať? 6. Uspokojenie – ako príjemné je používanie dizajnu? 38 4.1 Metódy hodnotenia použiteľnosti Použiteľnosť je pre webové stránky kľúčová. Ak sa užívateľovi s webom ťažko pracuje, tak po niekoľkých minútach odíde. Na zle použiteľných stránkach sa užívatelia cítia stratení, a ak nedokážu naplniť svoje ciele, tak odchádzajú. Užívateľ má pri prechádzaní stránkou mnoho dôvodov odísť a použiteľnosť sa týmito dôvodmi zaoberá. Tvorcovia stránky môžu zlepšiť použiteľnosť webu pomocou niekoľkých metód hodnotenia použiteľnosti. „Účel hodnotenia môže byť zlepšenie použiteľnosti produktu ako súčasť dizajnu/vývoja (Formative evaluation), alebo posúdenie do akej miery boli dosiahnuté ciele použiteľnosti (Summarative evaluation).“ 39 Metódy hodnotenia použiteľnosti môžeme teda rozdeliť do dvoch kategórii.  Formative evaluation je kategória metód hodnotenia použiteľnosti, ktorá sa využíva pri tvorbe a vývoji služby alebo produktu. Testy a hodnotenia prebiehajú v rámci tímu tvorcov, počas vývoja stránky. Asociácia profesionálov v oblasti UX 40 sem zaraďuje metódy: heuristické hodnotenie, kontrola užívateľského rozhrania, pluralistická prechádzaka, kognitívna prechádzka a i.  Summarative evaluation - metódy hodnotenia v rámci tejto kategórie sa využívajú pri testovaní a hodnotení hotového produktu. Testy a hodnotenia prebiehajú v realistických podmienkach, kde sa testuje, či produkt alebo služba splnila 38 NIELSEN, J.: Usability Engineering. Mountain View: Morgan Kaufmann, 1993, s. 26 39 Usability Evaluation Methods.[online]. [2010-01-01]. Dostupné na: <http://www.usabilitybok.org/usability-evaluation-methods>. 40 Formative Evaluation. [online]. [2010-01-01]. Dostupné na: <http://www.usabilitybok.org/formative- evaluation>.
  • 30. 24 stanovené ciele. Môžeme tam zaradiť: užívateľské testovanie, vzdialené testovanie a i. V nasledujúcej časti objasníme bližšie metódu užívateľského testovania a heuristického hodnotenia, keďže v analytickej časti práce spomínané metódy využívame. 4.1.1.1 Užívateľské testovanie Najzákladnejšou a najužitočnejšou metódou je užívateľské testovanie. Užívateľské testovanie však nie je metóda určená výhradne na analyzovanie použiteľnosti. Ak je však primárnou úlohou práve analýza použiteľnosti, tak sa môžeme stretnúť aj s pojmom testovanie použiteľnosti (Usability testing). Pri tejto metóde si prevádzkovatelia stránky pozvú niekoľkých typických návštevníkov testovanej web stránky do testovacieho laboratória. Práve výber vhodných účastníkov je pri testovaní jednou z kľúčových častí. Účastníci testovania by mali patriť do cieľovej skupiny webovej stránky. Mali by to byť ľudia, ktorí so stránkou neprišli do styku a neboli ani inak zainteresovaní v analyzovanej web stránke. Účastníci v testovaní slobodne plnia úlohy, ktoré užívatelia najčastejšie na stránke vykonávajú. Zadanie týchto úloh by malo byť pre účastníkov ľahko pochopiteľné a mali by odrážať reálne úkony, ktoré užívatelia na stránke robia, alebo sú pre web dôležité. Pri plnení týchto úloh ich prevádzkovatelia pozorujú, zapisujú dáta a sledujú prípadné ťažkosti, do ktorých sa môžu účastníci pri testovaní dostať. V prípade nejasností môžu prevádzkovatelia testovania položiť účastníkom doplňujúce otázky a dotvoriť si tak celkový obraz o výsledku testovania. K testovaniu použiteľnosti môžeme pristupovať kvalitatívne, ale aj kvantitatívne. Kvantitatívny prístup sa zameriava na počet úspechov a neúspechov pri plnení úloh, čas potrebný na dokončenie úlohy, počet omylov a pochybení v priebehu plnenia úlohy.41 Kvantitatívny prístup vyžaduje minimálne 20 účastníkov, pretože zvolený prístup by mal prinášať štatisticky významné výsledky.42 Keďže tento prístup vyžaduje väčšie množstvo účastníkov môžeme si z toho odvodiť jeho časovú náročnosť a organizačnú náročnosť. Kvalitatívny prístup sa zameriava primárne na identifikáciu problémov, ktoré vznikajú užívateľom pri prechádzaní webom. Taktiež odhaľuje rôzne cesty akými sa užívatelia 41 NIELSEN, J.: Usability Metrics. [online]. [2001-01-21]. Dostupné na: <http://www.nngroup.com/articles/usability-metrics/>. 42 NIELSEN, J.: How Many Test Users in a Usability Study?. [online]. [2001-04-06]. Dostupné na: < http://www.nngroup.com/articles/how-many-test-users/>
  • 31. 25 dopracovávajú k riešeniu zadanej úlohy. Poskytuje detailnejší náhľad na postoje a názory užívateľov cez odpovede účastníkov na otvorené otázky. Kvalitatívny prístup je relatívne časovo nenáročný, keďže postačuje testovať približne 5 účastníkov43 pre zistenie väčšiny problémov použiteľnosti. 4.1.1.2 Heuristické hodnotenie Jakob Nielsen vo svojej knihe opisuje metódu heuristického hodnotenia veľmi jednoducho. „Heuristické hodnotenie sa vykonáva tak, že sa pohľadom na rozhranie sa snažíte dôjsť na to, čo je s rozhraním dobre, a čo zle.“44 „Cieľom heuristického hodnotenia je identifikovať problémy použiteľnosti v dizajne používateľského rozhrania...“ 45 Ideálne by metódu heuristického hodnotenia mal vykonávať odborník na použiteľnosť a používateľské rozhranie. Ten potom na základe svojich skúseností, vedomostí a niekoľkých princípov použiteľnosti (heuristík) zhodnotí analyzovanú web stránku. Svetovo uznávaný expert na použiteľnosť J.Nielsen v roku 1995 definoval 10 heuristík použiteľnosti, ktoré sa využívajú dodnes. 1. Viditeľnosť stavu systému - systém by mal užívateľovi poskytovať informáciu o tom, čo sa deje, a kde sa práve nachádza prostredníctvom adekvátnej spätnej väzby v rozumnom čase. 2. Spojitosť systému a reálneho sveta - použitý systém by mal komunikovať jazykom užívateľov. Mal by používať slová, frázy a pojmy, ktoré sú používateľovi známe. Mal by nasledovať zvyklosti reálneho sveta a poskytovať tak informácie v prirodzenej a logickej forme. 3. Plná kontrola a sloboda používateľa - užívatelia často volia systémové funkcie náhodou. Preto je potrebné, aby mali kedykoľvek k dispozícii tzv. „únikový východ“ a jednoducho, bez nadbytočného dialógu, nechcenú funkciu opustiť. Systém by mal podporovať funkcie „undo“ a „redo“. 4. Súdržnosť a štandardy - užívatelia by nemali pri používaní webu premýšľať, či rovnaké slová, situácie alebo úkony znamenajú rovnaké veci. Webová stránka by mala dodržiavať všeobecne platné konvencie pre webové prostredia. 43 NIELSEN, J.: Why You Only Need to Test with 5 Users. [online]. [2000-19-03]. Dostupné na: <http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/> 44 NIELSEN, J.: Usability Engineering. Mountain View: Morgan Kaufmann, 1993, s. 155 45 NIELSEN, J.: Usability Engineering. Mountain View: Morgan Kaufmann, 1993, s. 167
  • 32. 26 5. Prevencia chýb – dobrý dizajn by spolu s dobrými chybovými hláseniami mal v prvom rade predchádzať chybám. a problém. Ak problémy nie je možné odstrániť, je vhodné aspoň pridať možnosť nahlásenia. 6. Rozpoznanie pred spomínaním - objekty, akcie a funkcie majú byť na stránke jasne viditeľné, jednoducho rozlíšiteľné od ostatného obsahu stránky. Týmto sa minimalizujú pamäťové nároky užívateľa. Používateľ nie je nútený si pamätať informácie z jedného formulára do druhého. Systémové inštrukcie by mali byť viditeľné a jednoducho použiteľné z ktoréhokoľvek miesta na stránke. 7. Flexibilita a efektivita používania - systémové prostredie má podporovať ako skúsených používateľov, tak aj začiatočníkov a všetky jeho funkcie by mali byť použiteľné efektívne. 8. Estetický a minimalistický dizajn - dialóg vedený s užívateľom by nemal obsahovať zbytočné a nepotrebné informácie. Každá ďalšia nepotrebná informácia pridaná do tohto dialógu zmenšuje viditeľnosť podstatných informácii. 9. Pomoc rozpoznať problémy a vyriešiť ich - chybové hlásenia by mali byť vyjadrené pomocou obyčajného jazyka a nie cez kódy. Hlásenia by mali presne indikovať problém a navrhnúť konštruktívne riešenie. 10. Podpora a dokumentácia - systém by mal užívateľovi jednoduchou cestou poskytnúť riešenie v prípade potreby pomoci. Táto informácia by mala byť pre užívateľa ľahko dostupná, zameraná na užívateľov problém, spracovaná ako postup zostavený z niekoľkých krokov a nie príliš obsiahla. 46 Zaplatenie odborníka na použiteľnosť, môže byť príliš drahé. Nielsen však tvrdí, že heuristické hodnotenie môžu vykonávať aj ľudia s minimálnym alebo žiadnym vzdelaním v oblasti použiteľnosti.47 Zároveň však dodáva, že skupina hodnotiacich s minimálnym alebo žiadnym vzdelaním, odhalí len približné štvrtinu všetkých problémov použiteľnosti. 48 Táto skutočnosť však môže poskytnúť základný pohľad na problémy použiteľnosti a ušetriť finančné prostriedky. 46 NIELSEN, J.: 10 Usability Heuristics for User Interface Design. [online]. [2000-19-03]. Dostupné na: <http://www.nngroup.com/articles/ten-usability-heuristics/> 47 NIELSEN, J.: Usability Engineering. Mountain View: Morgan Kaufmann, 1993, s. 162 48 NIELSEN, J.: Usability Engineering. Mountain View: Morgan Kaufmann, 1993, s. 161
  • 33. 27 5 Metodika 5.1 Výskumný problém Doména dvepercenta.sk bola pri svojom vzniku určená čisto pre informačné účely o možnostiach darovania 2% a ponúkala informácie o problematike darovanie daní. Stránku v roku vzniku 2004 zastrešovala nezisková organizácia Komunitná nadácia Bratislava. V roku 2006 však doménu prebrala nezisková organizácia WellGiving, ktorá na doméne vytvorila vyhľadávač neziskových organizácii. Stránka pri vzniku bola vizuálne poplatná svojej dobe. Návštevnosť webu sa pohybovala v desiatkach užívateľov za týždeň. Postupne však naberal tento trend stúpajúci charakter. Nikdy však stránka nebola navštevovaná veľkým množstvom ľudí. Frekvencia návštev sa menila počas roka a tak podľa slov zakladateľky organizácie WellGiving stránka „žije“ len v mesiacoch odovzdávania daňových priznaní. Užívatelia zväčša vyhľadávali na stránke kontaktné informácie, formuláre pre darovanie 2%, alebo využívali web ako východisko pre ďalšie pátranie. Vizuálne sa stránka však od doby svojho vzniku v roku 2006 nezmenila. Poskytovala užívateľom jednoduché rozhranie vyhľadávača. Dbalo sa hlavne o funkcionalitu a dizajn, použiteľnosť zostávala v úzadí. Ako však čas plynul, stránka neprešla funkčnou ani vizuálnou zmenou. Za najväčšiu zmenu môžeme považovať pridanie reklám v roku 2010. Táto zmena však mala skôr negatívny charakter ako pozitívny. Funkcionalita a vizuál sa nemenil, čo môže byť v roku 2014 pre užívateľa problémom. 5.2 Výskumný cieľ Za výskumný cieľ si kladieme zlepšiť komunikáciu web stránky s verejnosťou, prispôsobiť vizuálnu stránku súčasným trendom a zlepšiť užívateľskú prístupnosť a použiteľnosť webovej stránky s ohľadom na ciele prevádzkovateľov aj užívateľov. 5.3 Charakteristika objektuskúmania Za objekt testovania použiteľnosti web stránky bola vybraná web stránka www.dvepercenta.sk. Túto stránku môžeme definovať ako vyhľadávač informácii o neziskových organizáciách. Za touto stránkou stojí organizácia Well Giving, ktorá sa tiež venuje poskytovaniu pomoci ľudom, ktorí to potrebujú. Okrem vybraného webu
  • 34. 28 organizácia prevádzkuje aj weby www.dakujeme.sk a www.zdobrychruk.sk, ktoré sa taktiež venujú poskytovaniu pomoci a podpore ľudí so zdravotným postihnutím. Webové sídlo dvepercentá.sk považujem sa dôležité miesto v internetovom priestore pri vyhľadávaní a výbere neziskovej organizácie, ktorej môže verejnosť darovať svoje 2% z daní. Výber stránky bol motivovaný tiež neuspokojivým stavom stránky v oblasti použiteľnosti a UX z portfólia stránok neziskovej organizácie Well Giving. 5.4 Metóda výskumu Existuje množstvo nástrojov na testovanie použiteľnosti webu. Pre svoj výskum som sa zameral na tie spôsoby, ktoré nám môžu poskytnúť najkomplexnejší pohľad na rozoberaný problém . Pre zber údajov k odhaleniu chýb v návrhu web stránky som teda využil metódu užívateľského testovania. Je to forma pozorovania, pri ktorom sa účastníci riadia úlohami, ktoré im moderátor zadá 49 . Spôsob výskumu pomocou užívateľských testovaní nám poskytne reálnejší pohľad na chovanie užívateľa na danom webe a poskytne aj bezprostrednú emocionálnu reakciu. Aby bolo možné pri analyzovaní sledovať reakcie užívateľov na priebeh testovania, plnenie ich úloh zaznamenáva kamera. V priebehu testovania sa taktiež zaznamenáva pohyb užívateľa na stránke. Záznam obrazovky sa uskutočňoval pomocou programu Camtasia Studio 7 od spoločnosti TechSmith. Účastníkov testovania sme zároveň vyzvali, aby počas vykonávania úloh nahlas opisovali svoje kroky. Pri hodnotení použiteľnosti vo svojej bakalárskej práci používam metódu heuristického hodnotenia. Zvolená metóda mi poskytne základný prehľad o problémoch použiteľnosti a východiskový bod pre užívateľské testovanie, v ktorom mám za cieľ odhaliť a identifikovať kritické problémy použiteľnosti. Webové sídlo sme hodnotili na základe desiatich heuristík, ktoré sú bližšie charakterizované v teoretickej časti v kapitole 7.1.1.2 heuristické hodnotenie. Taktiež som vychádzal zo svojich znalostí a skúseností nadobudnutých z štúdia a práce v oblasti grafického a webového dizajnu. 5.5 Vzorka pre testovanie Pri výbere vzorky pre testovanie sme zvolili účelový výber. Zvolili sme variantu stratifikovaného účelového výberu, kde základný súbor rozdeľujeme do určitých vrstiev na 49 Usability Testing.[online]. [2010-01-01]. Dostupné na: < http://www.usabilitybok.org/usability-testing>.
  • 35. 29 základe vybraných kritérii. 50 Podľa analýzy webového sídla sme vytvorili vzorku ľudí, ktorá majoritne navštevuje testovanú web stránku. Vychádzali sme z údajov poskytovanými štatistickým úradom SR. Predpokladáme, že vybranú web stránku navštevujú ľudia v produktívnom veku. Produktívny vek je stanovený podľa štatistického úradu na 15 až 64 rokov51. Osoby vo veku 15 až 18 rokov sme odstránili z výberu nakoľko nemajú predpoklad pre podávanie daňového priznania. Predpokladaná vzorka návštevníkov webu sú teda ľudia v produktívnom veku, zamestnaní s kladným vzťahom k výpočtovej technike a teda budú tvoriť základný súbor. Základným predpokladom je schopnosť používať počítač na základnej úrovni. Zadefinovaný súbor sme si rozdelili podľa vekovej štruktúry do piatich kategórií: 1. od 18 do 26 rokov 2. od 27 do 35 rokov 3. od 36 do 44 rokov 4. od 45 do 53 rokov 5. od 54 do 64 rokov Následne sme do každej z týchto kategórií vybrali jedného účastníka, ktorý spĺňal vyššie spomenuté kritéria. Pri výbere počtu účastníkov do testu sme vychádzali z štúdie, ktorá pri kvalitatívnom výskume odporúča piatich účastníkov testovania. Nieslen tvrdí, že už pri testovaní piatich účastníkov odhalíme 82% problémov použiteľnosti.52 „Ako pridávate viac a viac účastníkov, odhalíte stále menšie a menšie množstvo problémov, pretože budete sledovať tie isté veci stále dookola“. 53 Vzhľadom na použitú kvalitatívnu metodológiu, neočakávame štatistickú významnosť. Na základe týchto tvrdení sme do testovania zvolili piatich účastníkov v zložení 3 ženy a dvaja muži. Priložená tabuľka zobrazuje štruktúru testovanej vzorky účastníkov podľa veku, pohlavia, vzdelania a skúsenosti s používaním internetu. 50 MIOVSKÝ, M.: Kvalitativní přístup a metody v psychologickém výzkumu. Praha: Grada, 2006. s. 135 51Vekové zloženie obyvateľstva Slovenskejrepubliky.[online]. Bratislava : Štatistický úrad Slovenskej republiky, 2011. Dostupné na: <http://portal.statistics.sk/files/Sekcie/sek_600/Demografia/Obyvatelstvo/ vek_zloz_obyv/metodika_11.pdf> 52 NIELSEN, J.: Why You Only Need to Test with 5 Users. [online]. [2000-19-03]. Dostupné na: <http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/> 53 NIELSEN, J.: Why You Only Need to Test with 5 Users. [online]. [2000-19-03]. Dostupné na: <http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/>
  • 36. 30 Tabuľka č. 1 Štruktúra testovanej vzorky účastníkov veková kategória 18 – 26 r. 27 – 35 r. 36 – 44 r. 45 – 53r. 54 – 64 r. pohlavie žena muž žena muž žena vzdelanie všeobecné stredoškolské odborné stredoškolské vysokoškolské 3. stupňa odborné stredoškolské vysokoškolské 2. stupna zamestnanie súkromný sektor súkromný sektor štátna správa verejná správa verejná správa meno účastníka Jana Richard Zuzana Peter Dagmar frekvencia používania internetu každý deň každý deň 3 krát za týždeň 5 krát za týždeň 5 krát za týždeň 5.6 Miesto a nástroje testovania Keďže všetci účastníci testovania sú zamestnaní na trvalý pracovný pomer bolo pre väčšinu obtiažne sa prispôsobiť a prísť na stanovené miesto v určitý čas. Po prehodnotení vlastného technického príslušenstva som zvolil osobné stretnutia s účastníkmi testovania. Pri testovaní sme využívali:  počítač s webkamerou  internetové pripojenie  internetový prehliadač  mikrofón  softvér na sledovanie obrazovky (Camrecorder od spoločnosti Techsmith)  poznámkový blok 5.7 Postup testovania 1. Používateľské testovanie pozostáva z nasledujúcich krokov, ktoré budú podrobnejšie popísané v ďalších kapitolách: 2. Kladenie otázok užívateľom v úvode a v závere testovania 3. Samotné testovanie - zadanie a riešenie úloh
  • 37. 31 4. Moderátor testovania si popri vyššie uvedených krokoch zapisuje poznatky z testovania, ktoré mu pomôžu pri analýze dát dotvoriť si celkový obraz o účastníkovi a priebehu testovania. Kladenie otázok nám pomáha dotvoriť si celkový obraz o myslení užívateľa pri používaní webu. Aj pri formulácii otázok sme sa vyhli použitiu žargónu, dvojjazyčnosti a iným aspektom, ktoré by mohli vyvolať nesprávne pochopenie otázok u respondentov. Otázky boli rozdelené do dvoch častí: otázky, položené pred začatím testovania a otázky, ktoré sú položené hneď po skončení. Otázky položené pred testovaním nám pomáhajú bližšie spoznať a pochopiť účastníkov testovania. Otázky sme zvolili nasledovné: 5. Poznáte túto stránku? ( Predchádzajúca skúsenosť so stránkou by mohla ovplyvniť výsledky testovania.) 6. Na čo slúži, podľa vás táto stránka? ( Odpovede na túto otázku, môžu naznačiť chybnú komunikáciu web stránky.) 7. Otázky položené po testovaní: 8. Aký je váš dojem z používania stránky? 9. Ako by ste ohodnotili váš pocit z hľadiska jednoduchosti používania 10. Ako by ste ohodnotili váš pocit z hľadiska intuitívnosti používania 11. Aký prvok/funkcia vám pri používaní najviac nevyhovoval? 12. Účastníci testovania boli vyzvaní aby sformulovali voľne štruktúrovanú odpoveď a následne aj škálovanú odpoveď v kategóriách: 13. Veľmi dobrý 14. Skôr lepší 15. Ani dobrý, ani zlý 16. Skôr horší 17. Veľmi zlý 18. Neviem 19. Zadanie a riešenie úloh 20. Úlohy sú jednou s najdôležitejších častí testovania použiteľnosti. Preto je ich správna formulácia a nastavenie kľúčové. Do testovania sme zahrnuli úkony, ktoré užívatelia najčastejšie na webe vykonávajú. Vo väčšine prípadov to bolo vyhľadávanie rôznych informácii o neziskových organizáciách a vyhľadávanie kontaktných údajov. Niektoré úlohy boli navrhnuté tak, aby užívateľ musel čo najviac využívať navigáciu stránky. Tento typ úloh nám priniesol cenné dáta o použiteľnosti navigačného systému webu. Pri konkrétnej formulácii úloh sme
  • 38. 32 dodržiavali niekoľko zásad.54 Úlohy neobsahujú žargón, dvojjazyčnosť a ani akúkoľvek doslovnú spojitosť s žiadnym prvkom v testovanej web stránke. Znamená to, že sme pri formulácii výskumnej úlohy nahradili napríklad slovo „mesto“, ktoré sa nachádzalo priamo v navigačnom systéme stránky, iným slovným spojením s rovnakým významom – v našom prípade „miesto bydliska“. Úloha by mala byť jednoduchá na pochopenie a zároveň navodzovať reálnu situáciu. 21. Úlohy sme formulovali takto: 22. Predstavte si, že chcete vedieť viac informácií o organizácii "Well Giving". Ako by ste postupovali? 23. Ste rozhodnutý/á darovať svoje 2% vybranej organizácii a potrebujete len stiahnuť potrebné tlačivá…. 24. Vráťte sa na domovskú stránku. 25. Ak by ste chceli zistiť aké organizácie pôsobia vo Vašom mieste bydliska/pôsobiska, ako by ste to urobili? 26. Povedzme, že chcete zistiť aké neziskové organizácie vo Vašom meste sa venujú "organizovaniu táborov". Ako by ste ich našli? 6 Výsledky výskumu 6.1 Výsledky heuristického hodnotenia Pri hodnotení, sme analyzovanú web stránku porovnávali a hodnotili na základe desiatich heuristík stanovených J.Nielsenom. Vychádzal som taktiež zo skúseností a vedomostí nadobudnutých pri štúdiu a práci v oblasti webového a grafického dizajnu. Výsledky sme rozdelili do menších častí, podľa hodnotených častí stránky. 6.1.1 Navigácia Globálnu navigáciu na stránke dvepercenta.sk môžeme nájsť spoločne v jednom riadku s možnosťami vyhľadávania. Je spracovaná rovnakým písmom, veľkosťou a vizuálne splýva s možnosťami vyhľadávania. Oddelená je len jemnou čiarou, ktorá sa v celkovom pojatí stráca. Je umiestnená medzi široký oranžový pás hlavičky a reklamný banner, ktorý svojou veľkosťou a farebným spracovaním púta pozornosť. Tieto nedostatky môžu užívateľa zmiasť a zvyšovať frustráciu a negatívnu emóciu pri prechádzaní stránkou. 54 RUBIN, J. – CHISNELL, L.: Handbook of Usability Testing, Second Edition:How to Plan, Design, and Conduct Effective Tests. 2. vyd. Indianapolis: Wiley Publishing, 2008. s. 83
  • 39. 33 6.1.2 Vyhľadávanie a výsledky vyhľadávania Analyzovanú webovú stránku môžeme označiť ako vyhľadávač neziskových organizácii. Nosným prvkom vyhľadávača je teda vyhľadávacie pole a výsledky vyhľadávania. Vyhľadávacie pole je ale relatívne malé a priľahlý výrazný reklamný text je vizuálne dominantný. Ako bolo už spomenuté, vyhľadávanie je primárna funkcia stránky preto by malo byť práve vyhľadávacie pole dominantou stránky. K vyhľadávaciemu poľu sa viaže aj nastavenie vyhľadávania. To môžeme nájsť priamo pod logom 2%, vedľa globálnej navigácie. Nastavenia vyhľadávania sa logicky a opticky viažu k vyhľadávaciemu poľu. Nastavenia sú však umiestnené ďalej od vyhľadávacieho poľa, oddelené reklamou. K poľu vyhľadávania sa nijako opticky neviažu a užívateľ si pri vyhľadávaní nemusí spojiť tieto dva prvky stránky. Funkcionalita nastavenia vyhľadávania na stránke je ale mierne odlišná ako jej názov napovedá. Mohli by sme ju definovať skôr ako funkciu tzv. kategorizovania vyhľadávania. V praxi ide o to, že užívateľ ešte pred zadaním kľúčového slova do vyhľadávacieho poľa musí premýšľať, či je hľadaná fráza názvom organizácie, názvom mesta alebo „kľúčovým slovom“. Užívateľ, môže mať s takouto kategorizáciou problém a pri zlom výbere môže výrazne ovplyvniť výsledky vyhľadávania alebo úplne zamedziť používateľovi v plynulom pokračovaní priechodom stránky. Pri používaní sa môže u neskúsenejšieho používateľa dostaviť frustrácia alebo negatívna emócia spojená s vyhľadávaním na analyzovanej web stránke. Medzi najdôležitejšie funkcie vyhľadávača patrí jednoznačne funkcia zobrazenia relevantných výsledkov vyhľadávania pre zadané slovné spojenie. V prípade správneho zadania kľúčových slov a správneho nastavenia „kategorizácie vyhľadávania“, funkcia pracuje správne a zobrazí relevantné výsledky z ktorých si užívateľ dokáže bez problémov vybrať. Avšak pri nesprávnom zvolení kľúčového slova alebo pri nesprávnom zaradení kľúčového slova do príslušnej „kategórie“ vyhľadávania, užívateľovi stránka neposkytne žiadne výsledky vyhľadávania alebo ich relevancia nie je dostatočná na to, aby si užívateľ s ponuky vybral. Tento scenár neúspešného vyhľadávania môže viesť k opakovaným pokusom vyhľadávania alebo k úplnému odchodu zo stránky. Výsledky vyhľadávania sú pri poskytnutí viacerých výsledkov dobre čitateľné a okamžite viditeľné. Avšak pri poskytnutí len jedného alebo dvoch výsledkov vyhľadávania sa výsledky strácajú medzi reklamnými bannermi, ktoré ich obklopujú. Užívateľ musí v tomto prípade dôkladne skenovať stránku aby našiel poskytnuté výsledky
  • 40. 34 vyhľadávania. Keďže ide o dôležitú funkciu web stránky, ktorá je zameraná na vyhľadávanie, tak považujem spracovanie tejto funkcie za veľmi nevhodné. 6.1.3 Reklamné bannery Reklama je pre webové sídla neziskových organizácii veľmi dôležitá. Pomáha organizáciám financovať chod a údržbu stránky. V prípade analyzovanej web stránky, nie je reklama riešená veľmi vhodne. Reklamné bannery spolu s reklamným textom na hlavnej stránke pôsobia veľmi nekonzistentne a rušivo. Rušivosť podporuje aj fakt, že reklamy sa náhodne menia a blikajú. Rozmermi sú reklamné bannery väčšie ako iné dôležité prvky stránky a tým pútajú na seba príliš veľkú pozornosť. To môže viesť k nesprávnej identifikácii kľúčových prvkov stránky a k spôsobeným chybám pri používaní. 6.2 Výsledky užívateľského testovania Užívateľské testovanie pomohlo identifikovať niekoľko problémov použiteľnosti. Medzi problémy s najvyššou prioritou patrili:  Nesprávne pochopenie „kategorizácie“ vyhľadávania  Absencia rozšíreného vyhľadávania  Ponuka nerelevantných výsledkov vyhľadávania  Nesprávna identifikácia reklám používateľom  Veľkosť nedôležitých oznámení v kontraste s dôležitými. Spomenuté problémy sú pre plynulý a používateľsky prívetivý web kritické a preto sú pre nás tieto problémy vo fáze návrhu prototypu najdôležitejšie. Pri užívateľskom testovaní sme objavili aj menej kritické problémy, ktoré ovplyvňujú plynulý priechod stránkou a napĺňanie cieľov len minimálne.  Nevýrazné tlačidlá pre stiahnutie darovacích formulárov.  Nevýrazná veľkosť vyhľadávacieho poľa. Počas testovania sme objavili viacero problémov použiteľnosti a preto môžeme považovať testovanie za úspešné. Pri testovaní sa nám potvrdili niektoré nedostatky, ktoré sme uviedli v heuristickom hodnotení. V nasledujúcej časti bližšie opíšeme vyššie spomenuté problémy, ktoré sa vyskytli pri testovaní. 6.2.1.1 Nesprávne pochopenie „kategorizácie“ vyhľadávania
  • 41. 35 Niektorí používatelia pri testovaní úplne ignorovali „kategorizovanie“ vyhľadávania a zadávali kľúčové slová do vyhľadávacieho poľa. Napríklad používateľka Zuzana pri vyhľadávaní organizácii v mieste jej pôsobiska zadala do vyhľadávacieho poľa „Karlova Ves“ aj keď bola zvolená kategória vyhľadávania „Názov organizácie“. Až po zobrazení nerelevantných výsledkov, začala Zuzana preskúmavať stránku podrobnejšie. Dôkladnejším skúmaním našla správnu kategóriu vyhľadávania. Iný typ očakávaní mal používateľ Peter, ktorý uviedol, že pri kliknutí na kategóriu „mesto“, očakával, že mu stránka ponúkne zoznam miest na Slovensku. 6.2.1.2 Absencia rozšíreného vyhľadávania Návštevník webu problém absencie akéhokoľvek rozšíreného vyhľadávania nepocíti, ak potrebuje vyhľadať jednoduchú informáciu 55 . Pokiaľ má však užívateľ náročnejšie požiadavky na vyhľadávanie, stránka mu neposkytuje žiadnu pohodlnú cestu ako svoju požiadavku naplniť. Úloha 5. v našom testovaní predstavovala komplikovanejšiu požiadavku užívateľa na vyhľadávanie. V úlohe sa však nachádzajú hľadané výrazy, ktoré by sme mohli zaradiť do viacerých kategórii vyhľadávania. Účastníci k zadanej úlohe pristupovali rôzne. Jana zvolila stratégiu hľadania cez kľúčové slová, kde do poľa vyhľadávania zadala „bratislava tábor“. S ponúknutými výsledkami sa síce uspokojila, ale zároveň dodala že zvolený postup nepovažuje za najlepší. Iný prístup zvolila Dagmar, ktorá najprv vyhľadala miesto jej pôsobiska – Bratislava. Keďže s ponúknutými výsledkami nebola spokojná dúfala, že kliknutím na „Kľúčové slová“ bude môcť jej vyhľadávanie rozšíriť. Stránka jej však ponúkla nové hľadanie pomocou vybranej kategórie, kde Dagmar zadala „tábor“. Výsledky vyhľadávania jej nepriniesli vhodné výsledky a preto zhodnotila, že úlohu dokončiť nevie. Zároveň sa vyjadrila, že by ocenila na stránke rozšírené vyhľadávanie. Podobne hodnotili úlohu aj Peter, Richard aj Zuzana. 6.2.1.3 Ponuka nerelevantných výsledkov vyhľadávania Vyhľadávače akýchkoľvek informácii by si mali na ponuke relevantných výsledkov vyhľadávania zakladať. Z uvedeného hľadiska je zistený problém pre stránku kľúčový. Príčiny priamo súvisia s problémami popísanými vyššie. Užívateľ je často na stránke limitovaný zaradením svojho kľúčového výrazu do kategórie vyhľadávania. Ako obmedzenie pri vyhľadávaní môžeme chápať aj absenciu rozšíreného vyhľadávania. Tento 55 Pod týmto pojmom rozumieme informácie ako napríklad: meno organizácie, názov mesta, dediny, aktivitu alebo iný výraz, ktorý by sme mohli jednoducho zaradiť do troch ponúkaných kategórii.
  • 42. 36 aspekt limituje užívateľa v slobode vyhľadávania a ovplyvňuje výsledky, keďže sa užívateľ musí prispôsobovať týmto obmedzeniam a meniť stratégiu vyhľadávania. 6.2.1.4 Nesprávna identifikácia reklám používateľom Reklamy sú dôležitou súčasťou webových stránok neziskových organizácii. Pomáhajú udržiavať web stránku online a môžu motivujú tvorcov k jej ďalšiemu rozvoju. Reklamné bannery ale môžu užívateľov vyrušovať pri plynulom prechádzaní stránkou. Pri testovaní sme objavili problém, pri ktorom niektorí používatelia nerozpoznali reklamu od ostatných prvkov na stránke. Napríklad používateľ Peter sa po testovaní vyjadril, že pri prechode stránkou vyhodnotil blok troch reklám na úvodnej obrazovke nie ako reklamný blok ale ako „posledne použité položky“ alebo „náhodne sa objavujúce výsledky“. Negatívny postoj zaujímali aj ostatní účastníci testovania. Vyrušovali ich pri najmä blikajúce reklamy. 6.2.1.5 Veľkosť nedôležitých oznámení v kontraste s dôležitými. Veľkosť dôležitých oznámení na stránke je kľúčová z hľadiska komunikácie web stránky s užívateľom. Ak nie je dodržaná hierarchia (dôležitá informácia – najväčšia; najmenej dôležitá informácia – najmenšia) nemusí byť informácia správne prijatá recipientom. Dagmar pri plnení úlohy č. 2 najskôr preskenovala zrakom celú stránku, kým našla potrebné východisko v zadanej úlohe. Richard pri plnení rovnakej úlohy ako Dagmar, nenašiel vhodné tlačidlá pre stiahnutie potrebných tlačív. Tieto dve situácie vhodne ilustrujú objavený problém, kde spomínané tlačidlá boli umiestnené v strede stránky. Boli však príliš malé a obklopené ostatnými prvkami stránky. Na záver kapitoly uvádzame tabuľku so štatistickým výskytom konkrétneho problému. Čísla v stĺpci „početnosť výskytu“ reprezentujú počet užívateľov v testovaní u ktorých sme zaznamenali konkrétny problém.
  • 43. 37 Tabuľka č. 2 Početnosť výskytu objavených projektov. popis problému početnosť výskytu nesprávne pochopenie „kategorizácie“ vyhľadávania 3x nesprávna identifikácia reklám 1x detailné skenovanie stránky 4x nespokojnosť s zobrazenými výsledkami 2x neschopnosť dokončiť zadanú úlohu 2x 6.3 Zhrnutie výsledkov V analytickej časti tejto práce sme využili dva nástroje na zistenie nedostatkov použiteľnosti stránky. Heuristické hodnotenie a užívateľské testovanie. Na základe dát, ktoré nám poskytli tieto nástroje sme identifikovali niekoľko problémov v dizajne stránky. Technika heuristického hodnotenia nám poskytla predbežný pohľad na problémy v užívateľskom rozhraní. Tieto informácie nám slúžia ako predbežný rámec problémov na ktorý sa v testoch použiteľnosti zamerať. V praktickej časti práce sme analyzovali jednotlivé prvky web stránky. Pri analýze sme vychádzali s desiatich heuristík 56 pre UID57, ktoré definoval svetovo uznávaný expert na použiteľnosť J. Nielsen. Ako kľúčové prvky stránky sme vyhodnotili Navigáciu, Vyhľadávanie a Reklamné bannery, ktoré sme podrobili heuristickému hodnoteniu. V globálnej navigácii sme vyhodnotili ako nedostatok: formátovanie písma a umiestnenie navigácie na stránke. Prvok vyhľadávania sme hodnotili v troch kategóriách.  Vyhľadávacie pole  Možnosti vyhľadávania  Zobrazenie relevantných výsledkov V prvej menovanej sme ako nedostatok označili veľkosť a umiestnenie vyhľadávacieho pola. Ako chybu použiteľnosti vnímame aj funkcionalitu možností 56 NIELSEN, J.: 10 Usability Heuristics for User Interface Design. [online]. [2000-19-03]. Dostupné na: <http://www.nngroup.com/articles/ten-usability-heuristics/> 57 UID – User Interface Design
  • 44. 38 vyhľadávania, ktorú môžeme definovať skôr ako funkciu tzv. kategorizovania vyhľadávania. Tento nedostatok v dizajne stránky vážne ovplyvňuje relevanciu výsledkov vyhľadávania. Heuristické hodnotenie nám poskytlo vhodnú východiskovú situáciu pre užívateľské testovanie. V tomto testovaní sme presnejšie identifikovali niekoľko problémov použiteľnosti. Medzi problémy s najvyššou prioritou patrili:  Nesprávne pochopenie „kategorizácie“ vyhľadávania  Absencia rozšíreného vyhľadávania  Ponuka nerelevantných výsledkov vyhľadávania  Nesprávna identifikácia reklám používateľom  Veľkosť nedôležitých oznámení v kontraste s dôležitými. Tieto problémy sme bližšie popísali v predchádzajúcich kapitolách. Pri užívateľskom testovaní sme identifikovali aj menej kritické problémy, ktoré ovplyvňujú plynulý priechod stránkou len minimálne. Zaradujeme tam nasledovné:  Nevýrazné tlačidlá pre stiahnutie darovacích formulárov.  Nevýrazná veľkosť vyhľadávacieho poľa. Na základe zistených nedostatkov v použiteľnosti sme navrhli riešenia a vytvorili prototyp, ktorý reprezentuje doporučené riešenia na zlepšenie použiteľnosti analyzovanej web stránky. 7 Návrh riešenia Pri navrhovaní riešenia som ako prvý krok zvolil tvorbu jednoduchého wireframu nakresleného na papier. Wireframe môžeme definovať ako predbežný jednoduchý model budúceho používateľského prostredia v ktorom sú zachované všetky dôležité prvky stránky. Wireframe má slúžiť ako jednoduchá prezentácia budúceho prototypu, ktorý má za cieľ vyriešiť všetky objavené problémy. Existujú viaceré formy wireframu, ale v tejto fáze som zvolil jednoduchý drôtený model na papieri. Táto forma mi poslúži ako východiskový pre tvorbu pokročilejšieho interaktívneho prototypu, ktorý bude lepšie reprezentovať funkcionalitu a vzhľad.
  • 45. 39 Následne som tento wireframe prepracoval do digitálnej a interaktívnej podoby. Na vytvorenie prototypu som si vybral program Axure RP pre jednoduchosť používania, komplexnosť a rozsah ponúkaných možností. Axure RP je profesionálny nástroj pre tvorbu wireframov a interaktívnych prototypov, ktorý je zameraný na tvorbu desktopových a webových užívateľských prostredí. Využil som preto 14 dňovú bezplatnú verziu pre návrh interaktívneho prototypu, ktorý pomôže vyriešiť väčšinu identifikovaných chýb použiteľnosti na stránke a zlepší užívateľský zážitok z prezerania. 7.1.1.1 Základné zobrazenie Pri tvorbe prototypu som sa riadil nadobudnutými poznatkami o chybách použiteľnosti, ktoré sme objavili pri užívateľskom testovaní. Pri návrhu som predovšetkým dbal na oblasti vyhľadávania. Prototyp rieši logickú nenadväznosť možností vyhľadávania s vyhľadávacím poľom. Umiestnil som prvky možností vyhľadávania priamo k vyhľadávaciemu poľu a umiestnil som obi dva prvky do šedého rámu aby som zvýraznil ich logickú príslušnosť. Vyhľadávacie pole som pri navrhovaní zväčšil aby sa z oblasť vyhľadávania stala opticky dominantnou (viď. príloha B). Globálna navigácia sa v prototype nachádza na pravej strane v oranžovom páse. Na tomto mieste ju užívateľ pri tomto type stránok obvykle očakáva.58 Je spracovaná bielym tučným písmom aby bola na stanovenom mieste dobre vidieť. Povahu, veľkosť a tvar reklamných bannerov som pri návrhu zachoval, ale umiestnil som ich do šedého rámu, ktorým potlačím optickú disharmóniu a šum pri prehliadaní, ktorý vďaka týmto reklamám, na domovskej stránke panoval. V šedom rámci pôsobia stabilne a usporiadane, pričom sa nemení povaha ani spracovanie jednotlivých reklám. 7.1.1.2 Výsledky vyhľadávania Stránka s ponukou výsledkov vyhľadávania je veľmi neprehľadná v prípade ak sa užívateľovi zobrazí len jeden alebo dva výsledky (viď. príloha C). Dizajn stránky núti používateľa pohľadom skenovať celú stránku a hľadať nevýrazný výsledok vyhľadávania. Výsledky potláča najmä reklama, ktorá sa nachádza priamo pod navigáciou. Pri niektorých zobrazeniach môže byť len textová, no prevažuje štvorcový reklamný banner, ktorý svojou veľkosťou a zasadením do príliš širokého žltého rámu, opticky potláča najdôležitejšiu informáciu na stránke – výsledok vyhľadávania. Preto som v prototype umiestnil túto 58 http://www.webdesignerdepot.com/2011/11/navigation-patterns-for-ten-common-types-of-websites/
  • 46. 40 reklamu na pravú stranu (viď. príloha D). Navrhnuté riešenie ponúka zobrazenie reklamy na rovnako výhodnom mieste na stránke, ale nezasahuje tak radikálne do ponúknutých výsledkov. Panel, ktorý užívateľovi ponúkal informácie o počte nájdených organizácii som pri návrhu zväčšil a umiestnil na dominantnejšiu pozíciu v akej je v aktuálnej verzii stránky. Text som zväčšil a oddelil pre lepšiu čitateľnosť a prehľadnosť. Reklamy, ktoré sa nachádzajú na spodnej strane stránky som umiestnil do šedého rámu ako pri domovskej stránke. Stránka užívateľom však neponúka len jeden výsledok vyhľadávania. Vo väčšine prípadov ponúka väčšie množstvo výsledkov (viď príloha E). V takom prípade je situácie mierne odlišná. Výsledky vyhľadávania sa svojím počtom stávajú dominantou a nestrácajú sa tak v obklopení reklám. Paradoxne sa situácia mení natoľko, že spodný pás reklám, bežný užívateľ nemusí ani uvidieť ak mu stránka ponúkne veľa výsledkov vyhľadávania. Je to spôsobené tým, že je veľmi pravdepodobné, že si užívateľ z veľkého množstva poskytnutých vyberie, alebo stratí záujem si prezrieť všetky ponúknuté výsledky. Aj keď reklamy môžu užívateľov otravovať, tak pre prevádzkovateľov stránky sú dôležitým zdrojom financií na prevádzku web stránky. Pri navrhovaní prototypu som dbal aj na túto skutočnosť a umiestnenie reklamných bannerov som umiestnil na pravú stranu, hneď vedľa výsledku vyhľadávania (viď. príloha F). Tieto bannery sú rovnomerne rozmiestnené pozdĺž všetkých výsledkov vyhľadávania. Pri tomto kroku som dbal, na rovnomerné rozmiestnenie, keďže vysoká frekvencia zobrazovaných reklám pri výsledkoch by mohla užívateľa vyrušovať. 7.1.1.3 Stránka vybranej organizácie Pri návrhu riešenie pre stránku vybranej organizácie som sa hlavne zameral na sprehľadnenie ponúkaných informácii. Všetky informácie sú na stránke uvedené veľmi malým písmom (viď príloha G). Pri navrhovaní prototypu som kládol dôraz na sprehľadnenie komunikovaných informácii a zvýraznenie kľúčových prvkov stránky. Veľkosť písma bola zväčšená a kontaktné informácie boli vložené do šedého rámu aby boli opticky zdôraznené a nezanikali pri ostatných textoch na stránke (viď príloha H). Podľa vyjadrenia prevádzkovateľov webu, ktorí uviedli, že preferujú darovanie dvoch percent cez systém Ďakujeme.sk sme tlačidlo pre darovanie cez tento systém posunuli vyššie oproti pôvodnej verzii. Tlačidlá na stiahnutie potrebných tlačív pre darovanie dvoch percent sme zväčšili a umiestnili pod kontaktné údaje organizácie. Reklamné bloky sme po vzore
  • 47. 41 predchádzajúcich stránok umiestnili do šedého rámu. Ich pozícia na stránke však zostala rovnaká. 7.1.1.4 Odporúčania V rámci odporúčaní by bolo vhodné aplikovať zmeny navrhnuté v predchádzajúcej kapitole. Domnievam sa, kategorizácia vyhľadávania je prvkom, ktorý komplikuje prácu a pochopenie. Preto si myslím, že primárna funkcia vyhľadávania, by mohla byť spracovaná po vzore ostatných popredných svetových vyhľadávačov. Konkrétne ide o odstránenie funkcie kategorizácie vyhľadávania a ponechanie vyhľadávacieho poľa samostatne. Vyhľadávací systém, by teda podľa zadaného výrazu automaticky vyhľadal a ponúkol najrelevantnejšie výsledky, bez ohľadu na to či je výraz v nejakej kategórii. Kategorizáciu vyhľadávania by bolo vhodné ponechať ako doplnkovú službu, ktorú si návštevník zvolí sám v prípade potreby. Aplikácia takejto zmeny môže byť ale pre neziskovú organizáciu finančne zaťažujúca. Vyhľadávacie systémy pozostávajú so zložitých algoritmov, ktorých upravenie môže stáť organizáciu veľa penazí. Keďže som dbal na to aby navrhnutý prototyp v predchádzajúcej kapitole ponúkal reálne riešenia pre neziskovú organizáciu, tento návrh som tam nezapracoval.
  • 48. 42 Záver Práca ponúka prehľad problematiky dizajnu webových stránok, kde sme analyzovali postavenie webovej stránky v rámci masovej komunikácie, ako aj popísali problematiku užívateľov a prevádzkovateľov webových stránok. V ďalších kapitolách sme načrtli problematiku návrhu webovej stránky, v ktorej sme sa sústredili na jej podstatné elementy ako sú informačná architektúra a navigačné systémy. Nevynechali sme ani ostatné aspekty tvorby webových stránok, napríklad text a grafické spracovanie. V závere teoretickej časti sme sa venovali oblasti User Experience, kde sme podrobnejšie rozobrali problematiku použiteľnosti webových stránok. V praktickej časti časti práce sme podrobne popísali vybrané metódy hodnotenia použiteľnosti stránky. Z výsledkov heuristického hodnotenia a užívateľského testovania vybranej stránky vyplynulo niekoľko okruhov problémov, ktoré sme podrobne opísali a definovali ich závažnosť. Poskytli nám východisko pre návrh riešenia a tvorbu prototypu stránky. Dúfam, že vytvorený prototyp nájde v budúcnosti uplatnenie v praxi a pomôže stránke dvepercenta.sk eliminovať identifikované problémy. Zároveň verím, že skúsenosti nadobudnuté na pri tvorbe bakalárskej práce v budúcnosti využijem, či už v profesnom alebo osobnom živote.
  • 49. 43 8 Zoznam Literatúry a zdrojov MORVILLE, P. – ROSENFELD, L.: Information Architecture for the World Wide Web. 3. vyd. Sebastopol : O’Reilly Media, 2006. 528 s. ISBN-10: 0-596-52734-9. GARRETT, J. J.: The Elements of User Experience: User-Centered Design for the Web and Beyond. 2. vyd. Berkeley: New Riders, 2011. 191 s. ISBN 10: 0-321-68368-4 NIELSEN, J.: Usability Engineering. Mountain View: Morgan Kaufmann, 1993, 352 s. ISBN: 1-12-518406-9 KRUG, S.: Nenuťte uživatele přemýšlet!. 2. vyd. Brno: Computer Press, 2006, 167 s. ISBN: 80-251-1291-8 GRAY, D.: Profesionální design na webu. Brno: Soft Press s.r.o., 1999. 223 s. ISBN 80- 902824-1-5 MEYER, P.: Attitude Is Everything: If You Want to Succeed Above and Beyond. Scotts Valley: Meyer Resource Group, 2003, 26 s. ISBN: 978-0-89811-304-4 MIOVSKÝ, M.: Kvalitativní přístup a metody v psychologickém výzkumu. Praha: Grada, 2006. 332 s. ISBN 80-247136-2-4 RUBIN, J. – CHISNELL, L.: Handbook of Usability Testing, Second Edition: How to Plan, Design, and Conduct Effective Tests. 2. vyd. Indianapolis: Wiley Publishing, 2008. 386 s. ISBN: 978-0-470-18548-3. Internetové zdroje: LUHA, M.: Masová komunikácia na zjedenie. [online]. [2014-02-04]. Dostupné na: <http://www.masmedialne.info/marian-luha-masova-komunikacia-na-zjedenie- koncentracia-kontorola-a-globalizacia-medii/>. Contextual Inquiry. [online]. [2010-01-01]. Dostupné na: <http://www.usabilitybok.org/contextual-inquiry>. Personas. [online]. [2014-06-03]. Dostupné na: <http://www.usability.gov/how-to-and- tools/methods/personas.html>.