Tvorba webu nezačíná programováním. Co je potřeba vyřešit ještě před prvním řádkem kódu?

Když se řekne tvorba webových stránek, většina lidí si představí grafický návrh, programování, výběr barev, instalaci redakčního systému nebo samotné skládání jednotlivých stránek. Ve skutečnosti by ale profesionální tvorba webu měla začít mnohem dříve. Ještě předtím, než vznikne první grafický návrh nebo první řádek zdrojového kódu, bychom měli vědět, proč web vzniká, komu je určený, co na něm budou návštěvníci hledat a jakou úlohu má plnit v podnikání firmy.

Právě tato přípravná fáze často rozhoduje o tom, zda vznikne pouze vizuálně povedená internetová prezentace, nebo skutečně funkční web. Technologie totiž dokáže realizovat téměř jakýkoliv návrh. Mnohem obtížnější je předem určit, co vlastně máme vytvořit a proč.

Nejdříve potřebujeme pochopit firmu

Každý projekt proto začíná pochopením samotného podnikání. Nestačí vědět, že firma například vyrábí nábytek, poskytuje účetnictví nebo montuje fotovoltaické elektrárny. Potřebujeme pochopit, které služby jsou pro ni skutečně důležité, jak získává zákazníky, v čem je jiná než konkurence, jak probíhá obchodní proces a jakou úlohu v něm má nový web sehrát.

U jedné společnosti může být hlavním cílem získání nové poptávky. Jiná potřebuje především představit rozsáhlé portfolio realizací a vybudovat důvěru před osobním obchodním jednáním. Další firma potřebuje prostřednictvím webu snížit množství rutinních telefonických dotazů nebo umožnit zákazníkům provést část procesu online. A e-shop samozřejmě řeší ještě úplně jiné problémy.

Proto je věta „potřebujeme nový web“ pouze začátkem zadání. Z pohledu tvorby potřebujeme zjistit, co má nový web změnit.

Pokud tuto otázku neumíme zodpovědět, velmi obtížně budeme později hodnotit, zda byl projekt úspěšný.

Definujeme cíle, které má web plnit

Dalším krokem je převést obecnou představu do konkrétních cílů. Cíl „chceme modernější web“ je pochopitelný, ale pro návrh není příliš užitečný. Modernější vzhled totiž sám o sobě nemusí firmě přinést vůbec nic.

Mnohem zajímavější jsou cíle typu: chceme zvýšit počet relevantních poptávek, představit novou část nabídky, získávat zákazníky z organického vyhledávání, oslovit jiný segment trhu, zjednodušit objednávkový proces nebo zvýšit důvěryhodnost společnosti před prvním kontaktem.

Od těchto cílů se následně odvíjí prakticky všechno ostatní. Struktura webu, rozsah obsahu, způsob prezentace služeb, výzvy k akci, formuláře, měření konverzí i technické řešení.

Web určený především pro získávání nových poptávek jednoduše navrhujeme jinak než web, jehož hlavním účelem je poskytovat servis stávajícím zákazníkům.

Kdo bude web skutečně používat?

Firma samozřejmě musí být se svým webem spokojená. Jenže není jeho hlavním uživatelem. Web vytváříme především pro zákazníky firmy.

Proto potřebujeme znát cílové skupiny a především jejich motivaci. Nestačí pouze obecná charakteristika typu „muži a ženy ve věku 25 až 60 let“. Pro návrh webu je mnohem důležitější vědět, s jakým problémem člověk přichází, jaké informace potřebuje před rozhodnutím, podle čeho porovnává jednotlivé nabídky a čeho se při nákupu nebo poptávce obává.

Jiné informace bude potřebovat člověk hledající firmu pro stavbu rodinného domu a jiné nákupčí, který vybírá dodavatele pro průmyslový podnik. Přestože mohou oba navštívit web stavební společnosti, jejich rozhodovací proces bude úplně jiný.

Dobrá struktura webu proto nevychází pouze z organizační struktury firmy. Měla by odpovídat také tomu, jak o nabídce přemýšlí její zákazník.

