Ostřete pilu – jak sestavit zadání webových stránek

Co je nejdůležitější ve vývoji webu? Design? Rychlost? Srozumitelnost? Počet konverzí? I když jsou to důležité složky, nejdůležitější je zadání neboli ToR – Terms of Reference. Bez jasného odsouhlaseného zadání s definovanými očekáváními a cílí žádná webová stránka nesplní svůj účel (a určitě dojde k nedorozuměním, posunutím deadlinů a zvětšeným rozpočtům).

Pro velké firmy to může být obrovský dokument o 50-100 stranách, který firma psala půl roku nebo rok. Ale i v tak dlouhém dokumentu se může stát, že zapomene zmínit něco důležitého. Například může popsat technickou stránku do všech podrobností, ale zapomene na záměr vyhledávání a cílovou skupinu.

Nejčastěji se zákazníci přicházejí do menší agentury s zakázkou vývoje jednoduššího webu – pětistránkové firemní weby nebo landing pro produkt/službu. V 90 % případech chtějí "jednoduchý a intuitivní web" a v 90 % případů dostávají sotva upravenou šablonu na WordPressu (pak si stěžují na výsledek a příště se obrátí na velkou a známou agenturu). Čí je to chyba? Rozhodně agentury, protože zákazník často sám neví, co chce a určitě nepřišel k "odborníkům", aby za ně všechno navrhoval. Proto všechny své klienty "briefuju". Brief mi pomáhá zohlednit nejen všechny technické detaily, ale také zjistit účel webu, pochopit potřeby a zájmy uživatelů. 

Na co se ptám při briefingu

Cíle projektu/společnosti a popis procesů.

Nejdříve je třeba pochopit, k čemu stránky vytváříme – zda zákazník chce propagovat nový produkt, zvýšit počet poptávek, přilákat nové leady nebo zvýšit povědomí o značce? Je třeba pochopit, jak firma komunikuje s uživatelem a které procesy lze pomocí webu optimalizovat a řešit. Taky nezbytné určit očekávání zákazníka – zda jsou kvantifikovatelné a podle jakých kritérií pochopíte, že byly splněny? Použíjte SMART a OKR, jinak se můžete dostat do nepříjemné situace.

Pokud vyvíjíme webové stránky pro hotel, uživatelé očekávají online platby buď pomoci platební brány nebo integrace s booking software. A na stránkách restaurace kromě jídelního lístku musí být možnost online rezervace nebo chatu. Pokud je cílem zviditelnit nový produkt, postačí jednostránkový landing page s jasnými výhodami, USP, recenzemi a funkčními CTA. A když chceme zviditelnit brand, budeme budovat vztahy a poskytneme fanouškům přidanou hodnotu ve formě užitečného obsahu a budeme budeme budovat loajalitu pomoci storytellingu v autentickém blogu.

Zákazník spolu s agenturou by měli nejprve určit typ webu a práce:

• Landing page neboli vstupní stránka
• Menší firemní web (3-7 stránek)
• Velký korporátní web
• Firemní web s katalogem produktů
• E-shop
• Webové stránky s klientskou zónou
• Webová aplikace (PWA)
• Redesign stávajících stránek

Publikum a výhody produktu.

To je důležitá fáze každého briefu. Potřebujeme portréty cílovky (ideálně buyer persony), segmentaci zákazníků a jejich rozložení dle "váhy". Mobilní aplikace na čtení stručného obsahu knih může být zaměřená na ambiciózní mileniály, ale zároveň může oslovovat Gen Z, kteří usilují o seberozvoj a motivaci. V tomto případě bude mít každá cílová skupina jiné jedinečný prodejní argument neboli USP (Unique Selling Proposition) – traffic a landing pro ně mohou být odlišné. Popisy typu "muži ve věku 25-35 z Prahy" nejsou dostačující, kromě základních demografických údajů je třeba pochopit pain/gain pointy cílovky, jaký má záměr, očekávání, co ocení a co nesnáší apod. Dále je třeba určit jaké problémy cílovky řeší produkt či služba – tady nejde o to, že někdo si chce pořídit mop, aby mohl uklízet; zde se musíme ponořit do hloubky a zjistit primární "drive" problému – je to touha po uznání nebo splnění očekávání?

Branding a design.

Požádejte o identitu, firemní styl a TOV, abyste se neodchylovali od zavedené image společnosti (pokud existuje). Zhistěte mise, vize, hodnoty, osobnost a strategii značky. Bylo by divné, kdyby Kofola najednou zezelenala a Alza vyměnila mimozemšťana za Shibu, pokud se ovšem nejedná o speciální projekt. Webové stránky nejsou jen souborem řádků kódu, ale také vizuálních a textových prvků. 

Hned si ujasníme, zda a jaký obsah mi bude poskytnut – fotografie, videa, copy, ikonky atd. Od toho se odvíjí deadline a rozpočet. Žádám o reference, specifikuju jejich silné a slabé stránky, jaké detaily mě oslovují a jaké bych neměl používat. Stejně tak si vyžádejte popis několika konkurenčních stránek. To pomáhá vytvářet moodboardy budoucích webovek, z nichž jeden zákazníka určitě potěší.  

