O autorovi

Ing. Michal Hudeek se dlouhodob zabv studiem

chovn lid na internetu. Jeho firma Maintop Businesses

pomohla rozjet ji nkolik spnch internetovch

startup (nap. Rozeti.se - Npad roku 2012).

Pleitostn tak pedn (mj. pro UNESCO) a komentuje

v mdich aktuln dn na internetu. Svou komplexn web

designrskou filosofii, zdokonalovanou bhem sv vce ne

dvanctilet praxe, pojmenoval Webov reie.

Poznmka: Aktuln vydn tto knihy naleznete na

http://webovarezie.cz/kniha.

Pro st tuto knihu?

esk internetov scn nechyb dal programtoi,

grafici, SEO experti i UX designi. Chyb j pedevm

koncepn mylenkoncepn mylen. Lid maj velmi mlo jasno v otzce

"pro". Pro web vznik? Pro nvtvnci pichz? Pro

by se mli rozhodnout pro ns? Pro by mli bt na webu

aktivn? Pro web vypad zrovna takto a ne jinak?

Nen divu. Metody, jak na tyto a podobn otzky odborn

odpovdt, zatm nelze nikde systematicky studovat, tak

jako nap. filmovou reii (koncepn mylen u film). Dal

jsem proto dohromady m zkuenosti a pracovn materily

ze startup, klientskho webdesignu i crowdsourcingovch

projekt za poslednch dvanct let a sepsal tento praktick

nvod, jak k webu pistupovat opravdu koncepn.

Jste-li podnikatel, investoi, marketi, designi i jin

internetov nadenci, kte by rdi dili sv internetov

projekty s reisrskm nadhledem, je tato kniha urena

prv pro Vs.

7Pedmluva

11Role webovho reisra

25Porozumn pbhu webu

49Zakomponovn motivanch prvk

63Pprava vizulnho konceptu

79Ppadov studie

81Kontakt

83Zdroje

Obsah

Pedmluva

Vyrstal jsem ve filmovm prosted. Spolu s mmi

bratry, Petrem a Ondejem, jsme se od dtstv uili

vyprvt filmovm jazykem. Zatky byly krkolomn a

reakce prvnch divk znan rozpait. Vechny nae

chyby ns vak donutily zamlet se nad tm, pro filmy

nefunguj, jak bychom si pli, a hledat lep een.

Postupem asu se divci smli, kdy jsme chtli, aby se

smli, a byli napjat, kdy jsme chtli, aby byli napjat (do t

doby se vtinou pouze smli). Dky tomu jsme objevili

princip filmov reie. Ondej u filmovn zstal, zatmco j

jsem se nadchnul pro svt internetu.

Ped vce ne dvancti lety jsem zanal jako web

designr na voln noze. Za tu dobu jsem se podlel na

tvorb vce ne stovky web. Pes prci grafika, kodra,

programtora i online marketra jsem se dostal a k

dnenmu promlen samotnch koncept web.

7

Zptn jsem si pi tom uvdomil, e mnoho problm,

kter filmov reisr e, se objevuje i ve web designu.

Film i web jsou jen jin formy komunikace s publikem.

Maj samozejm sv formln odlinosti, ale mnoho

princip je univerzlnch, pedevm ve smyslu veden

pozornosti a vyvolvn zamlench reakc.

Na rozdl od filmu se tmov role u web designu stle

jet formuj. Pomrn nedvn vytvoen pozice tzv. UX

designra je dobr krok vped, avak ten nem vzdln ani

pravomoce zasahovat do konceptu a obchodn logiky. Stle

zde chyb role reisra, kter by reakce publika eil na

zkladn, koncepn rovni. Weby se tedy vtinou tvo

bez konkrtn vize nebo je v lepm ppad vize

realizovna pouze intuitivn.

Za spnmi weby vdy stoj lovk s reijnmi

schopnostmi. Avak role webovho reisra nebyla dosud

pojmenovna a narozdl od t filmov nelze webou reii

zatm nikde systematicky studovat.

8

Neexistuj koly, kter by Vs nauily vt se do

nvtvnka, pracovat systematicky s jeho reakcemi a

zrove rozumt grafice, programovn, socilnm stm,

marketingu a tak obchodu. Dosud existuj pouze webov

reisi-samouci.

Clem tto knihy je vyzvat k vytvoen profese webovhoClem tto knihy je vyzvat k vytvoen profese webovho

reisra a reisra a poloit zklady jejich vzdlvn.poloit zklady jejich vzdlvn.

9

10

Role webovho reisra

Design nen jen o tom, jak vci vypadaj a jak z nich

mme pocit. Design je o tom, jak funguj.

- Steve Jobs

"Design je ve vem, co vytvme, ale tak mezi tmito

vcmi. Je to sms emesla, vdy, vypravstv, propagandy

a filosofie."

- Erik Adigard

11

Vimnte si, e autoi citt na pedchoz stran se

sna rznmi slovy ci tot: kvalitn design (a

u produkt, film i web) nen jen otzkou vzhledu i

dojmu. Je pedevm o celkovm konceptu a schopnosticelkovm konceptu a schopnosti

jeho jeho realizacerealizace. Bohuel pi tvorb web dosud neexistuje

formalizovan role strce konceptu; reisra, kter by ml

k jeho realizaci potebn pravomoce a zrove mezioborov

znalosti o marketingu, prci s pozornost, technologich a

chovn nvtvnk. Je to jeden z hlavnch dvod, pro je

dnes stle tolik web uivatelsky nepjemnch a

obchodn nespnch. Chyb lid, kte by byli schopn

vt se do nvtvnk, definovat koncept webu a pot jej

zrerovat a do spnho obchodnho konce.

Nejpodstatnj dovednost reisra je umn rozpoznat,

co je a co nen pro spch danho webu dleit. Ne vdy

se vyplat investovat do drah grafiky, SEO, socilnch st

i robustnho redaknho systmu. Ani jedno z tchto

magickch slovek nen velk a kdy u se maj pouvat,

tak v souladu s celkovou strategi.

12

Chyb lid, kte bybyli schopn vt se

do nvtvnk,definovat konceptwebu a pot jejzrerovat a do

spnhoobchodnho konce.

Kad web je uniktn,

proto je poteba chpat

vztah mezi vemi jeho

aspekty a sprvn je

skloubit. To, e ncoTo, e nco

dlaj jin, nemusdlaj jin, nemus

znamenat, e je toznamenat, e je to

vhodn i pro Vs.vhodn i pro Vs.

Mou snahou nen obshnout v tto knize zcela vechna

dl rozhodnut, kter budete muset bhem pprav webu

uinit. Stejn tak Vm nemohu dt zaruenou "kuchaku"

na 100% spn web. Mohu Vm vak pomoci zskatzskat

dostaten nadhleddostaten nadhled a nauit Vs sprvnm zpsobem sprvnm zpsobem

pemlet nad konceptem pemlet nad konceptem webuwebu. Vae ance na spch se

tm radikln zv.

Krom teorie popsan v tto knize jsou Vm k dispozici

tak ppadov studie, kter krok po kroku popisuj, jak

webov scn v praxi pipravit.

13

Intuice vs. koncepn mylen

Na potku filmovho prmyslu byly technologie natolik

drah, e bylo nutn velmi dkladn pemlet nad tm, co

a jak natet. Petet film po dokonen byla obrovsk

ztrta penz. I to byl jeden z dvod pirozenho vvoje

oboru filmov reie a dalch profes, kter zajiovaly

systematick promlen film a jejich efektivn realizaci.

Internet si bohuel touto fz nikdy neproel, nebo alespo

ne dostaten dlouho. Weby bylo relativn snadn a levn

vytvoit a mnit (na rozdl od film). Zaaly se tedy tvoit

intuitivn a nekoncepnintuitivn a nekoncepn. Tvoili je pevn technicky

smlejc lid msto empatickch vizion. Tmto faktem

trp dodnes, pestoe stoj nemal penze. Teprve a v