Analýza současného webu je často cennější než prázdný papír

Pokud firma již web má, není dobré jej automaticky zahodit a začít od nuly. Starý web obsahuje informace, které mohou být pro nový projekt velmi cenné.

Můžeme zjistit, které stránky přivádějí návštěvníky z vyhledávačů, na jaké dotazy se zobrazují, které služby lidé navštěvují nejčastěji a které stránky naopak prakticky nikdo nepoužívá. Zajímavé mohou být také stránky s velkým počtem zobrazení ve vyhledávání, ale nízkou mírou prokliku, nebo obsah, který návštěvnost získává, ale nevede k žádné další akci.

Součástí přípravy nového webu by proto měl být také obsahový a SEO audit současného řešení. Některé stránky zachováme, jiné přepracujeme, několik podobných stránek můžeme sloučit a část zastaralého obsahu úplně odstranit.

Tento krok je důležitý také při migraci. Pokud například stránka několik let získává kvalitní organickou návštěvnost, bylo by velmi nepříjemné při spuštění nového webu jednoduše změnit její URL a zapomenout na správné přesměrování.

Nový web totiž nemá znamenat, že zahodíme vše, co ten starý za několik let získal.

Podíváme se na konkurenci – ale nekopírujeme ji

Analýza konkurence není hledání webu, který se nám líbí a který následně napodobíme. Je to způsob, jak pochopit prostředí, ve kterém bude nový web fungovat.

Sledujeme, jak konkurenti strukturovali své služby, jak komunikují hlavní výhody, jaké informace poskytují zákazníkům, jak pracují s referencemi, případovými studiemi, cenami nebo často kladenými otázkami. Z pohledu vyhledávání nás zajímá také to, pro jaká témata mají vytvořený obsah a zda existují oblasti, které konkurence naopak příliš dobře nepokrývá.

Výsledkem analýzy by neměl být závěr „uděláme to stejně“. Měli bychom naopak zjistit, kde existuje prostor udělat věci lépe, srozumitelněji nebo důvěryhodněji.

SEO nezačíná po dokončení webu

Častou chybou je představa, že nejdříve vytvoříme web a následně jej „uděláme pro SEO“. Jenže řada důležitých SEO rozhodnutí vzniká právě ve fázi, kdy ještě žádný web neexistuje.

Už při návrhu potřebujeme vědět, jak lidé jednotlivé služby nebo produkty hledají, jak spolu souvisejí jednotlivá témata a zda některá z nich potřebují vlastní vstupní stránku. Tyto informace ovlivňují strukturu webu, názvy jednotlivých sekcí, URL adresy, interní prolinkování i samotný obsah.

Představme si firmu, která nabízí deset různých služeb. Pokud všechny popíšeme několika větami na jediné stránce „Služby“, můžeme později zjistit, že pro vyhledávače i návštěvníky by bylo mnohem vhodnější vytvořit pro jednotlivé oblasti samostatné kvalitní stránky.

To je rozhodnutí, které je výrazně jednodušší udělat před návrhem webu než několik měsíců po jeho spuštění.

Informační architektura: kostra budoucího webu

Jakmile známe cíle, zákazníky, nabídku a obsahové priority, můžeme začít vytvářet informační architekturu. Jednoduše řečeno určujeme, jaké informace na webu budou, jak budou rozdělené a jak se mezi nimi bude návštěvník pohybovat.

Výsledkem může být například mapa webu, ve které máme hlavní stránku, jednotlivé služby, reference, případové studie, odborný obsah, informace o společnosti a kontaktní část. U rozsáhlejších projektů samozřejmě může jít o stovky nebo tisíce stránek, produktových kategorií a různých typů obsahu.

Důležité je, že strukturu nevytváříme podle toho, jak má firma rozdělená interní oddělení. Návštěvník tuto strukturu většinou nezná a ani ho nezajímá. Potřebujeme vytvořit systém, ve kterém dokáže předvídat, kde požadovanou informaci najde.

