Město Kyjov

Město Kyjov

Kyjov spravuje správní obvod 42 obcí s 55 000 obyvateli a zároveň pečuje o kulturní identitu regionu – od mezinárodního festivalu Concentus Moraviae po tradiční masopustní Fašaňk. Pro město, které slouží takto širokému okruhu lidí, přestává být web pouhou prezentací a stává se klíčovou infrastrukturou.

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:

1. 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í.
2. 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.
3. 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

Projekt probíhal od ledna do prosince roku 2023, kdy byl symbolicky spuštěn s příchodem nového roku. Celková délka realizace činila 12 měsíců. Na projektu se podílel tým 6 odborníků, web obsahuje přes 20 šablon a integruje několik externích systémů.

Postup vývoje a technické realizace

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 od klienta i občanů. Celý proces byl rozdělen do pěti klíčových etap:

1. 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í.
2. Prototypování: Navrhli jsme interaktivní model, díky kterému si město mohlo web „osahat“ a vyzkoušet ještě předtím, než se napsal první řádek kódu.
3. Design a kódování šablon: Schválené grafické návrhy jsme přeložili do čistého kódu podle principu „Mobile First“. To zajistilo, že se web načítá bleskově a vypadá skvěle především na mobilech, které jsou pro občany prioritní.
4. Nasazení na CMS Jarvis: Hotové šablony jsme propojili s naším redakčním systémem Jarvis. Nastavili jsme intuitivní moduly tak, aby úředníci mohli snadno spravovat obsah a vkládat dokumenty bez pomoci programátora.
5. Testování a integrace: Web jsme napojili na městské databáze a sociální sítě. Před spuštěním jsme vše důkladně prověřili z hlediska bezpečnosti a rychlosti na všech typech zařízení.

Samotná implementace kladla velký důraz na uživatelskou přívětivost. Kódování probíhalo s využitím moderních technologií, které podporují stabilitu a snadnou údržbu systému. Zásadním krokem bylo zapojení beta testerů z řad reálných uživatelů. Jejich hodnotná zpětná vazba nám umožnila doladit detaily v ovládání webu tak, aby byl pro každého občana Kyjova intuitivní a srozumitelný. Výsledkem je živý, propojený systém, který prezentuje nejaktuálnější informace v moderním a bezpečném prostředí.

Využité technologie

Základ webu tvoří PHP framework Nette — zvolili jsme ho záměrně pro jeho silnou bezpečnostní architekturu, která je pro web veřejné instituce klíčová, a pro nativní podporu modularity, jež usnadňuje budoucí rozšiřování bez zásahu do jádra systému. Redakční systém Jarvis je naším vlastním řešením navrženým přímo pro potřeby měst a obcí — na rozdíl od generických CMS nepotřebují úředníci žádné technické znalosti a veškerá správa obsahu probíhá přes přehledné rozhraní. Vizuální vrstva postavená na Tailwind CSS zajistila konzistenci designu napříč všemi šablonami při zachování rychlosti načítání — mobilní verze dosahuje Lighthouse performance score přes 90 bodů.

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ě. 

Při porovnání stejného období rok před a rok po spuštění vzrostl počet aktivních uživatelů na desktopu o 131 %, zatímco mobilní uživatelé si udrželi stejnou míru zapojení (69 %). Na desktopu se průměrná doba zapojení zkrátila z 300 na 245 sekund — uživatelé u počítače nacházejí informace rychleji a nepotřebují web tak dlouho procházet. Na mobilních zařízeních a tabletech naopak doba zapojení vzrostla, což odpovídá bohatšímu obsahu a větší provázanosti informací, které nový web nabízí. Web tedy oslovil nové skupiny uživatelů, aniž by zhoršil zkušenost těch stávajících.

Nejefektivnější struktura webu

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 po svém vyučení 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 sekci „Podnikání, OSVČ”, kde hned najde „Zřízení živnostenského listu“. 

Podobně podnikatelka Dagmar,  jež provozuje květinářství na náměstí a potřebuje denně parkovat před svým obchůdkem, už nemusí pátrat pro vyřízení parkovací karty pod nejasným pojmem „Silniční hospodářství“, ke kterému by se proklikala přes „Potřebuji vyřídit" a „Doprava a řidiči". Nově ji menu vede přímočaře přes odkaz „Doprava a řidiči" přímo k sekci „Parkovací karty".

