SlideShare a Scribd company logo
1 of 9
Postup při návrhu webu 
Návrh webu je jako architektonický 
plán pro stavbu domu. 
• Prezentace obsahuje používané postupy a 
stručné informace o konkrétních metodách 
• Vypracováno na základě UX zkušeností 
Michala Nováka a knihy Web ostrý jako Břitva 
Ing. Michal Novák, www.seopc.cz, 2014
Vytvoření vazby 
Radost z užívání 
Přesvědčivost 
Důvěryhodnost 
Dostupnost 
Nalezitelnost 
Smysluplnost 
Upozornění, 
pozornost 
Získat zájem 
Rozhodnutí 
Akce 
Maslowova pyramida 
potřeb na webu 
Model chování 
Lidí (AIDA) 
Konkurence v 
prostředí / 
cena webu 
• Vyšší 
cena 
Velká webu 
konkurence v 
prostředí 
• Nižší 
cena 
Malá 
konkurence 
Web info Maslowova web pyramida
Činnosti související s návrhem webu / Práce web architekta 
Generování nápadů 
Brain storm, design studio 
Obsah – lístečky, myšlenková mapa 
6 kloboků 
Struktura obsahu 
Pojmenování obsahu 
Navigace, menu 
Průchod webem 
Obsah důvěry 
URL, title 
Obsah k aktualizaci 
Obsah každé stránky 
Skyci , Wireframe 
Prototyp (HTML) 
Design webu 
Proč to 
celé 
děláme? 
• Proč to celé děláme: 
• Jaký je smysl? 
1. Klient 
• Definice potřeb a procesů 
• Souvislost s businessem 
2. Uživatel, 
prostředí 
• Přínos pro uživatele 
• V jaké situaci se setkává 
uživatel s webem 
3. Návrh 
webu 
• Obsahová strategie, 
funkce 
• Skyci, wireframe, prototyp 
4. Ověření 
• Testování 
• Představení zákazníkovi 
Zadání 
webu do 
vývoje 
• Zadání pro vývoj, tvorbu 
obsahu 
Definice procesů 
Definice produktu, služeb 
Metoda kontaktních míst 
SWOT 
Strategie firmy, mk. kanály 
Pozice webu na cestě 
uživatele 
Definice možného obsahu 
Sdělitelný příběh 
Brand / vzor 
Vizuál klienta 
Definování designu: ne/líbí 
Definice cílů 
Definice produktu, služeb 
Očekávání 
Konverze 
Unikátní prodejní 
argumenty 
Analýza klíčových slov 
Rozhovory, dotazníky 
Uživatel. Výzkum 
Prodejny, obchodníci 
Konkurence / spojenec 
Persony (příběh setkání s..) 
Skupiny lidí 
Storyboards 
Konkurenční 
Současný web / obsah 
Doplňující informace 
Tvorba URL 
Robots.txt 
Sitemap.xml 
Simulace chování webu 
Reporting 404, výpadků 
Práva na zdrojové kódy, DB 
Obsah k aktualizaci 
Práva a funkčnost 
administrace 
Uživatelské testování 
Expertní externí pohled 
Testování A/B 
Gerilová testování 
Heat mapy 
Test formulářů
Činnosti související s návrhem webu / Práce web architekta 
Podrobněji: 
Fáze 1. Objevení klienta 
Fáze 2. Uživatelský výzkum 
Fáze 3. Návrh webu a) obsah 
b) wireframe 
Fáze 4. Testování, ověření návrhu
Fáze 1. Objevení klienta 
Metody / postupy* 
Definice projektu Definice produktu – jeho přínosu, důvodu existence.Unikátní 
prodejní argumenty. Omezení: a)rozpočet, b)čas, c)co bude 
(výsledek) 
Cíle / očekávání Definice cílů, očekávání, souvislost webu s businessem. Definice 
procesů na straně pro zákazníka. Jaká očekávání na web. 
Očekávané chování návštěvníků (jednorázové – opakující se) 
Rozhovor s 
obchodníky, 
prodavači 
Potřeby pro jejich business. Pozice webu na cestě uživatele 
Metoda 
kontaktních míst 
Definování míst kde všude se uživatel setkává se značkou. 
Součást designu služeb. 
Brand / příběh Příběh přínosu služby (webu) pro člověka. Vzor brandu. Hodnoty 
a strategie 
Dotazník Seskupení otázek pro písemné odpovědi klienta 
Obsah Možnost dodání obsahu pro nový web (video, texty, obrázky, 
návody…). Obsah důvěry 
* Výčet některých postupů 
Komunikovat s jedním zástupcem klienta, který má zodpovědnost a rozhodovací pravomoc.
Fáze 2. Uživatelský výzkum 
Metody / postupy* 
Persony Archetyp člověka, Příběh propojující člověka s produktem 
(webem), rozdíly person (vlastnosti), situace člověka a webu, 
priority 
Uživatelský výzkum Vzory chování lidí na webu v souvislostech. Testování , přípravy 
scénářů, recruitmentu, vyhodnocení 
B2B /B2C Potřeby lidí, rozhodovací procesy v B2B 
Analýza klíčových 
slov 
Analýza chování dle hledání slov, zdroje: interní hledání, Seznam, 
Google, PPC a reklamní kampaně, našeptávače, konkurence, 
Google trends 
Rozhovory, 
dotazníky 
Rozhovory s potenciálními i reálnými uživateli webu. Motivace, 
očekávání, emoce 
Chování na 
současném webu 
Chování dle statistik Google analytics. Vstupní stránky v závislosti 
na konverzi. Stránky opuštění. Průchody webem. Vracející se 
návštěvníci 
* Výčet některých postupů
Fáze 3a. Návrh webu - obsah 
Metody / postupy* 
Mapa obsahu Cíl stránky, co chceme říci, jaká zpráva, požadovaná akce 
uživatele, emoce -> vzniknou nadpisy, konkrétní obsah. Papírové 
štítky 
Myšlenková mapa Lepítka na stěnu, flipchart, souvislosti mezi myšlenkami 
Brainstorming Chrlení nápadů bez ladu a skladu 
6 klobouků Pohled na problém z pohledu: fakta, emoce ,pozitivní, negativní, 
kreativní myšlení, přemýšlivý 
Obsahová strategie Plánování, tvorba vyhodnocení obsahu, obsah i pro 
marketingové kanály, současný web 
Design studio Týmy lidí se stejným zadáním, řeší problém 
* Výčet některých postupů
Fáze 3b. Návrh webu - wireframe 
Metody / postupy* 
Návrh informační 
architektury 
Jazyk, seskupení obsahu, třídění obsahu, přechod mezi 
kategoriemi 
Navigace webu priority obsahu (potřeby), interní hledáním, rozsah menu. 
Způsob zobrazení 
Průchod webem navazuje na uživatelský výzkum, motivace návštěvníka, průchod 
obvykle nezačíná na home page, průchod - odkazy, akční prvky 
Skyci Papírové náčrtky jednotlivých stránek, obsahu, menu 
Wireframe Drátěný model stránek, obsahem rozložením obsahu, přibližným 
zdůrazněním některých prvků 
Model Verze vhodná pro prezentování klientovi. Obvykle v HTML s 
základními nadpisy. Vždy se slovním doprovodem 
* Výčet některých postupů
Fáze 4. Testování, ověření návrhu 
Metody / postupy* 
Uživatelské 
testování 
Testování s jednotlivci, předem dané zadání, laboratorní či 
domácí prostředí 
Expertní externí 
pohled 
Zpětná vazba od odborníka v oboru 
Test formulářů Automatické či ruční testování funkcionalit webu 
Testování A/B Testovány postupné změny při redesignu, vliv na chování. 
Multivariantní testování 
Heat mapy Informace o využívání webu. Kliknutí, scrool mapy, mouse 
Chování ze statistik Vyhodnocení cílů webu dle chování ze statistik webu (Google 
Analytics) 
Gerilová testování Testování v terénu s náhodnými lidmi 
* Výčet některých postupů