poslednch letech objevuje pozice tzv. user experience (UX)

designra, jeho kolem je vt se do nvtvnka a

pipravit podle toho grafick nvrh webu. To je rozhodn

velmi dobr krok vped, ale je to podle mho nzoru stle

mlo. Jeho monost ovlivnit projekt po koncepn strnce

je vznamn omezena, nebo m minimln pravomoce

14

zasahovat do obchodn logiky a obsahu webu. Nem na to

ani potebn vzdln. Role tvrce konceptu, reisra,

dosud oficiln nevznikla. spn weby pitom potebuj

lovka, kter bude mt monost rozhodovat o webu jako o

celku a zrove k tomu bude mt potebn schopnosti a

vdomosti. Stejn jako se d nauit pracovat s filmovm

publikem, d se nauit pracovat i s tm internetovm.

Ti, kdo o webovm konceptu v dnen dob mohou

rozhodovat, tak asto dlaj pouze na zklad sv intuice a intuice a

selskho rozumuselskho rozumu. Ty vak navd k nesprvnmu, i kdy

zdnliv logickmu, postupu tvorby web. Porovnejte sami

nsledujc dv logiky, jednu intuitivn a jednu koncepn.

Vimnte si pedevm toho, jak intuice smuje rovnou k

een hmatateln formy a obsahuhmatateln formy a obsahu (tedy "co? a jak?")

msto toho abychom zaali nejprve abstraktnjmabstraktnjm

smyslem a koncepcsmyslem a koncepc (tedy "pro?"). Chceme rovnou

natet msto toho, abychom nejprve podn promysleli,

pro vlastn natme a kdy chceme, aby se lid,

zjednoduen eeno, napklad smli a nebo bli.

15

Intuitivn logika

1. Co a kolik toho m na webu bt?

(Sepsn struktury webu)

2. Jak m web vypadat?

(Pprava grafickho nvrhu)

3. Jakou zvolme technologii?

(Vvoj)

4. Co bude web konkrtn kat?

(Doplnn text a dalho obsahu)

5. Odkud budou nvtvnci pichzet?

(SEO, sociln kampan)

6. Funguje web technicky?

(Kontrola vzhledu a funknosti)

16

Koncepn logika

1. O em se nvtvnk rozhoduje a pro by se ml

rozhodnout pro ns?

(Porozumn pbhu webu)

2. Pro by ml bt na webu aktivn?

(Zakomponovn motivanch prvk)

3. Jak udret jeho pozornost a vyvolat poadovan

reakce?

(Pprava vizulnho konceptu)

4. Jakou zvolme technologii?

(Vvoj)

5. Reaguj nvtvnci podle plnu?

(Testovn reakc)

17

Intuitivn postup m dv hlavn slabiny.

1. Chyb koncept. Chyb koncept. Jakmile web po sputn nepin

oekvn vsledky, je velmi sloit vyptrat

chybu. Nemme stanoveno, jak by se ml

nvtvnk chovat a co se mu m honit hlavou.

Reln reakce nelze porovnat s poadovanmi.Reln reakce nelze porovnat s poadovanmi.

Msto toho nastv nekonen hledn v

analytickch nstrojch, koprovn konkurence,

slep nsledovn rad z odbornch lnk

vytrench z kontextu i placen zbytench

expert na zskn vce nvtvnk, kte ale

mon Vaimi potencilnmi zkaznky nejsou.

2. Chyb koordinace. Chyb koordinace. Zastnn strany si web

pedvaj jako hork brambor bez zjmu o celek.

Kad si udl svou prci, ale u nepeml nad

tm, jak uetit prci ostatnm. Grafik si stuje, e

zadavatel posunuje beze smyslu tlatka o

milimetr doleva a doprava, kodr lamentuje nad

nekompatibilnmi efekty v grafickm nvrhu a

programtor na nedostatenou technickou

specifikaci. Na webu tak vznikaj Na webu tak vznikaj chyby, kter buchyby, kter bu

odnese nvtvnk nebo penenka zadavatele.odnese nvtvnk nebo penenka zadavatele.

18

Vsledkem je asto zbyten drah web kvli nkladm

na komunikaci a zmnm v zadn, kter nikdo nen

ochotn zaplatit ze sv kapsy.

Koncepn logika oproti intuici pin mnohem lep lep

vsledky a et vsledky a et penzepenze. Vyaduje ale samozejm

schopnho a vzdlanho reisra, kter m pravomoce k

provdn koncepnch zmn.

State se webovm reisrem

A u pracujete pro klienty, nebo vytvte weby pro

sebe i svou firmu, zvldnut dovednost webovho reisra

velmi vrazn zv ance na obchodn spch zv ance na obchodn spch VaehoVaeho

webuwebu. V tmu by vdy mla bt odborn autorita, kterou by

vichni uznvali vetn dodavatel. Stratg, kter um

zformulovat koncepci webu; multi-oborov odbornk, kter

me vst s nadhledem diskuzi na profesionln rovni se

vemi zastnnmi; konzultant, kter doke porozumt

obchodnmu modelu firmy a pome zasadit web do jej

19

strategie; odvlivec, kter by byl ochotn na spch webu

vsadit sv jmno; a v neposledn ad empatick psycholog

a vyprav, kter rozum emocm a chovn lid na

internetu, aby v nich dokzal vyvolvat potebn reakce. A

to ve v jedn osob, kter doke vechny tyto aspekty

pospojovat do spnho celku.

Internet potebuje webov reisry. State se jimi.

Potebn dovednosti

Jak u jsem zmioval v vodu kapitoly, reisr mus mt

znalosti hned z nkolika oborhned z nkolika obor, aby dokzal pochopit

vechny souvislosti a dlat sprvn strategick rozhodnut.

Potebuje mt dobr obchodn a marketingov mylen,

umt pracovat s mylenkovmi pochody nvtvnk a

rozumt technologim natolik, aby dokzal sprvn

rozhodnout, na em web stavt a jak jsou reln trn

ceny. Ml by chpat roli ostatnch profes a vhodnou

ppravou jim etit starosti a prci . Mus tak umt vst

tm a dvat konstruktivn zptnou vazbu.

20

21

Konkrtn by ml webov reisr:

1. Sprvn pochopit a pomoci nadefinovat, pro cel

web vznik a jak je jeho pesn loha

2. Vt se do role nvtvnk a pochopit dvody,

pro pichz a co prv e

3. Zakomponovat do webu vhodn prvky motivujc

nvtvnky k aktivit

4. Navrhnout vizuln a obsahov koncept webu tak,

aby zajistil poadovan reakce nvtvnk

5. Zvolit vhodn technologie a odhadnout realisticky

cenovou a asovou nronost navrenho

konceptu

6. Pipravit profesionln podklady pro prci dalch

len tmu

7. Prbn dohlet na vvoj webu a v ppad

odchylek od konceptu dt konstruktivn feedback

na vstupy ostatnch

8. Otestovat reakce nvtvnk na hotovm webu a

doladit jej

Tento seznam nen dogmatick. V principu jde o

dohldnut na sprvnou tvorbu konceptu a na realizaci v

souladu s nm.

22

Vytvome spolen novou generaci

profesionlnch webovch reisr

Znalosti obsaen v tto knize ani zdaleka nejsou

plnm souhrnem veho, co by ml webov reisr umt.

Spe jde o pehled oblast, o kter by se ml zajmat a

(zatm) alespo jako samouk se v nich snait

zdokonalovat. Jde o mix metod a rad, kter mi pi

rerovn web velmi dobe poslouily a stle slou.

Clem tto knihy je vyzvat k vytvoen profese vyzvat k vytvoen profese webovhowebovho

reisra a jejich systematickmu vzdlvnreisra a jejich systematickmu vzdlvn. Rd bych

spojil dal pedn esk internetov odbornky a spolen

el ve vzdlvn webovch reisr mnohem dle za

strnky tto knihy. Vm, e by to vrazn pomohlo

pozvednout (nejen) eskou internetovou scnu. Pokud

