Jak navrhnout úspěšný web krok za krokem aneb jak hodně se můžete/máte zapojit

Otázka „Jak má vypadat průběh tvorby úspěšného webu“ mě poslední dobou provází na všech interních školeních a kolikrát jsou lidé ve firmách překvapeni, jak hodně si mohou průběh tvorby usnadnit a jak hodně mohou předejít problémům. Mezi nejčastější problém patří předělávání webu v průběhu práce, doplňování dalších funkcí a stránek. V tomto případě většinou také vzniká problém v komunikaci s klientem a v nacenění těchto úprav. Dne 27.3.2014 jsem měl tu čest na toto téma přednášet na Vysoké škole Báňské – Technické univerzitě Ostrava v rámci APPLE JUICE MEETINGU. Opět musím pochválit publikum, které bylo hodně aktivní a přidávalo své zkušenosti. Zpětně mě mrzí, že z přednášky nebude video.

„Jak podle Vás vypadá návrh úspěšného webu?“

Na tuto otázku slyším skoro pokaždé jinou odpověď. Těch způsobů, které můžeme vidět v praxi, je opravdu hodně. Nejčastější je asi „První schůzka, domluvíme se, já Vám pošlu grafiku, Vy to odsouhlasíte, začneme programovat a pak to nějak doladíme“.

Postup níže nebere v potaz časovou náročnost a je zaměřen spíše na menší a střední weby, které nejsou moc specifické. U větších nebo hodně specifických webů už se zpracovává více výzkumů a mnohem více se zaměřuje na část získání zpětné vazby od samotných uživatelů, kteří jej budou používat. Velice pěkně práci s většími klienty popisuje Jan Řezáč ve své přednášce o základech designerského procesu. Také na svém webu má tento proces popsán. Podle těchto kritérií může být různě modifikován nebo zkrácen, záleží vždy na firmě samotné a na klientovi. Neberte jej jako dogma, je to spíše postup, který sám doporučuji a mám v praxi ověřen.

Kvasnička Jan VŠB

1. Předimplementační analýza

Častá úvaha: „My přesně víme, co chceme“. 

Ano, nepopírám, že existují klienti, kteří mají přesnou představu o tom, co chtějí. Ale berou v potaz opravdu vše, co by měli brát? Zaměřují se na svou představu nebo na samotného zákazníka a uživatele? Co když se zase jen budou točit v tom samém kruhu, jako se točili doteď a nový web jim až tolik v růstu nepomůže? Viděl jsem případ, kdy nový web pro účetní služby byl pouze přebarvený starý web, ale na obsah, zaměření nebo definování své pozice na trhu se tvůrce nezaměřil. Celý web mohl být udělán mnohem lépe. A takových případů je opravdu hodně, jelikož jim nikdo neřekl, že z webu mohou dostat více. Jejich představa je většinou pouze zlomek z toho, co vše mohou na webu mít a právě pro upřesnění celé představy se vytváří předimplementační analýza.

Co to vůbec je ta předimplementační analýza? Je to dokument, ve kterém je popsána celková představa o webu. Existuje několik různých pojmenování, jako vstupní dotazník nebo počáteční analýza, případně u větších klientů jsou jednotlivé části dále děleny a odevzdávány zvlášť. Viděl jsem několik pojetí zpracování, kdy někteří jsou zastánci minimalismu a zodpovězení základních otázek, a někteří jsou naopak maximalisti a chtějí získat opravdu celistvou představu o tom, co bude nebo může vše s webem souviset. Já se řadím mezi ty, kteří se snaží zjistit maximum, abych poté lépe věděl, na koho se obrátit s případnou spoluprací nebo co vůbec bude potřeba.

Kdo je při její tvorbě potřeba? Většinou spolupracuji s některým z kolegů SEO specialistů (Pavel Ungr, Lukáš Pítra nebo Martin Matějka), jejichž pohled je hodně důležitý a spolupráce s nimi mi v tomto ohledu nesmírně vyhovuje. Dále zapojujeme lidi zodpovědné za určité služby, které budou klientovi dodány, jelikož jejich zkušenosti dokážou hodně pomoci. Většinou spolupracujeme s Karlem Mindlessem Novotným v rámci brandingu, Marcelem Kupkou v rámci obsahové strategie nebo Davidem Lörinczem v rámci sociálních sítí.

