Uživatel Použitelnost a přístupnost webu
Něco málo z marke
2
Maslowova pyramida na webu
3
Dostupnost • viditelnost webu ve vyhledávačích – většinu uživatelů/zákazníků nelze získat jinak než přes vyhledávače
• dostupnost serveru – dnes minoritní problém – velikost prostoru pro web není tak důležitá jako dostupnost serverů, jejich výkon a rychlost připojení (a další parametry)
• přístupnost (bezbariérový web) – zpřístupnění maximálnímu počtu uživatelů 4
Použitelnost • jednoduché a intui
• použitelný web nemusí zdaleka znamenat ziskový web • mnoho webů končí u použitelnos<… 5
Důvěra • přesvědčit uživatele • důvěra ve správnost produktu/nalezené informace • důvěra v brand (podporována použitelnosU) – věhlasná značka e-‐shopu/organizace na webu podstatně zvyšuje ochotu návštěvníků nakupovat/ získávat informace
6
Touha • týká se komerčních webů • dodatečná mo
7
Přístupnost • Vyhláška č. 64/2008 Sb. o formě uveřejňování informací souvisejících s výkonem veřejné správy prostřednictvím webových stránek pro osoby se zdravotním pos<žením (vyhláška o přístupnos< webových stránek orgánů veřejné správy) – Obsah webových stránek je dostupný a čitelný – Práci s webovou stránkou řídí uživatel – Informace jsou srozumitelné a přehledné – Ovládání webu je jasné a pochopitelné – Kód je technicky způsobilý a strukturovaný – Prohlášení o přístupnos< webových stránek 8
Přístupnost (2) • WAI (Web Accessibility Ini
• Sec
Přístupnost (3) • Blind Friendly Web – přístupnost webových stránek pro nevidomé a slabozraké (hnp:// blindfriendly.cz/) • další související informace – dogma W4D: h"p://www.pixy.cz/dogma/ dogmaw41/ – systémy pro testování přístupnos*: h"p:// pristupnost.nawebu.cz/nastroje/ – h"p://pristupnost.inspira*ve.cz/ 10
Umění vs. design • John O'Nolan (webdesigner z UK, majitel Lyrical Media) – rozdíl je v přístupu k tvorbě – Dobré umění inspiruje, dobrý design mo*vuje – Dobré umění je interpretováno, dobrý design je pochopen – Dobré umění je o talentu, dobrý design je o dovednostech – Dobré umění předává každému rozdílné sdělení, dobrý design předává každému sdělení stejné 11
Účel webdesignu • ovlivnit mínění návštěvníka a jeho chuť k práci s webem • předat informace jednoduchou a přehlednou formou • zanechat dobrý dojem, odlišit se od konkurence • Steve Krug: “Inovujte jen když víte, že máte lepší nápad (a každý, komu ho ukážete, bude nadšen), v opačném případě využijte zvyklosU.” 12
Důsledky špatného webu • malá návštěvnost • absence opětovných návštěv • slabá či žádná reakce na nabídku (u komerčních webů) • složitá aktualizace a správa webu
13
Design zaměřený na uživatele • 5 faktorů použitelnos< (Jakob Nielsen): – šance naučit se s webem pracovat (snadnost použiZ) – zapamatovatelnost použiZ – účinnost použiZ (nevyžaduje příliš práce uživatele) – spolehlivost použiZ (funguje správně) – uspokojení požadavků uživatele (výsledek předchozích aspektů) 14
Použitelný web • Neexistuje absolutní definice toho, jak vytvořit použitelný web – závisí na mnoha faktorech: – definované skupině uživatelů – účelu webu – médiu použitému k publikování (např. vhodná velikost textu na obrazovce – pro čtení × pro *sk) – frekventovanos* používání (příležitostně navštěvovaný web × web používaný k práci) – a jiné … 15
Špatně použitelný produkt
16
Špatně použitelný produkt (2)
17
Použitelný web (2) • co nejrychlejší načítání • intui
Grafická stránka použitelnos< • ne vždy grafika omezuje použitelnost – první dojem je založen na vzhledu (kompromis: nepatrné snížení rychlos* načítání za cenu zatrak*vnění vzhledu) – mozek zpracovává obrázky rychleji než text (doplnění textu názornými ilustracemi) – barva a obraz může pomoci v navigaci – grafické technologie mohou zvýšit funkčnost (např. otočná panorama*cká fotografie luxusního hotelového pokoje) 19
Důležitost použitelnos< • dobrá použitelnost není vidět • uživatel si zvykne na cokoliv jen pokud nemá jinou volbu • konkurence je vzdálená jen 1 kliknuU • Tim Berners-‐Lee (zakladatel W3C): – Síla webu je v jeho univerzalitě. Přístup pro každého bez ohledu na handicap je zásadní prvek.
20
Uživatel a přístupnost/použitelnost • uživatel může pracovat v jiném prostředí, než které tvůrce považuje za “normální” – 20 až 30 % internetových uživatelů je různě znevýhodněných • pos<žení zrakové (nevidomí, slabozrací, barvoslepí), pohybové (pos<žení horních konče
– různé operační systémy, internetové prohlížeče či alterna
Uživatel • neexistuje všeobecný uživatel – počítat s parametry skutečného návštěvníka – zrakový systém • vidění (fyziologické vlastnos<) • vnímání (psychologické/kogni
– hardwarové a so`warové vybavení – možnos* pohybu – okolí uživatele (osvětlení, hluk) 22
Vidění • nejdůležitější aspekt • vnímání barev lidským okem (odsUn, sytost, světlost) • vady zraku – nerozlišování barev s podobným odsUnem při podobné světlos< a sytos< • nejběžnější vada: barvoslepost u červené a zelené (problém s jejich rozlišením pokud jsou podobně syté a světlé) 23
PřipomenuU
24
Snížená schopnost vidění • nepoužívat text, grafiku a pozadí s podobným odsUnem, sytosU a světlosU (udržovat kontrast) • různý odsUn, sytost a světlost u navšUvených a nenavšUvených odkazů i vůči pozadí • nepoužívat složitá pozadí (různé odsUny vzorků) • zajis
Nevidomí • nepoužívají myš ani monitor • čtečka obrazovky – výstup hlasový (SW) nebo hmatový (braillský řádek, HW) – text na vstupu zpracováván linearizovaně (postupně zleva doprava) –> nedokáží přeskakovat pro uživatele zdánlivě irelevantní informace – nedokáží interpretovat grafiku nebo rozvržení – alterna*vní vyjádření obrazové informace (výs*žný textový popis) 26
Braillský řádek
27
Paměť • důležitá pro správné použiU webu • návštěvník se snaží nepamatovat si vědomě • uživatel nechce přemýšlet nad něčím, u čehož neočekává potenciální přínos – chce získat maximum za minimální úsilí • rozpoznávání je jednodušší než připomenuU něčeho (vzpomínání) – navšUvené odkazy nedělat stejné jako nenavšUvené 28
Paměť (2) • obrazová paměť je nejspolehlivější – vytvářet domovskou stránku (“bezpečná” zóna) jasně vizuálně odlišnou od ostatních stránek • krátkodobá paměť – uchová málo podrobnosU – uživatel si obvykle vzpomene na 7 ± 2 položky – na výběr nabízet 5 až 9 podobných skupin voleb – návštěvník si obvykle pamatuje 3 po sobě jdoucí stránky/položky – umožnit mu najít požadovaný obsah v co nejmenším počtu kliknuZ 29
Reakce na vjemy • uživatel je nepřetržitě bombardován podněty, ze kterých získává význam – musí vnímaná data vyfiltrovat (vědomě i nevědomě): – prahy – vnímáme jen něco překračující určitý práh –> vytvářet dostatečně odlišné prvky na stránce – “efekt koktejlové party” – schopnost koncentrace na důležitá data při zahrnuZ nepodstatnými podněty –> omezit konkurenci objektů na stránce – smyslové přizpůsobení – zvyknuZ si a nereagování na podnět –> často měnit položky 30
HCI • Human Computer Interac
31
Op
• matení barvou nebo tvarem • dvojsmysly – při zaměření na různé prvky lze vnímat více způsoby • chybné vnímání prostoru 32
33
34
Kanizsův trojúhelník
35
36
Jiskřící mřížka
37
38
39
40
Nechtěné dvojsmysly v praxi
41
Penroseův trojúhelník/čtverec
42
43
Hardwarové a so}warové omezení • doba načítání a pravděpodobná reakce – 0,1 s: žádný problém (téměř okamžitá odezva) – 1,0 s: žádný vážný důvod k přerušení – 10 s: hranice udržení pozornos*, uživatel může odejít – měla by být zpětná vazba (sta*cký postupový diagram) – nad 10 s: uživatel prohlíží jiné weby v jiných oknech – nabídnout neustálou zpětnou vazbu zobrazující postup (čas, podíl stažených dat) 44
Hardwarové a so}warové omezení (2) • čas je podstatnější než objem přijatých dat • přednačtení stránek (během nečinnos<) odkazovaných z aktuální stránky – nástroj pro zrychlení prohlížeče – většinou ne všech, ale jen některých – na základě cest, kterými uživatelé obvykle procházejí
45
Prohlížeče v ČR
46
Prohlížeče v Evropě
47
$! !) * $! !%" !) * $! !&" !) * $! !'" !) * $! !(" !) * $! !+" !) * $! !," !) * $! !)" !) * $! #!" !) * $! ##" !) * $! #$" #! * $! !#" #! * $! !$" #! * $! !%" #! * $! !&" #! * $! !'" #! * $! !(" #! * $! !+" #! * $! !," #! * $! !)" #! * $! #!" #! * $! ##" #! * $! #$" ## * $! !#" ## * $! !$" ## * $! !%" ## * $! !&" ## * $! !'" ## * $! !(" ## * $! !+" ## * $! !," ## * $! !)" ## * $! #!" ## * $! ##" ## * $! #$" #$ * $! !#" #$ *! $"
Rozlišení displeje v ČR !"#$%&'()*+%,-.*/"012+3(%*&*45*
(!"
'!"
&!" ,!!*#!$&"
#!)%*#$,!"
%!"
$!" #%(!*#&&!"
#(!!*#(,!"
#)$!"
-./0"
#!"
!"
48
Možnos< pohybu • minimalizovat námahu při použiU ovládacích zařízení – op<malizovat přístup pro použiU klávesnice na všech stránkách (ne jen s formuláři) – minimalizovat vzdálenost pohybu myši mezi po sobě jdoucími volbami – minimalizovat nutnost pohybu myši mezi navigací webu a tlačítkem “Zpět” v prohlížeči – vytvářet dostatečně velké oblas< pro výběr a vhodně je rozmís
Okolí uživatele • web musí být přenesen do světa uživatele, ne obráceně – pravděpodobné prostředí, ze kterého bude přístup k webu realizován • kancelář – přístup pomocí počítače, 1 uživatel, klid, vysoká rychlost připojení • domácí kancelář – obecně počítač, 1 uživatel, proměnlivý hluk (spíše klid), zaměření na práci i zábavu, různá rychlost, přístup kdykoli • domácí počítač – často herní videokonzole, i více uživatelů, proměnlivý hluk, omezená možnost psaní, zaměření na zábavu, neočekává se <sk 50
Okolí uživatele (2) • internetová kavárna – počítač, i více uživatelů, proměnlivý hluk, zaměření na zábavu a vyhledávání, vysoká rychlost, ohled na zabezpečení a soukromí • veřejný internetový stánek – stojící uživatel, proměnlivý hluk, omezená možnost psaní, zaměření na e-‐mail, přístup k důležitým informacím (často souvisejícím s lokalitou) apod., nízká rychlost 51
Okolí uživatele (3) • automobil – PDA/telefon, omezená možnost psaní, zaměření na důležité informace (často související s lokalitou), nízká rychlost • hromadná přeprava – PDA/telefon/laptop, i stojící uživatel, hluk, zaměření na zábavu i práci a informace související s lokalitou, nízká rychlost, ohled na zabezpečení a soukromí • vnější prostory – PDA/telefon, problém s nasvícením displeje, omezená možnost psaní, stojící i pohybující se uživatel, proměnlivý hluk, zaměření na důležité informace související s lokalitou, nízká rychlost 52
Další parametry uživatele • sluch – zvuk při krátké a jednoduché informaci, která nemůže být uvedena později (např. varování), při možné nečitelnos* atd. – SW na získání textu ze zvuku –> *tulky
• čich, chuť – význam pro webdesign spíše v budoucnu
53
Model návštěvníka webu • tzv. persona – fik
– nejlépe fungují pro menší cílové skupiny 54
Testování použitelnos< a přístupnos< • hledání možných problémů, ne argumentů podporujících, co je uděláno dobře • techniky (různá hlediska) – automa*cké – so`ware – inspekční – odborník na použitelnost – empirické – za účas* potenciálních uživatelů
55
Literatura • Řezáč, J. Maslowova pyramida na webu. 2009. URL: h"p:// blog.filosof.biz/maslowova-‐pyramida-‐na-‐webu/ • O’Nolan, J. The Difference Between Art and Design. 2009. URL: h"p://www.webdesignerdepot.com/2009/09/the-‐ difference-‐between-‐art-‐and-‐design/ • Powel, T. A. Web design – kompletní průvodce. 2004. ISBN 80-‐7226-‐949-‐6. • Krug, S. Webdesign – Nenuťte uživatele přemýšlet. 2007. ISBN 80-‐251-‐1291-‐8. • Špinar, D. Tvoříme přístupné webové stránky. 2004. ISBN 80-‐86815-‐11-‐0. 56
