Město Kyjov

Město Kyjov

Kyjov není jen jihomoravské malebné město v centru Kyjovské pahorkatiny. Jako obec s rozšířenou působností obsluhuje správní obvod se 42 obcemi a 55 000 obyvateli. Pro město této velikosti a významu je kvalitní informovanost naprostou nezbytností – ať už jde o obeznámenost 11 000 místních občanů, nebo o prezentaci kulturních klenotů, jako jsou Concentus Moraviae či legendární masopustní Fašaňk.

Původní web

Prvotním impulsem k realizaci nového webu byla kritická potřeba zásadní systémové změny. Původní digitální prezentace města byla ukázkou špatných datových struktur, kde jakýkoliv úkon komplikovala nepřehledná orientace a technologická zastaralost. Náročná správa a údržba dat zbytečně znesnadňovaly práci vedení i správcům webu, zatímco občané naráželi na duplicitní obsah a nepřehlednost, kvůli čemuž vázla i informovanost. Bez pořádné optimalizace pro mobilní zařízení a s designem, který již dávno nesplňoval estetické ani funkční standardy, web přestal sloužit svému účelu. 

Cíle projektu

Všechny nedostatky původního řešení jsme konzultovali i s garanty jednotlivých odborů a s občany během osobních workshopů. Sumarizací požadavků vzniklo jasné zadání: postavit systém, který bude Kyjov reprezentovat jako moderní a otevřené město. Mezi hlavní priority patřilo:

• Uživatelská přívětivost: vytvořit intuitivní navigaci a přehlednou strukturu informací, díky které je veškerý obsah dostupný na jedno kliknutí.
• Efektivní správa a rozvoj: zjednodušit administrativní práci úředníkům a připravit systém pro snadnou integraci budoucích digitálních služeb.
• Responzivita a vizuální čistota: navrhnout moderní design, který zajistí plnou funkčnost na všech typech zařízení a podpoří snadnou skenovatelnost textu pro rychlou orientaci uživatele.

Metodologie

Postup vývoje

Pro vývoj projektu jsme zvolili agilní přístup, který nám umožnil flexibilně reagovat na potřeby města a průběžně ladit detaily na základě zpětné vazby. Celý proces byl rozdělen do několika klíčových fází, které na sebe logicky navazovaly. 

• Analýza a drátěné modely: nejdříve jsme rozklíčovali požadavky úřadu i občanů a vytvořili „kostru“ webu (wireframy), abychom si ujasnili logiku a strukturu informací.
• Prototypování: navrhli jsme interaktivní model, díky kterému si město mohlo web „osahat“ ještě předtím, než se napsal první řádek kódu.
• Design a statické šablony: schválené grafické návrhy jsme přepsali do čistého kódu. Vytvořili jsme sadu unikátních šablon, které zajišťují, že web vypadá skvěle a načítá se bleskově na jakémkoliv zařízení.
• Nasazení na CMS Jarvis: hotové šablony jsme propojili s naším redakčním systémem Jarvis. Nastavili jsme intuitivní editační pole a moduly tak, aby úředníci mohli snadno spravovat obsah, vkládat dokumenty nebo měnit aktuality bez pomoci programátora.
• Testování: před spuštěním jsme web důkladně zkontrolovali. Testovali jsme funkčnost, zabezpečení i to, jak se stránky zobrazují na všech typech zařízení.

Využité technologie

Dosažení vysoké úrovně funkcionality a estetiky by nebylo možné bez využití špičkových technologií. Jádro webu jsme postavili na programovacím jazyce PHP – to je "mozek" celého webu, který řeší veškerou logiku, výpočty a propojení s databázemi. Pro stabilitu jsme využili uznávaný framework Nette, který zaručuje maximální bezpečnost a výkon. Pro správu obsahu slouží náš redakční systém Jarvis, v němž lze snadno pracovat s texty i multimédii. Ty systém bezpečně ukládá a následně formuje do čistého HTML kódu, což je základní stavební kámen, který určuje strukturu a rozložení prvků na stránce. Vizuální stránku a bleskovou rychlost načítání jsme zajistili pomocí Tailwind CSS. Tento moderní nástroj pro stylování nám umožnil efektivně pracovat přímo v HTML struktuře a vytvořit tak dokonale responzivní rozhraní. Interaktivitu webu pak vdechl život JavaScript, který se stará o to, aby web na akce uživatele okamžitě reagoval. 

Tým a role jednotlivých členů

Úspěch projektu zajistil sehraný tým odborníků, z nichž každý vnesl do Kyjova své specifické know-how. Projektový manažer dbal na hladkou komunikaci s městem a dodržování harmonogramu, zatímco UX designér s grafikem se soustředili na ergonomii a vizuální identitu, která město reprezentuje. O technickou realizaci se postarali kodér s programátorem, kteří přetvořili grafické návrhy do funkčního kódu a propojili je s dynamickými prvky systému. Aby byl web pro občany skutečně užitečný, content manager dohlédl na logickou strukturu textů a jejich optimalizaci, zatímco tester podrobil každou část webu přísné kontrole na různých typech zařízení, čímž zaručil bezchybný uživatelský zážitek.