Podle velikosti a typu klienta se také více zaměřujeme na získání zpětné vazby a pochopení celého fungování jeho businessu, tedy dotazníky, rozhovory a jejich vyhodnocování. Hodně je to bohužel ovlivněno samotným rozpočtem, jak jsem již psal výše.

Zde přikládám základní obsah předimplementační analýzy tak, jak s ní dále pracuji se svými kolegy. Obsah se vždy mění podle klienta a pokaždé jej připravujeme přesně na míru, aby to odpovídalo aktuálním potřebám:

  • Základní informace
    • Cíle
    • Cílové skupiny/persony
    • Konkurence
    • Vývoj trhu
    • Rozhodovací proces
  • Technická řešení
    • Developer
    • Grafik
    • Napojení na systémy třetích stran
  • Měření a data
    • Google Webmaster Tools
    • Google Analytics
    • Collabim
    • PPC systémy
    • Analýzy, reporty nebo jiné podklady
  • Definice důležitých položek
    • Konkurenční výhody
    • Pozice na trhu
    • Prozákaznický přístup
  • Marketingové kanály
    • Newsletter
    • Sociální sítě
    • Srovnávače
    • PPC
    • Budování brandu
  • S jakým obsahem bude pracováno
    • Jaké jsou kapacity/outsourcing
    • Klíčová slova, kterou jsou pro klienta důležitá
    • Novinky a magazín
    • Poradna
    • Slovník pojmů
    • Návody a doporučení
    • Spolupráce s médii
    • Spolupráce s osobnostmi
    • Komunity a partneři
    • Eventy, výstavy a exhibice
    • Restrikce a omezení
  • Důležité prvky webu
    • Vyhledávání a jeho zpracování
    • Rozcestníky
    • Certifikace
    • …a spoustu dalších

2. Analýza konkurence

Častá úvaha: „Ale my svou konkurenci přesně známe“. 

Je vůbec analýza konkurence nutná? Vždy to určujeme podle segmentu, ve kterém klient podniká. Většina firem, které tuto službu dodávají, Vám zašlou dokument se spoustou screenů bez žádné přidané hodnoty. Viděl jsem již 3 zpracování a celkově jsem byl k této službě hodně skeptický. Většinou analýza obsahovala výpis základních prvků webů, které doporučují mít také a výpis marketingových kanálů, které konkurence využívá. Jedna analýza také obsahovala screeny článků pro doporučený obsah. Ano, asi to hodně záleží na samotném klientovi, co analýzou chce zjistit a jaký má rozpočet, ale i tak jsem u těchto zpracování moc přidané hodnoty nenašel. Názor na tuto službu jsem změnil po první spolupráci s Lenkou Ptáčkovou (lenka.ptackova@yahoo.com – bohužel zatím nemá web), jejíž výstupy a přístup byly úplně jiné. Nezaměřila se pouze na prvky výše uvedené, ale definovala:

  • Konkurenční výhody
  • Hodnocení důvěryhodnosti webu/služby
  • Možnosti dopravy nebo platby pro daný segment
  • Aktivně psala emaily a volala konkurenci, aby zjistila jejich prozákaznický přístup, stejně jako ověření funkčnosti livechatu
  • Zaměřila se na obsah a analýza obsahovala přímo odkazy na zajímavý obsah konkurence
  • Marketingové kanály s hodnocením každého zvlášť a popisem aktivity
  • Konkurence ve vyhledávání
  • Obchodní konkurence v rámci cenotvorby
  • V rámci eshopů se dále například zaměřuje na prezentaci produktů a jejich možností
  • a spoustu dalších věcí…

