Pasja zamieniona w czyn, czyli jak stworzyć dobry serwis miejski

Użytkownicy sieci przyzwyczaili się do wysokiej jakości usług internetowych. Tego również wymagają od gminnych stron WWW. Przejrzystość czy estetyka to ważne, ale nie kluczowe elementy witryny. Znaczenie ma przede wszystkim pełna informacja dla mieszkańców, turystów i inwestorów.

Projektując stronę internetową dla samorządu, nie można się kierować względami, które byłyby oczywiste przy tworzeniu witryny komercyjnej. Wiele elementów składowych musi się znaleźć w widocznym miejscu, niezależnie od tego, czy będą się „klikały”, czy nie. Warto też pamiętać, że samorządy rzadko wykorzystują do tworzenia stron profesjonalne firmy, ponieważ po prostu ich na to nie stać. Chcąc uniknąć oskarżeń o nadmierne wydawanie publicznych pieniędzy, włodarze często decydują się na zatrudnienie lokalnych informatyków bądź własnych pracowników.

Przy tak ograniczonych środkach finansowych liczą się zatem umiejętności i wyobraźnia projektanta strony WWW. Nie oznacza to jednak, że witryny te muszą być nieprofesjonalne i pozbawione funkcjonalności znanych nam z wiodących serwisów na rynku. Takim przykładem może być Wagrowiec.eu, oficjalny serwis miasta Wągrowiec.

W plebiscycie na Samorządową Perłę Internetu strona tego samorządu zdobyła pierwsze miejsce w kategorii „Miasto do 100 tys. mieszkańców”. Jak stwierdziło jury, witryna internetowa Wągrowca może się pochwalić przede wszystkim funkcjonalnie rozplanowaną stroną główną. W widocznym miejscu zamieszczono zakładki z dostępem do BIP, BOM i elektronicznej skrzynki podawczej. Strona umożliwia korzystanie z niej przez osoby niedowidzące. Bez zarzutu prezentuje się też layout – jest lekki i przejrzysty. Choć projektanci nie ustrzegli się błędów przy jej tworzeniu, wiele rozwiązań warto powtórzyć, tworząc strony dla mieszkańców.

1. Nagłówek i logo

Dla wielu nowoczesnych serwisów, w szczególności tych branżowych, elementy takie jak data czy obchodzone tego dnia imieniny nie mają żadnego znaczenia, a czasami są zbędnym i nieco staroświeckim elementem WWW. Jednak na stronie samorządowej mogą mieć charakter informacyjny i być jej ciekawym dopełnieniem. Tymczasem nagłówek Wagrowiec.eu zawiera o wiele więcej. Znajduje się w nim siedem ikon. Pierwsza pozwala na włączenie na stronie wysokiego kontrastu, ułatwiającego korzystanie osobom niedowidzącym. Kolejne sześć to ikony prowadzące bezpośrednio do kanałów społecznościowych wykorzystywanych przez Wągrowiec do komunikacji z mieszkańcami, jak i promocji własnego miasta: Facebook, Pinterest, Instagram, Twister i YouTube oraz kanał RSS. Niestety forma graficzna ikon pozostawia wiele do życzenia.

Netflix zbliża się do Polski. Konkurencja już szykuje armaty

Poniżej niezwykle ważna wyszukiwarka, szczególnie w przypadku dużej liczby informacji zamieszczanych na stronie. Strona Wagrowiec.eu wyświetlana jest w trzech językach (dodatkowo angielski i niemiecki), ale tylko w przypadku informacji turystycznych. I dobrze, bo trudno sobie wyobrazić, aby zagraniczni turyści poszukiwali informacji o cennikach wywozu odpadów. Natomiast koszty tłumaczenia całości serwisu byłyby niezasadne. Ważnym elementem jest również jasna wskazówka, że mamy do czynienia z oficjalnym serwisem samorządu, a nie stroną hobbystyczną czy komercyjną.

