Návrh stránek 4IZ228 tvorba webových stránek a aplikací

Návrh stránek 4IZ228 – tvorba webových stránek a aplikací Jirka Kosek

Poslední modifikace: $Date: 2013/12/12 20:40:58 $ Copyright © 2000-2013 Jiří Kosek

Obsah Úvod ........................................................................................ 3 Recept na dobré webové stránky ............................................. 4 Použitelnost ............................................................................ 5 Jak se pozná použitelný web ................................................... 6 Testování použitelnosti ........................................................... 7 Grafický design ........................................................................ 8 Základní pravidla ................................................................... 9 Výběr písma ....................................................................... 10 Typografie .......................................................................... 11 Zaručená rada pro dobrý design ............................................ 12 Struktura stránek a navigace ................................................ 13 Struktura stránek ................................................................ 14 Navigace ............................................................................ 15 Stránka .................................................................................. 16 Stránka .............................................................................. 17 Odkazy .............................................................................. 18 Každý dokument ................................................................. 19 Volba URL adresy ................................................................ 20 Přístupnost ............................................................................ 21 Proč přístupnost .................................................................. 22 Zásady přístupnosti ............................................................. 23 Další zdroje informací ............................................................ 24 Design stránek .................................................................... 25

Úvod Recept na dobré webové stránky .................................................. 4

Copyright © 2000-2013 Jiří Kosek

Návrh stránek (strana 3)

Recept na dobré webové stránky • grafický design – první co uživatel vidí • struktura stránek, 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, UX – 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

Úvod Copyright © 2000-2013 Jiří Kosek

Návrh stránek 1 / 16 (strana 4)

Použitelnost Jak se pozná použitelný web ........................................................ 6 Testování použitelnosti ................................................................ 7



Jak se pozná použitelný web • 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)

Použitelnost Copyright © 2000-2013 Jiří Kosek


Testování použitelnosti • uživatelské testování • analýza návštěvnosti • A/B testování • heuristika na základě zkušeností

Použitelnost Copyright © 2000-2013 Jiří Kosek


Grafický design Základní pravidla ........................................................................ 9 Výběr písma ............................................................................ 10 Typografie ............................................................................... 11 Zaručená rada pro dobrý design ................................................. 12



Základní pravidla • 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

Grafický design Copyright © 2000-2013 Jiří Kosek


Výběr písma • na obrazovce jsou čitelnější bezpatková písma (Arial, Verdana, Helvetica) • 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)



Typografie • dodržovat typografická pravidla • základ je v pravidlech českého pravopisu – psaní mezer, interpunkce, pomlčky, uvozovky, přímá řeč apod. „Správné uvozovky“ • speciální znaky lze zapisovat pomocí znakových entit nebo přímo Tabulka 1. Zápis některých znaků Popis

Ukázka

Zápis v HTML

dlouhá pomlčka

—

—

krátká pomlčka

–

–

levá uvozovka

„

„

pravá uvozovka

“

“



Zaručená rada pro dobrý design • 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



Struktura stránek a navigace Struktura stránek ..................................................................... 14 Navigace ................................................................................. 15



Struktura stránek • 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ů 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ů, …

Struktura stránek a navigace Copyright © 2000-2013 Jiří Kosek


Navigace • 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í

Struktura stránek a navigace Copyright © 2000-2013 Jiří Kosek


Stránka Stránka ................................................................................... Odkazy ................................................................................... Každý dokument ...................................................................... Volba URL adresy .....................................................................


17 18 19 20


Stránka • 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ší

Stránka Copyright © 2000-2013 Jiří Kosek


Odkazy • 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ý dokument • 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



Volba URL adresy • „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 – část cesty začíná rokem http://www.vse.cz/2005/as/volba_rektora • v 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



Přístupnost Proč přístupnost ....................................................................... 22 Zásady přístupnosti .................................................................. 23



Proč přístupnost • 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

Přístupnost Copyright © 2000-2013 Jiří Kosek


Zásady 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

Přístupnost Copyright © 2000-2013 Jiří Kosek


Další zdroje informací Design stránek ......................................................................... 25



Design stránek 1

• Desatero pro tvůrce stránek

• Projekt, jehož cílem je přinutit výrobce prohlížečů dodržovat standardy 2 jako HTML, CSS, DOM a XML 3

• Stránky W3C o přístupnosti 4

• Stránky o přístupnosti

5

• Pravidla Ministerstva vnitra pro tvorbu přístupného webu 6

• Generátor barevných schémat , která barevně ladí

1 2 3 4 5 6

http://web.archive.org/web/20020202060032/http://ioxy.com/tencommandments.html http://www.webstandards.org/ http://www.w3.org/WAI/ http://pristupnost.nawebu.cz/ http://www.mvcr.cz/ViewFile.aspx?docid=21025698&lang=cs http://colorschemedesigner.com/

Další zdroje informací Copyright © 2000-2013 Jiří Kosek


Návrh stránek 4IZ228 tvorba webových stránek a aplikací

Recommend Documents