Typy webových projektů

J. Vrzal, 2.1

Typy webových projektů webová prezentace microsites, firemní weby, blogy cílem je změnit (ovlivnit) chování určité skupiny lidí prezentuje produkt nebo službu je často kanálem prodeje e-shop prodává online (přímý prodej produktů) 2

Typy webových projektů webová aplikace sociální sítě, mapové aplikace, mobilní aplikace, intranety řeší určitý problém uživatelů není kanálem pro prodej produktu, je přímo produktem cílem webové aplikace je stát se součástí života člověka, který jí používá 3

Typy webových projektů obsah interakce web. prezentace e-shop web.aplikace 4

Kdy weby fungují? lidé provedou konverzní akci jedná se o odeslání objednávky, sdílení stránky na sociálních sítích, registraci do newsletteru často i jednoduše měřitelné lidé naleznou informaci člověk najde to, co hledá, informaci zkonzumuje a odchází 5

Kdy weby fungují? lidé naleznou informaci snižuje se zátěž call centra, zvyšuje se návštěvnost a posléze i přímá konverze lidé na základě webu získají pocit web vyvolá emoce, které si návštěvník spojí s brandem provozovatele webu 6

Design lidské vnímání obchodní cíle dobrý design potřeby zákazníků technologie 7

UX Herbert Alexander Simon americký vědec, který se zabýval počítačovou vědou, psychologií, ekonomikou a filozofií... ve světě přesyceném informacemi dochází k nedostatku něčeho jiného, co tyto informace konzumuje pozornosti příjemců těchto informací. 10

User Experience uživatelský prožitek, důraz na celkový dojem, digitální sféra vjemy a výsledné reakce vznikající na základě použití produktu, systému nebo služby UX je soubor technik a způsobů, jak řízeně ovlivňovat, jaký dojem návštěva vašeho webu v lidech zanechá. (Petr Štědrý) 11

User Experience UX je o tom, když se mi s jakýmkoliv produktem dobře pracuje, aniž bych musel u jeho používání nějak výrazně přemýšlet. Takové Přišel, Viděl, Použil místo Přišel, Viděl, Zkusil, Ještě jednou zkusil, Znovu zkusil, Deprimovaně zahodil. (Lukáš Hroch) 12

User Experience strategie konceptuální práce grafický design kódování HTML 13

Co ovlivňuje zážitek uživatele? techické zpracování (vývoj) estetika (grafika) obsah (produkt) kontext (výzkum) značka (marketing) 14

User Experience Design sada postupů zaměřených na uživatele, které zajistí, že výsledný produkt bude předvídatelný, snadno použitelný a přitažlivý UX důraz na celkový dojem, primárně v digitálním světě 15

Human Centered Design 16

Vznik webu co váš klient dělá a proč by měl zákazník chtít klientův produkt či službu kdo na web přichází a proč (cílová skupina) jak strukturovat web (rozdělení informací) 17

Vznik webu návrh, prototyp hledání chyb jak pracovat s pozorností jak ovlivňovat lidské chování univerzální principy designu 18

Vznik webu zadání analýzy informační architektura koncept prototyp testování grafika implementace testování spuštění 19

User Experience Design pochopení klienta porozumění strategii byznysu klienta, který ví co, jak a proč dělá uživatelský výzkum zjišťuje motivace uživatelů, kontext, pomáhá definovat základní požadavky a parametry produktu 20

User Experience Design informační architektura definuje strukturu informací tak, aby byl obsah co nejlépe pochopitelný návrh UI určuje rozložení prvků uživatelského rozhraní u webů určuje navigaci vizuální design (uplatňuje se až v závěru) grafické prvky (použitá barva, písmo, fotografie atd.) vytvářejí požadované emoce 21

User Experience Design evaluace v průběhu celého procesu zjišťujeme a odstraňujeme nedostatky ověřování, zda výsledek funguje tak, jak chceme a jeho vylepšování 22

User Experience Design použitelnost důraz na snadné použití test použitelnosti v mobilech přístupnost je web přístupný pro všechny skupiny uživatelů (např. nevidomí lidé) 23

Použitelnost, účelovost 24