Informační architektura tak tvoří jakousi kostru celého budoucího webu. Pokud ji vytvoříme špatně, grafický design ani kvalitní programování tento základní problém úplně nezachrání.

Neřešíme pouze stránky. Řešíme cestu návštěvníka

Samotná mapa webu nám ale ještě neříká, jak se bude člověk při návštěvě skutečně chovat. Proto se díváme také na jednotlivé uživatelské cesty.

Někdo přijde na hlavní stránku po zadání názvu firmy. Jiný přistane přímo na konkrétní službě z Googlu. Další otevře případovou studii, kterou našel na sociálních sítích. A někdo se dostane rovnou na odborný článek.

Každá z těchto stránek proto musí fungovat také jako možný vstupní bod.

Návštěvník by měl pochopit, kde se nachází, co firma nabízí a kam může pokračovat. Nemůžeme navrhovat web s představou, že všichni začnou na homepage a následně budou poslušně procházet menu zleva doprava.

Zvlášť u webů s významnou návštěvností z vyhledávačů může být homepage pouze jedním z mnoha vstupů do celého systému.

Obsah by měl vznikat dříve než finální design

Při tvorbě webů se často používají provizorní texty typu Lorem ipsum a skutečný obsah se doplní až na konci projektu. Tento postup může být problematický, protože design potom vzniká pro obsah, který ve skutečnosti neexistuje.

Reálný text může být výrazně delší. Služba může potřebovat tabulku, několik fotografií, technické parametry, reference nebo často kladené otázky. Jiná stránka naopak téměř žádný text nepotřebuje.

Proto bychom měli alespoň rámcovou podobu obsahu znát ještě před finálním grafickým návrhem. Nemusí být každá věta definitivní, ale potřebujeme vědět, jaké informace stránka obsahuje, jaká je jejich priorita a jaký úkol má stránka plnit.

Design potom podporuje obsah. Nesnažíme se dodatečně vměstnat obsah do předem připravených barevných boxů.

Wireframe řeší funkci dříve než vzhled

Teprve v této fázi začíná dávat smysl vytvořit wireframe, tedy zjednodušený návrh rozložení jednotlivých stránek. Bez barev, finálních fotografií a efektních grafických prvků můžeme řešit především hierarchii informací.

Co návštěvník uvidí jako první? Jaké informace potřebuje před zobrazením reference? Kde má být výzva ke kontaktu? Potřebujeme na stránce cenovou tabulku? Jak bude vypadat formulář? Co se stane po jeho odeslání?

Wireframe umožňuje podobné otázky řešit relativně levně. Přesunout blok v jednoduchém návrhu je podstatně jednodušší než předělávat hotovou naprogramovanou stránku.

Právě zde se začíná spojovat obchodní strategie, obsah a uživatelská zkušenost do konkrétní podoby budoucího webu.

Technické požadavky potřebujeme znát ještě před programováním

Přestože jsme stále před samotnou technickou realizací, právě teď je potřeba definovat její požadavky. Web totiž není pouze to, co návštěvník vidí na obrazovce.

Musíme vědět, kdo bude obsah spravovat, jak často se bude měnit, zda potřebujeme více jazykových verzí, napojení na CRM, účetní systém, sklad, rezervační systém, newsletter, platební bránu nebo externí API. Potřebujeme znát očekávanou návštěvnost, práci s uživatelskými účty, oprávnění administrátorů, požadavky na zálohování nebo případný další rozvoj.

Právě tyto informace pomáhají rozhodnout, jakou technologii vůbec použít.

Vybrat redakční systém ještě před pochopením projektu je trochu obrácený postup. Technologie by měla vycházet z požadavků projektu, nikoliv projekt z možností technologie.

Myslíme na výkon, přístupnost a bezpečnost ještě před realizací

Rychlost, přístupnost nebo bezpečnost webu nejsou věci, které bychom měli řešit až několik dní před spuštěním. Některá rozhodnutí jsou součástí samotného návrhu.