Design a funkcionalita

Analýza dat a návštěvnost

Abychom web postavili na pevných základech, začali jsme důkladným výzkumem. V období od prosince 2022 do ledna 2023 jsme analyzovali chování uživatelů, konzultovali potřeby se zaměstnanci úřadu a prověřili konkurenční projekty.

Díky tomu jsme zjistili nejnavštěvovanější stránky, jako hlavní stránka, sekce "potřebuji vyřídit", městský úřad, osobní doklady, elektronické objednání, volný čas a turistika, kalendář událostí, dokumenty, život ve městě a odbory úřadu. Pohled analýzy na návštěvnost potvrdil, že lidé jdou na web najisto – 47,6 % tvořily přímé přístupy a 45,9 % vyhledávače, zatímco sociální sítě (2,9 %) byly jen okrajové.

Nejsilnějším argumentem pro radikální změnu designu byl však způsob přístupu. Naprostých 82,13 % návštěvníků přicházelo z mobilních telefonů, zatímco desktop využívalo jen 17,02 % a tablety 1,8 % lidí. Tato čísla byla jasným ukazatelem, na jaké prioritní zařízení je třeba se při realizaci webu zaměřit. Pomohla nám přesně definovat strukturu menu a prioritně rozmístit nejdůležitější stránky tak, aby ty nejhledanější úkony byly dostupné okamžitě. 

Návrh UX/UI: Od příběhů uživatelů k efektivní struktuře

Abychom si ověřili, že nové rozvržení bude skutečně funkční, vytvořili jsme uživatelské scénáře, které odhalily slabá místa původního webu.

Typickým příkladem je příběh malíře Petra, který si chce založit živnost. V původní struktuře by Petr musel bloudit v sekci „Potřebuji vyřídit“ a následně v „Podnikání“ prohledávat nepřehledné seznamy odkazů. Nová struktura mu nabízí zkratku – přes „Odkazy rychlého přístupu“ na hlavní straně se dostane přímo k bodu „Zřízení živnostenského listu“. Podobně podnikatelka Dagmar, která řeší parkovací kartu, už nemusí pátrat pod nejasným pojmem „Silniční hospodářství“. Nově ji menu vede přímočaře: Doprava a řidiči -> Parkovací karty.

Na základě těchto zjištění jsme navrhli novou informační architekturu rozdělenou do tematických sekcí:

• O Kyjově: (Novinky, aktuality, webkamery) – aktuální dění.
• Potřebuji vyřídit: (Osobní doklady, poplatky, doprava) – nejčastější úkony občanů.
• Město a úřad: (Úřední deska, volná místa, úřední hodiny, zaměstnanci) – servis a transparentnost úřadu.
• Volný čas: (Sport, kultura, informační centrum) – aktivní život ve městě.
• Kontakt: (Úřední hodiny, rychlé spojení).

Abychom navigaci na mobilních zařízeních (která tvoří přes 82 % návštěvnosti) co nejvíce usnadnili, pracovali jsme s variantou jednoúrovňové struktury hlavního menu. Ta radikálně zjednodušuje orientaci, protože uživatel vidí vše podstatné hned, bez nutnosti zanořovat se do složitých podmenu. Celý proces od drátěných modelů po interaktivní prototypy tak směřoval k jedinému cíli: vytvořit moderní rozhraní, které uživatele nezdržuje, ale provází.

Úvodní stránka je pomyslnou vstupní branou - jejím úkolem je návštěvníka okamžitě zaujmout, jasně představit identitu Kyjova a motivovat ho k dalšímu prozkoumávání obsahu. Proto jsme při jejím návrhu kladli maximální důraz na vizuální atraktivitu a jasnou hierarchii informací. Hlavní strana tak v současnosti funguje jako efektivní rozcestník: nabízí přehled nejnavštěvovanějších odkazů pro rychlé vyřízení úředních záležitostí, zobrazuje nejdůležitější aktuality z prostředí městské policie, láká na budoucí akce v kalendáři a prezentuje život ve městě skrze fotogalerii.

Aby byl web konzistentní a přehledný v každém svém zákoutí, definovali jsme sadu 16 unikátních šablon, které strukturovaně pokrývají veškerý obsah. Mezi ty klíčové patří:

• Servisní šablony: Speciálně navržené výpisy pro sekci „Potřebuji vyřídit“ a FAQ, které usnadňují orientaci v praktických informacích.
• Obsahové šablony: Různé typy stránek pro novinky a aktuality (s náhledovými obrázky i bez nich) nebo systémové stránky pro GDPR a cookies.
• Multimédia a interakce: Galerie, kalendář událostí s detailem akce a přehledné výsledky vyhledávání.
• Adresář a úřad: Strukturované výpisy kontaktů, detailní vizitky zaměstnanců a digitální podoba úřední desky.

Tento modulární systém šablon nám umožnil vytvořit prostředí, které je na jedné straně vizuálně čisté a moderní, ale na straně druhé technicky připravené pojmout obrovské množství různorodých informací, aniž by tím utrpěla uživatelská přívětivost.