More Related Content

What's hot

Jak zvýšit a optimalizovat konverzní poměr webu
Jak zvýšit a optimalizovat konverzní poměr webuJak zvýšit a optimalizovat konverzní poměr webu
Jak zvýšit a optimalizovat konverzní poměr webuIvo Kylián
 
TREND Marketing Summit 2015
TREND Marketing Summit 2015TREND Marketing Summit 2015
TREND Marketing Summit 2015Ivo Kylián
 
Premium šablona vždy neznamená nejvyšší kvalitu z pohledu použitelnost...
Premium šablona vždy neznamená nejvyšší kvalitu z pohledu použitelnost...Premium šablona vždy neznamená nejvyšší kvalitu z pohledu použitelnost...
Premium šablona vždy neznamená nejvyšší kvalitu z pohledu použitelnost...Jan Kvasnička
 
Copywriter s přesahem do SEO a UX? Nutnost! | Copycamp 2016 | 8.6.2016
Copywriter s přesahem do SEO a UX? Nutnost! | Copycamp 2016 | 8.6.2016Copywriter s přesahem do SEO a UX? Nutnost! | Copycamp 2016 | 8.6.2016
Copywriter s přesahem do SEO a UX? Nutnost! | Copycamp 2016 | 8.6.2016Jan Kvasnička
 