Pokud například grafický koncept počítá s několika obrovskými videi na úvodní stránce, bude mít toto rozhodnutí dopad na výkon. Pokud od začátku neřešíme dostatečný kontrast, ovládání klávesnicí nebo srozumitelnou strukturu formulářů, budeme později přístupnost pracně opravovat. A pokud nevíme, jaká data bude web zpracovávat a na jaké externí služby se bude napojovat, nemůžeme dobře navrhnout ani jeho bezpečnostní architekturu.

Kvalita webu proto nevzniká závěrečným checklistem před spuštěním. Musí být součástí rozhodování od začátku projektu.

Ještě před vytvořením webu bychom měli vědět, jak změříme jeho úspěch

Pokud jsme si na začátku stanovili cíle, měli bychom zároveň určit způsob jejich měření.

U poptávkového webu nás může zajímat počet odeslaných formulářů, telefonických kontaktů nebo konkrétních obchodních příležitostí. U e-shopu sledujeme objednávky, konverzní poměr nebo hodnotu nákupního košíku. U obsahového projektu mohou být důležité návštěvy z organického vyhledávání, odběry newsletteru nebo přechody na produktové stránky.

To zároveň znamená, že analytiku nemůžeme řešit až po spuštění. Už při návrhu potřebujeme vědět, které události a konverze chceme měřit.

Jinak můžeme za půl roku zjistit, že máme nový web, ale stále nedokážeme odpovědět na jednoduchou otázku: funguje lépe než ten předchozí?

Až nyní přichází grafika a programování

Po celé této přípravě konečně přichází část, kterou si většina lidí představí pod pojmem tvorba webu. Vytvoří se vizuální systém, navrhnou jednotlivé komponenty a responzivní chování a následně začne samotná technická realizace.

Rozdíl je v tom, že programátor už nepracuje s neurčitou představou „udělejte nám nějaký moderní web“. Má před sebou promyšlenou strukturu, definované typy obsahu, funkční požadavky, uživatelské scénáře a konkrétní cíle.

A grafik nenavrhuje pouze něco, co dobře vypadá na monitoru. Ví, které informace jsou důležité, co má návštěvník na stránce udělat a jak jednotlivé prvky podporují jeho rozhodování.

To je obrovský rozdíl.

Nejdražší změny jsou ty, které objevíme příliš pozdě

Možná se může zdát, že podobná příprava celý projekt zbytečně prodlužuje. Ve skutečnosti často šetří čas i peníze.

Změnit položku ve struktuře webu zabere několik minut. Změnit wireframe může znamenat půl hodiny práce. Změnit stejnou věc ve chvíli, kdy máme hotový design, naprogramované šablony, naplněný obsah a vytvořené návaznosti v administraci, může znamenat předělávání několika částí projektu.

Čím později zjistíme, že jsme na začátku položili špatnou otázku, tím dražší bývá odpověď.

Proto nepovažujeme přípravnou fázi za čas strávený před tvorbou webu.

Ona už je součástí tvorby webu.

Profesionální web tedy nezačíná u počítače?

Samozřejmě že většina přípravy dnes také probíhá u počítače. Princip je ale jiný.

Nezačínáme výběrem šablony, barvy tlačítka ani tím, zda bude web vytvořen ve WordPressu nebo jinou technologií.

Začínáme podnikáním.

Potom zákazníkem.

Následují cíle, data, konkurence, obsah, SEO, informační architektura, uživatelské cesty a funkční požadavky. Teprve na tomto základě můžeme kvalifikovaně rozhodovat o designu a technickém řešení.

Protože dobrý web není výsledkem toho, že jsme správně naprogramovali zadání.

Dobrý web vzniká především tehdy, když jsme na začátku správně pochopili problém, který máme vyřešit.

Přemýšlíte o novém webu?

V MACKMAN nezačínáme otázkou, jakou chcete barvu nebo jaká šablona se vám líbí. Nejdříve potřebujeme pochopit vaše podnikání, zákazníky a to, co má nový web skutečně přinést.

Teprve potom navrhujeme jeho strukturu, obsah, design a technické řešení.

Protože samotné naprogramování webu je až jedna z posledních částí procesu.