Vždy si před začátkem spolupráce projde konkurenci a zašle dotazník s doporučením, na co by se ráda zaměřila, aby měla analýza co největší účinnost. Díky této analýze dokážeme lépe zhodnotit, jaké jsou možnosti pro nový web nebo službu obecně a na jejím základě doplňujeme předimplementační analýzu.

3. Analýza klíčových slov

Častá úvaha: „Známe naše produkty a služby, víme, na jaká klíčová slova cílit“. 

Častá úvaha: „Máme všechny vstupná stránky, více jich není“. 

Analýzu klíčových slov považuji za jeden z nejdůležitějších bodů celého postupu. Vždy doporučuji spolupracovat se specialistou, jelikož dnes stále existuje hodně SEO šamanů. Přikládám popis od Pavla Ungra: Jedná se dokument, který dokáže zjistit nejefektivnější fráze vhodné právě pro váš web. Zjišťujeme v ní jak lidé vaše produkty nazývají, jak a kde je hledají a pod jakými názvy. U získaných frází poté zjišťujeme hledanost, relevanci a konkurenci stejně jako i to, zda pro všechny fráze existuje vhodná vstupní stránka. Vyhledávače totiž nedokáži přivádět na váš web návštěvníky, pokud pro dané klíčové slovo neexistuje vhodná stránka. Bez této analýzy není možné efektivně provádět optimalizaci pro vyhledávače, protože bychom neměli připravený web, návštěvnost by nemohla proudit a ani bychom nevěděli na které fráze máme cílit. Jedná se o základní strategický dokument pro úspěšný online marketing. Výstupem by měla být jak souhrnná excelová tabulka se všemi informacemi, tak přehledné shrnutí s výsledkem a doporučením na další postup.

Více se zde rozepisovat nebudu a odkáži Vás na povolané:

4. Návrh informační struktury

Častá úvaha: „To okopírujeme od konkurence“. 

Na základě analýzy klíčových slov je potřeba implementovat všechna obsahová i strukturální doporučení a bude-li třeba, tak rozšířit strukturu webu nejen o relevantní vstupní stránky, ale i o celé navigační mechanismy jako jsou nová menu nebo filtry. Toto právě na základě analýzy klíčových slov řeší informační struktura. Výstupem je přehledný strom zobrazující ideální strukturu webu včetně filtrů a navigačních mechanismů.

Bohužel četnost kopírování od konkurence je v tomto případě opravdu velká, přitom kolikrát má konkurence úplně jiné produkty nebo služby.

Hodně mi v tomto ohledu vyhovuje spolupráce s kluky z kanceláře, kteří zde již pracují s definicí filtrací, řazení, kategoriemi pro obsahové části nebo tagy. Dle mého názoru se jedná o jeden z nejdůležitějších bodů celého postupu. Vždy doporučuji, aby zde proběhla konzultace mezi SEO a UX specialistou, kteří na webu spolupracují, jelikož by měl být brán velký důraz na samotného uživatele. Opět odkáži na povolaného:

5. Obsahová strategie

Častá úvaha: „My obsah nepotřebujeme, my máme akce a slevy“. 

Stále dokola někde čteme, že obsah je král, a je tomu tak. Ten, kdo umí pracovat s obsahem, má z velké části vyhráno, jelikož má jednoznačnou konkurenční výhodu a snižuje se u něj pravděpodobnost, že návštěvník odejde na jiný web nebo eshop kvůli tomu, že mu chybí nějaká informace. Důležité je ale umět s obsahem pracovat, vědět, na jaký obsah se zaměřit a kde jej publikovat.

Jedná se o analýzu toho, jak pracovat s obsahem na webu i mimo web a zejména o cílení na cílové skupiny a persony včetně komunikační strategie a nastavení jazyka, kterým se bude na různých kanálech komunikovat. Většinou jsou to odpovědi na 4 základní otázky:

  • Proč? – dát návštěvníkovi něco navíc, jednodušší možnost volby, prozákaznický přístup, zajímavý obsah, možnosti sdílení…
  • Kde? – poradna, magazín, newsletter, sociální sítě, popisy služeb nebo produktů…
  • Kdy? – tvorba časové návaznosti a plánu
  • Jak? – text, grafické prvky, video…

