Typy webových projektů

Transkript

1 J. Vrzal, 2.1

2 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

3 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

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

5 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

6 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

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

8 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

9 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

10 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

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

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

13 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

14 Human Centered Design 16

15 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

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

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

18 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

19 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

20 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

21 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

22 Použitelnost, účelovost 24

23 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

24 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

25 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

26 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

27 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

28 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

29 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

30 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

31 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

32 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

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

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

35 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

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

37 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

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

39 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

40 Struktura webu hierarchie, etsy.com 42

41 Struktura webu databáze, fler.cz 43

42 Struktura webu wiki, wikipedia.org 44

43 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

44 Struktura webu Kombinované struktury katalog, czc.cz 46

45 Struktura webu Kombinované struktury hub, ceskatelevize.cz 47

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

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

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

49 Č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

50 Č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

51 Č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

52 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

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

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

55 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

56 Jak pracovat s pozorností 58

57 Paměť krátkodobá paměť 4 ± 1 např. tel. č.: vs dlouhodobá paměť 59

58 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

59 Zapamatovatelný obsah 61

60 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

61 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

62 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

63 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

64 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

65 Vybrané efekty a principy Anchoring 67

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

67 Vybrané efekty a principy Anchoring 69

68 Vybrané efekty a principy Social proof 70

69 Vybrané efekty a principy Paradox volby 71

70 Vybrané efekty a principy Omezená dostupnost 72

71 Vybrané efekty a principy Shaping 73

72 Vybrané efekty a principy Zvědavost 74

73 Postup změny chování 75

74 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

75 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

76 Prototypování 78

77 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

78 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

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

80 Eyetracking 82

81 Eyetracking 83

82 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

83 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

84 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

85 Maslowova pyramida webdesignu 87

86 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

87 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

88 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

89 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

90 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

91 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

92 UX v České televizi

93 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] [cit ]. Dostupné z: Ř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