Propagace v online světě, internetový marketing
Propagace v online světě, internetový marketingPropagace v online světě, internetový marketing
Propagace v online světě, internetový marketingStanislav Vasko
 
Stav českého UX
Stav českého UXStav českého UX
Stav českého UXExperienceU
 
Uživatelské testování použitelnosti webu v praxi
Uživatelské testování použitelnosti webu v praxiUživatelské testování použitelnosti webu v praxi
Uživatelské testování použitelnosti webu v praxiSherpas
 
Ty jsi informační architekt
Ty jsi informační architektTy jsi informační architekt
Ty jsi informační architektSherpas
 
Ty jsi informační architekt!
Ty jsi informační architekt!Ty jsi informační architekt!
Ty jsi informační architekt!Adam Fendrych
 
UX monday - uživatelské testování
UX monday - uživatelské testováníUX monday - uživatelské testování
UX monday - uživatelské testováníDesingdev
 
Orientace na User Experience jako marketingová strategie?
Orientace na User Experience jako marketingová strategie?Orientace na User Experience jako marketingová strategie?
Orientace na User Experience jako marketingová strategie?Jakub Krčmář
 
Copysketching aneb skicováním k lepšímu obsahu / Copycamp 2013
Copysketching aneb skicováním k lepšímu obsahu / Copycamp 2013Copysketching aneb skicováním k lepšímu obsahu / Copycamp 2013
Copysketching aneb skicováním k lepšímu obsahu / Copycamp 2013Richard Dobiáš
 
SEO školení pro začátečníky
SEO školení pro začátečníkySEO školení pro začátečníky
SEO školení pro začátečníkyCollabim
 
Jan Barbořík - Tvoříme fotografický web ve wordpressu aneb jak na funkční web?
Jan Barbořík - Tvoříme fotografický web ve wordpressu aneb jak na funkční web? Jan Barbořík - Tvoříme fotografický web ve wordpressu aneb jak na funkční web?
Jan Barbořík - Tvoříme fotografický web ve wordpressu aneb jak na funkční web? Jan Barbořík
 
31+1 praktických příkladů jak zvýšit obchodní výkonnost nejen eshopu | JsmeMa...
31+1 praktických příkladů jak zvýšit obchodní výkonnost nejen eshopu | JsmeMa...31+1 praktických příkladů jak zvýšit obchodní výkonnost nejen eshopu | JsmeMa...
31+1 praktických příkladů jak zvýšit obchodní výkonnost nejen eshopu | JsmeMa...Jan Kvasnička
 
Použitelnost webu
Použitelnost webuPoužitelnost webu
Použitelnost webuH1.cz
 