Je nutné také stanovit, kdo bude obsah vytvářet, zda má firma na to lidi nebo bude nutné zapojit někoho dalšího.

6. Definice marketingových kanálů a specifická příprava

Častá úvaha: „Marketingové kanály? To je PPC a Facebook, že?“. 

Nejedná se jen o Facebook a PPC, jak si někteří mohou myslet. V této fázi už je přesně nadefinováno jaké kanály budou využívány a kdo bude za které zodpovědný. Ti většinou už sami spolupracují s klienty a definují pouze své potřeby pro web nebo obsah, například napojení systému pro rozesílání emailů atd. Mezi tyto kanály může patřit:

  • Email marketing
  • Sociální sítě, nikoli pouze Facebook, ale sítě vhodné pro daný segment klienta
  • PPC
  • Srovnávače zboží
  • Práce v rámci obsahového marketingu
  • Offline reklama

7. Tvorba wireframe

Častá úvaha: „Wireframe nejsou potřeba, to udělá grafik“. 

Stále častěji se setkávám s grafiky, kteří sami vytvářejí návrhy webů, protože je to cool doplnění k jejich hlavní profesi a celkově UX je přece hodně trendy, tak proč by to nemohli mít ve svém portfóliu služeb. Bohužel většinou to nedopadá dobře. Proto pozor koho si vyberete pro návrh webu. Wireframe jsou drátěné modely webů, které přesně ukazují, kde který prvek webu bude umístěn a jak bude zpracován.

Hodně se mi líbí úvaha některých klientů, kteří si myslí, že je postačující pro eshop navrhnout homepage, výpis produktů, detail produktů a podstránku. Poslednímu klientovi jsem odevzdával přes 60 wireframe, kde jsme měli nadefinováno opravdu všechno a na nic nebylo zapomenuto, čímž ale neříkám, že je to vždy nutnost. Jde o úhel pohledu a přístup klienta, nebo o to, jak má zkušeného developera. Na všem záleží, stejně jako na kvalitě grafika.

8. Zadání pro grafický návrh

Častá úvaha: „Zadání není potřeba, my to grafikovi popíšeme“. 

Není úplně potřeba, ale pokud již má firma nějaký zavedený vizuál nebo má přímo nadefinován grafický manuál, tak je potřeba to grafikovi vhodně předat. Často sepisuji alespoň základní poznámky pro grafika jak by měl pracovat s barevností webu v návaznosti na konverznost. Proč já osobně bych tento krok nepřeskakoval je fakt, že grafici jsou kolikrát bohémové a jsou to lidé, kteří mají rádi volnost ve všech směrech. To někdy vede k tomu, že jejich výstupy vypadají úplně jinak než dodaný návrh nebo zadaná barevnost, která vychází z grafického manuálu firmy. Poté je velice složité se dohadovat, co bylo opravdu zadáno a co nikoli. Většinou to ztroskotá na tom, že se grafik dohaduje nad proplacením hodin za práci, která nebyla zadána. I z tohoto důvodu je dobré těch pár hodin pro zadání obětovat, může Vám to zachránit čas i finance.

9. Grafický návrh

Častá úvaha: „Na grafickém návrhu se podílí pouze grafik“. 

Opět raději doporučuji vybrat si prověřeného grafika, než v této fázi šetřit. Bohužel se nám nejednou stalo, že proběhl celý tento proces a v tomto stavu byla grafika zadána né zrovna šikovnému grafikovi. Jednou to byl syn ředitele, kterému bylo 16 let a měl své vlastní představy a zkušenosti. Poté bylo velice složité celou spolupráci uchopit, jelikož syn nebyl na kritiku zvyklý a jeho otec se jej zastával. Vždy doporučuji, aby byl grafik kontrolován tím, kdo vytvářel návrh webu a má tak už vytvořenou nějakou představu o tom, jak by to mohlo vypadat. Tito dva by měli spolupracovat a jednotlivé části konzultovat, nikoli aby se přebíjeli názory a každý si stál striktně za tím svým. Již mám velice dobře ověřenou spolupráci s Vojtou Kotousem nebo Jakubem Haluškou.

