Postupy které jsou využívány při návrhu obsahu, struktury webů. 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
www.seopc.cz
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ů