mte zjem pomoci mi v tomto sil, nevhejte mne

kontaktovat.

23

KPorozumn pbhu

webu

Pokud nevte, jakou otzku poloit, nikdy nic neobjevte.

- William Edwards Deming

ad web se sna uivatele o neme pesvdit,

a u je to nkup produktu nebo strven vce asu

na strnce samotn. Chcete-li uspt, muste nalzt zpsob,

jak se dostat do rozhodovacho procesu dostat do rozhodovacho procesu nvtvnkanvtvnka. Muste

mu umt webem ct to, co chce slyet (pravdiv!). K tomu

Vm pomohou nsledujc otzky:

1. Kdo Kdo je V nvtvnk?

2. V jak V jak je situaci?

3. Mezi m Mezi m se rozhoduje?

4. Podle eho Podle eho se rozhoduje?

5. Jak Jak se o Vs dozv?

6. Co Co mu muste cit i ukzat, aby se rozhodl pro

Vs?

25

26

Tato kapitola se zabv hlednm odpovd na tytohlednm odpovd na tyto

otzky. otzky. Posledn otzka, tedy samotn proveden webu, je

pak jet hloubji rozvedena ve zbvajcch kapitolch.

1) Kdo je V nvtvnk?

Schopnost pedstavit si Vaeho nvtvnka jako

konkrtnho lovka Vm nesetnkrt pome v dalch

fzch ppravy webu. Nen pesn dno, kter

charakteristiky m a nem smysl do definice nvtvnka

zahrnout. Nkdy napklad vk i pohlav hraje roli, nkdy

ne. Podstatn je nalzt takov charakteristiky, ktertakov charakteristiky, kter

vystihuj pevnou st Vaich nvtvnk a vystihuj pevnou st Vaich nvtvnk a zrove majzrove maj

vliv na formu i obsah Vaeho webu. vliv na formu i obsah Vaeho webu. Zvate jednotliv

charakteristiky (dky) v nsledujc tabulce a:

1. Vyznate, kter extrm pevauje

2. Nemete-li se rozhodnout, oznate celou

charakteristiku za neutrln

3. Navrhnte dal charakteristiky nad rmec tabulky

a stejnm zpsobem je vyhodnote

27

Neexistuje pesn hranice, jak podl nvtvnk mus

tyto charakteristiky splovat, aby na nich bylo mon

stavt. Zle na tom, jak tolerantn je zbvajc st

nvtvnk a jak moc o n stojte.

Extrm A Extrm B Vliv nap. na

Mui eny Obsah, barvy

Star Mlad generace Obsah, barvy

Studenti Nestudenti Texty, cena

Potaov

negramotn

Pokroil

uivatel potae

Pouit

nestandardnch

prvk

Se zdravotnmi

obtemiBez obt Velikost psma

Laici Odbornci Mra vysvtlovn

Stejn smysl

pro humor

Odlin smysl

pro humorPouit vtip

Oekvaj

ptelskost

Oekvaj

formlnostTn textu

Konzervativn Kreativn Vzhled a barvy

Textov typy Vizuln typyPomr textu a

obrzk

28

Clem tohoto kroku je zskat hrubou pedstavu o

pedpokladech, na zklad kterch lze vymlet, jak Vaejak Vae

nvtvnky nadchnoutnvtvnky nadchnout. Zvate vdy dkladn, co se stane,

pokud na V web pijde nkdo, kdo nespluje tyto

podmnky. Jak moc mu bude vadit, e je na webu, kter

neodpovd jeho pedstavm? Odejde kvli tomu? Bude

Vm to vadit? Pokud je to pro Vs pli velk riziko,

pesute tuto charakteristiku do neutrln skupiny.

Snate se najt vhodnou rovnovhu. m vce se budetem vce se budete

snait snait jednu skupinu nadchnout, tm vt je ance, ejednu skupinu nadchnout, tm vt je ance, e

nkoho jinho odradte.nkoho jinho odradte. Naopak kdy se budete snaitsnait

uspokojit vechny, nenadchnete nikohouspokojit vechny, nenadchnete nikoho. V tto fzi

nevytvejte vce skupin nvtvnk. Je teba najt

charakteristiky spolen pro vechny nvtvnky.

Poznmka pro B2B weby: Firma nen Firma nen nvtvnkem

Vaeho webu. Vdy jm je lovk v tto firmlovk v tto firm. Do

charakteristik pak tedy zaate jak vlastnosti firmy, tak

danho lovka.

29

Vstup me vypadat nap. nsledovn:

Koho nadchnout:Koho nadchnout:

Vk 18-27

Studenti vysokch kol

Pokroil uivatel potae

Preferuj ptelskost a kreativitu

Kvli emu urit neodradit:Kvli emu urit neodradit:

Smysl pro humor

Pohlav

Finann situace

2) V jak je situaci?

Jakmile jste si ujasnili zkladn charakteristiky, je as si

pedstavu nvtvnka jet vce zkonkretizovat. O em se

rozhoduje? Vam kolem je vklnit se do tto rozhodovac

situace a pesvdit nvtvnka pro Vae een.

30

Definujte situaci nvtvnka jednou tzac vtou.Definujte situaci nvtvnka jednou tzac vtou.

Jakkoliv banln tento kol zn, nalezen odpovdi je

mnohem sloitj a tak mnohem dleitj, ne se me

zdt. Ideln je samozejm, pokud mte zstupce clovzstupce clov

skupiny k dispoziciskupiny k dispozici a nebo jet lpe, jste jm Vy

sm/sama.

Zkladnm krokem k spchu je zvolen vhodnhozvolen vhodnho

pomru obecnosti a pomru obecnosti a konkrtnosti rozhodovac situacekonkrtnosti rozhodovac situace

nvtvnkanvtvnka. Na jednom konci osy le zcela konkrtn

situace, kdy si nvtvnk vybr jen z produkt podobnchprodukt podobnch

tomu Vaemutomu Vaemu, a na druhm je obecn situace typu "m"m

mm trvit as"mm trvit as" nebo "za co mm utratit "za co mm utratit penze"penze". m

obecnj situace tm ir clov skupina, ale tak vce

konkurence, sloitj pesvdovn a riziko banlnosti.

31

Ukame si to na pkladu Dropboxu, online loiti dat,

kter se automaticky synchronizuje s potaem, mobilem

a dalmi zazenmi a u Vs i Vaich znmch.

Potenciln zkaznci Dropboxu mohou bt v rznch

rozhodovacch situacch (seazeno od konkrtnch k

obecnm):

1. Jak zvolm synchronizovan online loit dat?

2. Jak nasdlm digitln soubory pomoc internetu?

3. Jak nasdlm digitln soubory obecn?

4. Jak nasdlm dokumenty (fyzick i digitln)?

5. Do eho budu investovat?

Nen mon postihnout webem vechny tyto situace.Nen mon postihnout webem vechny tyto situace.

Rzn situace vyaduj srovnn s jinmi alternativami a

jin argumenty. Snaha o pout vech monch argumentSnaha o pout vech monch argument

pro vechny mon situace vede k pro vechny mon situace vede k zahlcen nvtvnka.zahlcen nvtvnka. Je

rozdl pesvdovat nvtvnky o tom, e maj pestat

petahovat data mezi potai pomoc USB disk a zat

pouvat Dropbox nebo o tom, e Dropbox je lep ne

Google Drive (konkurenn sluba na stejnm principu).

32

Zante vyhodnocovat jednotliv situace od konkrtnchZante vyhodnocovat jednotliv situace od konkrtnch

k obecnm k obecnm a rozhodnte se pro jednu z nich. a rozhodnte se pro jednu z nich. m vce lid

se v dan situaci nachz a m jednodu je pesvdit je

o Vaem een, tm lpe. Nap.

1. Jak zvolm synchronizovan online loit dat? Jak zvolm synchronizovan online loit dat?

O synchronizovanm online loit dat obecn v

jen mlo lid. Tato situace nen dostaten ast.

