Úvod do html iii - masaryk universityxobsivac/wd4.pdf · uživatelské testování stačí 5...
TRANSCRIPT
![Page 1: Úvod do HTML III - Masaryk Universityxobsivac/wd4.pdf · Uživatelské testování stačí 5 uživatelů scénář (o čem je tahle stránka?, obecné úkoly) sledovat problémy](https://reader033.vdocuments.site/reader033/viewer/2022052006/601a72fd7913bb579825edfd/html5/thumbnails/1.jpg)
Webdesign IVSlužby počítačových sítí Tomáš Obšívač | 2009
![Page 2: Úvod do HTML III - Masaryk Universityxobsivac/wd4.pdf · Uživatelské testování stačí 5 uživatelů scénář (o čem je tahle stránka?, obecné úkoly) sledovat problémy](https://reader033.vdocuments.site/reader033/viewer/2022052006/601a72fd7913bb579825edfd/html5/thumbnails/2.jpg)
11. 11. 2009 Tomáš Obšívač 2
Osnova Návrh
Informační architektura Obsah a vzhled webu Použitelnost
Realizace Přístupnost
Provoz Analýza návštěvnosti Marketing, SEO
Blízká budoucnost webu?
![Page 3: Úvod do HTML III - Masaryk Universityxobsivac/wd4.pdf · Uživatelské testování stačí 5 uživatelů scénář (o čem je tahle stránka?, obecné úkoly) sledovat problémy](https://reader033.vdocuments.site/reader033/viewer/2022052006/601a72fd7913bb579825edfd/html5/thumbnails/3.jpg)
11. 11. 2009 Tomáš Obšívač 3
Uspořádání informací
Informační architekt – webdesigner s chutí na plat analytika? :-)
IA =– uživatelé (čtenáři) – jazyková forma, barevnost, user
centered design– obsah – struktura webu, kategorizace obsahu– kontext – marketingové cíle, návratnost investic
Hledáme rovnováhu mezi cíli zadavatele a potřebami uživatele.
![Page 4: Úvod do HTML III - Masaryk Universityxobsivac/wd4.pdf · Uživatelské testování stačí 5 uživatelů scénář (o čem je tahle stránka?, obecné úkoly) sledovat problémy](https://reader033.vdocuments.site/reader033/viewer/2022052006/601a72fd7913bb579825edfd/html5/thumbnails/4.jpg)
11. 11. 2009 Tomáš Obšívač 4
Obsah je král 1/2
Přes 100 mil. webů, ~30 mld. stránek + 500x deep web (?!) 2/3 ve vyhledávačích
Jyxo indexuje 123 mil. dokumentů (166, 97), Morfeo 172 (144, 108)
Během této přednášky vzniknou tisíce dalších i od vás s notebooky?
2003 2004 2005 2006 2007 2008*0
100000
200000
300000
400000
500000
1600
1199
899
539449
249
Počet Cena [Kč]
.cz domény
![Page 5: Úvod do HTML III - Masaryk Universityxobsivac/wd4.pdf · Uživatelské testování stačí 5 uživatelů scénář (o čem je tahle stránka?, obecné úkoly) sledovat problémy](https://reader033.vdocuments.site/reader033/viewer/2022052006/601a72fd7913bb579825edfd/html5/thumbnails/5.jpg)
11. 11. 2009 Tomáš Obšívač 5
Obsah je král 2/2
Začněte plánování (nejen) webu odpověd’mi na otázky typu:
Mám co říct/nabídnout? Bude mě to bavit i za rok? Uživím se tím?
Funguje jen to, co uživatelům přináší jasný užitek. – M. Prokop aneb stanovte cíle „v rovnováze“
![Page 6: Úvod do HTML III - Masaryk Universityxobsivac/wd4.pdf · Uživatelské testování stačí 5 uživatelů scénář (o čem je tahle stránka?, obecné úkoly) sledovat problémy](https://reader033.vdocuments.site/reader033/viewer/2022052006/601a72fd7913bb579825edfd/html5/thumbnails/6.jpg)
11. 11. 2009 Tomáš Obšívač 6
Psaní textů pro web
Copywriter......vznešené označení jedničkáře z češtiny?
...je prodavač za psacím strojem. – Judith Charles
Zaujmout, udržet, přesvědčit a přimět k akci Jak? Kreativní psaní, působení na city Jsem slepý, prosím pomozte.
Čtení: seriál Píšeme pro web (Interval.cz)
![Page 7: Úvod do HTML III - Masaryk Universityxobsivac/wd4.pdf · Uživatelské testování stačí 5 uživatelů scénář (o čem je tahle stránka?, obecné úkoly) sledovat problémy](https://reader033.vdocuments.site/reader033/viewer/2022052006/601a72fd7913bb579825edfd/html5/thumbnails/7.jpg)
11. 11. 2009 Tomáš Obšívač 7
Strukturování textu
Na webu lidé nečtou, ale „skenují“. Nečekají esej, román, vyprávění, vyplňování složenky.
Pro udržení pozornosti využijte Nadpisy (max. 8 slov) Seznamy, odstavce Střídmé zvýraznění Popisky k obrázkům Obrácená pyramida (anotace) Stručnost – škrtejte, zkracujte
![Page 8: Úvod do HTML III - Masaryk Universityxobsivac/wd4.pdf · Uživatelské testování stačí 5 uživatelů scénář (o čem je tahle stránka?, obecné úkoly) sledovat problémy](https://reader033.vdocuments.site/reader033/viewer/2022052006/601a72fd7913bb579825edfd/html5/thumbnails/8.jpg)
11. 11. 2009 Tomáš Obšívač 8
Grafická úprava
Obsah je král. Nahý král? Obal prodává. Návštěvník rozhodne za 5 vteřin, jestli (ne)má web rád. Pokud se mu nelíbí, je těžké přesvědčit o čemkoliv dalším.
Ale pozor, nejhonosnější obal mívá nej*ší obsah. Proto: jednoduchost, přehlednost, konzistence. Cíl: identita (jedinečnost), důvěryhodnost.
You know you've achieved perfection in design,not when you have nothing more to add,but when you have nothing more to take away.
– Antoine de Saint Exupery
![Page 9: Úvod do HTML III - Masaryk Universityxobsivac/wd4.pdf · Uživatelské testování stačí 5 uživatelů scénář (o čem je tahle stránka?, obecné úkoly) sledovat problémy](https://reader033.vdocuments.site/reader033/viewer/2022052006/601a72fd7913bb579825edfd/html5/thumbnails/9.jpg)
11. 11. 2009 Tomáš Obšívač 9
Prvky stránky, rozmístění
Sazební obrazec (Page grid)– „znám“ rozměry strany (fold)1. rozdělím na části – mřížka, zlatý řez2. design (rozmístím titulek, navigaci, vlastní text, …)
Navigace radí kam můžu?, ale taky kde jsem? umístěná mimo obsah (horizontální vs. vertikalní) konzistentní (na celém webu)
Prázdné místo, wireframes Splash screen
![Page 10: Úvod do HTML III - Masaryk Universityxobsivac/wd4.pdf · Uživatelské testování stačí 5 uživatelů scénář (o čem je tahle stránka?, obecné úkoly) sledovat problémy](https://reader033.vdocuments.site/reader033/viewer/2022052006/601a72fd7913bb579825edfd/html5/thumbnails/10.jpg)
11. 11. 2009 Tomáš Obšívač 10
Od obsahu ke vzhledu
webstandards.org
![Page 11: Úvod do HTML III - Masaryk Universityxobsivac/wd4.pdf · Uživatelské testování stačí 5 uživatelů scénář (o čem je tahle stránka?, obecné úkoly) sledovat problémy](https://reader033.vdocuments.site/reader033/viewer/2022052006/601a72fd7913bb579825edfd/html5/thumbnails/11.jpg)
11. 11. 2009 Tomáš Obšívač 11
(Moderní) grafické prvky
Barevné gradienty (monochromatické) Odlesky („vlhká podlaha“) Měkké stíny Velké písmo, inputy Zaoblené rohy
Barevnost: colorschemer.com/schemes/, Pixyho Generátor barevných
schémat 2, colourlovers.com
Fotografie: sxc.hu, yotophoto.com, mojefoto.net, ...
![Page 12: Úvod do HTML III - Masaryk Universityxobsivac/wd4.pdf · Uživatelské testování stačí 5 uživatelů scénář (o čem je tahle stránka?, obecné úkoly) sledovat problémy](https://reader033.vdocuments.site/reader033/viewer/2022052006/601a72fd7913bb579825edfd/html5/thumbnails/12.jpg)
11. 11. 2009 Tomáš Obšívač 12
Použitelnost (Usability)
Čím se dosahuje? navigace, příjemná URL,
reakce na chyby, nápověda, …
Uživatelské testování stačí 5 uživatelů scénář (o čem je tahle
stránka?, obecné úkoly) sledovat problémy ptát se, ale neradit
Web design – Nenuťte uživatele přemýšlet, S. Krug, Cpress