Na základě těchto zjištění jsme navrhli novou informační architekturu hlavního menu, jež je rozdělena do tematických sekcí:

• O Kyjově: noviny, aktuality, webkamery
• Potřebuji vyřídit: osobní doklady, poplatky, doprava, podnikání, bydlení, školství
• Město a úřad: městský úřad, město, městská policie, úřední deska
• Volný čas: sport, kultura, informační centrum, půjčovna a úschovna kol
• Kontakt: úřední hodiny, rychlé spojení

Abychom navigaci na mobilních zařízeních co nejvíce usnadnili, pracovali jsme s variantou jednoúrovňové struktury hlavního menu, která je pro nahlédnutí přiložena níže. Ta radikálně zjednodušuje orientaci, protože uživatel vidí vše podstatné hned. 

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. Kromě reprezentativní úvodní strany jsme navrhli specifické výpisy kategorií, jako je klíčová sekce „Potřebuji vyřídit“, která funguje jako intuitivní rozcestník pro praktické informace. Pamatovali jsme i na různorodost obsahu – od klasických aktualit s náhledovými obrázky přes textové šablony pro úřední dokumenty. Celý systém doplňují šablony pro multimediální galerie, přehledné kontakty, digitální úřední desku a kalendář událostí. Důraz jsme kladli i na funkčnost výsledků vyhledávání, aby byla cesta k informaci vždy co nejkratší.

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.

Přístupnost a soulad se zákonem

Jako web veřejné instituce musí mestokyjov.cz splňovat požadavky zákona č. 99/2019 Sb. o přístupnosti webových stránek, který vychází ze standardu WCAG 2.1 na úrovni AA. Tomu jsme přizpůsobili celý designový systém: barevné kontrasty splňují minimální poměr 4,5:1, všechny interaktivní prvky jsou ovladatelné klávesnicí, obrázky mají alternativní textové popisy a formuláře jsou čitelné pro odečítače obrazovky. Web prošel auditem přístupnosti před spuštěním i po něm.

Klíčové funkce 

Nový web Kyjova není jen o informacích, ale o interakci a usnadnění každodenního života. Implementovali jsme řadu chytrých funkcí, které přemosťují propast mezi digitálním světem a realitou. Mezi ty nejzásadnější patří:

Dynamické online formuláře

Umožňují občanům vyřídit žádosti přímo z domova, čímž eliminují nutnost fyzické návštěvy úřadu.

Chytrý kalendář s importem

Každou událost nebo kulturní akci lze jedním kliknutím uložit přímo do kalendáře v mobilním telefonu.

Digitální vizitky zaměstnanců

Kontakty na konkrétní úředníky lze stáhnout ve formátu vCard přímo do mobilního seznamu, včetně provázání na jejich odbory a úřední hodiny.

Fulltextové vyhledávání 

Výkonný našeptávač, který okamžitě najde dokumenty, kontakty i aktuality napříč celým webem.

Kontextuální provázanost 

Žádná informace nestojí osamoceně – u každého článku uživatel hned vidí zodpovědnou osobu, mapu daného pracoviště a příslušné kontakty.

Modul odběru novinek 

Automatizovaný systém, který doručuje aktuality a důležitá upozornění přímo do e-mailových schránek registrovaných zájemců.

Vizuální navigace

Jednotný systém ikon a barevného kódování, který okamžitě napoví, ve které sekci se uživatel nachází, a usnadňuje skenovatelnost textu.

Offline orientační mapa

Unikátní nástroj pro fyzickou orientaci mezi třemi hlavními budovami úřadu rozsetými po městě.

Díky těmto inovacím web konečně funguje jako obousměrný komunikační kanál. Zatímco občané oceňují intuitivní nástroje v kapse, administrátoři mají v rukou efektivní systém Jarvis, který jim umožňuje s daty pracovat rychle a bez chyb.

Nový web Kyjova dnes slouží tisícům občanů i návštěvníků města každý měsíc. Splnil cíle, které jsme si na začátku společně s městem definovali — zjednodušit přístup k informacím, odlehčit práci úředníkům a důstojně reprezentovat město online.