Jsem Web (UX) architekt a SEO konzultant

Jak si představuji zadávací dokumentaci webu

zadávací dokumentace wwwDnes jen výjimečně vznikají zadávací dokumentace na tvorbu webů dle potřeb budoucích majitelů. Obvykle vznikají zadání („nabídky“), které připravují sami budoucí tvůrci – tedy programátoři a vývojáři. Tyto nabídky samozřejmě vychází z potřeb vývojářů a omezují se obecné formulace. Pokud v průběhu vývoje webu vznikají placené více práce, často jsou na základě argumentu „Nebylo v zadání“.

Tímto článkem se snažím dát majitelům webů „osnovu“  pro vytvoření zadání, vývoj a údržbu budoucího webu.

Rád vytvářím zadání pro weby, které budou provozovány na redakčním systému WordPress, protože jsou u něho předem známé jeho možnosti administrace i dodatečných funkcí. Proto je tvorba zadání pro WordPress kratší a levnější.

Cílem tohoto článku není popis tvorby návrhu webu a wireframe, ale i tak doporučuji, aby práce web architekta vycházela z hlavních myšlenek:

  • Jaké jsou měřitelné a neměřitlené cíle webu, které stránky by si měl návštěvník otevřít
  • Za jakých okolností lidé web obvykle používají, UX,  (persony)
  • Jaký je důvod pro opakování návštěv
  • Kdo bude web plnit obsahem

Vyplatilo se mi, předem podmínit počet kol připomínek zadavatele k jednotlivým krokům tvorby skic, wireframe, grafiky webu, obsahu a testování.

Obsahové zadání

Pokud z analýzy vyplyne, že je smysluplné vytvořit např. 80 stránek, je úkolem dodavatele webu navrhnout, vytvořit a naplnit všechny tyto stránky? Ano i ne. Záleží jak se domluvili.

Plnění webu je nejčastějším důvodem zdržení při publikaci webu a potenciálním problémovým místem. Doporučuji smluvně omezit počet vytvářených stránek. A omezení prací na maximálně X počtu úpravy obrázků, animací, videí, grafiky, vlastních ikon, animovaných gifů, položek či normostranách textu …

Při návrhu webu se používají takzvané „typy“ stránek. Jedná se o navržené designové šablony, které se na webu jednou či více krát opakují. Dle smlouvy dodavatel webu obvykle naplní obsahem určený počet těchto typů stránek. Ostatní stránky po zaškolení vytváří a plní klient. Zadání týkající se obsahu webu má obsahovat

  • seo-nastaveniwireframe nebo  s kompletním obsahem a popisem chování jednotlivých typu statických a dynamických stránek (např. úvodní stránky, kontakt)
  • wireframe s kompletním obsahem podstránek dynamických stránek (např. filtrování a stránkování zboží v eshopu). Na podstránkách tvorba dynamického URL, titulek, obsahu
  • kompletní rozpis a chování navigačního menu, možnosti administrace
  • zachování kontinuity a URL se starší verzí webu, přesměrování
  • grafika jednotlivých stránek
  • textový obsah využije klíčová slova
  • Popis použitých technologií a
  • popis formátovacích značek na každé stránce (např. nadpisy H1, H2, div..)
  • navržené Title, Description

Generované dynamické podstránky

Za generované dynamické podstránky považuji například výsledky filtrace zboží v eshopu, stránkování článků, archiv článků řazený dle data či štítků. Obvykle se jedná o stránky které generuje sám administrační systém (CMS). U  těchto stránek doporučuji předem vymyslet a definovat jak se bude měnit obsah. Protože často neexistuje v administrace jakákoli dodatečná možnost je změnit.

  • jak se bude měnit nadpis, titulek, description na stránkách (např. slovně či číselně) pro omezení dupolcit
  • generování a funkce URL
  • možnost editace textů
  • funkčnost bez JavaScriptu – důležité pro SEO
  • Vzhled „archivního“ produktu v eshopu