Trzeba przyznać, że Wągrowiec znalazł niezwykle ciekawy pomysł na logo. Zamiast wielkiego napisu „Miasto Wągrowiec” na całą szerokość strony wykorzystał przepiękną panoramę rynku, przecinając ją nazwą miasta i promocyjnym logotypem oraz hasłem. I co ważne, logo linkuje bezpośrednio do strony, nie tworząc martwego pola, co nie jest standardem na samorządowych witrynach.

2. Slajder

Pomimo że tego typu elementy strony są dosyć efektowne oraz dodatkowo informują o najważniejszych kwestiach, z jakimi chcą do mieszkańców/użytkowników dotrzeć twórcy strony, trudno stwierdzić, czy pomysł ostatecznie się udał. Na uwagę zasługuje podgląd pozostałych slajdów na wyświetlanym aktualnie obrazku. Niestety szybkość przewijania powoduje, że trudno się skupić podczas przeszukiwania kolejnych elementów strony, np. menu głównego. Co prawda można ów element zastopować, ale ikona do tego przeznaczona jest słabo widoczna.

3. Menu

Wagrowiec.eu posiada dwa takie elementy strony. Pierwsze znajduje się pomiędzy logotypem a slajderem. Czytelny podział na informacje dla mieszkańców, turystów i inwestorów, w połączeniu z korespondującą z logo kolorystyką, zasługuje na pochwałę. Niestety, nieco przeszkadza wspomniany wcześniej slajder.

Drugie menu po lewej stronie to powtórzenie informacji zawartych na górze, również z bardzo czytelnym podziałem na linki do stron statycznych. Wśród nich znajdziemy odnośniki do komunikacji miejskiej, pomocy społecznej czy przetargów. Standardowym wyposażeniem witryny samorządowej są też linki do BIP, biura obsługi mieszkańca, skrzynki podawczej czy Dziennika Ustaw i Monitora Polskiego. Wykorzystano do tego czytelne banery.

4. Główne treści

Aktualności to najważniejsza część całej witryny. Wągrowiec zdecydował się na standardowy tytuł plus lead „wiadomości” oraz opcjonalne zdjęcie z danego wydarzenia, co nadaje stronie nieco mniej formalny i urzędowy charakter. Kluczową kwestią jest data zawarta w wiadomości. Informuje ona o bieżącym aktualizowaniu prowadzonego serwisu. Niezwykle rzadkim zabiegiem na stronach samorządowych jest tematyczny podział umieszczanych informacji. Jest to spora zaleta Wagrowiec.eu. Dzięki temu w łatwy i przystępny sposób mieszkańcy mogą sortować informacje na typowo urzędowe, kulturalne czy sportowe.

5. Prawa strona

Znajdują się na niej dwa kolejne slajdery, co gorsza, na tej samej wysokości, co główny. W połączeniu daje to efekt niespójności strony i przeszkadza w jej przeglądaniu, mimo ciekawych treści w nich zawartych. Można powiedzieć, że ten zabieg zaburza harmonię całej strony, a użytkownik w żaden sposób nie dotrze do treści, które tak bardzo chciano wyróżnić. Ale poniżej mamy prawdziwy strzał w dziesiątkę, czyli kalendarium imprez organizowanych w mieście. Dzięki temu mieszkańcy wchodzący na stronę mogą dowiedzieć się o pięciu najbliższych ofertach kulturalnych i rozrywkowych w ich okolicy.

Jedną z funkcjonalności samorządowych stron internetowych, jakie oceniano, wybierając Samorządową Perłę Internetu, była obecność e-urzędu. Doskonale widoczny baner znajduje się na Wagrowiec.eu pod harmonogramem imprez.

