Návrh webové prezentace Internetové publikování
1
Co je webdesign?
Jedna z definic
Řemeslo, věda nebo umění ?
Návrh webových stránek nebo webových aplikací s využitím různých technologií Různí autoři se označují jako „webdesignéři“ a každý dělá něco trochu jiného
Hlavní přístupy
Grafický webdesign – zaměřený na vzhled Funkční webdesign – zaměřený na použitelnost a efektivitu prezentace informací
Funkční design webové prezentace
Funkční design webové prezentace má navrhnout web
Použitelnost
ucelený a přehledný oslovující co nejširší část cílové skupiny plnící záměr zadavatele prezentace srozumitelnost webu a orientace v něm pro běžného uživatele (blbuvzdornost)
Přístupnost
dostupnost informací v prezentaci pro hendikepované uživatele
Základní témata funkčního webdesignu
Vizuální hierarchie stránky Psaní pro web Používání obrázků a multimédií Navigace Struktura webu z pohledu použitelnosti Přístupnost
Vizuální hierarchie stránky
Stránka webu je poměrně malá Některá místa jsou viditelnější než jiná Rolování
okamžitě je vidět pouze horní část stránky první obrazovka "above fold" – musí upoutat
Prominentní zóny na stránce ...
Rozdělení zón podle toho, jak rychle si návštěvník v nich umístěného elementu Zdroj: http://www.poynterextra.org
Rozložení stránek
Pevné
jednosloupcové
dvousloupcové
http://www.novinky.cz/
vícesloupcové
http://www.cspch.cz/
http://www.idnes.cz/
Pružné
jednosloupcové dvousloupcové
http://en.wikipedia.org/wiki/Complementary_color
vícesloupcové
http://chemicke-listy.vscht.cz/cz/index.html
Wireframes
8
Struktura stránek
Hypertext umožňuje provázat dokumenty zcela libovolně Rozdělení příliš dlouhých stránek Struktura
Hierarchická (stromová) architektura je tradiční, dobře akceptovaná návštěvníky
zpravidla základ pro hlavní navigaci
Sekundární struktura
kategorie, tagy časová osa
Psaní pro web
Specifická disciplína Text pro web by měl být
stručnější dobře strukturovaný využívat hypertext
Samozřejmostí by mělo být
dodržování gramatických pravidel ctění pravidel typografie
Grafický design
Měl by
přilákat a upoutat návštěvníka být přiměřený obsahu
méně je někdy více
poskytnout webu jednotný vzhled a rámec podporovat vizuální hierarchii stránky
Neměl by
mást uživatele být výhradním prostředkem sdílení informace nebo orientace v prezentaci
Odkazy
Musí být na první pohled zřejmé, že jde o odkaz, čiší z nich kliknutelnost
podtrhávat a barevně odlišovat odkazy nepodtrhávat jiný text zkuste spočítat odkazy na jkrowling.com
Odlišování navštívených odkazů Atribut Title
Navigace
Úkoly navigace – odpovědi na otázky
Kde jsem ?
Kam se mohu dostat ?
drobečková navigace mapa webu odkazy, kategorie vyhledávání
Kde jsem už byl ?
odlišení navštívených odkazů
Navigace
Primární navigační oblast
Dostatečně výrazná, oddělená od obsahu Členěná do kategorií Jasné názvy Odkaz na jednu stránku v hlavní navigaci jen jednou Použití ikon v navigaci pouze tam, kde jsou výstižnější než text Neodkazovat domovskou stránku z domovské stránky
Navigace: Odkazy
Krátké, rychle čitelné Nepoužívat generické názvy: „klikni zde“ Text odkazu samonosný
Barevné odlišení navštívených odkazů
Více o firmě vs. Více … Možno použít „ukázky“ CSS pseudotřídy A:visited
Odlišení odkazů na jiné než HTML dokumenty
Permanentní odkazy
Archiv novinek
Měl by být přístupný z homepage Měl by uchovávat položky, které se objevily na homepage v posledních měsících Permanentní odkazy u novinek
Přístupnost
Přístupnost obecně
Pod pojmem přístupnost chápeme takový stav, kdy daná věc neklade svým uživatelům při používání žádné překážky. Přístupnou budovu mohou tedy např. používat vozíčkáři a přístupný web zase např. slabozrací. Přístupnost je tedy bezbariérovost.
Přístupnost webových stránek
Pojem přístupnosti webových stránek je tedy oproti obecnému pojmu zúžen na funkčnost webových stránek. Přístupné stránky tedy nestaví svým uživatelům žádné překážky, které by jim znemožnily daný web efektivně používat. Zdroj: Přístupnost
Hendikepovaní uživatelé
Zrakově postižení Sluchově postižení Pohybově postižení
Uživatelé se zobrazovacími problémy
handicap uživatelova počítače
Uživatelé s pouruchami učení a soustředění
nefunguje myš
přehledná navigace, členění
Roboti
Přístupnost
Pravidla tvorby přístupného webu WCAG 2.0 http://www.w3.org/TR/WCAG20 Testování přístupnosti
Ruční kontrola
při vypnuté grafice, bez povoleného skriptování, v textovém prohlížeči (Lynx, Links apod.), při ovládání klávesnicí, při různých velikostech okna, bez barev, bez kaskádových stylů atp.
Uživatelské testování webu
Testování použitelnosti webu reálnými uživateli
Smyslem je získat nezávislý pohled – překonat autorskou slepotu
Testování technického řešení = použitelnost Testování obsahu a jazyka = srozumitelnost
= autor nevidí své vlastní chyby
Uživatelské testování
20
Hotový web Web ve fázi návrhu
Uživatelské testování webu
Výběr uživatelů
Neměli by mít zkušenosti s tetovaným webem Neměli by být odborníky v oblasti zaměření webu
Pokud web není odborně zaměřen
Příprava testovacích úkolů, např.
Jednoznačné
Subjektivní
21
Zaregistrujte se Nalezněte nejdražší fotoaparát v e-shopu Vyberte si povinně volitelný předmět a přihlaste se na cvičení (zde se sleduje i jak snadno se uživatel orientuje v nabídce)
Základní pravidla
Neposlouchejte uživatele Jakob Nielsen's Alertbox, August 5, 2001 (http://www.useit.com/alertbox/20010805.html)
Nejsou-li uživatelé s webem nuceni skutečně pracovat, vyberou si podle „povrchních“ hledisek Uživatelé musí zadané úkoly skutečně dokončit, nestačí popsat jak by to udělali
… ale má cenu s nimi i mluvit
Ptát se je třeba emočně neutrálně
Co si myslíš o … x Líbí se Ti …
Základní pravidlo vyhodnocení výsledků testování
22
Když uživatel nesplní úkol, neznamená to že je neschopný, ale že je web špatně navržen
Cvičný úkol
Najděte v SK obchodním registru http://www.orsr.sk/ subjekty, které mají v názvu slovo „internet“
23
Uživatelské testování návrhu webu
Testuje funkčnost webu který ještě neexistuje
Odpadá práce s předěláváním Některé nedostatky se nemusí projevit
Technologie
Papírové náčrtky
Drátěné modely
Vektorové obrázky nebo specializované nástroje
Interaktivní drátěné modely
24
http://www.youtube.com/watch?v=c4-A9hGn0U&feature=player_embedded#at=150
http://www.axure.com/