2. Jak nasdlm digitln soubory pomoc internetu? Jak nasdlm digitln soubory pomoc internetu?

Spousta lid si posl data po internetu a rozhoduj

se tedy pomrn asto o tom, jak to provst

(email, schovna atd.). Toto je ji irok okruh lid

a d se jim snadno vysvtlit stejn vhoda

(efektivn sdlen soubor po internetu).

3. Jak nasdlm digitln soubory obecn? Jak nasdlm digitln soubory obecn?

Velk mnostv lid vak stle tak pesunuje

digitln data pomoc fyzickch mdii (USB disk,

CD atd.). Slouenm uivatel internetovch

slueb a fyzickch mdi vznik obrovskobrovsk

potenciln skupina potenciln skupina zkaznk. Lze tak stle

snadno vysvtlit mrn pozmnnou vhodu

Dropboxu (efektivn sdlen digitalnch soubor).

33

4. Jak nasdlm dokumenty (fyzick i digitln)? Jak nasdlm dokumenty (fyzick i digitln)?

Krom digitlnch dat si lid vymuj tak titn

materily a jin fyzick dokumenty. Slouenm

obou skupin sice vznik gigantick segment, ale

Dropbox nijak nedoke pomoci se sdlenm

fyzickch dokument. . Pesvdovn lid k

digitalizaci dokument a nslednmu pouit

Dropboxu by bylo velmi sloit a nkladn.

5. Do eho budu investovat? Do eho budu investovat?

Kad lovk nebo firma se rozhoduje o tom, za co

utratit penze. V tomto ppad vak vhody

Dropboxu nelze nijak vhodn srovnat s ostatnmi

alternativami. Tato situace m obecn

marketingovou vyuitelnost v rozvojovch zemch

(rozhodovn o tom, jestli si koupit aty nebo jdlo)

a u firemnch zkaznk (rozhodovn o vyuit

rozpotu nap. na reklamu nebo kontrolu vroby).

V ppad Dropboxu je tedy nejvhodnj situace . 3:

"Jak sdlet digitln soubory obecn?""Jak sdlet digitln soubory obecn?". Pokud se v

budoucnu situace na trhu zmn (napklad lid ji budou

chpat smysl online loit a budou si jen vybrat z

podobnch slueb), web bude poteba pepracovat.

34

3) Mezi m se rozhoduje?

Tvrdit, e jste prvn a e nemte konkurenci je nesmysl.Tvrdit, e jste prvn a e nemte konkurenci je nesmysl.

Vai potenciln zkaznci u danou situaci njak e

(rozhodnut ignorovat ji je mimochodem tak een!).

Vam kolem je pesvdit je, aby ji eili jinakeili jinak. K tomu je

poteba pesn vdt, odkud odkud je chcete petahovatje chcete petahovat. Drtiv

vtina mch klient, kte chtj opravit web nepinejc

oekvan vsledky, m chybu v tomto bod. Mluv ke

patn clov skupin, zbyten zahlcuj web argumenty

vhodnmi pro bezvznamnou clovou skupinu a nebo se

sna mluvit ke vem najednou. Clem tto podkapitoly je

vyjasnit si, vi emu se chcete pozicovatvi emu se chcete pozicovat. Odhalte vechny

alternativy, kter lid ve stejn situaci zvauj. A to i tyi ty

mimo online svtmimo online svt. Zvlt pro startupy s novtorskmi

online produkty je reln "offline" svt asto nejvt

konkurenc. Zakreslete vechna een dan situace do

rozhodovacho stromu. Kad alternativa zrove odpovd

zkaznickmu segmentu (tj. skupin lid, kte ji danou

situaci e stejnm zpsobem).

35

Vyznate segmenty, ze kterch uvaujete zkaznky

zskvat. Vyate ty pli mal, i kdy V produkt pat do

stejn skupiny. Dropbox se nap. nesnail petahovat

zkaznky od jinch synchronizovanch loi, ale z

ostatnch segment.

36

4) Podle eho se rozhoduje?

Nyn je as zjistit, jak argumenty poutjak argumenty pout pro

pesvden nvtvnk, e Vae een je to nejlep. Ty

pirozen vyplynou z konkurennho srovnnkonkurennho srovnn. Sepite

vechna podstatn kritria, podle kterch se zkazncipodstatn kritria, podle kterch se zkaznci

rozhodujrozhoduj mezi Vmi a ostatnmi alternativami (ne kritria,

ve kterch jste sice lep, ale nejsou ve skutenosti

podstatn). U kadho faktoru vyznate, v v em jste lep aem jste lep a

v em horv em hor. Faktory, ve kterch jste lep, bude na webu

poteba vyzdvihnoutvyzdvihnout, ty negativn bude poteba vyvrtit,vyvrtit,

ist jen konstatovat, ist jen konstatovat, ppadn ve vjimench ppadech

vynechatvynechat, pokud jde o samozejm vlastnosti produktu a

nepedstavuj dnou vhodu pro zkaznka.

Pokud nemte k dispozici marketingov przkumy nebo

zstupce clov skupiny, odhadnte rozdly na zklad

informac Vs a Vaeho tmu. I mn pesn vyplnn tto

tabulky m smysl. Sama o sob se na webu pravdpodobn

neobjev. Slou jen jako poklad k rozhodovn o tom, jak s

konkurennmi vhodami a nevhodami na webu pracovat.

37

Dropbox Emailschovn

sluby

USB

disky

Prostor

zdarma (GB)

a 16

GB

celkem

a 20

MB na

soubor

a 4 GB

na soubor-

Prostor

celkem (GB)a 250 a 7 - a 1000

Nezvislost na

zazen

Automatick

synchronizace

Nezvislost na

internetovm

pipojen

Verzovn

Vnman

spolehlivostvysok

obas

neprojde

obas

nefunkn

hardware

odchz

Vnman

bezpenoststedn stedn nzk vysok

Cena za GB 20 K zdarma zdarma 2 K

38

Z pedchoz tabulky nap. vyplvaj nsledujc zvry:

Vyzdvihnout:Vyzdvihnout:

Automatick odesln a pjem soubor

Nezvislost na zazen

Verzovn

Vnman spolehlivost

Prostor zdarma

Vyvrtit:Vyvrtit:

Vnman bezpenost

Konstatovat:Konstatovat:

Cena za GB

Prostor celkem

Vynechat:Vynechat:

Zvislost na internetovm pipojen

39

5) Jak se o Vs dozv?

Vme u, kdo jsou Vai nvtvnci, v jak jsou situaci,

jak maj alternativy a pro by si mli vybrat nae een. Z

toho veho by mlo vyplynout, jak se na V web dostanou.

Zdroj nvtvnosti me bt samozejm vce. Je dobr

pedem odhadnout, kter jsou vhodn a realistick a podle

toho web promlet. Nkdy nem vbec smysl zabvat se

optimalizac pro vyhledvae nebo socilnmi stmi, i kdy

jsou momentln "v kurzu".

Znalost oekvan struktury zdroj nvtvnosti

umouje pochopit, co se nvtvnkm odehrv v hlav

tsn ped pchodem a s jakmi vdomostmi na web

pichz. Meme pak tomu lpe pizpsobit cel webov

scn a vyzdvihnout vhodnj argumenty.

Vijte se do role svch nvtvnk a pemlejte, jak a

kde lid hledaj informace potebn pro rozhodovn v dan

situaci. Odkud k Vm mohou pijt?

40

1) Pmo zadnm domny?

Lid, kte run zadvaj Vai domnu, ji s velkou

pravdpodobnost na Vaem webu nkdy byli nebo vidli

offline odkaz. Pokud ekte vysok procento takovchto

nvtvnk, je poteba investovat vce do snadnosnadno

zapamatovateln domnyzapamatovateln domny a do mechanism pro motivaci kmechanism pro motivaci k

nvratunvratu. Pokud vak pli mnoho takovch nvtvnk

mt nebudete, nenechte se paralyzovat nkolika tdennm