Kolejnym elementem po prawej stronie jest kilka dosyć niespójnych tematycznie banerów, umiejscowionych do dołu strony. Jednak ich projekt graficzny jest tak doskonale dopracowany, że trudno mieć pretensje o różnorodność zawartych tematów. Znalazły się tam m.in. informacje o programach społecznych realizowanych przez miasto, np. projekt skierowany do mieszkańców, którzy mają na utrzymaniu troje lub więcej dzieci. Nie przez przypadek znalazł się tam również niezwykle ważny harmonogram zbiórki odpadów komunalnych na terenie samorządu. Jest to jedna z najbardziej poszukiwanych informacji na stronach samorządowych. Mamy tu podzieloną na obszary zbiórki odpadów interaktywną mapę, jak i opisy tras oraz harmonogram odbioru. Tym samym twórcy strony udostępniają użytkownikom najbardziej pożądane przez nich treści w wizualnie przystępnej formie, których musieliby szukać w menu czy wyszukiwarce. Ale to nie koniec.

Na uwagę zasługuje również baner do lokalnego przysmaku czy też tradycyjnego produktu, jakim szczyci się Wągrowiec, czyli kawy cystersko-pałuckiej. Niewątpliwie ten pomysł warto powielać na innych stronach samorządowych, gdyż jest to świetny sposób na promocję miasta i jego regionalnych atrakcji kulinarnych, a nie tylko zabytków.

Nowatorski projekt na aplikację mobilną, jak i możliwość pobrania jej za pomocą kodu QR bezpośrednio ze strony głównej już mniej cieszy, szczególnie że działa wyłącznie na telefony z systemem Android.

Dalej jest sekwencja kolejnych banerów prezentujących w całej krasie miasto i jego turystyczne walory. Mamy zatem funkcjonalność wirtualnego spaceru po mieście, plan Wągrowca czy widok z kamer internetowych na najbardziej atrakcyjne punkty w centrum. Na koniec można się zapoznać z inwestycjami w Wągrowcu, pobrać wybrane publikacje urzędu, zakupić bilet do miejscowego kina.

6. Stopka

Ten element to kolejny ogromny plus dla twórców. Na niebieskim, czytelnym tle korespondującym z grafiką, na całej stronie umieszczono najważniejsze informacje dla petentów: adres, kontakt oraz godziny pracy urzędu. W stopce znajdują się także, już lepiej wyglądające graficznie, ikony do serwisów społecznościowych oraz kontakt do BIP i BOM. Warto powtórzyć ten projekt graficzny ikon również w nagłówku.

OPINIA EKSPERTA

Kod strony jest napisany poprawnie i schludnie. Graficznie strona jest estetyczna. Większość funkcjonalności też działa prawidłowo. Jednak kilka rzeczy można było zrobić lepiej. Przede wszystkim strona nie jest wykonana w technologii Responsive Web Design, czyli nie jest dostosowana do wyświetlania na urządzeniach mobilnych, takich jak smartfony bądź tablety, co jest obecnie standardem na całym świecie.

Ponadto informacja o plikach cookie jest przyklejona do górnej krawędzi strony i podczas jej przewijania do dołu podąża za użytkownikiem, co jest całkowicie niepotrzebne. Dodatkowo przysłania część elementów na stronie, jak np. wyszukiwarka lub wybór wersji językowej.

Niezbyt dobrze działa też wyszukiwarka. Po kliknięciu w pole tekstowe nie znika hasło „wpisz szukane wyrażenie”, które w dodatku nie jest w pełni widoczne. Utrudnia to korzystanie z tej funkcjonalności. Ponadto na stronach wyszukiwania można znaleźć angielskie hasła „next” zamiast „dalej”.

Na stronie jest też ebook wykonany w technologii flash, która nie jest obsługiwana m.in. przez urządzenia z systemem operacyjnym iOS. Poza tym część treści jest dostępna po pobraniu pliku pdf, do którego odczytu trzeba mieć zainstalowany specjalny program.