Kdo je váš klient a kam směřuje co potřebujete o klientovi vědět proč dělá to, co dělá historie firmy jaká je jeho vize pro další směřování firmy jaké má hodnoty, kterých se drží kdo jsou jeho zákazníci 25

Kdo je váš klient a kam směřuje jedinečný prodejní argument odpověď na otázku: proč by si měl člověk zvolit právě mě a moji službu či produkt? Jsme nejrychlejší opravna ponožek v Praze vs Máme mladý a dynamický kolektiv (a co jako) Brand příběh, který si lidé ztotožňují s klientovou značkou, odlišuje od jiné 26

Kdo je váš klient a kam směřuje Brand má vizuální reprezentaci (vizuální styl: logo, písmo, barvy, firemní materiály, obaly produktů...) marketingová podpora webu jakými kanály budou návštěvníci webu přicházet 27

Kdo na web přichází a proč určení cílové skupiny pomocí výzkumných technik chceme zjistit obavy, radosti a zejména očekávání uživatelů 2 časté chyby určení cílové skupiny já (stává se málokdy) kdokoliv (děti i senioři?, nevyslovené skupiny) 28

Kdo na web přichází a proč pochopení vnitřní motivace uživatele a navození podmínek, které vedou ke konverzi jak produkt zapadá do života uživatele co je pro něj důležité a naopak kdo rozhoduje o koupi produktu v jaké situaci je člověk, který si produkt kupuje 29

Kdo na web přichází a proč Výzkumné techniky analýza současného webu dotazníky jednodušší otázky s ANO/NE či škály (nabídnout lidem varianty či jiné) otevřené otázky se špatně zpracovávají rozhovory zaměřte se na osobní zkušenosti otevřené otázky žádné spekulace 30

Kdo na web přichází a proč Výzkumné techniky Chodíš do restaurace? Kolikrát si byl za posledních 14 dní v restauraci? 31

Kdo na web přichází a proč Výzkumné techniky deníčkové studie záznam konkrétních prožitků přesná a dlouhodobá data vlastní zájem a motivace klientů na řešení další zdroje informací nejčastější problémy ze zákaznické podpory dotazníky spokojenosti analýza webů konkurence 32

Kdo na web přichází a proč storyboard Co s výsledky výzkumu zachycuje kontext, četnost použití a očekáváný výsledek obsahuje postavu: zákazník nebo persona, která je centrem příběhu scénář: jak postava, která chce vyřešit problém, přemýšlí o svém problému prostředí: kde se postava pohybuje 33

Kdo na web přichází a proč obsahuje Co s výsledky výzkumu zápletku: začíná tím, že se něco stalo a směřuje k řešení situace 34

Kdo na web přichází a proč Co s výsledky výzkumu 35

Kdo na web přichází a proč Co s výsledky výzkumu 36

Kdo na web přichází a proč Co s výsledky výzkumu persona archetypální uživatel obsahuje: lidské jméno reálnou fotografii cíle potřeby 37

Kdo na web přichází a proč Co s výsledky výzkumu 38

Kdo na web přichází a proč Co s výsledky výzkumu doporučení pro tvorbu person součástí persony by měl být příběh, který propojí personu s vaším produktem zdůrazněte vlastnosti, které odlišují jednotlivé persony mezi sebou zaměřte se na myšlenky, potřeby, které souvisí s vaším webem a nikoliv na demografické údaje vytvořte více person a pak je prioritizujte 39

Informační architektura dobrá struktura je jednoznačná srozumitelná přehledná což je zatraceně těžká práce 40

Struktura a obsah webu z předchozích informací (znalost klientova byznysu, výsledky výzkumu) struktura obsahu a webu mapa obsahu webu cíl stránky co chceme návštěvníkovi říci: jakou pro něj máme na stránce zprávu co by měl návštěvník na stránce udělat návrh webu se dotýká copywritingu 41

Struktura webu hierarchie, etsy.com 42

Struktura webu databáze, fler.cz 43

Struktura webu wiki, wikipedia.org 44

katalog Struktura webu Kombinované struktury hierarchie a databáze hub podobná hierarchii, dominantní stránky pod-weby portály s nesouvisejícím obsahem 45