Popsat design webových stránek na papíře je obtížné. Funguje zde jedno jednoduché pravidlo – nebuďte subjektivní. Žádné "stylové", "krásné", "neobvyklé" a už vůbec ne "prodejní". Je mnohem snazší přistupovat k návrhu webových stránek, pokud má zákazník brandbook. Pokud ho nemá, určitě požádejte o alespoň 3 referenční weby (např. stránky místní nebo zahraniční konkurence) a důvody, proč se zákazníkovi líbí.

Struktura stránek a scénář chování uživatele.

Logická struktura a hierarchie stránek je základní – návštěvníci i vyhledávače by měli snadno najít obsah na webu. Proto je důležité vytvořit logickou hierarchii obsahu. Ať už se jedná o vývoj webu na zelené louce, nebo přidání jedné stránky či jednostránkového landingu, vždy vytvářejte mindmapy, zde nejsou výjimky.

Ke každé stránce pak přidáte funkční specifikaci – co stránka musí obsahovat – registrační či kontaktní formulář, CTA, přihlášení, pole pro komentáře, filtry produktů atd. Pak nakreslete interní prolinkování – jaké stránky by měly mít interní odkazy, např. produktová stránka by měla mít nejvíce příchozích odkazů, protože se jedná o nejdůležitější stránku na celém webu, a díky většímu počtu interních odkazů se její "váha" vzroste.

Nezbytnou součástí zadání je sestavení customer journey neboli scénář chování uživatele. Nejenže se musíte postavit do role zákazníka a pochopit, jak by měla struktura webu vypadat, musíte spočítat počet kliků, které uživatel musí udělat, než se dostane na požadovanou stránku. Je logické, že čím menší click depth je, tím je lepší.

