Webová grafika, struktura webu a navigace, použitelnost a přístupnost
Martin Kuna
[email protected]
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
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
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é
http://wellstyled.com/tools/colorscheme2/index.html
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
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
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
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
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éž
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
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)
http://www.knihovna-ostrov.cz/sitemap.php, http://www.factum.cz/struktura. html
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)
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
Další navigační prvky
Logo jako odkaz na úvodní stránku
Čitelná URL adresa
Vypovídá o struktuře webu
Např. www.knihovna-abc.cz/o-knihovne/historie
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ář
Č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
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í
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)
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?
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
Děkuji za pozornost! Máte-li nějaké dotazy, rád se na ně pokusím odpovědět
