Poslední modifikace: $Date: 2019/10/25 10:13:06 $
grafický design – první co uživatel vidí
struktura stránek, informační architektura, navigace – aby se v tom uživatel vyznal a dlouho zůstal
přístupnost – obsah stránky by měl být vytvořen s ohledem na co nejširší okruh čtenářů
použitelnost – práce se stránkou/aplikací by měla být intuitivní a příjemná
dobře strukturovaný, snadno čitelný a srozumitelný text (copywriting)
syntakticky správný HTML kód – méně práce pro prohlížeč
vhodné metainformace – snazší nalezení stránky
přesný postup neexistuje, vždy je potřeba jednotlivé složky vyvážit
nebudeme suplovat předměty zaměřené na projektové řízení, ale…
samozřejmě je potřeba začít analýzou požadavků zadavatele a na základě ní pak stanovit cíle webu
cílům pak přizpůsobíme jednotlivé aspekty webu
pokročilé analytické nástroje dovolují průběžně monitorovat plnění cílů webu a průběžně web měnit a vylepšovat
pozor na zombie – vytvořit web je jedna věc, ale udržet jej v chodu a s aktualizovaným obsahem není jednoduché a levné
uživatel není nucen přemýšlet
jednoduchý a přehledný
rychle se načítá
konzistentní napříč všemi stránkami
ovládání je intuitivní
vše by mělo vést uživatele ke stanovenému cíli (např. dokončení prodeje v eshopu)
uživatelské testování
analýza návštěvnosti
A/B testování
heuristika na základě zkušeností
UX (User eXperience) – zážitek z použití webu či celého širšího procesu navázaného na web
širší pojem než samotná použitelnost
klasický postup: wireframes → grafický návrh → nakódování do HTML+CSS
pro responzivní weby je potřeba udělat několik samostatných variant (poměrně pracné)
stále populárnější je tak „mobile first“ přístup, kdy se primárně vytváří poměrně jednoduchá verze webu
„graceful degradation“ vs. „progressive enhancement“
design by měl být střízlivý – méně je někdy více
bez zbytečně velkých animací a obrázků, které jsou k ničemu
vhodné kombinace barev
barva pozadí a textu musí být zvolena tak, aby se text dobře četl
obrázky na pozadí je lepší vůbec nepoužívat (téměř žádná profesionální stránka je nepoužívá)
jako barva pozadí je vhodná zejména bílá a velice světlé odstíny dalších barev
na obrazovkách s menším rozlišením jsou čitelnější bezpatková písma (Arial, Verdana, Helvetica, …)
na obrazovkách s větším rozlišením jsou čitelnější patková písma (Times, Palatino, Cambria, …)
nekombinovat příliš druhů písma na jedné stránce
řádka by neměla být delší než 40-60 znaků → u delších se špatně přechází z konce jedné na začátek další
písmo o velikosti 10 pixelů je pro většinu lidí příliš malé
pro zvýraznění používat barvy, tučné písmo nebo kurzívu – zásadně nepoužívat podtrhnutí (to je vyhrazené pro odkazy)
dodržovat typografická pravidla
základ je v pravidlech českého pravopisu – psaní mezer, interpunkce, pomlčky, uvozovky, přímá řeč apod.
| Popis | Ukázka | Zápis v HTML pomocí entity |
|---|---|---|
| dlouhá pomlčka | — | — |
| krátká pomlčka | – | – |
| levá uvozovka | „ | „ |
| pravá uvozovka | “ | “ |
na skutečně dobrých webech dělá vždy více lidí
grafik/designér
HTML kodér
programátor
marketing, SEO, …
každý by měl dělat jen to, co umí dobře
hypertext umožňuje vytvořit téměř libovolnou strukturu, ale člověk je zvyklý na konzervativnější uspořádání – většinou na hierarchii
analýzou přístupových logů případně dalšími analytickými nástroji lze zjistit nejčastěji navštěvované stránky a přizpůsobit tomu jejich umístění
jedna stránka by měla obsahovat logický celek informací, ale nesmí být příliš dlouhá – „maximálně 5 obrazovek“
stránka s odkazy by měla být vidět celá bez nutnosti rolování
silně AJAXové aplikace by měly dodržovat zvyklosti webu – historie, možnost tvorby záložek a sdílení odkazů, …
na každé stránce by měla být navigační lišta, ze které bude jasné, v které části serveru jsme
„drobečková“ navigace
odkaz na hlavní a nadřazenou stránku, případně na předchozí a další
pozor na těžko ovladatelná „rozbalovací“ menu
každý větší server je nezbytné doplnit možností fulltextového prohledávání
aktuální a zajímavé informace
rychlé načtení
gramaticky správný a slohově čistý text – minimálně zkontrolovaný spell-checkerem a přečtený několika kamarády
stránku je dobré co nejlépe strukturovat pomocí HTML elementů – nadpisy, seznamy apod.
pokud to jde, měl by se obsah oddělit od vzhledu a použít CSS – menší a rychlejší stránky, snazší změny designu
dodržovat standary HTML, XHTML, CSS a další
nepoužívat odkazy typu – klikněte zde
oprostit se od technologických pojmů jako server, FTP, WWW – stránky jsou pro běžné uživatele a těm je jedno, jaké technologie stojí v pozadí
odkazy by měly být interaktivní, aby v uživateli vzbudily pocit, že jsou aktivní části dokumentu – např. změna barvy po přejetí kurzorem myši
zvykem je odkazy podtrhávat
v rámci jednoho serveru používat relativní odkazy, aby mohly být stránky snadno přesunuty na jiné místo
každá stránka by měla obsahovat několik identifikačních údajů: kdo ji vytvořil včetně kontaktu, datum poslední modifikace, do kdy jsou uvedené informace platné
z každého dokumentu by mělo být jasné, na kterém jsme serveru (někdo se ke stránce může dostat zvenčí pomocí odkazu)
každý dokument by měl obsahovat výstižný název (element title)
metadata pro lepší vyhledávání a klasifikaci
„jednoduchá, perzistentní a výstižná“
technologicky neutrální
bez koncovek typu
.html, .php,
.aspx apod.
technicky lze vyřešit modulem web-serveru pro přepisování URL (např. mod_rewrite)
škálovatelné pojmenovávací schéma (např. část cesty začíná rokem)
http://www.vse.cz/2005/as/volba_rektorav průběhu času by jedno URL mělo označovat stejný informační zdroj, i když se třeba mění jeho formát
absolutní počet uživatelů webu s nějakým handicapem je relativně velký
určité weby v určitých státech musí ze zákona splňovat pravidla přístupnosti
textová alternativa pro obrázky
titulky k video/audio záznamům
web by měl jít ovládat jen pomocí klávesnice
podstatné informace by neměly být závislé na rozlišení barev
dostatečně kontrastní písmo a pozadí
stránka se rozumně zobrazí i při zvětšení/zmenšení písma
Petr Staníček: Dobrý designér to všechno ví! 2016. ISBN 978-80-260-9427-2
Steve Krug: Nenuťte uživatele přemýšlet! 2010. ISBN 9788025129234
Martin Michálek: Vzhůru do (responzivního) webdesignu. 2017.