Reklamowana aplikacja „Wągrowiec Mobile” z pokazanym QR-kodem to też nie najlepszy pomysł. Takiego kodu używa bardzo mały odsetek użytkowników. Dodatkowo do jego odczytu też trzeba mieć zainstalowaną odpowiednią aplikację na smartfonie bądź tablecie.

Rozmowa z Łukaszem Cieślakiem, zastępcą kierownika wydziału rozwoju i promocji miasta Wągrowca, autorem najlepszej samorządowej strony internetowej w rankingu DGP i głosowaniu internautów

Autorem naszej Perły Internetu nie jest profesjonalista specjalizujący się w tego typu działalności, lecz pracownik urzędu. Czy jest pan informatykiem? Od jak dawna pracuje pan w samorządzie?

Skończyłem studia w zakresie administracji. Jeśli chodzi o tworzenie stron internetowych jestem hobbystą, amatorem, samoukiem. W wągrowieckim urzędzie pracuję od 2005 r., mam 35 lat. Oprócz stron internetowych moją drugą, zbliżoną tematycznie pasją jest grafika komputerowa. A poza tym dobre kino i rowery.

Skąd pomysł na zrobienie tej strony?

Mieliśmy starą, kiepską stronę internetową, która nie spełniała wymagań nowoczesnego informowania, nie zawierała nowoczesnych narzędzi. Nasz wydział promocji rozpoczynał działalność i zdawaliśmy sobie sprawę, że potrzebne jest stworzenie wielofunkcyjnej platformy. Dla naszych potrzeb tamta strona była bezużyteczna.

I miasto zamówiło nowy serwis właśnie w dziale promocji?

Na dyskusjach się kończyło, więc zdecydowaliśmy, że skoro już wiemy, iż zmiany są potrzebne, to weźmiemy sprawy w swoje ręce. I w ten sposób będziemy mieli narzędzia niezbędne do promocji miasta, kontaktów z mieszkańcami i inwestorami. Tworzyłem stronę w ramach pracy i czasu wolnego.

Jakie funkcje miała spełniać? Dlaczego okazała się tak dobra?

Przede wszystkim szyliśmy ją na własną miarę. Wiedzieliśmy, o jakie grupy docelowe nam chodzi, jakimi narzędziami dysponujemy (system identyfikacji wizualnej) i jakiego rodzaju treści będziemy w stanie tworzyć dla nowej strony. Przy takim briefie stworzenie efektywnej strony było znacznie łatwiejsze. Dodatkowo wygląd współgra z logo, a strona jest logicznie poukładana. Wiadomo, co miasto ma do zaoferowania dla poszczególnych grup zainteresowanych: mieszkańców, turystów czy inwestorów. To wszystko jest czytelne dla odbiorców i cieszy mnie, że strona jest dobrze odbierana.

Eksperci, których poprosiliśmy o ocenę, uznali, że strona jest schludna graficznie i poprawnie sformułowana, ale zawiera błędy, zwłaszcza jeśli chodzi o wyświetlanie mobilne.

Pracujemy nad tym. Kiedy zaczynaliśmy w 2011 r. prace nad stroną, smartfony nie były jeszcze tak powszechne. Obecnie pracujemy na wersją RWD strony. Liczymy, że w ciągu kilku miesięcy będziemy dostępni mobilnie dla wszystkich użytkowników. Staramy się również możliwie w jak największym stopniu dostosować stronę po kątem korzystania z niej przez osoby niepełnosprawne, zgodnie z wymaganiami WCAG 2.0 AA.

Czy zmiana wizerunku strony przełożyła się na jej większą oglądalność?

Zdecydowanie tak. Obecnie wchodzi na nią o 30–40 proc. więcej korzystających niż wcześniej. Użytkownicy spędzają na stronie znacznie więcej czasu, przeglądają większą liczbę stron i notujemy mniejszą liczbę odrzuceń.

Liczą się wiedza i znajomość potrzeb