brainstormovnm dokonalho jmna s volnou domnou.

2) Z vyhledva?

Co hledaj uivatel, kterm by se hodil V web? Jak

klov klov slovaslova zadvaj a jak konkurenn strnky konkurenn strnky se jim ve

vsledcch objevuj?

SEO me bt velmi mocn nstroj, ale nee ve.

Pokud V produkt nikdo sm od sebe nehled nebo

vsledky ovldaj finann siln korporace, investice investice nadnad

rmec SEO minima se vbec nemus vyplatitrmec SEO minima se vbec nemus vyplatit a je teba

hledat jin kreativn cesty, jak nvtvnky na web dostat.

41

3) Z partnerskch strnek?

Dokete nalzt mechanismus, kterm byste mohli

odmnit jin weby za odkazovn na ten V? Mete

poskytnout provizeposkytnout provize? Mte prostedky k vytvoen

potebnho administranho prostedadministranho prosted?

Finann motivace je velmi siln, zvl pokud se Vm

poda nalzt sprvn relevantn partnery. Ideln je, pokud

mylenkov pochod jejich nvtvnk pedchz

mylenkovmu pochodu tch Vaich (nap. ubytovn

kam v okol).

4) Ze socilnch st?

Jak atraktivn je V web pro sdlen?Jak atraktivn je V web pro sdlen? Nejlpe funguj

zajmav fotky, videa, zkulisn informace a dal obsah,

kter pobav nebo inspiruje irokou skupinu lid. ButeBute

realistirealisti - technick informace o nabdce Vaich hmodinek

mlokoho nadchnou tak, aby s nimi zaplavil svou ze na

Facebooku.

42

Pemlejte nad tm, co Vy sami jste kdy sdleli.

Investovat vt stky do socilnch st m smysl pouze

tehdy, pokud jste pipraveni dlouhodob udrovat vztahy sedlouhodob udrovat vztahy se

svmi fanoukysvmi fanouky a mt co ct. Sociln st nejsou zdaleka

vhodn pro kadou firmu.

5) Z mdi?

Tk se V web aktuln "propranho" tmatu"propranho" tmatu?

Pinte nco inovativnhoinovativnho? Da se Vm uspt vuspt v

zahranizahrani? Zkrtka existuje dost dobr dvod, pro by o Vs

novini mli pst? Pokud vte, e ano, vnujte as

pprav podnho medilnho plnu.

Sbrejte kontakty, bavte se s novini, zjistte, co je

zajm a co naopak nemaj rdi. Vdy za kadch okolnost

dodrujte pravidlo, e novinm poslte jen informace, o

kterch jste skuten pesvdeni, e je nadchnoupesvdeni, e je nadchnou. Jinak

si velmi rychle mete zavt dvee. Mdia Vm mohou

pinst tisce nvtvnk denn. Ale jen pokud mte co

ct.

43

Vizualizace struktury zdroj nvtvnosti

Zvate vech 5 uvedench monost a nartnte je do

grafu. Kter pevauj? Kvli kterm naopak nem smysl

web pizpsobovat? Co se hon hlavou nvtvnkm z

hlavnch zdroj? Uvdomn si tchto rozdl Vm pome

v dal fzi pi analze mylenkovch pochod nvtvnk.

Zrove Vm graf tak napov, do jakch oblast m smysl

investovat.

44

6) Co mu muste ct i ukzat, aby se

rozhodl pro Vs?

U tto otzky se v tto kapitole zastavm u jen krtce.

Vnuj se j dostaten vechny zbvajc strnky tto

knihy. Na potku hledn odpovdi stoj zkladn

oekvn nvtvnk od Vaeho webu. Existuje pt

zkladnch dvod, pro lid chod na internet, a tedy pt

webovch nr. Stejn jako u film se mohou nry rzn

msit, ale ve vtin pipad je vdy jeden dominantn.

1. Nalzt obsah obsahov weby

2. Spojit se s lidmi komunikan weby

3. Vyjdit se weby pro sebevyjden

4. Usnadnit si prci online aplikace

5. Hrt si online hry

V rznch nrech jsou pro nvtvnky rzn vci

jinak dleit. Sprvn rozpoznn nru nm ihned odhal

nejzkladnj priority vvoje.

45

1) Obsahov weby

A u lid pichz kvli pobaven nebo zjitn

informac, chtj co nejdve najt pesn to, co hledaj a

ideln v prbhu nenarazit na nic, co je nezajm.

Nejdleitj je tedy logick strukturalogick struktura, jednoduchostjednoduchost a

samozejm zajmav obsahzajmav obsah. Lid Vm prominou

prmrnou grafiku (pokud nepropagujete grafick studio).

asto lze snit nklady vyuitm existujcch redaknch

systm. Spad sem vtina firemnch web, eshop,

stahovn softwaru nebo nap. Wikipedie.

2) Komunikan weby

Je-li V web pedevm o komunikaci a propojovn lid,

kte by se bez internetu jen tko dokzali najt,

soustete se na co nejrychlej zskn kritick masyzskn kritick masy a na

mechanismy enmechanismy en. Typick je problm "co dv" - vejce

nebo slepice? Dleit jsou tak monosti interakcemonosti interakce

uivateluivatel, technologie zajiujc dobrou rychlost odezvydobrou rychlost odezvy, a

pehlednost. Pkladem jsou weby propojujc nabdku a

poptvku, seznamky, sociln st a komunitn weby.

46

3) Weby pro sebevyjden

Weby zamen na sebevyjden potebuj pedevm

psobivou formupsobivou formu a siln mechanismus enmechanismus en pspvk.

Lid chtj, aby jejich vtvory vypadaly dobe a vidlo je co

nejvc lid. V tchto ppadech se vyplat investovat do

grafiky a socilnch funkc. Mete tak narazit na

kapacitn problmy, zvlt pokud umoujete sdlen

multimedilnho obsahu. spnmi zstupci tto

kategorie jsou nap. Instagram nebo About.me.

4) Online aplikace

Od online aplikac lid oekvaj pedevm uitenostuitenost.

Intuitivn a jednoduch ovldnjednoduch ovldn, rychlost odezvyrychlost odezvy a

odolnost vi ztrt pipojenodolnost vi ztrt pipojen by mly mt nejvy prioritu.

Nejvt pozornost si tedy zaslou uivatelsk rozhran a

technologie. Pozor tak na prudk zvyovn potu

uivatel vzhledem k asto vysokmu potu poadavk

odeslanch na server na jednoho nvtvnka. Pat sem

CRM systmy, aplikace pro projektov zen nebo nap.

online kancelsk programy.

47

5) Online hry

Design online her je vda sama pro sebe. Doporuuji

nastudovat knihy nap. od Jane McGonigal, kter se prci s

mylenkovmi pochody hr zabv. V principu uspch

hry zvis na tom, jestli hri povauj rozhodovn o

danch vcech za zajmav nebo ne. Existuj vyjmen

spn technicky primitivn hry a naopak i ty

hrzostran nespn avak emesln vyveden. Vnujte

na zatku vce asu sepsn seznamu rozhodnut, kterrozhodnut, kter

bude muset hr udlatbude muset hr udlat a zkuste s ohledem na Vai clovou

skupinu vyadit ta mn zajmav a ppadn vymyslet

nov, atraktivn.

48

MZakomponovn

motivanch prvk

Hluboko v ns nen nic krom toho, co jsme si tam

sami uloili.

- Richard Rorty

otivace nen manipulace. Nemete lidi pinutit k

nemu, co dlat nechtj. Chcete-li, aby Vai

nvtvnci aktivn pispvali na V web, je poteba

pochopit jejich vnitn poteby a nabdnout jim nco na

opltku. Lid se nebudou registrovat, pst lnky,

komentovat, hlasovat i jinak spoluvytvet V web, pokud

jim k tomu nedte dobr dvod. Tato kapitola Vm pome

ujasnit si intern poteby Vaich ujasnit si intern poteby Vaich nvtvnknvtvnk a nauit se