Transakční stránky a funkční prvky

V zadání se obvykle zapomíná definovat obsah, chování a vzhled stránek, které jsou klíčové pro plnění cílů webu. Typicky se jedná o:

  • chování nákupního košíku
  • průchod nákupem v eshopu, registrací, přihlášením
  • platba pomocí platební brány třetí strany (PayU, GOpay…)
  • kontaktní formulář a děkovací stránky
  • chování a vzhled přihlášení k newsletteru
  • ovládání vložené mapy
  • přepis Capthy, a podobně

Výše uvedené po spuštění řešívají UX specialisté, kteří radí jak zpětně funkce opravit, tak aby šlo web „rozumě“ používat a cíl dokončit.

 Statické – needitovalné prvky

Web obsahuje texty a prvky, které nelze v administraci editovat, obvykle se jedná obrázek v hlavičce webu, patička webu. Je vhodné v rámci zadání tyto části vyjmenovat a předně definovat jejich obsah.

Tyto prvky také bývají jádrem sporů, kdy si dodavatel webu nechá platit za změnu obrázku či textu. Doporučuji mít co nejméně těchto needitovatelných prvků a proto vytvořit požadavky na jejich administraci.

Dynamické chování prvků

Za dynamické prvky stránek například považuji:

  • navigační menu
  • přepínání záložek a accordionů
  • posun textů a obrázků ve sliderech
  • pohyb slideru na úvodní stránce
  • otevírání fotek
  • chování odkazu typu kotva atd.

Všechny tyto prvky ovlivňují SEO hodnocení stránky a přímo souvisí s UX. U těchto prvků doporučuji definovat jak se budou chovat pokud například v krajních mezích (žádná fotka, dlouhý nadpis, či text, odkaz z fotky…) . A zároveň definovat jak se kliknutí na tyto prvky projeví pomocí kotev (záložek) v URL adrese. Definovat skrývání a pohyb prvků pomocí CSS nebo Java Scriptu.

Zadání back-end

V mém pojetí jsou Back-ned stránky viditelné pouze v administraci. Jedná se například o „správa objednávek v eshopu, nebo správa registrovaných uživatelů“. Rozsáhlé funkce na back-endu jsem viděl u transakčních webů, eshopů či katalogů. Pokud plánuje mít eshop, rozhodně vytvořte zadání na back-end. Dobře vytvořená back-end administrace pomůže eshopařům například v:

  • zobrazit zaplacené naskladněné zboží a čísla objednávek, které je určeno k odeslání pomocí přepravní služby
  • automaticky poslat SMS, že zboží je posláno přepravní službou či je připraveno k vyzvednutí
  • importovat stav doručení balíků k jednotlivým objednávkám
  • zvýraznit ty objednávky které nikdo nepřevzal nebo vrátil přepravní službě
  • zobrazit pouze aktivní zboží, skrýt zboží které není v nabídce …

 

Administrace webu

Samostatnou kapitolou jsou možnosti úprav jednotlivých stránek, menu a celkově webu. Mnohokrát jsem se setkal s amatérským řešením redakčního systému, v kterém nešlo upravit Titulek stránky aniž by se nezměnila jiná část webu.  Abych předcházel těmto nepříjemným překvapením pro většinu prezentačních webů doporučuji používat zmiňovaný Worpdress. Zde lze snadno editovat tyto prvky statických stránek :

  • Základní SEO prvky Titulek, URL, H1, Description statických, dynamických i generovaných stránek
  • formátovací značky, divy
  • způsob editace složitějšího obsahu (plugin VisualComposer, přes editory, v HTML)

Specifikovat:

  • administrace statických – needitovatelných prvků
  • administrace dynamických prvků
  • administrace generovaných dynamických podstránek

 

Technické zadání