Struktura webu Kombinované struktury katalog, czc.cz 46

Struktura webu Kombinované struktury hub, ceskatelevize.cz 47

Struktura webu Kombinované struktury speciální vstupní body, clovekvtisni.cz pro rozsáhlé struktury 48

Čemu Čemu se se vyvarovat ostatní odpad nahrnutý na jednu hromadu informace celý internet jsou informace 49

Čemu Čemu se se vyvarovat pro klienty lidé se považují za klienty dříve, než vám dají svoje peníze 50

Čemu Čemu se se vyvarovat důležité zbytek je tedy nedůležitý? časté dotazy (FAQ, ČKD) netříděné, odpověď raději umístěte tam, kde návštěvníky napadne otázka 51

Čemu Čemu se se vyvarovat životní situace městské weby, je to potřeba, se kterou na web návštěvník přichází dokumenty, ke stažení lidé nepřicházejí na web, protože si chtějí něco stáhnout, potřebují vyřešit problém či zjistit informaci 52

Čemu Čemu se se vyvarovat média zkratka pro tiskové zprávy, lidé spíše očekávají video či audio mnoho, opravdu mnoho navigací ČEZ 53

Ověření struktury webu Card Sorting pro zjištění toho, jak lidé chápou vztahy kategorií OptimalSort testování informační architektury zjišťování snadnosti nalezení informací v námi navržené struktuře TreeJack inventarizace a správa obsahu 54

Jak pracovat s pozorností první dojem lidé weby 100 ms 50 ms 55

Jak pracovat s pozorností mřížka usnadňuje pochopení 56

Jak pracovat s pozorností práce s barvou (vhodná barevná sestava), tvarem a typografií (znalost typografických pravidel) zaměření pozornosti inverze přitahování pozornosti výzvy k akci aby tyto techniky fungovaly užít velmi málo, jinak se pozornost dělí 57

Jak pracovat s pozorností 58

Paměť krátkodobá paměť 4 ± 1 např. tel. č.: 660879458 vs 660 879 458 dlouhodobá paměť 59

Zapamatovatelný obsah pochopený pochopení obsahu sdělení, vysvětlený obsah podaný jako příběh jednotlivé položky jsou propojeny do jednoho příběhu emotivní překvapení, šok, zábavný a hravý obsah relevantní obsah vztažený k osobě diváka a jeho situaci 60

Zapamatovatelný obsah 61

Jak ovlivňovat lidské chování důležité je znát uživatele jejich obavy radosti a očekávání jaké chování čekáte: Google trends 62

Obvyklé chování uživatelů na webu hledají známé věci prozkoumávají srovnávají chtějí zůstat v obraze chtějí se naučit něco nového chtějí něco znovu najít 63

Postup změny chování zvolíme obchodní cíl přeložíme ho do behaviorálního cíle vědy, zabývající se studiem lidského chování ve společnosti zjistíme, jak podpořit vhodné chování 64

Postup změny chování např. prodat více vegetariánských jídel na základě výzkumu si lidé vybírají jídla setrvačností změna chování (behaviorální cíl): chceme, aby lidé nad výběrem jídla uvažovali poskytneme patřičné informace 65

Postup změny chování Vybrané efekty a principy anchoring (kotvení) social proof (doporučení uznávaných osob) paradox volby, kdy méně je více omezená dostupnost shaping (postupné odkrývání dalších kroků) zvědavost 66

Vybrané efekty a principy Anchoring 67

Vybrané efekty a principy Anchoring Které pojištění domácnosti si vyberete? 68

Vybrané efekty a principy Anchoring 69

Vybrané efekty a principy Social proof 70

Vybrané efekty a principy Paradox volby 71

Vybrané efekty a principy Omezená dostupnost 72

Vybrané efekty a principy Shaping 73

Vybrané efekty a principy Zvědavost 74

Postup změny chování 75

Prototypování jedná se o proces největším přínosem je možnost vytvořit a otestovat několik prototypů v krátkém čase prototypy analogové (skica) digitální (pencil, powerpoint, keynote, visio, indigo studio atd.) jaký prototyp? vždy nejméně pracnou variantu 76