10. Zadání pro developera

Častá úvaha: „Oni to nepochopí z grafického návrhu?“. 

Jsou zde dva pohledy na to, jak by zadání mělo vypadat. Někteří jsou zastánci minimalismu, jiní chtějí vše dopodrobna popsat, aby na nic nebylo zapomenuto a nemusel pak vznikat pingpong v emailech, čímž se vše prodlužuje a ve finále také prodražuje. Hlavní faktor, který toto ovlivní, je sám developer. Už podle jejich přístupu poznáte, zda je zadání potřeba nebo nikoli. Lepší firmy před zahájením spolupráce zasílají dotazníky nebo dělají analýzy pro přesnější specifikaci zadání a nacenění. Jsem ale opět zastánce toho popsat alespoň nejdůležitější funkcionalitu, která je třeba nezvyklá nebo nějakým způsobem specifická. Developerovi to určitě pomůže a zkrátí se tak zase čas pro navázání spolupráce. Často tyto informace doplňujeme přímo do předimplementační analýzy, aby developer viděl, na co bylo myšleno a na co nikoli.

11. Programování a kódování

Častá úvaha: „Čím dříve to bude, tím lépe“. 

V této fázi se určitě nevyplatí spěchat nebo dávat šílené šibeniční termíny, jak mají někteří ve zvyku. Raději vývoj o týdny posunu, než aby se některé prvky lepily a poté se to muselo předělávat nebo opravovat. Zase na druhou stranu zkušený developer dokáže vývoj a časovou náročnost velice dobře odhadnout. Právě díky celému tomuto procesu by mělo vzniknout co nejméně odchylek od původního zadání, jelikož by mělo být na vše myšleno. Nejlépe si developera vyberete jako partnera pro celé podnikání, nikoli pro jednu zakázku, jelikož nikdy nevíte, co budete potřebovat změnit nebo upravit a vždy je lepší mít dobré vztahy.

12. Testování

Častá úvaha: „Testování není potřeba, ten developer je hodně kvalitní“. 

Prosím Vás vždy testujte, minimálně s jedním člověkem a nespoléhejte jen na developera. Jsou to přece jen také lidé a děláme chyby, i proto je dobré si vše projít a ověřit. Nezapomeňte také na kontrolu v rámci různých prohlížečů nebo zařízení, může Vám to ušetřit hodně financí nebo problémů. Stále dokola opakuji jeden příklad, kdy majitel nového eshopu spěchal na spuštění a ihned od prvního dne investoval do PPC. Po týdnu ale zjistil, že má v PPC poměrně dost utraceno, ale nemá ani jednu objednávku. Problém byl v posledním kroku objednávky, kdy se místo děkovací stránky objevila chybová hláška. Pozor tedy na spěch a testujte!

13. Analytika

Častá úvaha: „Ale my už jsme tam dali kód Google Analytics“. 

Přidat kód z Google Analytics je základ, ale vědět, co měřit a jak to vyhodnocovat už je složitější. Ano, není to potřeba úplně pro každý typ webu, ale vždy doporučuji se nad tím alespoň zamyslet, zda využít služeb analytika. Minimálně pokud uvažujete nad webem opravdu vážně a chcete investovat finance do propagace, tak byste měli mít kontrolu nad tím, zda se Vám to vůbec vyplácí a co uživatelé na Vašem webu dělají nebo kdo to vůbec je.

Na co jsme zapomněli?

Celý postup jde určitě ještě více rozčlenit na jednotlivé části. Často tvoříme persony přímo pro daný web, zaměřujeme se více za hloubkové rozhovory a na samotného zákazníka, což je základ. Hodně také spolupracujeme s externími copywritery nebo korektory, kde mohu doporučit Otto Bohuše, ipartak.cz nebo Richarda Dobiáše. Také doporučujeme při tvorbě nového webu/eshopu vymyslet strategii vstupu na trh a čím to bude provázeno, aby se zajistila dostatečná pozornost. U některých klientů jsme psali dokument, ve kterém měli uvedeny všechny prvky a úvahy, které nebyly použity a proč, aby se k tomu mohli v budoucnu vrátit. Těch dalších možných částí bude více a sám se těším na Vaše komentáře.