Pokud znamená “ Výstupem je běžící a fungující web připravený na plnění obsahem „, že bude web plně v naší režii, poté bych vytvořil „technické zadání“ kterým předejdeme případným budoucím rozporům o to co se opravuje zdarma a co je více práce:

  • aktuální verze Worpressu, PHP, DB , v české jazyce
  • URL stránek čistém tvaru
  • validní každá stránka dle https://developers.google.com/speed/pagespeed/insights/ (min  80%)
  • validně řazené nadpisy typu H
  • vyplněné Title, Description
  • zvýšení bezpečnosti wordpressu (změna názvů tabulek v databázi, změna Admina, zákaz PHP scriptů ve vybraných adresářích, captcha na přihlášení, změna admin stránky, aktivace Spam filtru Askimet…)
  • Velikost stránky, omezení nahrávaných velikosti obrázků, kódů
  • Vložené CSS styly, java script atd
  • Mapa stránek, vytvořený soubor sitemaps.xml
  • Nastavení souboru www.vasweb.cz/robots.txt pro roboty Google, Seznam
  • Popis použitých technologií a formátovacích značek na každé stránce (např. nadpisy H1, H2..)
  • Převod staršího obsahu na nový web, včetně URL
  • použití v kódu značky Rich snippets, re=“canonical“, prev, next
  • vložení validačních značek Google Search console, kódů Tag manager či Google Analytics
  • v eshopech používat propracované a inteligentní XML pro srovnávače, nastavení měření elektronického obchodu Google
  • nastavení rozpoznání jazykových mutací, možnost jejich změny

 

Právní aspekty a záruky

V poptávce i nabídce bych zmínil právní aspekty webu, následný provoz a zálohování:

  1. dodržení termínů je závislé na dodání obsahových materiálů od objednatele
  2. kdo je majitelem kódu před – po předání
  3. označení tvůrce webu v kódu a patičce webu
  4. kdo je majitelem obsahu a obrázků z foto bank (např. ze Shuter stocku jsou práva nepřenositelná)
  5. ztráta záruky (zásah do kódu třetí stranou, činnostmi snižující bezpečnost webu, např. posílání hesla, slabá hesla, instalace pluginů, ….)
  6. ztráta záruky třetí stranou – provoz na nedostatečně zabezpečeném hostingu
  7. napadení webu virem, hackery, nefunkčnost
  8. kdo, co a jak bude web zálohovat, vrácení zálohy a ztráta dat.
  9. způsob předání (např. přístupy na FTP, zaslání v zipu)

Zde je dobře napsaný článek o „Smlouva o dílo z pohledu programátora a grafika“

Školení

Určitě doporučuji nabídnout klientovi zaškolení tvorby obsahu pro web a obsluhy webu. Zde zahrnout jak přemýšlet nad:

  • tvorbou obsahu v souvislosti s klíčovými slovy
  • tvorbou titulků, názvů URL, formátování textu
  • úpravou rozměrů obrázků před nahráním do webu
  • administrace title, meta description, úpravy menu a podobně
  • ovládání back-end stránek

Ve výsledku tuto službu klient vědomě či nevědomě dostane. Čím dříve ji dostane tím lépe pro něj i pro SEO.

 Co není v zadání

Doporučuji vytvořit kapitolu „Co v zadání výslovně není „. Výčet níže je pouze vzorový, bude nutné jej upravit dle reality. Na tento seznam se tedy nemohou záruky a vady oproti domluvenému „zadání“. Např.

  • tvorba textů mimo navigačního menu
  • vzhled a funkčnost responsivity
  • testování na více zařízeních a více prohlížečích
  • rychlost načítání stránek
  • vytváření obsahu (mimo definovaný rozsah)

Tento článek rozhodně není vyčerpávající a vše objímající. Spíše se snaží ukázat na rozsah aktivit které se vážou s zadávací dokumentací. Nejlépe propracované zadávací dokumentace mívají instituce státní správy u které se lze také inspirovat.

Další články o zadávací dokumentaci:

http://www.dobryweb.cz/zadavaci-dokumentace

Ztrata-casu.cz

 

Přidej komentář



Menu