Prototypování funkční fixace čím více času věnujete určitému řešení, tím složitěji toto řešení opouštíte řešením je: 1. analyzovat stránku a rozdělit na části 2. najít alternativy pro jednotlivé části 77

Prototypování 78

Hledání chyb jen s experty (expertní review, kritika) bez účasti testujících lidí relativně rychlé pomůže rozhodnout, zda má smysl testovat s lidmi za účasti uživatelů uživatelské testování eyetracking 79

Eyetracking je třeba více účastníků než na uživatelské testování hodí se na doladění doby fixace na konkrétním místě 80

Eyetracking záznam 7 s záznam neomezeně 81

Eyetracking 82

Eyetracking 83

Uživatelské testování náročné (logistika, čas a zkušenosti) postup 1. hypotézy: co chceme ověřit 2. definice cílové skupiny a nábor účastníků 3. příprava scénáře 4. nastavení techniky 5. testování 6. vyhodnocení a náprava chyb 84

Uživatelské testování hypotézy specifikují rozsah toho, co chceme otestovat pomáhají předcházet samovyplňujícímu se proroctví např. Jsou uživatelé schopni bez problémů zarezervovat si místo v restauraci? 85

Uživatelské testování cílová skupina jak se kryje se skutečnými uživateli? vyhodnocení a náprava zapojení celého týmu plánování času na opravu chyb úpravy jsou lepší než redesign 86

Maslowova pyramida webdesignu 87

Závěrečný checklist smysluplnost 1. web zapadá do strategie vašeho klienta 2. web zapadá do života jeho návštěvníků 3. na webu je nasazen nástroj pro měření návštěvnosti, např. Google Analytics nalezitelnost 1. jsou naplánovány kanály pro přivádění návštěvníků 2. web je technologicky přizpůsoben vyhledavačům (SEO) 88

Checklisty dostupnost 1. web je dostatečně rychlý 2. vývoj webu je pokryt testy 3. chybové hlášky jsou napsány jazykem uživatele a pomáhají situaci vyřešit 4. všechny formuláře webu fungují přístupnost (web bez bariér) 1. kód je napsán sémanticky správně 2. web se zobrazuje v pořádku v zákl. prohlížečích 89

Checklisty přístupnost (web bez bariér) 3. web se přizpůsobuje tabletům, chytrým telefonům a lze ho ovládat dotykem 4. web je přístupný bez javascriptu a flashe použitelnost (ergonomie webu) 1. web je jednoduše čitelný, text má dostatečnou velikost, kontrast i délku řádku 2. navigace je snadno pochopitelná 3. odkaz z loga směřuje na hlavní stranu 90

Checklisty použitelnost (ergonomie webu) 4. odkazy jsou odlišeny a mají jednotný styl 5. každá stránka webu má hlavní nadpis 6. web odlišuje navštívené a nenavštívené odkazy 10.obsah webu prošel korekturou (odbornou i pravopisnou) 11.interní vyhledávání funguje 91

Checklisty důvěryhodnost 1. web obsahuje adresu a kontakt na provozovatele 2. grafické ztvárnění webu působí dle záměru klienta radost z používání 92

Jak vzniká web? Nepříjemně často se nové projekty rodí bez rozmyslu, chaoticky, od konce, začíná se kreslením homepage a končí vymýšlením, co na ni dát. Kreslí se logo a vybírají barvy, aniž by byla ujasněná cílová skupina a rozsah projektu, Petr Staníček, Dobrý designér to všechno ví 93

UX v České televizi

Zdroj: Petr Štědrý, Workshop: UX design v návrhu webu Adam Fendrych, Školení UX: Jak zapojit uživatele do designu Časté hnidy ve struktuře webu. Použitelnost.info [online]. 2013 [cit. 2016-01-19]. Dostupné z: https://www.pouzitelnost.info/2013/11/25/hnidy-vestrukture/ ŘEZÁČ, Jan. Web ostrý jako břitva: návrh fungujícího webu pro webdesignery a zadavatele projektů. Vyd. 1. Jihlava: Baroque Partners, 2014, 211 s. ISBN 978-80-87923-01-6.