Jak se stát dobrým copywriterem / Copycamp
Jak se stát dobrým copywriterem / CopycampJak se stát dobrým copywriterem / Copycamp
Jak se stát dobrým copywriterem / CopycampRichard Dobiáš
 
Jak (ne)pokazit redesign webu
Jak (ne)pokazit redesign webuJak (ne)pokazit redesign webu
Jak (ne)pokazit redesign webuTaste Medio
 
UX Design na WebExpo Startup Camp
UX Design na WebExpo Startup CampUX Design na WebExpo Startup Camp
UX Design na WebExpo Startup CampPetr Douša
 

What's hot (20)

Domansky
DomanskyDomansky
Domansky
 
Jak zvýšit a optimalizovat konverzní poměr webu
Jak zvýšit a optimalizovat konverzní poměr webuJak zvýšit a optimalizovat konverzní poměr webu
Jak zvýšit a optimalizovat konverzní poměr webu
 
TREND Marketing Summit 2015
TREND Marketing Summit 2015TREND Marketing Summit 2015
TREND Marketing Summit 2015
 
Premium šablona vždy neznamená nejvyšší kvalitu z pohledu použitelnost...
Premium šablona vždy neznamená nejvyšší kvalitu z pohledu použitelnost...Premium šablona vždy neznamená nejvyšší kvalitu z pohledu použitelnost...
Premium šablona vždy neznamená nejvyšší kvalitu z pohledu použitelnost...
 
Copywriter s přesahem do SEO a UX? Nutnost! | Copycamp 2016 | 8.6.2016
Copywriter s přesahem do SEO a UX? Nutnost! | Copycamp 2016 | 8.6.2016Copywriter s přesahem do SEO a UX? Nutnost! | Copycamp 2016 | 8.6.2016
Copywriter s přesahem do SEO a UX? Nutnost! | Copycamp 2016 | 8.6.2016
 
Propagace v online světě, internetový marketing
Propagace v online světě, internetový marketingPropagace v online světě, internetový marketing
Propagace v online světě, internetový marketing
 
Stav českého UX
Stav českého UXStav českého UX
Stav českého UX
 
Uživatelské testování použitelnosti webu v praxi
Uživatelské testování použitelnosti webu v praxiUživatelské testování použitelnosti webu v praxi
Uživatelské testování použitelnosti webu v praxi
 
Ty jsi informační architekt
Ty jsi informační architektTy jsi informační architekt
Ty jsi informační architekt
 
Ty jsi informační architekt!
Ty jsi informační architekt!Ty jsi informační architekt!
Ty jsi informační architekt!
 
UX monday - uživatelské testování
UX monday - uživatelské testováníUX monday - uživatelské testování
UX monday - uživatelské testování
 
Orientace na User Experience jako marketingová strategie?
Orientace na User Experience jako marketingová strategie?Orientace na User Experience jako marketingová strategie?
Orientace na User Experience jako marketingová strategie?
 
Copysketching aneb skicováním k lepšímu obsahu / Copycamp 2013
Copysketching aneb skicováním k lepšímu obsahu / Copycamp 2013Copysketching aneb skicováním k lepšímu obsahu / Copycamp 2013
Copysketching aneb skicováním k lepšímu obsahu / Copycamp 2013
 
SEO školení pro začátečníky
SEO školení pro začátečníkySEO školení pro začátečníky
SEO školení pro začátečníky
 
Jan Barbořík - Tvoříme fotografický web ve wordpressu aneb jak na funkční web?
Jan Barbořík - Tvoříme fotografický web ve wordpressu aneb jak na funkční web? Jan Barbořík - Tvoříme fotografický web ve wordpressu aneb jak na funkční web?
Jan Barbořík - Tvoříme fotografický web ve wordpressu aneb jak na funkční web?
 
31+1 praktických příkladů jak zvýšit obchodní výkonnost nejen eshopu | JsmeMa...
31+1 praktických příkladů jak zvýšit obchodní výkonnost nejen eshopu | JsmeMa...31+1 praktických příkladů jak zvýšit obchodní výkonnost nejen eshopu | JsmeMa...
31+1 praktických příkladů jak zvýšit obchodní výkonnost nejen eshopu | JsmeMa...
 