Proč doporučuji tento postup?

Protože si myslím a mám ověřeno, že dokáže klientovi hodně času i financí ušetřit a především to web/eshop jako celek posune úplně někde jinde, jelikož je na něj nahlíženo zeširoka a zároveň hodně podrobně v rámci daného segmentu. Klient většinou nemá představu o tom, s čím vším se dá pracovat nebo jak by to mohlo fungovat.

Vaše zkušenosti a Vaše postupy?

Pracujete podobně, nebo je Váš postup úplně jiný? Zdá se Vám některý krok úplně zbytečný? Budu rád za komentáře a zajímavou diskuzi, děkuji.

 

Kvasnička Jan

Autor článku se zabývá testováním použitelnosti, zvyšováním konverzních poměrů, návrhem webových aplikací, mentoringem projektů nebo služeb, monetizací a marketingem.

Podobné články

21 komentáře v článku “Jak navrhnout úspěšný web krok za krokem aneb jak hodně se můžete/máte zapojit” Komentáře jsou DOFOLLOW

  1. Jsem to přečetl nékolikrát, vidět, že to máte promakaný. Rád pracuji s podobným přístupem, proto jsem odešel na volnou nohu z firmy, kde se vše řešilo stylem “problém budeme řešit, až vznikne” a “Jsi v práci, tak makej a nevymýšlej”. Dnes pracuji s lidma, které si vybíram a pro zákazníky, kteří vědí a chápou, co chtějí a proč to chtějí.
    Honza recently posted..Interiérové prvkyMy Profile

  2. Dobrý den Honzo, děkuji za užitečný článek, můj dotaz však směřuje trošku jinam. Existuje důvod proč vy ani nikdo z Vašich kolegů nemá své FB stránky, nebo respektive se na ně na svém webu neodkazuje? Trošku mě to překvapilo :) Děkuji

  3. Dobrý den Honzo, moc pěkný článek. Spousta firem nikdy takto komplexně web neřeší a pak se diví, že to nefunguje. Díky za osvětu, kterou děláte. Již delší dobu sleduji vaši práci a články. Je vidět, že své práci rozumíte. Jen tak dál. Ať se Vám daří, Dušan

  4. Pingback: Doporučení: Grafici na grafiku - BloxxterNet

  5. Ahoj, Honzo.
    S dovolením Vám budu vykat. Jsem jeden z těch na druhé straně – pro kterého web s e-shopem děláte. Již 20 let mne živí rohože. Ve většině bodů s Vámi souhlasím. Jen se musím pousmát, když tvůrci mého webu zjistili skutečný stav skladových ceníkových položek v rohožkách! Zkuste si i Vy tipnout, než se půjdete podívat na moje webové stránky.
    Rád bych se s Vámi potkal na nějaké přednášce, jezdíte také do Jižních Čech či do Brna?

    S přáním úspěšného dne Zdeněk

  6. Ahoj Honzo, mám pocit, že když se na českém internetu objeví článek o vytváření webů, tak tam vždy najdu zmínku o tom jaké bohémské hovada ti grafici jsou :) Nejhorší na tom je, že asi opravdu existuje tolik negativních zkušeností s grafiky a pak všechny tyto drobné výtky jsou opodstatněné?

    Jinak díky za skvělý článek, beru si z toho spoustu zajímavých informací!

    • Jj, je to opodstatněné, jen někdy je to bohužel a někdy bohudík, jelikož právě díky jejich přístupu a nadhledu pak dokážou udělat něco vyjímečného nebo originálního atd. Jen najít zlatý sřed nebo toho, s kým ta spolupráce vyhovuje a takový grafik má pak na několik měsíců dopředu plno :)

  7. Pingback: Školenie SEO UX - recenzia | SEOzin

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge