Wyzwanie

Dotychczasowy projekt graficzny serwisu Urzędu Miejskiego w Bielsku-Białej był przestarzały, nieczytelny oraz mało reprezentacyjny. Ponadto nie spełniał większości wymagań norm WCAG 2.0, a więc obowiązków ustawowych. W związku z tym musieliśmy od podstaw zaprojektować stronę tworząc dla niej szatę oficjalnego i rzetelnego źródła, dostosować stronę do norm ustawowych i wymogów responsywności, ale przede wszystkim – zapewnić intuicyjną nawigację po stosunkowo dużej ilości materiałów i treści. Ostatnim etapem prac było wdrożenie witryny i zapewnienie jej sprawnego funkcjonowania.

Rozwiązanie

Zależało nam, aby projektując stronę internetową uczynić ją maksymalnie przyjazną dla użytkownika. W tym przypadku (miasto liczące ponad 170 000 mieszkańców), grupa docelowa była bardzo zróżnicowana. Poza przeciętnymi mieszkańcami, chcącymi w prosty sposób znaleźć konkretne informacje, do grup docelowych zaliczyliśmy także osoby z różnego rodzaju niepełnosprawnościami oraz osoby wykluczone cyfrowo ze względu na wiek, zarobki czy wykształcenie. Nie mogliśmy również pominąć odbiorców nie będących mieszkańcami – turystów, przedsiębiorców, inwestorów oraz działaczach stowarzyszeń i fundacji. Aby ułatwić im znalezienie interesujących treści, wzięliśmy pod uwagę wszelkie przeszkody, które każda z grup może napotkać. Kierunek tych działań określił w dużej mierze standard WCAG 2.0, którego wytyczne są jednym z najistotniejszych elementów na etapie koncepcyjnym.

Projekt strony UM Bielsko–Biała

Stworzyliśmy projekt, który cechuje formalny i nowoczesny wygląd. Nawigacja odbywa się w oparciu o mapę odzwierciedlającą faktyczną strukturę strony. Witrynę dostosowaliśmy do norm WCAG 2.0 ( odpowiednia struktura treści, tworzenie opisów alternatywnych do istotnych elementów graficznych, odpowiedni kontrast między treścią a tłem, umożliwienie nawigacji za pomocą klawiatury, możliwość powiększenia i pomniejszenie tekstu przy zachowaniu czytelności strony). W celu przejrzystej i prostej nawigacji ograniczyliśmy ilość elementów znajdujących się na górze strony i umieściliśmy tam okno wewnętrznej wyszukiwarki. Jednocześnie umożliwiliśmy odpowiednie formatowanie treści – wyrównanie tekstu, układ chorągiewkowy, stosowanie nagłówków oraz podział na akapity, stosowanie wypunktowań, dzięki czemu strona stała się dużo bardziej czytelna. Jednocześnie projekt zakładał responsywność strony w zgodzie z Responsive Web Design. Na końcu zrezygnowaliśmy z nieaktualnych wtyczek (jak Flash Player) oraz innych technologii, które już się deaktualizują. Ograniczyliśmy także ilość dokumentów WORD oraz PDF dostępnych do pobrania. Aby całość była zrozumiała dla użytkowników korzystających z czytników ekranu odpowiednio opisaliśmy wszelkie materiały graficzne.

Klucz wizualny

W ramach przygotowania klucza wizualnego strony starannie opracowaliśmy poszczególne elementy graficzne:

• krój pisma: wybraliśmy krój pisma ,,Lato” zapewniający odpowiednią czytelność strony, co wpływa korzystnie na odbiór u osób niepełnosprawnych.
• kolorystyka: Wykluczyliśmy z poprzedniej kolorystyki barwy utrudniające niektórym użytkownikom korzystanie z serwisu. Wybrana została kolorystyka umożliwiająca osobom słabo widzącym korzystanie z serwisu nawet bez włączania wersji kontrastowej. Wybrana kolorystyka ułatwia również dostępność osobom, które codziennie korzystają z urządzeń mobilnych np. w mocnym świetle słonecznym.
• rodzina ikon: zaprojektowaliśmy rodzinę ikon, które ułatwiającą nawigację po stronie.

Wdrożenie strony

Po kompleksowych testach zajęliśmy się wdrożeniem strony w zgodzie ze współczesnymi standardami dostępności. Strona jest obecnie jedną z najszybszych stron urzędowych w regionie. Ten efekt osiągnęliśmy przy pomocy specjalnego szablonu opartego o nasz autorski projekt graficzny. Wdrożyliśmy także odpowiednie systemy pamięci podręcznej, automatyczną kompresję i optymalizację grafik, a także konwersję treści do nowoczesnych formatów stosowanych w zależności od używanej przeglądarki internetowej (np.: webp). To wszystko przełożyło się na sprawność funkcjonowania strony, a więc pozytywne doświadczenia użytkownika.

Poza tym, w ramach pracy nad stroną wdrożyliśmy nową wersję e-usługi urzędowej w formie kalkulatora opłat koncesyjnych na sprzedaż alkoholu. Pozwala on obliczyć wymaganą opłatę i wygenerować gotowy wniosek w formacie PDF – kalkulator opłat za koncesję. Wdrożyliśmy także zupełnie nową strukturę pozwalającą na zarządzanie przedmiotami z biurem rzeczy znalezionych – (wcześniej były one grupowane w pliku docx).

Dla spełnienia priorytetu jakim było proste poruszanie się po stronie, działająca w witrynie wyszukiwarka pozwala na wyszukiwanie fraz i słów kluczowych także w treści załączników (np. w plikach docx, pdf). Całość wdrożenia została oparta (zgodnie z wymaganiem klienta) o system CMS Drupal. Przygotowana przez nas struktura strony pozwala na tworzenie kolejnych witryn bazujących na tym samym szablonie – tzw.: Multisite.