Použitelnost webu
Použitelnost webuPoužitelnost webu
Použitelnost webu
 
Jak se stát dobrým copywriterem / Copycamp
Jak se stát dobrým copywriterem / CopycampJak se stát dobrým copywriterem / Copycamp
Jak se stát dobrým copywriterem / Copycamp
 
Jak (ne)pokazit redesign webu
Jak (ne)pokazit redesign webuJak (ne)pokazit redesign webu
Jak (ne)pokazit redesign webu
 
UX Design na WebExpo Startup Camp
UX Design na WebExpo Startup CampUX Design na WebExpo Startup Camp
UX Design na WebExpo Startup Camp
 

Similar to Postupy a používané metody při tvorbě zadání webu, UX Wireframe

Metodika webových auditů
Metodika webových auditůMetodika webových auditů
Metodika webových auditůH1.cz
 
Měření online projektů ve farmacii
Měření online projektů ve farmaciiMěření online projektů ve farmacii
Měření online projektů ve farmaciiJakub Drahokoupil
 
5 tipů jak na vlastní a fungující web
5 tipů jak na vlastní a fungující web5 tipů jak na vlastní a fungující web
5 tipů jak na vlastní a fungující webClocan Marketing
 
Digisemestr - Webová analytika chytře s Google Analytics - workshop 16. 11. 2015
Digisemestr - Webová analytika chytře s Google Analytics - workshop 16. 11. 2015Digisemestr - Webová analytika chytře s Google Analytics - workshop 16. 11. 2015
Digisemestr - Webová analytika chytře s Google Analytics - workshop 16. 11. 2015Sun Marketing
 
Jak vyhodnocovat data z Google Analytics a nenechat se podvést při správě mar...
Jak vyhodnocovat data z Google Analytics a nenechat se podvést při správě mar...Jak vyhodnocovat data z Google Analytics a nenechat se podvést při správě mar...
Jak vyhodnocovat data z Google Analytics a nenechat se podvést při správě mar...Optimalizovaný-Web.cz
 
Ranni kava-jhk.4.2.2016
Ranni kava-jhk.4.2.2016Ranni kava-jhk.4.2.2016
Ranni kava-jhk.4.2.2016Brilo Team
 
Ms 11-10-2010
Ms 11-10-2010Ms 11-10-2010
Ms 11-10-2010ACOMWARE
 
Seologer 2017 - Karel Hladiš - Jak využít data pro zlepšení obsahu webu
Seologer 2017 -  Karel Hladiš - Jak využít data pro zlepšení obsahu webuSeologer 2017 -  Karel Hladiš - Jak využít data pro zlepšení obsahu webu
Seologer 2017 - Karel Hladiš - Jak využít data pro zlepšení obsahu webuCollabim
 
Click it - Jak a co měřit pomocí nástroje Google Analytics - workshop 22. 10....
Click it - Jak a co měřit pomocí nástroje Google Analytics - workshop 22. 10....Click it - Jak a co měřit pomocí nástroje Google Analytics - workshop 22. 10....
Click it - Jak a co měřit pomocí nástroje Google Analytics - workshop 22. 10....Sun Marketing
 
Jak naplánovat web a nezblázdnit se z toho
Jak naplánovat web  a nezblázdnit se z tohoJak naplánovat web  a nezblázdnit se z toho
Jak naplánovat web a nezblázdnit se z tohoPetr Bechyně
 
Web jako součást obchodního procesu
Web jako součást obchodního procesuWeb jako součást obchodního procesu
Web jako součást obchodního procesuAITOM Digital s.r.o.
 
Optimalizace pro vyhledávače
Optimalizace pro vyhledávačeOptimalizace pro vyhledávače
Optimalizace pro vyhledávačeTaste Medio
 
Click it - Webová analytika chytře s Google Analytics - workshop 23. 4. 2015
Click it - Webová analytika chytře s Google Analytics - workshop 23. 4. 2015Click it - Webová analytika chytře s Google Analytics - workshop 23. 4. 2015
Click it - Webová analytika chytře s Google Analytics - workshop 23. 4. 2015Sun Marketing
 
