Webová grafika, struktura webu a navigace, použitelnost a přístupnost

Transkript

1 Webová grafika, struktura webu a navigace, použitelnost a přístupnost Martin Kuna martin.kuna@seznam.cz

2 Obsah Webová grafika Rozvržení stránky Typografické zásady Nejčastější chyby Struktura webu a navigace Typy navigace Časté chyby Použitelnost a přístupnost webu Trendy v současném webdesignu

3 Webová grafika Hezký design je prostředek, nikoliv cíl Jde především o obsah, grafika na webu není uměleckým dílem Grafiku nemůže dělat každý neprofesionální design se pozná Význam grafiky: Rychlejší nalezení informace Rozlišení důležitosti sdělení Profesionální design zvyšuje důvěryhodnost a atraktivnost webu

4 Základní prvky grafického návrhu Výběr barev Kontrast a celkové sladění barev Používejte raději barvy pastelové, než syté a křiklavé Rozvržení stránky (layout) Rozvržení základních bloků na stránce Dekorativní prvky Ne vždy jsou vhodné, zvláště ne u stránek věřejného sektoru

5 Rozvržení stránky - layout Držte se standardů Dvou- a třísloupcový layout Umístění menu Hlavička, patička Pozor na šířku max. rozlišení Pevná versus dynamická šířka stránky

6 Typografické zásady (1) Font Bezpatkové písmo, nejlépe Arial, max. 2 druhy univerzálně dostupných písem (Times New Roman, Helvetica, Verdana, Tahoma, atd.) Text a barvy Nepoužívat červenou (a jiné barvy), podbarvování, atd. Velikost a řezy Ke zvýraznění je lepší jiný řez, nikoliv velikost

7 Typografické zásady (2) Podtrhávání Největší chyba, kterou je možné udělat Zarovnání Opatrně se zarovnáním na střed a vpravo, obsah v úzkých sloupcích někdy není vhodné zarovnávat do bloku Nadpisy Strukturujte své texty, pomozte čtenáři

8 Typografické zásady (3) Pozadí Dbejte na vysoký kontrast pozadí a písma Bílá je dobrá Vyvarujte se textur a obrázků na pozadí Zvýrazňování Zvýrazňujte jen to nejdůležitější, pokud bude zvýrazněna polovina textu, efekt se ztrácí a čtenářova pozornost též

9 Nejčastější chyby v grafice Příliš mnoho grafiky, pohyblivé a extrémně výrazné prvky Snižuje přehlednost, odvádí pozornost od samotného obsahu Nevhodné pozadí a barvy Text musí být snadno čitelný, nepoužívejte křiklavé barvy unavují oči, odlište barevně jednotlivé části stránky Špatně a málo strukturované texty Používejte nadpisy, řezy písma (normální, tučné, kurzíva, tučná kurzíva), vytvářejte a oddělujte odstavce - umožněte uživateli rychleji najít to, co hledá Obrázky místo textu

10 Struktura webu Rozdělte web na jednotlivé logické celky Tyto celky, rodiče, mají podcelky, děti, jež mohou mít další děti vzniká struktura webu v podobě tzv. stromu Většinou je lepší rozdělit obsah na více stran, než vytvořit jednu velice dlouhou stranu Logická a jasná struktura webu je pro orientaci návštěvníka klíčovým faktorem Vizuální podobou struktury webu je tzv. mapa webu (site map) html

11 Navigace Navigace je základním stavebním kamenem každé webové prezentace Je-li dobrá, návštěvník se dobře a rychle orientuje a nachází hledané informace Je-li špatná, návštěvník se ztrácí a často rovnou z webu odchází Navigace musí být stálá a pružná Je stále na svém místě Aktuální pozice je v menu vyznačena (přizpůsobení aktuálnímu stavu)

12 Typy navigace Typy navigace: Základní Doplňková, např. drobečková Nacházíte se zde: Úvod O knihovně Historie Mapa webu Vyhledávání Odkazy v textu

13 Další navigační prvky Logo jako odkaz na úvodní stránku Čitelná URL adresa Vypovídá o struktuře webu Např. Stránka nenalezena chyba 404 Obsahuje jen to nejnutnější nejlépe odkazy na nejdůležitější části webu, kontakt na administrátora a vyhledávací formulář

14 Časté chyby v navigaci Nevhodné členění webu (struktura) Nekonzistence Stránka odkazuje sama na sebe Menu nevytvářejte pomocí JavaScriptu, roletkového menu či image map Tyto prvky nejsou přístupné uživatelům se speciálním vybavením

15 Přístupnost a použitelnost Obzvláště důležitá témata u webů veřejného sektoru Přístupnost = web bez bariér Lidé používají různé technické vybavení a omezují je jejich fyziologické vlastnosti Neomezujme handicapované uživatele (až 20%! návštěvníků) Optimalizovat pouze pro svůj oblíbený prohlížeč a rozlišení znamená NEoptimalizovat vůbec Použitelnost = ergonomie webu Orientují se uživatelé na webu? Prochází stránkami bez obtíží? Držte se standardů, lidé jsou na ně zvyklí

16 Přístupnost Největší překážky Nevalidní HTML kód (doporučení: validní HTML Strict 1.0) JavaScript, nejčastěji v menu (doporučení: nepoužívat) Optimalizace pouze pro vysoká rozlišení Obrázkové texty Tabulkový layout Neoddělení formy od obsahu pomocí CSS Porušování metodik přístupnosti (WCAG, WAI, Section 508)

17 Použitelnost Je třeba si položit základní otázky Je logická struktura webu jasná a přehledná, nebude uživatel hledat informace jinde, než opravdu jsou? Jsou ovládací prvky v souladu se standardy? Používají se jednoduše, jsou konzistentní? Jsou obsah a pozadí vzájemně dostatečně kontrastní? Je grafika příjemná, nerozptyluje uživatele?

18 Trendy v současném webdesignu CMS administrační systémy pro správu obsahu, které zvládne ovládat i naprostý laik Oddělení obsahu od formy CSS a beztabulkový layout Optimalizace přístupnosti a použitelnosti Jednoduchá účelná grafika, ústup pohyblivých prvků a efektů Optimalizace pro vyhledávače Důraz na kvalitní obsah a časté aktualizace Web 2.0, AJAX

19 Děkuji za pozornost! Máte-li nějaké dotazy, rád se na ně pokusím odpovědět