hledat prvky, kter je za jejich aktivitu nleit za jejich aktivitu nleit odmnodmn. Ne

vechny weby samozejm k spchu nutn vyaduj

pispn ze strany uivatel. Tvote-li si obsah svho

49

webu zcela sami, mete tuto kapitolu peskoit.

Plnujeteli vak spoluvytvet svj web se svmi

nvtvnky, tte dle.

Pistupujte k aktivit Vaich

nvtvnk jako k prci

Bt aktivn na Vaem webu pro uivatele znamen prciznamen prci

a je poteba k n tak pistupovat. K tomu slou tzv.

Motivan kruh. Tento koncept vychz z mch zkuenost

s crowdsourcingovmi projekty a je zaloen na

pedpokladu, e vtina lid sdl stejn idel dokonalho

pracovnho msta. Mete jej pout nejen k motivaci

nvtvnk, ale i len svho tmu.

Existuje 5 motivanch faktor, kter lid v prci

vyhledvaj. Ideln prce by mla mt vechny tyto faktory

zcela naplnny, co se vak v praxi stv jen zdkakdy.

Lid tak hledaj dal pleitosti k jejich naplnndal pleitosti k jejich naplnn. A

internet je jednou z monost. V web tak.

50

1) Hrdost

Lid tou bt na sebe pyn. Chtj vdt, e odvdj

dobrou prci a jsou odbornky ve svm oboru, a u je to

hkovn nebo jadern fyzika. K tomu je teba intern i

extern uznn a pocit vlastnho rozvojeuznn a pocit vlastnho rozvoje.

2) Zbava

I kdy je lovk v nem extrmn dobr, neznamen

to, e ho to bav dlatbav dlat. Mu bt skvl v Excelu, ale

neznamen to, e chci bt profesionln Excel expert.

Naopak nemusm bt pli dobr grafik, ale bav m to a

teba se asem zlepm.

3) Smysl

I ty nejnudnj koly se najednou mohou stt

vzruujcmi, pokud pracujete na nem smysluplnmpracujete na nem smysluplnm. I

pokud Vs Excel nebav, co kdybyste vytveli tabulku,

kter me zachrnit spoustu ivot nebo zmnit cokoliv

dalho, na em Vm zle?

51

4) Vztahy

Sympatit kolegovSympatit kolegov mohou bt silnm dvodem, pro

lid zstvaj v prci, kterou vlastn moc nemaj rdi.

Analogicky, nedostatek stejn smlejcch lid me bt

dvod k vyhledvn online komunit.

5) Penze

Finann motivace je zejm a siln. Pokud se vhodn

pouije, me bt velmi inn. Kdo by si nechtlKdo by si nechtl

pivydlat?pivydlat? Nicmn je teba bt opatrn. Faktor penz

me velmi snadno odthnout pozornost od vech

ostatnch faktor a zdeformovat chovn uivatelzdeformovat chovn uivatel ve

prospch honby za co nejsnazm ziskem.

Uznejte sami. Nebylo by ideln dlat skuten

smysluplnou prci, kter Vs bav, ve kter jste dob, kde

mte sympatick kolegy a navc je skvle placen?

Jak typ profese maj Vai nvtvnci? Co jim

pravdpodobn v prci i ivot chyb?

Inspirujte se Motivanmi kruhy

jinch web

Motivan kruh znzoruje vech pt faktor a jejich

naplnn v konkrtn pracovn pozici. Kad vse

reprezentuje jeden faktor, kdy vybarven plocha vsee

uruje jeho mru naplnn. Kruh ne pedstavuje ideln

prci (vechny sektory jsou pln vybarveny).

53

Vhodnj je

zamit se na jeden

a dva faktory a ty

se snate neustlevylepovat.

Pro lep pochopen, jak Motivan kruh funguje, se

zkuste porozhldnout, jak jin online projekty motivuj sv

nvtvnky. Projdte si weby, na kter sami pispvte,

ptejte se sami sebe pro a zkuste si nakreslit jejich

Motivan kruh. Odpozorujte, jak konkrtn prvky na

strnce potebn reakce vyvolvaj.

Vimnte si tak, e

dn web se nesna odn web se nesna o

maximalizaci vech ptimaximalizaci vech pti

faktorfaktor. Ve vtin

ppad se toti vyplat

zamit se na jeden a dva faktory a ty se snait neustle

vylepovat.

Na nsledujcch stranch pedstavm nkolik piklad.

54

Wikipedii nen teba pedstavovat. Kad z ns na ni

nkdy zavtal. Zamysleli jste se u nkdy, pro zde lid

dobrovoln trv stovky hodin psanm lnk a jejich

revidovnm? Co je motivuje? Je to pedevm hrdost ahrdost a

smysl prcesmysl prce. Napsnm lnku lid ukazuj, e jsou experti

ve svm oboru. Zrove jim tak imponuje vize Wikipedie o

vdomostech pro kadho zdarma.

55

Innocentive je online platforma spojujc vzkumn

pracovnky s velkmi (asto mezinrodnmi) firmami,

kter potebuj vyeit vdeck problm. Umouje vdcm

ve vslub i ve vzdlench mstech ukzat sv

schopnosti a zrove si trochu pivydlat. Autoi

spnch een jsou na webu velmi viditeln

propagovni. Hlavnmi motivy jsou tedy hrdost a penzehrdost a penze.

56

Foldit je potaov hra, kter hrm umouje pispt

k dleitmu vdeckmu vzkumu prostednictvm een

3D puzzle. Tvrcm se podailo dky zbavn form

motivovat hre z celho svta k asistentci pi vzkumu

lk na HIV/AIDS nebo rakovinu. Hlavnmi motivanmi

faktory jsou tak zbava a smyslzbava a smysl.

57

IdeasWatch je platforma pro sdlen podnikatelskch

npad v zrodku a formovn tm kolem nich. Uivatel

se zde mohou zviditelnit prostednictvm diskuz o

npadech a najt tak podobn smlejc programtory,

marketry a dal profese, se ktermi by rdi rozjeli svou

firmu. Motivac k pispvn je tedy pedevm hrdost ahrdost a

vztahyvztahy.

58

Sestrojte Motivan kruh Vaeho webu

Odhadnte, jak motivace by mohly bt nejinnj u

Va clov skupiny. Co jim nejvce chybchyb v jejich

zamstnn? Co z toho jim mete reln nabdnoutnabdnout?

Nadesignujte podle toho Motivan kruh Vaeho webu.

Stupnice je relativn. Podstatn je pomr mezi jednotlivmi

faktory, kter nm v dalm kroku pome rozhodnout, do

jakch funkc m smysl investovat.

59

Jakmile vte, na jak faktory se zamit, je najednou

hledn vhodnch funkc mnohem snaz. Pi vymlen

pouijte nsledujc otzky. Pod kadou z nich je uvedeno

nkolik tip, jak na to.

Jak nvtvnky udlat pynj?

Pomote jim stt se slavnmistt se slavnmi. Ujistte se, e jejich

pspvky jsou viditeln a snadno se sdl na socilnch

stch. Pravideln vyhlaujte nejaktivnj uivatele

prostednictvm co nejvce kanl. Vytvote jim profilovou

strnku, kde mohou propagovat sebe a sv projekty.

Nechte je mezi sebou soupeit o msto na vslun.

Jak udlat web zbavnj?

Investujte do grafiky a gamifikacegrafiky a gamifikace. Nahrate dlouh

odstavce interaktivnmi infografikami. Dejte nvtvnkm

jednoduch slo, kter se budou snait zvyovat, a u je to

poet lnk nebo rzn kredity. Vytvote zajmav

statistiky zobrazujc obdivuhodn sla. Pokad, kdy se

zachovaj tak, jak potebujete, odmte je.

60

Jak ukzat, e zapojen na webu je smyslupln?

Ujistte se, e Vae vize je dostaten siln avize je dostaten siln a

jednoduch na komunikacijednoduch na komunikaci. Formulujte mylenku webu v

