Univerzita Karlova v Praze Filozofická fakulta Ústav informačních studií a knihovnictví Studijní program: Informační studia a knihovnictví Studijní obor: Informační studia a knihovnictví
Martin Mráz
Tvorba úspěšných webových stránek v komerční sféře Bakalářská práce
Praha 2008
Vedoucí bakalářské práce: Ing. Martin Souček, PhD. Oponent bakalářské práce: Datum obhajoby: 2
Hodnocení: Děkuji Martinu Součkovi za trpělivost a cenná doporučení během psaní této bakalářské práce. Děkuji také Karlu Minaříkovi za skvělé přednášky o web designu na Institutu digitálních médií, bez kterých bych v určitých okamžicích psaní této práce nevěděl, jak dál. V neposlední řadě bych chtěl poděkovat Jiřímu Helmichovi za cenné připomínky a korekturu a Michalu Tuláčkovi za cenné rady se systémem LATEX.
Prohlašuji, že jsem svou bakalářskou práci zpracoval samostatně a že jsem uvedl všechny použité informační zdroje.
3
V Praze dne 31.7.2008 Martin Mráz Identifikační záznam: MRÁZ, Martin.Tvorba úspěšných webových stránek v komerční sféře [Making of successful web sites]. Praha 2008. 51 s. Bakalářská práce (Bc.). Univerzita Karlova v Praze, Filozofická fakulta, Ústav informačních studií a knihovnictví. Vedoucí bakalářské práce Ing. Martin Souček, PhD.
Abstrakt: Tato bakalářská práce je věnována návrhu webu z hlediska grafiky, použitelnosti, přístupnosti a obsahu. První kapitola se věnuje návrhu webu a informacím, které je nutno znát ještě před samotným začátkem procesu. Druhá kapitola poté shrnuje grafickou stránku webu, rozebírá kompozici a doporučení. Třetí kapitola je věnována použitelnosti a faktorům, které ji ovlivňují. Zmíněna je i problematika použitelnosti nových technologií. Kapitola o přístupnosti rozebírá pravidla přístupnosti a upozorňuje na nejčastější problémy přístupnosti u komerčních webů. V poslední kapitole jsou rozebrány komponenty, které ovlivňují úspěšnost textu a rady, jak takový text napsat. Klíčová slova: návrh webu, grafika, použitelnost, přístupnost, obsah webu
4
Obsah Obsah................................................................................................................................................ 5 2.1 Informační architektura webu.............................................................................................. 10 2.2 Proces návrhu.......................................................................................................................10 2.2.1 Strategie........................................................................................................................ 10 2.2.2 Specifikace.................................................................................................................... 11 2.2.3 Struktura....................................................................................................................... 11 2.2.4 Kostra............................................................................................................................ 12 2.2.5 Povrch........................................................................................................................... 13 3.1 Funkce grafiky..................................................................................................................... 14 3.2 Kompozice........................................................................................................................... 16 3.2.1 Kompozice pomocí mřížky...........................................................................................16 3.2.2 Jasná vizuální hierarchie............................................................................................... 18 4.1 Pravidla použitelnosti.......................................................................................................... 20 4.2 Datová velikost webu.......................................................................................................... 20 4.3 Použitelnost navigace.......................................................................................................... 21 4.3.1 Odkazy.......................................................................................................................... 21 4.3.2 Základní navigace......................................................................................................... 22 4.3.3 Drobečková navigace....................................................................................................23 4.3.4 Kontextové vazby......................................................................................................... 24 4.4 Použitelnost vyhledávání..................................................................................................... 24 4.4.1 Relevantnost výsledků.................................................................................................. 25 4.4.2 Různé možnosti řazení a filtrování výsledků................................................................26 4.4.3 Vyhledávání dle parametrů, kombinace kritérií........................................................... 29 4.4.4 Kontrola překlepů a špatně napsaných výrazů............................................................. 30 4.4.5 Synonyma a související výrazy.................................................................................... 31 4.4.6 Žádné vysledky vyhledávání........................................................................................ 32 4.5 Použitelnost webu a trendy.................................................................................................. 34 4.5.1 Flash.............................................................................................................................. 34 4.5.2 Asynchronous JavaScript and XML............................................................................. 35 4.6 Použitelnost úvodní stránky................................................................................................. 36 4.7 Měření použitelnosti............................................................................................................ 37 4.7.1 Uživatelské testování použitelnosti.............................................................................. 37 4.7.2 A/B Testing................................................................................................................... 37 5.1 Pravidla přístupnosti............................................................................................................ 39 5.1.1 WCAG.......................................................................................................................... 39 5.1.2 Česká pravidla přístupnosti...........................................................................................40 5.1.3 Zobrazování webu na různých zařízeních.................................................................... 41 5.1.4 Tisková verze webu...................................................................................................... 42 5.1.5 Šířka webu.................................................................................................................... 44 5.1.6 Flash.............................................................................................................................. 45 5
6.1 Psaní pro web....................................................................................................................... 47 6.2 Typografie na webu............................................................................................................. 49 6.2.1 Řez písma......................................................................................................................49 6.2.2 Používání nadpisů, odkazů a krátkých odstavců textu................................................. 49 6.2.3 Velikost písma.............................................................................................................. 49 6.2.4 Šířka bloku textu........................................................................................................... 50 6.2.5 Výška řádku.................................................................................................................. 50 7 Závěr
47
6
Kapitola 1 Úvod Internet se stal nedílnou součásti života milionů lidí na celém světě. Jak ukazuje graf 1.1, počet lidí připojených z domova k internetu v České republice se v posledních letech rapidně zvyšuje. Stoupá i počet domácností které jsou připojeny vysokorychlostně.
Obrázek 1.1: Graf připojení domácností k internetu, ČSÚ [7] (www.cszo.cz)
Jak dále ukazují statistiky Českého statistického úřadu[7], 77 % lidí vyhledává na internetu nabídku zboží a služeb, 15 % lidí pak přes internet pravidelně nakupuje. Vezmeme-li tyto statistiky v úvahu, stává se web čím dál tím silnějším marketingovým nástrojem s obrovským potenciálem pro oslovení nových zákazníků. Jak však upozorňuje Jakob Nielsen v knize Web.Design[22], web může být jen natolik úspěšný, nakolik je efektivně zpracovaný, což dokládá následujícím výrokem: „Špatná efektivita webu = Žádný zákazník“ Jak si však Nielsen všímá, velké množství firem dává přednost představám managementu před pohodlím návštěvníka webu. 7
Tato práce by měla shrnout tvorbu webu dle pravidel a zažitých zvyklostí, které mohou napomoci k úspěchu. V kapitole Návrh webu se zabývám jednotlivými fázemi vývoje. Tato kapitola by nikdy nevznikla nebýt přednášek Karla Minaříka Úvod do web designu[17]. Právě poznámky z těchto přednášek byly pro mě vodítkem, jak tuto kapitolu zpracovat i zdrojem dalších pramenů, ze kterých jsem v této práci čerpal. Tímto mu za ně děkuji. V další kapitole rozeberu podstatu použitelnosti a zaměřím se na komponenty, které zpravidla rozhodují o tom, zda se web dobře používá. Dále následuje shrnutí pravidel přístupného webu a jejich aplikace na praktické příklady. Kapitolu o textu věnuji tomu, jak by měl vypadat text pro web a to po stránce stylistické i vizuální. V práci se zaměřím na weby firemní, tedy takové, jejichž cílem je nabídnout své služby nebo produkty a elektronickým obchodům, jejichž cílem je co nejvyšší konverze, tedy procentuální podíl návštěvníků, kteří si v obchodě objednají nějaký produkt. Přestože jsem se pokusil o zasazení této práce do českého prostředí, často používám jako příklady weby zahraniční. Web design v České republice má totiž zejména v oblasti použitelnosti velké rezervy a ilustrační příklady pro některá doporučení bychom hledali bohužel marně.
8
Kapitola 2 Návrh webu Tak bylo již zmíněno v první kapitole, ještě před začátkem návrhu úspěšného webu je nutno si uvědomit, že tím nejdůležitějším článkem, který rozhoduje o úspěchu či neúspěchu je návštěvník webu – uživatel. Podstatné tedy je, aby veškeré potřeby návštěvníka byly v průběhu celého vývoje kladeny na tu nejvyšší pozici. Pokud je toto dodrženo, výsledný web je webem uživatelsky orientovaným. Filozofie a proces, při kterém mají potřeby návštěvníka při návrhu tu nejvyšší prioritu se nazývá User Centered Design[36]. Karel Minařík[17] cituje průkopníka User Center Designu, Alana Coopera: „User’s Tasks ≠ User’s Goals.“
Cooper upozorňuje, že úkoly uživatele, které musí splnit na cestě k cíli, neodpovídají cílům uživatele, někdy jsou dokonce v opozici[3]. Cíle návštěvníka mohou být například následující: • objednat a nakoupit zboží • nalézt určitou informaci • objednat posílání newsletteru Za úkoly návštěvníka by se pak dala podle Coopera považovat jeho cesta k cíli. O tom, zda se uživatel dostane bez problému ke svému cíli rozhoduje přehlednost a jednoduchost podání informací v rámci celého webu. Proces, při kterém se rozhoduje o tom, jak budou informace uspořádány, je návrhem informační architektury webu.
9
2.1 Informační architektura webu Informační architektura se zabývá návrhem webu s cílem zjednodušit a zpřístupnit informace[13].
Návrh informační architektury zahrnuje[22]: • organizaci obsahu do kategorií • pojmenování kategorií • návrh struktury • návrh navigace • návrh rozložení informací po stránkách • zpracování informací pro efektivní vyhledávání.
2.2 Proces návrhu V knize The Elements Of User Experience[11] Jesse James Garrett rozděluje proces návrhu webu do pěti vrstev: 1. Strategie 2. Specifikace 3. Struktura 4. Kostra 5. Povrch
2.2.1 Strategie Cílem této vrstvy je definovat přidanou hodnotu webu a určit jeho cílového uživatele. Hledají se jedinečné konkurenční výhody a definuje se cílová skupina. Jedinečné konkurenční výhody (USP) Nejprve je třeba určit jedinečné konkurenční výhody (Unique Selling Proposition), tedy přidanou hodnotu webu oproti tématicky stejně zaměřeným webům[35]. 10
Cílová skupina Dále je nutno co nejpřesněji analyzovat, pro jaký typ návštěvníků je web určen. Výsledkem je definice cílové skupiny webu. Zástupcem této cílové skupiny je persona – prototyp uživatele webu[33]. Persona Persona se využívá v průběhu celého procesu tvorby webu jako profil typického uživatele a podobně jako USP ovlivňuje celý tento proces. Na tomto místě je nezbytné poznamenat, že určení cílové skupiny a následné navrhování webu s ohledem právě na tuto cílovou skupinu je zpravidla okamžikem pro úspěch webu klíčovým. Špatně zacílený web, ať už grafikou, strukturou nebo obsahem totiž často může znamenat neúspěch webu a to i v případě kvalitního obsahu, dobré použitelnosti a přístupnosti.
2.2.2 Specifikace Ve druhé vrstvě dochází k transformaci strategie na požadavky. Zde je potřeba přesně specifikovat funkce, které web bude mít. Výstupem specifikace je zpravidla design document webu.
2.2.3 Struktura V této vrstvě vývoje je definována struktura webu, tedy jak budou jednotlivé části webu propojeny dohromady a jaké bude jejich chování. K navrhování struktury se využívá mindmap, jak je možno vidět na obrázku ?.
Obrázek 2.1: Návrh struktury webu ve formě mindmapy za použítí programu Freemind
11
2.2.4 Kostra V této fázi projektu dochází k upřesnění struktury a konkretizaci. Definují se jednotlivé komponenty, konkretní podoba a rozložení jednotlivých funkcí a prvků webu, tak, jak je budou návštěvníci používat. Při návrhu základního rozložení prvku je možno využít různých metod:
Návrh wireframu Wireframe označuje zjednodušený model, který je využíván k definici funkcí a obsahu stránek webu. Wireframe definuje rozložení funkčních prvků, navigaci, znění nadpisů, klíčových textů a tlačítek. Při návrhu wireframu nejsou využívány barvy, ani žádné grafické prvky. Barevně odlišeny jsou pouze odkazy[34]. Příklad takového wireframu můžeme vidět na obrázku ? Obrázek 2.2: Příklad wireframu webu [Symbio3]
12
Prototypování webu pomocí HTML HTML prototyp označuje sadu prototypových stránek webu, které simulují jeho chování. Tyto stránky, podobně jako wireframy, neobsahují žádnou grafiku ani obrázky. Martin Snížek mluví ve své práci Tvorba úspěšného webu[28] o html prototypech jako o „oživlých wireframech“.
2.2.5 Povrch V poslední vrstvě dochází k finálnímu vizuálnímu propojení jednotlivých komponent, vytváří se grafický návrh, web se programuje a plní obsahem.
13
Kapitola 3 Grafika Jak připomíná Jakub Krčmář v knize Adobe Photoshop: Praktický web design[14], návštěvník si udělá svůj názor na vzhled webu a celkový dojem z webu během několika desetin sekundy a ten si pak uchovává a dále na něm staví během celé návštěvy. Funguje to podobně, jako když si uděláme během několika sekund při setkání s neznámým člověkem první dojem a pak se ho velmi obtížně zbavujeme. Pokud si návštěvník podvědomě udělá na web špatný názor, může to velmi výrazně negativně ovlivnit celkový úspěch webu. Naopak, návštěvníkem kladně hodnocený vzhled webu se podílí na budování image firmy, přispívá k dobré použitelnosti a přístupnosti webu. Firma si zajištuje u návštěvníka webu důvěru.
3.1 Funkce grafiky Jak již bylo zmíněno v úvodu, jednou z nejpodstatnějších funkcí grafiky je vizuální prezentace firmy, na jejímž základě si návštěvník buduje důvěru k obsahu webu. Vychází přitom zpravidla z její vizuální identity, tedy z loga a barevného schématu, které firma používá. Jakob Nielsen[22] připomíná, že funkcí grafiky je doplňovat a zpřehledňovat obsah, nikoli zaujímat hlavní roli. Na tomto místě je možno poznamenat, jak si správně všímá Krčmář[14], že hodně kvalitní obsah může grafiku dokonce postrádat. Takový web však pravděpodobně nebude stejně úspěšný, jako v případě spojení kvalitního obsahu s kvalitní grafikou. Karel Minařík v přednášce Úvod do webdesignu upozorňuje, že grafický design je aplikované umění. Z definice se dozvídáme, že aplikované umění je termín používaný pro umělecké prvky, obsažené ve věcech každodenní potřeby, které je tak člověku činí mnohem příjemnější při jejich použití.[37]
14
Každý prvek grafiky webu by tedy měl mít svůj účel. Dohromady by měly tvořit komplexní celek, který bude poskytovat příjemný uživatelský zážitek. Pro splnění výše zmíněného příjemného uživatelského zážitku je tedy nutné, aby byla grafika webu přehledná, s jasnou logickou i vizuální hierarchií a konzistencí jednotlivých prvků.
Obrázek 3.1: Nepřehlednost webu, špatná vizuální hierarchie a vzájemně nesouladné prvky dělají tento web nepoužitelným (http://www.5safepoints.com/)
15
Obrázek 3.2: Přehlednost a dobrá kompozice může být zárukou kvalitního uživatelského prožitku (www.cez.cz)
3.2 Kompozice Jak jsme již zmínili, o použitelnosti grafiky nejvyšší měrou rozhoduje její kompozice. Jedním z populárních způsobů návrhu grafiky webu, který napomáhá vizuální konzistenci a přehlednosti informací a prvků na stránce je grid-based design, neboli návrh webu pomocí mřížky.
3.2.1 Kompozice pomocí mřížky Hlavní myšlenkou grid-based designu je vizuální a strukturální vyváženost webu, kterou je pomocí mřížky možno vytvořit[8].
16
Mřížka neboli Grid je kompozicí jednotlivých prvků designu, která vychází z teorie zlatého středu[12], přičemž aplikace zlatého středu je již po několik staletí považována za záruku perfektní kompozice. Dělíme-li prostor dle pravidla zlatého středu, pak vycházíme z konstrukce na obrázku ?
Obrázek 3.3: Konstrukce zlatého středu (Zdroj: http://www.wikipedia.org)[goldenratio]
Aplikaci této konstrukce na rozvržení webové stránky můžeme vidět na obrázku ?.
Obrázek 3.4: Nákres webu pomocí mřížky (Zdroj: http://www.markboulton.co.uk)[Boulton]
17
Jak však upozorňuje Dave Shea v článku Columns & Grids[26], problémem mřížkového designu může být malá šance ovlivnit vertikální proporce a tedy jeho jednostranná možnost použití pro weby založené na horizontálním layoutu.
Obrázek 3.5: Příklad webu navrhovaného pomocí mřížky (www.uxmag.com)
3.2.2 Jasná vizuální hierarchie Jak upozorňuje Steve Krug v knize Nenuťte uživatele přemýšlet[16], web nebude uživatelsky přívětivý, nebude-li dodržena při návrhu grafiky jasná vizuální hierarchie.
18
„Lidé nebudou používat Váš web, pokud se v něm nezorientují.“ Pravidla jasné vizuální hierarchie pak shrnuje ve třech bodech: • Nejdůležitější věci jsou nejnápadnější • Objekty, které spolu souvisí, jsou vizuálně propojeny • Objekty jsou vizuálně zanořeny je jasné, která informace je podřazená a která nadřazená Krug používá přirovnání ke stránkám novin, kde patří dodržování výše uvedených pravidel k ustáleným konvencím.
19
Kapitola 4 Použitelnost
Míra použitelnosti vyjadřuje to, jak se návštěvníkovi web používá, jak snadné je pro něj splnit cíl, s kterým na web přichází a jaký má z návštěvy webu uživatelský prožitek. Jakob Nielsen v článku Usability 101: Introduction to Usability[21] definuje použitelnost jako soubor pěti kvalitativních komponent: • Naučitelnost – jak jednoduché je pro návštěvníky dosažení základních cílů při první návštěvě webu • Efektivita – jak rychle návštěvníci dosahují cílů po seznámení se s webem. • Zapamatovatelnost – pokud se návštěvník vrací na web po delší době, jak rychle se readaptuje • Chyby – kolik chyb a jaké závažnosti návštěvníci udělají a co znamenají pro jejich další pohyb na webu • Satisfakce – jak se návštěvníkům s webem pracuje, jak jsou spokojeni se svým postupem a výkonem
4.1 Pravidla použitelnosti Narozdíl od pravidel přístupnosti neexistují žádná standardizovaná pravidla použitelnosti. Existuje však soubor tzv. best practices, tedy vžitých pravidel a poznatků, které by měly používání webu výrazně usnadnit.
4.2 Datová velikost webu Jeden z podstatných činitelů, který ovlivňuje uživatelský prožitek jako první, je datová velikost webu. 20
Odborníci hovoří o psychologické hranici 20 sekund, po které je návštěvník webu ochoten čekat na jeho kompletní načtení[14]. Jak ukazuje graf ?, v posledních letech dochází ke zkvalitňování připojení k internetu, a proto se datová hranice, kterou musí webová stránka splnit, aby dodržela 20 sekundový limit, posouvá.
Obrázek 4.1: Graf kvality připojení k internetu v domácnostech, ČSÚ (Zdroj: http://www.cszo.cz) [CSU]
4.3 Použitelnost navigace Navigace označuje bloky odkazů, pomocí kterých se uživatel pohybuje po webu.
4.3.1 Odkazy „Dejte jasně najevo, na co lze klepnout,“zní název jedné z kapitol knihy Nenuťte uživatele přemýšlet[16]. Právě na názvu této kapitoly je možno ilustrovat nutnost jasného odlišení odkazů, díky kterým se může uživatel po webu pohybovat, od okolí. 21
Jak Krug dále upozorňuje, je důležité, aby bylo z názvu odkazu nebo tlačítka jasné, jaká akce se provede, popřípadě kam odkaz směřuje. Přestože jde o otázky milisekund, po které se v případě špatně označeného či formulovaného odkazu návštěvník rozhoduje o tom, zda kliknout nebo ne, může mít více takových rozhodování ve výsledku fatální následky. Návštěvníci jsou totiž zvyklí pohybovat se na webu intuitivně a každé zdržení zvyšuje jejich pracovní zatížení a rozptyluje je od cesty za původně zamýšleným cílem.
4.3.2 Základní navigace Navigace, která rozděluje web do jeho hlavních sekcí je navigací globální, tedy platí pro celý web. Pomocí lokální navigace se uživatel pohybuje v jednotlivých sekcích. Jak upozorňuje Martin Snížek[28], jednou z podstatných funkcí globální navigace je předat uživateli informaci o tématickém rozsahu webu. Názvy jednotlivých sekcí v základní navigaci by měly být voleny tak, aby dávaly uživateli jasnou představu o jejich obsahu (viz ? na straně odkazy). V oblasti základní navigace také existuje dlouhá léta diskutovaný problém – kolikrát smíme nechat uživatele kliknout než se dostane k cíli? Jak však poukazuje Krug[16], není zavádění pravidel typu "Uživatel smí na našem webu kliknout maximálně třikrát" na místě. Mnohem více jde o to, jak moc musí uživatel při každém kliknutí přemýšlet. Na tomto základě pak lze určit dva typy používaných navigací – hloubkovou a širokou. Hloubková vs. široká navigace Hloubková webová stránka má více úrovní a při cestě uživatele k cíli vyžaduje více kliknutí, avšak každá úroveň vyžaduje méně uvažování. Široká webová stránka je rozdělena do více kategorií, avšak s menším počtem úrovní. Proto uživatel k dosažení cíle potřebuje méně kliknutí. Kromě základní navigace je často doporučováno využívat i navigací, které pohyb po stránce uživateli usnadňují. To může být například navigace drobečková, nebo kontextové vazby.
22
4.3.3 Drobečková navigace Drobečková navigace je navigací, jejímž primárním cílem je usnadnit pohyb na webu a ulehčit orientaci těm návštěvníkům, kteří nepřichází z hlavní stránky. Typicky tedy těm, kteří přijdou na web z vyhledávačů. Je složena z odkazů, pomocí kterých může návštěvník sledovat cestu z titulní strany webu na místo, na kterém se nachází, tak, jak je možno vidět na příkladu ?.
23
Obrázek 4.2: Drobečková navigace na webu společnosti MSNBC (www.msnbc.com)
4.3.4 Kontextové vazby Kontextové vazby propojují pomocí odkazů různá místa na webu, která vzájemně nějakým způsobem souvisí. Oblíbeným použitím kontextových vazeb jsou alternativní produkty , které často nabízí u výpisu produktu internetové obchody (viz ?).
Obrázek 4.3: Kontextové vazby – nabídka alternativního zboží (www.megapixel.cz)
4.4 Použitelnost vyhledávání Jak Krug[16] upozorňuje, velké procento uživatelů se pohybuje prostřednictvím vyhledávání, nikoli procházením webu. Právě proto je vyhledávání jednou z nejpodstatnějších komponent ovlivňujících celkovou použitelnost a uživatelský prožitek z webu.
24
Shrňme si nyní pravidla, které by měla být při tvorbě použitelného vyhledávání brána v potaz tak, jak byla vymezena pro účely studie Evaluating 25 E-Commerce Search Engines, která byla realizována studiem 37 signals[9]:
4.4.1 Relevantnost výsledků Výsledky vyhledávání by měly být pro uživatele užitečné, měly by tedy odpovídat co nejrelevantněji vůči kladenému dotazu tak, jak je možno vidět na příkladu internetového obchodu Amazon (obrázek ?).
Obrázek 4.4: Na dotaz Hemingway dostává uživatel jako výsledek nejprve knihy Ernesta Hemingwaye a poté knihy o Hemingwayovi (www.amazon.com)
25
Obrázek 4.5: Nejen v prvních 6 výsledcích, ale dokonce v žádném ze 100 zobrazených výsledků na dotaz „iphone“se telefon neobjeví (store.apple.com)
4.4.2 Různé možnosti řazení a filtrování výsledků Větší obchody zpravidla nabízejí velké množství výrobků, což přináší návštěvníkovi problém s orientací (viz obrázek ?). Uživateli by měla být nabídnuta možnost řazení výsledků dle různých kritérií. V internetových obchodech například podle ceny nebo značky výrobku. 26
Uživatel by měl také mít možnost filtrovat výsledky např. podle toho, zda je zboží skladem nebo zobrazit pouze ty produkty, které odpovídají jemu stanovené ceně (viz obrázek ?).
27
Obrázek 4.6: Hledán výraz Canon, výsledkem 662 produktů bez možnosti libovolného řazení, či filtrování (www.megapixel.cz)
Obrázek 4.7: Hledán výraz Canon, uživateli nabídnuta možnost seřadit zboží dle ceny a názvu (www.fotoskoda.cz)
28
4.4.3 Vyhledávání dle parametrů, kombinace kritérií Je důležité nabídnout uživateli vyhledávání dle různých kritérií. Například v případě obchodu s oblečením mohou být těmito kritérii velikost nebo barva. V ideálním případě by tato komponenta vyhledávání měla fungovat na principu skládání slov v rámci vyhledávacího dotazu. Pokud tedy uživatel napíše do vyhledávacího pole „modrá karimatka 183 cm“, měl by dostat jako odpověď relevantní výsledek (obr. ?).
Obrázek 4.8: Hledán výraz „modrá karimatka 183 cm“, výsledkem hledání karimatky o modré barvě a délce 183 cm (www.mall.cz)
Obrázek 4.9: Hledán výraz „černá obuv“, nenalezen žádný výsledek v katalogu zboží (www.bata.cz)
Variantou může být nabídnout uživateli rozšířené vyhledávání v rámci kterého je možné si zvolit u vyhledávaného výrazu různé doplňující parametry. 29
4.4.4 Kontrola překlepů a špatně napsaných výrazů Je nutno počítat s překlepy a špatně napsanými výrazy a nabídnout uživateli k vyhledání alternativní, správně napsaný výraz (viz obrázek ?), v češtině je aktuální i otázka skloňování výrazu.
30
Obrázek 4.10: Hledán výraz „knive“, výsledkem hledání výrazu „knife“(www.crateandbarrel.com)
Obrázek 4.11: Hledán výraz „Hewlett Packerd“, výsledkem pouze informace o žádném nenalezeném produktu (www.czechcomputer.cz)
4.4.5 Synonyma a související výrazy Vyhledávání by mělo zohledňovat výrazy, které jsou synonymem k hledanému výrazu, tak jako je možno vidět na obrázku ?.
31
Obrázek 4.12: Hledán výraz „Child“, uživatel dostává výsledek hledání výrazu „Kids“(www.landsend.com)
Obrázek 4.13: Hledán výraz „bota“, nenalezen žádný výsledek (www.bata.cz)
4.4.6 Žádné vysledky vyhledávání V případě, že nebylo nalezeno žádné zboží, uživatel by měl dostat informaci v takové podobě, aby s ní mohl dál pracovat. Takovou informací může být například vysvětlení důvodu, proč nebylo vyhledávání úspěšné, jak je možno vidět na příkladu ?. Většina internetových obchodů však tuto informaci uživatelům nenabízí (viz ? ).
32
Obrázek 4.14: Hledaný výraz nenalezen, uživateli je doporučeno, jak dále postupovat (www.bata.cz)
Obrázek 4.15: Hledaný výraz nenalezen, uživatel nedostává žádné další možnosti jak v tomto případě postupovat (www.fotoskoda.cz)
Zajímavý na této studii je fakt, že ač je již několik let stará, stále velká část internetových obchodů tato pravidla nedodržuje. 33
4.5 Použitelnost webu a trendy 4.5.1 Flash Jak upozorňuje Jakob Nielsen v článku Top Ten Web Design Mistakes of 2005[20], hlavním problémem Flashe je, že je využíván špatně. Nielsen poznamenává, že hlavním plusem této technologie je to, že se jedná o programovací prostředí, a může tak uživatelům webu nabídnout více než statická stránka, jak ukazuje například aplikace Google Analytics (obrázek ?).
Obrázek 4.16: Dobrým příkladem použití flashe může být aplikace Google Analytics, sloužící k analýzám návštěvnosti (google.analytics.com)
34
Ve většině případů je však Flash používán k animacím, které pro uživatele webu nemají téměř žádný praktický význam. Špatné je také podle Nielsena používat Flash k navigaci po webu. Velkým problémem použitelnosti Flashe může být rovněž nutnost využívání externího doplňku, kterým zajistíme podporu tohoto formátu na straně prohlížeče. Nevýhodou je také načítání aplikace, které je nutno před jejím spuštěním absolvovat, které může návštěvníka od pokračování návštěvy na webu snadno odradit.
4.5.2 Asynchronous JavaScript and XML V dubnu 2005 se v článku Jesseho Jamese Garretta Ajax: A New Approach to Web Applications[10] objevil poprvé termín AJAX. AJAX označuje novou technologii vývoje webových aplikací, přičemž nejpodstatnějším přínosem pro uživatele je změna obsahu bez nutnosti znovunačítání. V prezentaci z přednášky The Usability of AJAX: A Primer for Usability Professionals and First Hand Account mluví John Wallen o dvou nejpodstatnějších problémech z hlediska použitelnosti, které AJAX přináší, a to především v nabourávání zažitých zkušeností uživatelů. Prvním z nich je střet GUI a webového prostředí – prvky z interface, na které byli uživatelé zvyklí u počítačových programů se najednou objevují na webu. Druhým, souvisejícím problémem je přimět uživatele k akceptování dynamických změn na webové stránce. Dosud neexistují žádné standardy, které by mluvily o AJAXu z hlediska použitelnosti nebo přístupnosti. Přesto Wallen shrnuje určitá doporučení, která by se měla pro udržení použitelnosti dodržovat: • uživatelé si musí všimnout změn na stránce • uživatel musí jasně vědět, které prvky na stránce jsou aktivní, tedy s kterými může interagovat Častým použitím této technnologie jsou tzv. customizované domácí stránky. Ty umožňují uživatelům měnit a přesouvat obsah na stránce, tak jako je patrné na obrázku ?.
35
Obrázek 4.17: Design webu umožňuje za použití AJAXu uživatelům změnu nastavení i umístění jednotlivých boxů (www.bbc.co.uk)
4.6 Použitelnost úvodní stránky Většina věcí, které platí pro použitelnost úvodní (domovské) stránky platí i pro použitelnost celého webu, a tedy byla již shrnuta. Přesto je však titulní stránka specifickou, zejména tím, že jde o první stránku, kterou návštěvník vidí po vstupu na web. Proto by titulní stránka měla v jasné a přehledné podobě poskytnout návštěvníkovi odpovědi na základní otázky. Pouze tehdy může být jeho návštěva úspěšná. Tyto otázky shrnuje Krug[16]: • uživatel musí na úvodní stránce nalézt základní informace o tom, kde se ocitl a co daná firma nabízí • úvodní stránka musí uživateli jasně naznačit, jak se dostane tam, kam potřebuje • úvodní stránka by měla jasně informovat o přidané hodnotě vůči jiným firmám s podobnou nabídkou
36
4.7 Měření použitelnosti Měření použitelnosti je možno provádět pomocí aplikace pravidel použitelnosti – tzv. Best Practices, uživatelského testování použitelnosti a A/B Testingu.
4.7.1 Uživatelské testování použitelnosti Uživatelské testování použitelnosti je měření použitelnosti, při kterém se web předkládá reálným uživatelům internetu ke splnění cílů. Při testování jsou zaznamenány podrobné cesty uživatelů k cíli, na jejichž základě se testování vyhodnotí a jsou definovány problémy, se kterými se uživatelé během dosažení cíle byli nuceni střetnout.
4.7.2 A/B Testing A/B Testing označuje metodu testování použitelnosti, při které jsou různým skupinám uživatelů předkládány různé varianty jednotlivých komponent designu nebo celého webu[1]. Na základě statistik se poté sleduje, která z variant přináší největší zlepšení v dosažení definovaných cílů webu. Výhody A/B Testingu shrnuje Jakob Nielsen ve svém článku Putting A/B Testing in Its Place[19]: • měří chování uživatelů při reálném používání webu na velkém vzorku lidí. Je tedy možné bez obav rozhodnout, že pokud verze B prodává více, než verze A, bude v budoucnu nabídnuta všem uživatelům. • umožňuje změřit úspěšnost různých variant i při velmi malých rozdílech při zachování velké statistické průkaznosti • usnadňuje rozhodnutí, které z pravidel použitelnosti aplikovat určením toho s největší váhou vůči okolnostem • snižuje náklady na testování (není nutné platit testery, jako v případě klasického uživatelského testování)
37
Nevýhodou A/B Testingu je podle Nielsena fakt, že může být použit pouze pro projekty, které mají jediný jasný, strojově změřitelný cíl.
38
Kapitola 5 Přístupnost V odborné literatuře můžeme vysledovat dva různé pohledy na přístupnost webových stránek. Andy Clarke si v knize Transcending CSS: the fine art of web design[5] všímá faktu, že většina literatury, která byla o přístupnosti napsána se zaměřuje na to, jak udělat web přístupný pro lidi slepé, se zhoršeným zrakem, nebo jinak postižené. Clarke sám však upozorňuje na to, že podstatou přístupnosti je udělat web globálně přístupný všem, tak, aby uspokojil potřeby co největšího množství lidí, nezávisle na jejich možnostech nebo zařízení, které si pro přístup na web zvolí. Dále zmiňuje fakt, že většina designerů nahlíží na přístupnost jako na omezení kreativity a vnímá ji jako faktor, který je nutný testovat až v rámci dokončování webu a to zejména proto, aby web splnil ten nebo onen standard a cituje Joea Clarka: „Pokud se dívate na přístupnost jako na jakousi ’bonusovou vlastnost’, neměli byste se jí asi vůbec zabývat. Většina vývojářů se přístupnosti vlastně nezabývá. Neuvědomují si totiž na ni tu nejpodstatnější věc. Je důležitá.“ Jeffrey Zeldman v knize Designing With Web Standards[41] dodává, že to, že některé přístupné weby jsou ošklivé, je problém designerů a nikoli přístupnosti, která, ač by se mohlo zdát, nepřináší žádná výrazná vizuální omezení.
5.1 Pravidla přístupnosti 5.1.1 WCAG Web Content Accessibility Guidelines (WCAG)[38] jsou světová pravidla přístupnosti z dílny konsorcia W3C (World Wide Web Consortium). Jak se dozvídáme z úvodu k těmto pravidlům, jsou primárně určena pro zpřístupnění webu pro lidi s postižením, nicméně jejich dodržování by mělo vést i ke kvalitní přístupnosti webu prostřednictvím jakéhokoli zařízení.
39
Z pravidel Web Content Accessibility Guidelines z velké části vychází lokální pravidla ve většině světových zemí včetně České republiky.
5.1.2 Česká pravidla přístupnosti Česká pravidla přístupnosti jsou povinná pro weby státní správy a to jako součást zákona č. 480/2004 Sb., o některých službách informační společnosti a jsou dostupná na www.pravidlapristupnosti.cz[30]. Pravidla jsou rozdělena do šesti subpravidel: Obsah webových stránek je dostupný a čitelný Toto pravidlo hovoří o obsahu webových stránek jako o věci, která musí být dostupná pro všechny a to nezávisle na doplňcích prohlížeče. Jak dále pravidlo upozorňuje, informace sdělované barvou musí být dostupné i bez barevného rozlišení zařízení, kterým na web přistupujeme a grafické prvky musí mít svou textovou alternativu. Důležitým prvkem, který ovlivňuje dostupnost je také dostatečný kontrast textu vůči pozadí (viz ? na straně kontrast). Práci s webovou stránkou řídí uživatel Obsahem tohoto pravidla je upozornění, že nic na stránce se nesmí odehrávat bez vědomí uživatele. Obsah webu nesmí předpokládat žádné konkrétní používané zařízení ani program(viz ? na straně zarizeni). Zvuk nebo animace musí být možno jednoduše vypnout. Informace jsou srozumitelné a přehledné Informace musí být podávány z obsahového hlediska v jednoduché a srozumitelné formě Ovládání webu je jasné a pochopitelné Navigace na webu musí být srozumitelná a konzistentní. Musí být také zřetelně oddělena od ostatního obsahu stránky. 40
Názvy stránek, odkazů a nadpisů musí vystihovat jejich obsah (viz ? na straně odkazy). Kód je technicky způsobilý a strukturovaný Zdrojový kód webových stránek by měl být sémantický. Měl by tedy přesně vys tihovat význam obsahu. Ve zdrojovém kódu musí být určen hlavní jazyk obsahu webu. Prohlášení o přístupnosti webových stránek Toto pravidlo je určeno výhradně pro státní správy a hovoří o tom, že by každý web měl informovat o své přístupnosti v patičce. Problémy povinných pravidel přístupnosti Kontroverzní názor na povinná pravidla přístupnosti zaujímá v článku Accessibility and a Society of Control[5] již výše zmiňovaný Clarke. Tvrdí, že podobná pravidla jsou kontraproduktivní, brzdí rozvoj přístupnosti a tudíž by neměla vůbec existovat. Clarke svůj názor obhajuje tím, že by mělo být samozřejmou povinností orgánů státní správy, aby zpřístupnili informace úplně všem a jakékoli vynucování zákonem je nesmyslné. Ve firemní sféře pak záleží na firmě, zda chce web zpřístupnit pro více zákazníků. Jak
poukazuje
Martin
Smrt
v článku
Weby
státní
správy
mají
stále
problém
s přístupností[27], není ani vynucení podobných pravidel zákonem zárukou, že budou dodržována. Výše rozebraná pravidla jsou, jak již bylo řečeno, povinná pro weby státní správy. Jejich dodržování však může v přístupnosti pomoci i webu firemnímu. Pojďme se nyní na závažné problémy s přístupností webů ve firemní sféře podívat podrobněji.
5.1.3 Zobrazování webu na různých zařízeních Je důležité připomenout, že web není fixním médiem jako papír a může tedy vypadat různě na různých zobrazovacích zařízeních.
41
Jak Clarke dále připomíná, je velkou chybou myslet si, že uživatelé budou na náš web přistupovat pouze přes počítač a procento uživatelů, kteří budou chtít využít některou z alternativních cest je zanedbatelné. Ilustrovat lze tento fakt například na webu letecké společnosti: Manažerka Lucie, která chce letět na dovolenou si přes web objedná letenku a podrobnosti o letu si chce vytisknout. Podnikatel Pavel musí odletět narychlo a nestihne si zajistit let. Proto si cestou na letiště chce zarezervovat letenku přes PDA. Student Vojtěch, který je na výletě v Londýně, si chce zarezervovat letenku zpět do Prahy přes mobilní telefon. Tito tři lidé použili k prohlížení webu všechna výše zmiňovaná zařízení. Žádná z těchto situací přitom není nereálná. Přesto si však většina tvůrců webu tento fakt nepřipouští a minimum webů je skutečně optimalizováno pro pohodlný přístup nezávisle na zařízení. V roce 2005 vznikla na půdě konsorcia W3C iniciativa Mobile Web Iniciative[39]. „Cílem iniciativy Mobile Web Iniciative je udělat prohlížení webu z mobilního telefonu realitou,“vysvětluje Tim-Berners-Lee, ředitel W3C a vynálezce webu. W3C a lídři mobilního průmyslu pracují dohromady na tom, aby zlepšili produkci obsahu a přístup pro mobilní uživatele a lepší web[39]. Zde je vhodné připomenout i dosud jedinou mobilní verzi webového prohlížeče, nazvaného Opera Mini. Ten je dostupný na adrese www.operamini.com a umožnuje prohlížení všech webů včetně těch, které nejsou optimalizovány pro mobilní telefon. Opera Mini funguje na principu zobrazení pouze těch nejdůležitějších dat. Nezobrazováním obrázků a dalších prvků, které nejsou podstatné pro používání webu zmenšuje výrazně datový objem stránky a ten se pak stává únosným i pro pomalé mobilní připojení.
5.1.4 Tisková verze webu Mnoho tvůrců webů si neuvědomuje, že jedním ze zařízení, na které je třeba pamatovat při tvorbě webu je i tiskárna a její výstup, papír.
42
Výzkumy a studie přitom ukazují, že uživatelé na webu tisknou rádi a často. Zejména u delších textů to vyplývá z toho, že čtení z monitoru je o 25 % pomalejší, než čtení z papíru[18]. Na tiskové verzi webu nenajdeme zpravidla obrázky a písmo je uzpůsobené pro pohodlné čtení na papíře (viz obrázek ?).
43
Obrázek 5.1: Tisková verze webu (www.cez.cz)
5.1.5 Šířka webu Jak upozorňuje Nielsen, ideálním řešením šířky webu je používání layoutu s žádnou specifickou šířkou – tzv. fluidního layoutu. Takové weby se pak samy přizpůsobují velikosti obrazovky uživatele. V mnoha případech však není použití fluidního layoutu optimálním řešením. Ideální fixní šířka webu Donedávna byla za maximální možnou šířku webu považována šířka 760 px. Dle statistik je však [40] v současné době nejrozšířenějším rozlišením obrazovky 1024 × 768 px. Neměl by tedy důvod obávat se používání layoutů stránky širokých 960 – 1000px. Přesto se však obecně doporučuje, aby nejdůležitější informace na webu byly bez nutnosti pohybování se po webu pomocí posuvníku dostupné i na obrazovce s rozlišením 800 × 600 px, což odpovídá oblasti webu o velikosti 770 × 440 px.
44
Kontrast Pokud je písmo menší než 18 px, vzájemný kontrast by měl dosahovat poměru 5:1, v opačném případě 3:1. Existuje mnoho nástrojů, které kontrast barvy pozadí a popředí ověří. Jedním z nich je například
Luminosity
Contrast
Ratio
Analyser,
dostupný
na
adrese
http://juicystudio.com/services/luminositycontrastratio.php.
5.1.6 Flash Adobe Flash je široce používaným programem pro vytváření multimediálního obsahu ve webovém prostředí. Hlavním problémem této technologie je již zmiňovaná nutnost instalace externího doplňku, což odporuje pravidlům přístupnosti jak na české, tak světové úrovni. Ty totiž říkají, že obsah webových stránek musí být dostupný bez jakéhokoli upgradu prohlížeče. Dlouhá léta tak byl Flash takřka synonynem pro nepřístupný obsah. V posledních verzích tohoto programu však došlo k velkému posunu směrem ke zlepšení přístupnosti formátu Shockwave, který flash používá. Jak je možno se dozvědět z webu společnosti Adobe [2], Flash v poslední verzi přináší řadu nástrojů pro tvorbu přístupných flashových aplikací. Současný flashový formát podporuje čtení prostřednictvím čteček obrazovky. Samozřejmostí je také možnost vložit textový popis a titulek videa. Zajímavou možností, kterou Flash v současné době přináší, je možnost připojení titulků k videu, jak můžeme vidět na obrázku ?, což zpřístupňuje video pro uživatele s poškozením sluchu.
Obrázek 5.2: Flash v současné době umožňuje přidání titulků k videu
45
Lze tedy vypozorovat snahu společnosti Adobe o zpřístupnění Flashe co největšímu počtu lidí, nehledě na jejich postižení. Proto je pro udržení přístupnosti nutné, jak upozorňuje pravidlo WCAG, nabídnout uživateli alternativní obsah: „Používejte W3C technologie (dle specifikace) a dodržujte pravidla přístupnosti. Tam, kde není možné použít W3C technologii, nabídněte uživateli alternativní přístupnou verzi obsahu.“
46
Kapitola 6 Obsah webu
6.1 Psaní pro web Vynechejte zbytečná slova, zní 17. pravidlo z knihy W. Strunka jr. a E.B. Whitea The Elements Of Style[31]. Přesto, že toto pravidlo je společné jak pro tisk, tak pro web, existují velké odlišnosti mezi čtením uživatelů na webu a čtením tištěného textu. Jak tvrdí Jakob Nielsen ve článku Jak lidé čtou na webu[18], webové stránky většinu času pouze prohlížíme, přičemž čtením trávíme velmi málo času. Jsme zvyklí hledat určitou informaci a pouze okem zachytáváme slova, která nás zaujmou. Dalším faktorem, který podle Nielsena ovlivňuje způsob, jakým čteme text na webu jsou výzkumy, které ukazují, že čtení z monitoru je o 25 % pomalejší, než čtení z papíru. Zde však s Nielsenem polemizuje Marek Prokop[23]. „Prodávat může jen text, který se podaří prodat,“říká a vysvětluje, že uživatelé na webu se chovají racionálně a čtou pouze to, co pro ně má nějakou hodnotu. V okamžiku, kdy čtenář shledá text nezajímavým a informačně bezcenným, podvědomě se rozhodne o jeho nepřečtení. Nielsen[22] shrnuje faktory, které úspěch textu po stylistické stránce ovlivňují: • Cílení – text by měl být napsán způsobem odpovídajícím cílové skupině webu. Měl by být tedy takový, aby zaujal ve fázi strategie definovanou personu. • Stručnost – nic nezkazíte heslovitým vyjadřováním, radí Zdeněk Křížek a Ivan Crha v knize Jak psát reklamní text[15]. • Srozumitelnost – cílem webu není naučit návštěvníka odborným termínům, ale přiblížit mu fakta tak, aby jim rozuměl a aby pro něj byly lehko pochopitelné
47
Dodržení těchto faktorů však zpravidla k úspěšnému textu nestačí a proto Marek Prokop[Prokop] přidává následující doporučení: • je důležité působit na návštěvníka webu emocionálně – text by měl vyvolat emoce žádoucí pro danou cílovou skupinu • text by měl zachycovat jedinečné výhody oproti konkurenci – uživatel by měl z textu jasně vědět, jaký unikátní přínos má pro něj využití služeb dané firmy Marek Prokop[23] dokládá důležitost zákazníka citací Roberta W. Blye: „Při psaní textu začněte potenciálním zákazníkem, ne produktem. Zákazník se zajímá především sám o sebe - o své cíle, své problémy, své potřeby, své tužby, své obavy, své sny a své ambice. Vaše produkty či služby jsou pro něj podružné. Zajímají ho jen natolik, nakolik vystihují jeho přání a potřeby nebo řeší jeho problémy.“ Jak dále připomíná, jedním z nejdůležitějších cílů webového textu je přimět návštěvníka webu k akci. Rozdíl mezi pro návštěvníka zajímavým a nezajímavým textem shrnuje pak na následujících dvou příkladech: Penzion Žlutá fialka se nachází v krásné přírodě Šumavy, ideální pro pěší turistiku i výlety na kole. Má osm dvou- a třílůžkových pokojů s celkovou kapacitou 22 osob. Každý pokoj je vybaven vlastním sociálním zařízením a televizorem. Součástí objektu, který byl před třemi lety kompletně rekonstruován, je restaurace, úschovna kola a parkoviště pro osobní vozy. Užijte si dovolenou v tiché pohodě rodinného penzionu Žlutá fialka. Zač ínejte dny vydatnou domácí snídaní, auto ponechejte v bezpečí soukromého parkoviště, a vydejte se pěšky či na kole za krásami Šumavy. Po návratu vás osvěží sprcha přímo na pokoji, teplá večeře a posezení v útulné restauraci. Pokud ovšem nedáte přednost televizi v soukromí svého pokoje. Jak správně poznamenává, první text by byl zajímavý takového návštěvníka, který by chtěl hotel koupit, a zjišťoval by, co může návštěvníkům nabídnout. Pokud ale je cílem webu přilákat do hotelu hosty, pak je text musí oslovit a zaujmout. V druhém textu nacházíme výzvu k akci, lákadla i fakta. Takový text je tedy pro návštěvníka webu výrazně zajímavějším a pravděpodobnost úspěchu se výrazně zvyšuje.
48
6.2 Typografie na webu Typografie je vědní disciplína, která se zabývá písmem po vizuální stránce. Důležitou složkou typografie je čitelnost a přehlednost textu. Je možno se setkat s mnoha názory, které zpochybňují možnost aplikace pravidel typografie na web. Jako hlavní problém přitom uvádí problematické zobrazování písma, které se může na každém operačním systému i v různých webových prohlížečích zobrazovat různě. Karel Minařík[17] však upozorňuje, že typografie je především o čitelnosti a cituje jednoho z nejvýznamějších designéru písma 20. století, Adriana Frutigera: „Kritérium čitelnosti je možné chápat jako srovnatelné s pojmem krásy.“ Na základě díla Richarda Ruttera The Elements of Typographic Style Applied to the Web[29] je možno vybrat několik faktorů, které čitelnost textu ovlivňují.
6.2.1 Řez písma Jak se ukazuje, nemá na čitelnost webu vliv to, zda je písmo patkové nebo bezpatkové. Mnohem více rozhoduje výběr konkrétního řezu písma. Zde je však volba narozdíl od tisku výrazně omezená operačními systémy.
6.2.2 Používání nadpisů, odkazů a krátkých odstavců textu Dělení textu na krátké úseky za použití nadpisů, odkazů a seznamů text zpřehledňuje. Uživatel nemusí číst dlouhý blok textu a lépe se na text soustředí.
6.2.3 Velikost písma Martin Snížek si v článku Uživatelé si písmo na vašem webu nezvětšují[Snizek2] všímá alibistického postoje mnoha web designérů, kteří pro web zvolí velmi malé písmo, což omlouvají tím, že si uživatel může písmo zvětšit. Jak však dále upozorňuje, uživatelé si podle výsledků různých testování použitelnosti pravděpodobně příliš často písmo nezvětšují a to i přes to, že ví jak se to dělá. Jak však Snížek upozorňuje, je dobré zvětšování písma umožnit a to zejména s ohledem na zrakově postižené uživatele. 49
6.2.4 Šířka bloku textu Šířka bloku textu, který je pro uživatele dobře čitelný by neměla být delší než 60 znaků, tedy stejně, jako má jeden řádek normostrany.
6.2.5 Výška řádku Obecně se doporučuje používat pro zpřehlednění textu výšku řádku ve zhruba 140 % velikosti písma. Existují nástroje, které umožňují porovnat čitelnost textu na obrazovce. Jedním z takových nástrojů je Typetester, dostupný na adrese www.typetester.org. Úvodní stránku tohoto internetového nástroje je možno vidět na obrázku ?.
Obrázek 6.1: Nástroj Typetester porovnává jednotlivá písma v počítači z hlediska čitelnosti
50
Kapitola 7 Závěr V této práci jsem nastínil pravidla, která by měla přispět k tvorbě úspěšného webu. Nejprve jsem shrnul postup návrhu webu dle jednotlivých vrstev tak, jak je vnímá jeden z nejpovolanějších lidí ve web designu, Jesse James Garrett[10]. V kapitole o použitelnosti jsem upozornil na ty nejdůležitější oblasti a pravidla, která mohou rozhodnout o tom, zda se bude web uživatelům dobře používat. Zmiňuji zde však i aktuální úskalí použitelnosti, AJAX. Veřejná testování použitelnosti ani knihy, které by se touto technologií zabývaly totiž neexistují a my si tak nemůžeme být jisti, jak na ni nahlíží uživatelé. Kapitolu přístupnost jsem pojal způsobem, který by se zřejmě nedal označit za tradiční. Mluvím zde o přístupnosti pro všechny a přístupnosti pro postižené nevěnuji tu největší pozornost. Přesto se domnívám, že právě takové pojetí přístupnosti je do budoucna důležité prosazovat. Z definice je totiž handicap překážkou. A dle mého názoru není důležité, zda se jedná o překážku technologickou, nebo o fyzické postižení. Kapitolu o obsahu jsem rozdělil na dvě části. V té první se věnuji tomu, jak psát úspěšný text a upozorňuji na to, co si z mé zkušenosti většina firem neuvědomuje, tedy že obsah je možná to nejdůležitější. V druhé části se věnuji vizuální prezentaci obsahu a snažím se za výrazné pomoci přednášek Karla Minaříka a skvělé příručky The Elements of Typographic Style Applied To the Web[29] nabourat zažitou představu o tom, že dodržovat na webu typografická pravidla není z povahy webu možné. Je důležité si uvědomit, že pokud slepě aplikujeme všechna zmíněná pravidla, neznamená to automaticky, že bude web úspěšný a že se bude uživatelům dobře používat.
51
Každý web je jiný a i pravidla je nutno aplikovat s rozmyslem. Ale i pokud pravidla aplikujeme s rozmyslem na míru danému webu, pořád nemáme jistotu, že web bude úspěšný. Skutečností je, že o úspěchu webu rozhoduje návštěvník. A jak se ukazuje, nikdy není možné přesně odhadnout reakci návštěvníka nebo jeho chování. Definice cílové skupiny a person, o které mluvím v kapitole o návrhu webu, nám dají představu o typickém zástupci z dané cílové skupiny, avšak nikdy nedostaneme přesný obraz o konkrétním uživateli ani o tom, jak se na webu bude skutečně chovat. Přesto nám však zmíněná pravidla a postupy mohou pomoci. Zpříjemníme tím uživatelům zážitek, který budou z návštěvy webu mít a usnadníme jim práci. A tím se alespoň přiblížíme k úspěchu.
52
Literatura [1] A/B TESTING. Wikipedia, the free encyclopedia. [online]. St. Petersburg (Florida): Wikimedia Foundation Inc., last mod. 29 Jul 2008 [cit. 2008-08-03]. Dostupný z WWW:
. [2] Adobe. Adobe Flash CS3 accessibility [online]. 2008 , 08-07-2008 [cit. 2008-08-03]. Dostupný z WWW: . [3] ALAN COOPER. Wikipedia, the free encyclopedia. [online]. St. Petersburg (Florida): Wikimedia Foundation Inc., last mod. 29 Jul 2008 [cit. 2008-08-03]. Dostupný z WWW: . [4] BOULTON, Mark. Five simple steps to designing grid systems . Mark Boulton [online]. 2005
[cit.
2008-08-04].
Dostupný
z WWW:
. [5] CLARKE, Andy. Accessibility and a Society of Control. And all that malarkey [online]. 2005
[cit.
2008-08-03].
Dostupný
z WWW:
. [6] CLARKE, Andy. Transcending CSS: the fine art of web design. New Riders, 2007, ISBN 0321-41097-1. [7] ČESKÝ STATISTICKÝ ÚŘAD: Využívání informačních a komunikačních technologií v domácnostech a mezi jednotlivci. [online]. [cit. 2008-08-03]. Dostupný z WWW: . [8] DESIGNING WITH GRID BASED APPROACH. Smashing Magazine [online]. 2007 [cit. 2008-08-03].
Dostupný
z WWW:
. [9] EVALUATING 25 E-COMMERCE SEARCH ENGINES. 37signals [online]. 2003 [cit. 2008-08-03]. Dostupný z WWW:
53
[10] GARRETT, Jesse James. Ajax: A New Approach to Web Applications. Adaptive path [online].
2005
[cit.
2008-08-03].
Dostupný
z WWW:
. [11] GARRETT, Jesse James. The elements of user experience : user-centered design for the web. 1st edition. Boston : New Riders, 2002. 189 s. ISBN 0-7357-1202-6. [12] GOLDEN RATIO. Wikipedia, the free encyclopedia. [online]. St. Petersburg (Florida): Wikimedia Foundation Inc., last mod. 29 Jul 2008 [cit. 2008-08-03]. Dostupný z WWW: . [13] INFORMATION ARCHITECTURE. Wikipedia, the free encyclopedia. [online]. St. Petersburg (Florida): Wikimedia Foundation Inc., last mod. 29 Jul 2008 [cit. 2008-08-03]. Dostupný z WWW: . [14] KRČMÁŘ, Jakub. Adobe Photoshop: praktický webdesign. Grada, 2007, ISBN 80-2471423-X. [15] KŘÍŽEK, Zdeně k, CRHA, Ivan. Jak psát reklamní text. Praha : Grada, 2003. 190 s. ISBN 80-247-0556-7. [16] KRUG, Steve. Web design: Nenuťte uživatele přemýšlet. Přel. Jan Škvařil. 1.vyd. Brno: Computer Press, 2003. 144 s. Přel. z: Don’t make me think: a common sense approach to web usability. ISBN 80-7226-892-9. [17] MINAŘÍK, Karel. Základy web designu 1-3. Elektronická prezentace z kurzu Interaktivní design. 72 s. 2008. Institut digitálních médií. Materiály v PDF pro účastníky stejnojmenného kurzu. [18] NIELSEN, Jakob. How Users Read on the Web. Useit.com [online]. 1997 [cit. 2008-08-03]. Dostupný z WWW: . [19] NIELSEN, Jakob. Putting A/B Testing in Its Place. Useit.com [online]. 2005 [cit. 2008-0803]. Dostupný z WWW: . [20] NIELSEN, Jakob. Top Ten Web Design Mistakes of 2005. Useit.com[online]. 2005 [cit. 2008-08-03]. Dostupný z WWW: . [21] NIELSEN, Jakob. Usability 101 : Introduction to Usability. Useit.com [online]. 2003 [cit. 2008-08-03]. Dostupný z WWW: .
54
[22] NIELSEN, Jakob. Web.Design. Přel. Ladislav Valík ml. 1. vyd. Praha: SoftPress, 2002. 382 s. Přel. z: Design web usalibity: the practice of simplicity. ISBN 80-86497-27-5. [23] PROKOP, Marek. Seriál Píšeme pro web [online]. Interval.cz, 2003. Dostupné z WWW: http://interval.cz/serialy/piseme-pro-web/ [24] ROSENFELD, L.; MORVILLE, P.: Information Architecture for the WorldWide Web. O’Reilly, 2002, ISBN 0-596-00035-9. [25] RUTTER, Richard. The Elements of Typographic Style Applied to the Web [online]. 2005 [cit. 2008-08-03]. Dostupný z WWW: . [26] SHEA, Dave. Columns & Grids. Mezzoblue [online]. 2005 [cit. 2008-08-03]. Dostupný z WWW: . [27] SMRT, Martin. Weby státní správy mají stále problém s přístupností. Lupa.cz [online]. 2008 [cit. 2008-08-03]. Dostupný z WWW: . [28] SNÍŽEK, Martin. Tvorba úspěšného webu. [s.l.], 2008. 50 s. Bakalářská práce. Dostupný z WWW: . [29] SNÍŽEK, Martin. Uživatelé si písmo na vašem webu nezvě tšují. Snizekweb.cz [online]. 2007 [cit. 2008-08-03]. Dostupný z WWW: . [30] ŠPINAR, David, PAVLÍČEK , Radek. Pravidla tvorby přístupného webu [online]. 2007 , 2007 [cit. 2008-08-03]. Dostupný z WWW: . [31] STRUNK, W., Jr.; WHITE, E. B.: The Elements of Style. Macmillan, třetí vydání, 1979. [32] SYMBIO. Informační architektura [online]. 2008 [cit. 2008-08-03]. Dostupný z WWW: . [33] SYMBIO.
Persony
[online].
2008
[cit.
2008-08-03].
Dostupný
z WWW:
. [34] SYMBIO. Wireframe webu [online]. 2008 [cit. 2008-08-03]. Dostupný z WWW: . [35] UNIQUE SELLING PROPOSITION. Wikipedia, the free encyclopedia. [online]. St. Petersburg (Florida): Wikimedia Foundation Inc., last mod. 29 Jul 2008 [cit. 2008-08-03]. Dostupný z WWW: .
55
[36] USER CENTERED DESIGN. Wikipedia, the free encyclopedia. [online]. St. Petersburg (Florida): Wikimedia Foundation Inc., last mod. 29 Jul 2008 [cit. 2008-08-03]. Dostupný z WWW: . [37] UŽITÉ UMĚ NÍ. Wikipedia, the free encyclopedia. [online]. St. Petersburg (Florida): Wikimedia Foundation Inc., last mod. 29 Jul 2008 [cit. 2008-08-03]. Dostupný z WWW: . [38] W3C. Web Content Accessibility Guidelines 1.0 [online]. 1999 [cit. 2008-08-03]. Dostupný z WWW: . [39] W3C. Mobile Web Initiative [online]. 2005 , 2008 [cit. 2008-08-04]. Dostupný z WWW: . [40] W3SCHOOLS. Browser Display Statistics [online]. 1999 , 2008 [cit. 2008-08-03]. Dostupný z WWW: . [41] ZELDMAN, Jeffrey. Designing With Web Standards. New Riders, 2003, ISBN 0-32138555-1.
56
Evidence výpůjček Prohlášení: Dávám svolení k půjčování této bakalářské práce. Uživatel potvrzuje svým podpisem, že bude tuto práci řádně citovat v seznamu použité literatury.
V Praze dne 31.7.2008 Martin Mráz
Jméno
Katedra/Pracoviště
Datum
57
Podpis