Začínáme s firemním blogem
Začínáme s firemním blogemZačínáme s firemním blogem
Začínáme s firemním blogemoptimio
 
Začínáme s firemním blogem
Začínáme s firemním blogemZačínáme s firemním blogem
Začínáme s firemním blogemoptimio
 
Začínáme s firemním blogem
Začínáme s firemním blogemZačínáme s firemním blogem
Začínáme s firemním blogemZdeněk Hejl
 
Úvod do optimalizace pro vyhledávače
Úvod do optimalizace pro vyhledávačeÚvod do optimalizace pro vyhledávače
Úvod do optimalizace pro vyhledávačeguest8375ba
 

Similar to Postupy a používané metody při tvorbě zadání webu, UX Wireframe (20)

Metodika webových auditů
Metodika webových auditůMetodika webových auditů
Metodika webových auditů
 
Měření online projektů ve farmacii
Měření online projektů ve farmaciiMěření online projektů ve farmacii
Měření online projektů ve farmacii
 
5 tipů jak na vlastní a fungující web
5 tipů jak na vlastní a fungující web5 tipů jak na vlastní a fungující web
5 tipů jak na vlastní a fungující web
 
Digisemestr - Webová analytika chytře s Google Analytics - workshop 16. 11. 2015
Digisemestr - Webová analytika chytře s Google Analytics - workshop 16. 11. 2015Digisemestr - Webová analytika chytře s Google Analytics - workshop 16. 11. 2015
Digisemestr - Webová analytika chytře s Google Analytics - workshop 16. 11. 2015
 
Internetový marketing Blaževský
Internetový marketing BlaževskýInternetový marketing Blaževský
Internetový marketing Blaževský
 
Jak vyhodnocovat data z Google Analytics a nenechat se podvést při správě mar...
Jak vyhodnocovat data z Google Analytics a nenechat se podvést při správě mar...Jak vyhodnocovat data z Google Analytics a nenechat se podvést při správě mar...
Jak vyhodnocovat data z Google Analytics a nenechat se podvést při správě mar...
 
Ranni kava-jhk.4.2.2016
Ranni kava-jhk.4.2.2016Ranni kava-jhk.4.2.2016
Ranni kava-jhk.4.2.2016
 
TNPW2-2011-02
TNPW2-2011-02TNPW2-2011-02
TNPW2-2011-02
 
Ms 11-10-2010
Ms 11-10-2010Ms 11-10-2010
Ms 11-10-2010
 
Seologer 2017 - Karel Hladiš - Jak využít data pro zlepšení obsahu webu
Seologer 2017 -  Karel Hladiš - Jak využít data pro zlepšení obsahu webuSeologer 2017 -  Karel Hladiš - Jak využít data pro zlepšení obsahu webu
Seologer 2017 - Karel Hladiš - Jak využít data pro zlepšení obsahu webu
 
Click it - Jak a co měřit pomocí nástroje Google Analytics - workshop 22. 10....
Click it - Jak a co měřit pomocí nástroje Google Analytics - workshop 22. 10....Click it - Jak a co měřit pomocí nástroje Google Analytics - workshop 22. 10....
Click it - Jak a co měřit pomocí nástroje Google Analytics - workshop 22. 10....
 
Jak naplánovat web a nezblázdnit se z toho
Jak naplánovat web  a nezblázdnit se z tohoJak naplánovat web  a nezblázdnit se z toho
Jak naplánovat web a nezblázdnit se z toho
 
Web jako součást obchodního procesu
Web jako součást obchodního procesuWeb jako součást obchodního procesu
Web jako součást obchodního procesu
 
Optimalizace pro vyhledávače
Optimalizace pro vyhledávačeOptimalizace pro vyhledávače
Optimalizace pro vyhledávače
 