jedn jednoduch vt. Natote vysvtlujc videa. Ukate

konkrtn reln pnosy celho projektu. Navate

partnerstv s organizacemi s podobnm clem. Kdyby

Wikipedia vyzvala lidi jen k psan lnk, rozhodn by

nebyla tam, kde je dnes. Naproti tomu vzva k budovn

volnho pstupu k vdomostem pro vechny je mylenka,

kterou je spousta lid ochotna nsledovat.

Jak umonit uivatelm navzat vztahy?

Nechte uivatele propojit svj profil na Vaem webu s

jejich socilnmi tysocilnmi ty. Pouvejte vude jejich fotografie.

Umonte jim reagovat rozlinmi zpsoby na vekerou

aktivitu ostatnch uivatel. Vytvejte pleitosti k

vmn nzor a poznvn se navzjem. Pokud je to

mon, zorganizujte offline setkn. Komunikujte s nimi.

Nebojte se zptn vazby.

61

Jak sprvn pout finann motivaci?

Bute opatrn. Jakmile pouvte penze jako motivan

faktor, promyslete podn V podnikatelsk modelpodnikatelsk model. Na

finann odmny pro nvtvnky si budete muset bt

schopn vydlat. Navc i men finann motivace me

deformovat chovn uivatel, kte mohou zat ignorovat

vechny ostatn dvody pro zapojen na V web. Je velmi

pravdpodobn, e mnohem pelivji zanou hledat chyby

ve Vaem systmu a snait se najt zkratky k rychlejmu

zskn penz.

Sepite poadovan funkce webu

Vytvote seznam vech interaktivnch funkc, kter

chcete do webu zakomponovat. Mete se inspirovat tak

ppadovmi studiemi na konci tto knihy. Spolen s

podklady z pedchoz kapitoly poslou tento seznam v dal

fzi ppravy webu - sepsn webovho scne.

62

NPprava vizulnho

konceptu

Nebojte se dokonalosti. Nikdy j nedoshnete.

- Salvador Dali

epotebujete dokonal web. Potebujete web, kter

pin vsledkypin vsledky. A pli asto jsem vidl klienty

zbyten ztrcet drahocenn as, kter nikdo nezaplat,

posunovnm tlatek o milimetr doleva a doprava msto

toho, aby se vnovali opravdu dletm vcem -

mylenkovm pochodm uivatel. Jakmile se

nvtvnkovi hon hlavou to, co doopravdy m, mte

vyhrno. Grafika i obsah webu jsou jen prostedky, jak

toho doshnout. Pedchoz kapitoly mly za kol vyjasnit,

co vlastn chceme webem sdlit a jak ppadn

interaktivn funkce chceme do webu zakomponovat. Tato

kapitola je o nalezen zpsobu jaknalezen zpsobu jak.

63

Nute uivatele pemlet

Vai nvtvnci nejsou armda nemrtvch zombie, kte

maj przdno v hlav, jak se sna nkter knihy o web

designu naznait. Vai nvtvnci jsou lid jako Vy nebo j.

Dvaj pozor, kdy je zaujmete. Peml. Dleit je o em.

Stejn jako v jejich ani ve Vaem zjmu nen, aby dumali

nad tm, kde je proboha ukryto telefonn slo nebo kam

maj kliknout. Nechtj bt zmateni. Zato ale chtj

zvaovat, jestli je V produkt pro n nejvhodnj a

dozvdt se nco zajmavho. Nute uivatele pemlet.

Ale jen o tom, o em Vy i Ale jen o tom, o em Vy i oni chcete.oni chcete.

Mylenky nvtvnk na webu se daj pedvdat,

plnovat a usmrovat. Stejn jako si filmov reisr um

hrt s pocity a mylenkami divk, lze se nauit pracovat s

pozornost a mylenkovmi pochody webovch

nvtvnk. Zkladem je vak zbavit se mtu, e weby je

poteba dlat tak, aby u nich uivatel nemuseli pemlet.

Naopak. Plnujte, co se jim m honit hlavou.Plnujte, co se jim m honit hlavou.

64

Kad nvtva

webu je vdy

konverzace mezi

webem a

uivatelem.

Plnujte prchod webem jako

rozhovor s nvtvnkem

Jak u jsem zmnil v pedchozch kapitolch, mlo lid

si uvdomuje, e kad nvtva webu je vdy konverzace

mezi webem a uivatelem. Jde vak o komunikaci vizuln,

kdy "rozhovor" probh pomoc obrazovch podnt a

klikn.

Bohuel vtina

internetovch strnek v

tto komunikaci selhv.

Msto plynul, souvisl a

obohacujc konverzace se

nvtva webu zvrtne ve zmaten proud pli mnoha

informac najednou, asto zbytench i v nelogickm

poad. Uivatel tak jsou zmaten, nev kam kliknout, kde

najt potebnou informaci i prost jen nepochop, co se

jim snate ct a pro i jak by mli pouvat zrovna V

produkt.

65

Soustete se na lidi, ne na technick

een

Problm nen v technologii ani v rozpotu. Vtina web

nepotebuje geniln programtory, grafiky i SEO experty.

I s prmrnm tmem a financemi se d doshnout velmi

dobrch vsledk. Web designu toti chyb empatie, nechyb empatie, ne

technologietechnologie.

Pouit empatie ve web designu je pedevm o zmn zmn

mylen, ne o mylen, ne o biflovn tisc pravidelbiflovn tisc pravidel z rznch studi o

tom, kde co m na strnce bt i nebt. Kad web je v

tomto specifick. Neexistuj univerzln platn pravidla.

Pouky se mn rychle s dobou a vdycky pijde nov

spn web, kter tyto "zaruen rady" poruuje.

Kdyby Vm nkdo ekl, e se mte vctit do svch

nvtvnk, m byste zaali? Co byste zaali pst i

kreslit? Jednm z cl tto knihy je poskytnout jednoduch

nvod na systematick pouvn empatie ve web designu.

66

Web designu toti

chyb empatie, ne

technologie.

Obecn talent na

empatii nesta. Muste

sv nvtvnky co

nejlpe znt a pot s

tmito informacemi systematicky pracovat. Nevhejte kvli

tomu opustit pota a vyrazit do ternu. Jet lep je,

pokud mte nkoho z clov skupiny pmo v tmu nebo

jste jm Vy sami.

Co kdybyste msto webu dlali film? Automaticky byste

pemleli:

Nad tm, co divk oekv od filmu jako celku (komedii,

drama, hollywoodsk trhk)

Nad tm, jak se m divk ctit a co si m myslet (kdy se

m smt, leknout, i odhalit vraha)

Nad tm, jak tyto reakce vyvolat (jak udlat zbr

straidelnj, jak naznait podezelho)

Stejn zpsob mylen je poteba i pi tvorb webovch

strnek.

67

Pracujte systematicky s pozornost a

reakcemi nvtvnk

Reisi buduj a udruj pozornost divka pedkldnm

zajmavch otzek, plnovnm reakc a vhodnou volbou

podnt.

68

Vechny problmy

na webu jsou vdy

zpsoben

peruenm tohoto

cyklu.

Vezmme si nap. film

Avatar. Na potku filmu

divka zajm, co je to

pesn avatar. Dv tedy

pozor (dr v hlav tuto

otzku). Na zklad scny ve filmu pochop (podnt), e

jde o fyzicky pozmnnou kopii sebe-sama, kterou lovk

me ovldat (poadovan reakce). Zrove vak

automaticky vyvstv dal otzka, k emu hlavn hrdina

avatara pouije (nov dvod k pozornosti). Cel cyklus se

neustle opakuje a do konce filmu.

Stejnm zpsobem funguje i nvtva webu. Lidem

postupn v hlav vyskakuj otzkyvyskakuj otzky, hledaj na n odpovdihledaj na n odpovdi a

po jejich nalezen uritm zpsobem reagujreaguj, co vede kvede k

dalm otzkmdalm otzkm.

Vechny problmy na jakmkoliv webu jsou vdy

zpsoben peruenm tohoto cyklu. Dochz k jedn ze

tech nedoucch situac:

69

1. Nvtvnk nenalezl dal otzku (tj. nev, co na

strnce dle dlat a odchz)

2. Nvtvnk m v hlav otzku, ale nenael podnt,

kter by ji zodpovdl (nev, kam se podvat nebo

kliknout)

3. Nvtvnk nael podnt, ale patn si jej vyloil

(je tedy zmaten a zane se zajmat o jin otzky,

ne je plnovno)

70

kolem reisra je zajistit, aby se tento cykluscyklus

neperuilneperuil. Prostednictvm webovho scne postupn

naplnujte jak udret nvtvnkovu pozornost, jak reakce

a pomoc eho chcete vyvolat. Na konci budete mt hotov

koncept webu vetn grafiky a obsahu.

Prvn krok: Proud pozornosti

Jak vyplv z cyklu, v prvn ad je teba definovat

vhodn otzky, ktermi chceme budovat pozornost

uivatele. Pi stanovovn otzek je poteba uplatnit empatii

a pemlet nad tm, co uivatele skuten zajm

samozejm s ohledem na el webu. m silnej otzky,m silnej otzky,

tm spnj web.tm spnj web. Otzky jako "Jak jsem oblben?"

ppadn "Co dlali moji ptel" jsou dvodem, pro je

Facebook tak masov rozen.

Vsledek me vypadat nap. jako na nsledujcm

schmatu. V pkladu je pouit proud pozornosti pro web

networkingov organizace pro2pro.

71

Pi tvorb otzek si vezmte k ruce podklady zpodklady z

pedchozch kapitolpedchozch kapitol. Webov nr Vm pome vytvoit

zkladn kostru proudu pozornosti, struktura zdroj

nvtvnosti prvnch pr otzek a rozhodovac strom s

nejdleitjmi argumenty zbytek. V ppad poteby

pidejte dal otzky, kter by nvtvnka mohly zajmat.

Pokud njak otzka vede k dlm podotzkm, znamen

to, e je pro ni teba vytvoit samostatn proud pozornosti,

ze kterho pak bude mt uivatel monost vrtit se zpt do

pvodnho proudu pozornosti.

72

Druh krok: Schma reakc

Ve druhm kroku je teba piadit ke kad otzce

poadovanou reakci (a u ve smyslu pochopen nebo

reln akce v podob nap. kliku) a vymyslet co

nejjednodu podnty, kter tyto reakce vyvolvaj. Pi

tvorb schmatu vyuijte interaktivn funkce vymylen

pomoc Motivanho kruhu.

73

Schma reakc se velmi podob rozhovoru. Zkuste si jej

tak pedstavit. Uivatel se pt co je to pro2pro. Ze

samotnho nzvu ji nco tu. Web mu uke logo a

ekne: "Msto, kde se profesionlov inspiruj navzjem".

Uivatele automaticky hned napadne: "A koho tu u mte?

Je tu nkdo zajmav?" ... atd.

Tato pedstava pomh snadnji se vt do nvtvnka,

umouje rychlej nalezen nedostatk v proudu

pozornosti a tak usnaduje vymlen podnt. CoCo

musme uivateli ct a nebo ukzat, aby nm uvil?musme uivateli ct a nebo ukzat, aby nm uvil?

Pokud nenajdete dostaten jednoduch podnt, kter

by se dal umstit na vodn stranu webu, je teba vytvoit

samostatnou strnku. Sestavte mapu webu a ke kad

strnce napite poadovanou reakci (cl strnky).

74

75

Nebojte se schma reakc nkolikrt pedlvat, dokud s

nm nebudete spokojeni. Jet jej mnohokrt v budoucnu

pouijete. Pokud V web nebude ani tak pinet

poadovan vsledky, mete jednodue zkontrolovat, veve

kterm mst lid reaguj jinak a jak podnt na strncekterm mst lid reaguj jinak a jak podnt na strnce

m tuto reakci m tuto reakci vyvolvatvyvolvat. Msto zdlouhavch analz pak jen

sta vymyslet nov lep podnt.

76

Tet krok: Vizuln koncept

Nechte grafika na zklad schmatu reakc vytvoit

barevn vizuln koncept vetn konkrtnho obsahu a

bublin s pslunou otzkou a poadovanou reakc. Nen

teba ladit dopodrobna grafiku, ale pouit barev je nutn,

protoe maj velk vliv na poutn pozornosti.

77

Zkuste nejprve sami projt vizuln koncept a

zkontrolovat, jestli proud jestli proud pozornosti sed s pohybem o napozornosti sed s pohybem o na

strncestrnce a jestli jednotliv prvky vyvolvaj vyvolvaj poadovanpoadovan

reakcereakce. Vylepujte vizuln koncept a schma reakc, dokud

s nm nebudete spokojeni. Pot jej ukate dalm lidem ze

sv clov skupiny. Neptejte se, co by na strnce vylepili.

Neete grafick detaily a pixelov mezery, pokud nemaj

dn vliv na rozhodovn nvtvnk. Zjiujte jen, co se

jim hon hlavou. Kde odboili od plnovanho proudu

pozornosti? Pesvdil by je web k poadovan reakci? Je

velk ance, e vizuln koncept budete jet nkolikrt

pedlvat, proto nem smysl ztrcet as nepodstatnmi

detaily. Je poteba otestovat zkladn funknost. Stejnm

zpsobem funguj u filmu i tzv. kamerov zkouky.

Jakmile mte na vizuln koncept pozitivn ohlasy,

nechte grafika pohrt si se vemi detaily. Jednotliv

obrazovky webu okomentujte z pohledu funknosti v PDF

nebo nkterm online nstroji a mte pipraveny

nejdleitj podklady pro volbu technologie a nacenn

webu.

78

Ppadov studie

Zaujala Vs teorie v tto knize? Podvejte se na ppadov

studie, kter krok po kroku popisuj, jak pi pprav

webovho scne postupovat v praxi.

Webov scn pro

Dropbox

Dal ppadov studie jsou v pprav.

79

80

Kontakt

Mte dal otzky k Webov reii i nmty na jej

rozvoj? Nevhejte se mi ozvat.

Ing. Michal Hudeek

michal.hudecek@maintop.biz

81

82

Zdroje

Mylenky obsaen v tto knize jsou mixem mch

vlastnch zkuenost a nsledujcch inspirativnch

publikac. Dopluji tak sv komente (zvraznn), pro

doporuuji dan text nastudovat.

1. P. Kotler, Inovativn marketing, Grada, 2005

-elementrn logika definice trhu na zklad

poteb

2. Kim-Mauborgne, Strategie modrho ocenu,

Management Press, 2006

-analza hodnoty pro zkaznka

3. D. A. Norman, Design pro kad den, Dokon,

2010

-jak pemlet pi designu

4. J. Fried, Restart: prvodce podnikatelskm

minimalismem, Jan Melvil, 2010

-pro je dleit web radji spustit ne ekat, e

jej sami napoprv udlme dokonalm

83

1. N. T. Proferes, Film Directing Fundamentals:

From Script to Screen, Focal Press, 2001

-reisrsk logika

2. R. Unger & C. Chandler, A project guide to UX

design, Peachpit, 2009

-nvod na zakomponovn UX designu do

projektovho zen

3. J. McGonigal, Reality Is Broken: Why Games Make

Us Better and How They Can Change the World,

The Penguin Press, 2012

-aplikace motivanch hernch princip

4. D. Tapscott, Wikinomics: How Mass Collaboration

Changes Everything, Portfolio, 2008

-vyuit masov online spoluprce

5. S. Totilo, The Difference Between A Good Video

Game and a Bad One,

http://kotaku.com/5924387/the-difference-

between-a-good-video-game-and-a-bad-one

-mylenka hry jako souboru rozhodnut

Dal zajmav knihy, kter m nm inspirovaly

najdete na mm Shelfari profilu

84