Dále je třeba pochopit cestu kupujícího (buyer's journey), tj. proces, kterým lidé procházejí před nákupem. Konvenční moudrost říká, že čím vyšší je pozice uživatele v trychtýři, tím menší je pravděpodobnost, že nakoupí. Zde je jeden populární rámec cesty kupujícího:
Horní část trychtýře (Top of the Funnel, TOFU) - Lidé hledají obecné informace o daném tématu.
Střední část trychtýře (Middle of the Funnel, MOFU) - Lidé zkoumají dostupná řešení svého problému.
Spodní část trychtýře (Bottom of the Funnel, BOFU) - Lidé chtějí provést nákup konkrétního produktu nebo služby.

Pro každou část trychtýře je třeba jiný typ obsahu, jiné funkce webových stránek a nejspíše odlišné landingy.

Technické požadavky.

Ptám se na požadavky na CMS, pluginy a funkce, zda je požadována integrace s doručovací službou, CRM a dalšími systémy, jaký má zákazník hosting a kde jsou umístěny servery. K usnadnění výběru můžete do briefu přidat několik populárních položek, které zákazníkovi pomohou správně se rozhodnout.

Statistiky a analytika.

Je těžké najít web bez monitorovacích systémů – metriky, cíle, pixely jsou defaultně nastaveny. Určuju jaké jsou ty vhodné, když je třeba vylepšit stávající web nebo provést redesign, provést přesnější analýzu a zohlednit problémy, kterým čelí současní uživatelé. Pokud se nejedná o vývoj webu od nuly, analýza chování stávajících uživatelů je klíčová. Díky ni dostanete spoustů insightů a pochopíte co je špatně, proč je to tak a jak to zlepšit. Proto vždy vyžadujte přístup k Google Analytics a proveďte důkladnou analýzu všech základních metrik. U nového webu samozřejmě musíte sledovat všechny metriky, abyste pochopili, zda jste splnili očekávání.

Udržba a rozpočet.

Ujasníme si, zda je zapotřebí další podpora a propagace – bude-li zákazník chtít stránky optimalizovat pro vyhledávače, zda bude chtít vést blog, zda budete webovky udržovat vy nebo budete muset předat a zaškolit in-house zaměstnance, zda bude chtít vytvořit reklamní kampaně a targeting.

Ale hlavní otázka je – kolik peněz zákazníci ochotni investovat do vývoje, protože to určuje volbu implementace, počet stránek a bloků. Pro některé lidi bude vhodnější vytvořit vstupní stránku pomoci konstruktoru, zajistit návštěvnost a přijímat přihlášky, zatímco jiní potřebují funkce, které konstruktory nemají. 

Deadline.

Termín dodání webových stránek. Je těžké určit optimální deadline bez seznámení s konkrétními podmínkami projektu. Je však možné stanovit průměrnou lhůtu. Vývoj webu na základě šablony může trvat 2 až 4 týdny. Landing na základě šablony ještě rychleji. Ale web s designem "od nuly" a komplexní funkčností bude vyžadovat alespoň 1 měsíc práce. Deadline je největší kámen úrazu ve vývoji webu. Buď agentura podcení komplexnost webových stránek a jednotlivých funkcí, nebo v průběhu vývoje zákazníka něco "napadne" a bude přidávat nové prvky. Nejlepším řešením je:

1. Mít předem stanovené SMART cíle, kritéria dle OKR a KPI.
2. Rozdělit práci na několik (ne moc) úseků/sprintů a určit jednotlivé deadliny.
3. Na základě deadlinů sprintů určit termín dodání webu.
4. Nastavit "obhajobu" a schvalovací proces pro každý sprint, aby zákazník písemně odsouhlasil každý úsek.
5. V případě force majeure ihned informovat zákazníka a možném prodlení
6. Po předání webových stránek podepsat "předávací protokol".

Možná to zní zbytečně komplikovaně ale věřte, že pokud tyto kroky budete ignorovat, dostanete se do problémů.

Rady pro lepší briefing.

Pište jednoznačně a přesně.

Hlavním účelem zadání je dosažení porozumění mezi zákazníkem a agenturou. Dokument by neměl obsahovat kvalitativní přídavná jména: krásný, pohodlný, moderní. Taková slova lze hodnotit dvojznačně: každý chápe krásu a modernost po svém.

Totéž platí pro nejasné formulace. Například:

• Zákazníkovi se musí stránka líbit. A když ne?
• Stránky musí být uživatelsky přívětivé. Pro koho?
• Stránka musí být schopna odolat velkému zatížení. Kolik návštěvníků?
• Kvalitní odborný obsah. Dobře, to je jasné.

Jasné formulace.

Nezapomeňte zkontrolovat text – neměl by obsahovat dvojsmyslné formulace. V opačném případě bude nutné brief přepsat. Všechny myšlenky by měly být formulovány jasně a přesně. Například:

• ne "načítání webových stránek by mělo být rychlé", ale "každá stránka by měla mít více než 80 bodů v Google PageSpeed Insights";
• ne "velké zatížení", ale "50 000 uživatelů najednou";
• ne "na domovské stránce by měl být seznam článků", ale "na domovské stránce by mělo být uvedeno posledních šest publikovaných článků";
• ne "navrhování minimalistického uživatelsky přívětivého rozhraní pro přihlášení k newsletteru", ale "pole 'zanechat e-mail' s tlačítkem 'přihlásit se k odběru'.

Vytvářejte moodboardy a prototypy.

Pro všechny stránky vytvářejte prototypy – náčrty budoucích stránek s rozložením jednotlivých prvků. Použijte referenční weby konkurence nebo standardní best practice. Moodboardy pomohou určit design stránek, pokud zákazník nemá brandbook.

Časté chyby při sestavení briefu.

Při sestavování zadání pro vývoj jakýchkoli webových stránek mějte na paměti: nezřejmé a subjektivní požadavky by měly být nahrazeny těmi nejpřesnějšími.

• Typ webové stránky nebyl specifikován. Při vývoji se agentura mylně orientuje podle určitého typu webu: blog, obchod, firemní web. Správná vize by měla existovat již na začátku práce.
• Cílové akce nejsou specifikovány. Pokud zákazník nespecifikuje, jaké klíčové akce jsou pro něj nejdůležitější (nové leady, počet návštěvníků, objem prodeje), stránky nemusí naplnit očekávání a mohou nastat potíže při počátečním nastavení analytiky. Je třeba to udělat hned na začátku.
• Neexistují žádné příklady webových stránek. Pokud zákazník neposkytne reference nebo příklady webů, které považuje za nejvhodnější, bude pro agenturu obtížné pochopit, jakým směrem se má vydat.
• Uživatelské scénáře nejsou předepsány. Jedná se o otázku týkající se cílové skupiny – před vypracováním zadání byste měli mít jasnou představu o tom, kdo jsou vaši návštěvníci a proč by mohli stránky vůbec navštívit.
• Sémantické značení webu není stanoveno. Sémantické značení pomáhá vyhledávači lépe porozumět obsahu zveřejněnému na stránce.
• Rozsáhlé požadavky. Zadání by nemělo obsahovat srovnávací a zjednodušená přání, jako je "krásný" nebo "stylový". ToR je technický dokument a namísto "krásný" a "stylový" je třeba psát specifika.

Nejlepším způsobem je vyplnit zadání společně se zákazníkem během rozhovoru, protože ne vždy přesně ví, co potřebuje. Úkolem briefingu a debriefingu je najít skutečné bolesti a výzvy, kterým podnik čelí. Na základě těchto informací můžete klientovi vysvětlit jeho požadavky na tu či onu funkci. 

Základní zjednodušená struktura zadání.

Žádné dva briefy nejsou stejné: každý úkol má svůj vlastní brief. Správné zadání by mělo obsahovat:

1. Informace o společnosti, produktu/službě a cílové skupině; cíle a očekávání od webu;
2. Glosář pojmů, kterým klient nerozumí;
3. Požadavky na rozvržení a provoz stránek;
4. Popis použité technologie a seznam požadavků na hosting;
5. Podrobná struktura webu a scénář chování uživatele;
6. Prototypy stránek a popisy prvků obsažených na webu;
7. Scénáře použití rozhraní, pokud jsou nestandardní;
8. Jaký obash dodá zákazník;
9. Požadavky na design;
10. Požadavky na provoz a údržbu webu;
11. Rozpočet;
12. Deadline.