Click it - Webová analytika chytře s Google Analytics - workshop 23. 4. 2015
Click it - Webová analytika chytře s Google Analytics - workshop 23. 4. 2015Click it - Webová analytika chytře s Google Analytics - workshop 23. 4. 2015
Click it - Webová analytika chytře s Google Analytics - workshop 23. 4. 2015
 
2013 01-31-internetový marketing
2013 01-31-internetový marketing2013 01-31-internetový marketing
2013 01-31-internetový marketing
 
Začínáme s firemním blogem
Začínáme s firemním blogemZačínáme s firemním blogem
Začínáme s firemním blogem
 
Začínáme s firemním blogem
Začínáme s firemním blogemZačínáme s firemním blogem
Začínáme s firemním blogem
 
Začínáme s firemním blogem
Začínáme s firemním blogemZačínáme s firemním blogem
Začínáme s firemním blogem
 
Úvod do optimalizace pro vyhledávače
Úvod do optimalizace pro vyhledávačeÚvod do optimalizace pro vyhledávače
Úvod do optimalizace pro vyhledávače
 

Postupy a používané metody při tvorbě zadání webu, UX Wireframe

  • 1. Postup při návrhu webu Návrh webu je jako architektonický plán pro stavbu domu. • Prezentace obsahuje používané postupy a stručné informace o konkrétních metodách • Vypracováno na základě UX zkušeností Michala Nováka a knihy Web ostrý jako Břitva Ing. Michal Novák, www.seopc.cz, 2014
  • 2. Vytvoření vazby Radost z užívání Přesvědčivost Důvěryhodnost Dostupnost Nalezitelnost Smysluplnost Upozornění, pozornost Získat zájem Rozhodnutí Akce Maslowova pyramida potřeb na webu Model chování Lidí (AIDA) Konkurence v prostředí / cena webu • Vyšší cena Velká webu konkurence v prostředí • Nižší cena Malá konkurence Web info Maslowova web pyramida
  • 3. Činnosti související s návrhem webu / Práce web architekta Generování nápadů Brain storm, design studio Obsah – lístečky, myšlenková mapa 6 kloboků Struktura obsahu Pojmenování obsahu Navigace, menu Průchod webem Obsah důvěry URL, title Obsah k aktualizaci Obsah každé stránky Skyci , Wireframe Prototyp (HTML) Design webu Proč to celé děláme? • Proč to celé děláme: • Jaký je smysl? 1. Klient • Definice potřeb a procesů • Souvislost s businessem 2. Uživatel, prostředí • Přínos pro uživatele • V jaké situaci se setkává uživatel s webem 3. Návrh webu • Obsahová strategie, funkce • Skyci, wireframe, prototyp 4. Ověření • Testování • Představení zákazníkovi Zadání webu do vývoje • Zadání pro vývoj, tvorbu obsahu Definice procesů Definice produktu, služeb Metoda kontaktních míst SWOT Strategie firmy, mk. kanály Pozice webu na cestě uživatele Definice možného obsahu Sdělitelný příběh Brand / vzor Vizuál klienta Definování designu: ne/líbí Definice cílů Definice produktu, služeb Očekávání Konverze Unikátní prodejní argumenty Analýza klíčových slov Rozhovory, dotazníky Uživatel. Výzkum Prodejny, obchodníci Konkurence / spojenec Persony (příběh setkání s..) Skupiny lidí Storyboards Konkurenční Současný web / obsah Doplňující informace Tvorba URL Robots.txt Sitemap.xml Simulace chování webu Reporting 404, výpadků Práva na zdrojové kódy, DB Obsah k aktualizaci Práva a funkčnost administrace Uživatelské testování Expertní externí pohled Testování A/B Gerilová testování Heat mapy Test formulářů
  • 4. Činnosti související s návrhem webu / Práce web architekta Podrobněji: Fáze 1. Objevení klienta Fáze 2. Uživatelský výzkum Fáze 3. Návrh webu a) obsah b) wireframe Fáze 4. Testování, ověření návrhu
  • 5. Fáze 1. Objevení klienta Metody / postupy* Definice projektu Definice produktu – jeho přínosu, důvodu existence.Unikátní prodejní argumenty. Omezení: a)rozpočet, b)čas, c)co bude (výsledek) Cíle / očekávání Definice cílů, očekávání, souvislost webu s businessem. Definice procesů na straně pro zákazníka. Jaká očekávání na web. Očekávané chování návštěvníků (jednorázové – opakující se) Rozhovor s obchodníky, prodavači Potřeby pro jejich business. Pozice webu na cestě uživatele Metoda kontaktních míst Definování míst kde všude se uživatel setkává se značkou. Součást designu služeb. Brand / příběh Příběh přínosu služby (webu) pro člověka. Vzor brandu. Hodnoty a strategie Dotazník Seskupení otázek pro písemné odpovědi klienta Obsah Možnost dodání obsahu pro nový web (video, texty, obrázky, návody…). Obsah důvěry * Výčet některých postupů Komunikovat s jedním zástupcem klienta, který má zodpovědnost a rozhodovací pravomoc.
  • 6. Fáze 2. Uživatelský výzkum Metody / postupy* Persony Archetyp člověka, Příběh propojující člověka s produktem (webem), rozdíly person (vlastnosti), situace člověka a webu, priority Uživatelský výzkum Vzory chování lidí na webu v souvislostech. Testování , přípravy scénářů, recruitmentu, vyhodnocení B2B /B2C Potřeby lidí, rozhodovací procesy v B2B Analýza klíčových slov Analýza chování dle hledání slov, zdroje: interní hledání, Seznam, Google, PPC a reklamní kampaně, našeptávače, konkurence, Google trends Rozhovory, dotazníky Rozhovory s potenciálními i reálnými uživateli webu. Motivace, očekávání, emoce Chování na současném webu Chování dle statistik Google analytics. Vstupní stránky v závislosti na konverzi. Stránky opuštění. Průchody webem. Vracející se návštěvníci * Výčet některých postupů
  • 7. Fáze 3a. Návrh webu - obsah Metody / postupy* Mapa obsahu Cíl stránky, co chceme říci, jaká zpráva, požadovaná akce uživatele, emoce -> vzniknou nadpisy, konkrétní obsah. Papírové štítky Myšlenková mapa Lepítka na stěnu, flipchart, souvislosti mezi myšlenkami Brainstorming Chrlení nápadů bez ladu a skladu 6 klobouků Pohled na problém z pohledu: fakta, emoce ,pozitivní, negativní, kreativní myšlení, přemýšlivý Obsahová strategie Plánování, tvorba vyhodnocení obsahu, obsah i pro marketingové kanály, současný web Design studio Týmy lidí se stejným zadáním, řeší problém * Výčet některých postupů
  • 8. Fáze 3b. Návrh webu - wireframe Metody / postupy* Návrh informační architektury Jazyk, seskupení obsahu, třídění obsahu, přechod mezi kategoriemi Navigace webu priority obsahu (potřeby), interní hledáním, rozsah menu. Způsob zobrazení Průchod webem navazuje na uživatelský výzkum, motivace návštěvníka, průchod obvykle nezačíná na home page, průchod - odkazy, akční prvky Skyci Papírové náčrtky jednotlivých stránek, obsahu, menu Wireframe Drátěný model stránek, obsahem rozložením obsahu, přibližným zdůrazněním některých prvků Model Verze vhodná pro prezentování klientovi. Obvykle v HTML s základními nadpisy. Vždy se slovním doprovodem * Výčet některých postupů
  • 9. Fáze 4. Testování, ověření návrhu Metody / postupy* Uživatelské testování Testování s jednotlivci, předem dané zadání, laboratorní či domácí prostředí Expertní externí pohled Zpětná vazba od odborníka v oboru Test formulářů Automatické či ruční testování funkcionalit webu Testování A/B Testovány postupné změny při redesignu, vliv na chování. Multivariantní testování Heat mapy Informace o využívání webu. Kliknutí, scrool mapy, mouse Chování ze statistik Vyhodnocení cílů webu dle chování ze statistik webu (Google Analytics) Gerilová testování Testování v terénu s náhodnými lidmi * Výčet některých postupů