Badanie użyteczności strony www Urzędu Miasta Katowice

Badanie użyteczności strony internetowej - oficjalna strona miasta Katowice

Autorzy: •

Hanna Sieńko

•

Marta Węglarska

•

Nina Duda

•

Monika Skowrońska

Rok II, semestr I, rok studiów 2014/2015 Prowadzący: prof. ASP dr hab. Wiesław Gdowicz, mgr Marta Więckowska Przedmiot: Badania użyteczności Akademia Sztuk Pięknych w Katowicach Zakład Badań Wizualnych i Interakcji

Przedstawienie strony www.katowice.eu

Cele strony Cele strony •

Kreowanie wizerunku i promowanie miasta Katowice

•

Informowanie o aktualnościach, wydarzeniach kulturalnych, inwestycjach, rozwoju miasta

•

Ułatwienie mieszkańcom miasta Katowice załatwiania spraw urzędowych

Dostępne funkcje •

wyszukiwarka

•

kalendarz

•

newsletter

•

wersja angielskojęzyczna

•

wersja serwisu z wysokim kontrastem

•

materiały do pobrania

Cechy wizualne Kolorystyka Strona charakteryzuje się dużą gamą kolorów. Użyte są odcienie zaczerpnięte z loga Katowic. Fakt użycia wielu kolorów nie jest jednak przytłaczający, na stronie dominuje biel. Mocne kolory równoważą również odcienie szarości.

Grafika W miejscu najważniejszym umieszczone jest logo Katowic z elementami typograficznymi. Obok znajdują się odnośniki w postaci małych ikon ułożonych w rzędzie. Część ikon zmienia kolor po najechaniu kursorem. Obok głównego menu poziomego znajduje się grafika w postaci powtórzonej części loga Katowic, obróconej o 90 stopni.

Cechy wizualne Typografia •

krój jednoelementowy

•

spójna typografia - jeden krój, różne wersje regular, bold, wersaliki

Wersja serwisu z wysokim kontrastem •

wszystkie napisy czarne

•

większa punktacja

•

wersja bold fontu w menu głównym

•

większe odstępy między wyrazami

Forma umieszczanych treści •

slider

•

miniatury odnoszące się do artykułów

•

kalendarz wydarzeń

•

banery

Układ strony Architektura informacji •

Przedstawienie całej architektury informacji na stronie

Układ strony Architektura informacji - analiza •

Pogrupowanie informacji na stronie ze względu na treści

• •

Wszystkie podstrony: 303 Treści kulturalne 56 podstron

•

Treści urzędowe 247 podstron

•

ilość podstron w zakładce Przemiana katowic

26

1

18

8

8

1 1

13

1 1 8

1

17 1

17 1 1

1

53

18

31

1

?

12

1

9 10

jest nieznana ze względu na niemożnośc jej

8

otwarcia (nie mieści się na stronie).

2 10 10 4 1 3 5

Układ strony Wyróżnienie elementów strony głównej 1.

2.

3.

Logo Katowic Pasek odnośników Pasek menu (z linią podziałową rozciągającą 5. się na całą szerokość strony) 4.

Slider 5-7. Aktualności (tytuł, miniatury artykółów, odnośnik do archiwum) 8.

Kalendarz 9.

Newsletter 10. Banery 11. Odnośnik multimedialny do Katowice Oficjalny Kanał na Youtube 12. Wtyczka społecznościowa facebooka 13-14. Partnerzy (tytuł, przewijające się loga partnerów) 15. Pasek wielofunkcyjny (odnośniki, do pobrania, dane kontaktowe) 13.

16. Opis projektu

Opis •

budowa strony oparta na siatce

•

wielkość elementów zmiennych przystosowywana do siatki

1.

2.

2.

3.

4.

5.

6.

8.

9.

10.

11.

12.

13.

14.

15.

16.

7.

7.

Układ strony Podstrony - podobieństwa i różnice •

Podstrony „Rada miasta”, „Urząd miasta” i „Biznes” mają taki sam układ. Zmienia się jedynie ich podmenu i kolorystyka. Linie podziałowe, tytuły, slider i odnośnik do archiwum mają ten sam odcień co zakładka.

•

W innych podstronach zmienia się układ elementów - brak slidera, dodatkowe menu (boczne), informacja o twojej lokalizacji na stronie. Nie ma aktualności - ich miejsce zajmuje treść statyczna.

•

Na podstronach umieszczona jest dodatkowa ikona wersji serwisu z wysokim kontrastem

Układ strony Podstrony - podobieństwa i różnice •

klikając na datę w kalendarzu lub odnośnik „więcej aktualności”, strona odsyła nas do podstrony o innej budowie. Znajdują się tu treści w formie poziomych pasów, z odnośnikami do dalszych części artykułów.

Układ strony Podstrony - podobieństwa i różnice •

większość elementów na stronie jest stała - na wszystkich podstronach znajdują się w tym samym miejscu

•

menu boczne zmienia się w zależności od tego w jakiej znajdujemy się zakładce

Wersja mobilna Budowa strony mobilnej Podobieństwa i różnice w stosunku do pełnej wersji strony: •

na stronie głównej widoczne są aktualności w formie miniatur odnoszących się do artykułów, umieszczone pojedynczo jedna pod drugą.

Widoczna jest również wyszukiwarka.

•

zachowanie charakterystycznego menu głównego

•

menu szczegółowe w postaci wyskakującego okna

•

brak odnośników do social media

Uwagi: •

nie wykorzystanie całej przestrzeni ekranu (przy pełnym widoku)

Lista dostępnych funkcji i ich rozmieszczenie na stronie Menu wielofunkcyjne

Kalendarz

Pasek wyszukiwania

Nawigacja wiadomości główne

KISS

Lubię to - na Facebooku TV Katowice 1.

Przycisk ‘więcej aktualności’

Partnerzy

Wirtualny spacer

Facebook, YT, Twitter Playlista

Funkcje - opis Pasek odnośników Pasek odnośników zbudowany jest z 10 ikon, których znaczenie wyświetla się po najechaniu na nie kursorem.

Po kliknięiu na wybraną ikonę następuje przekierowanie do wybranego odnośnika lub pobranie pliku . www.facebook.com/Katowice.eu www.youtube.com/user/KatowiceTube www.twitter.com/umkatowice www.katowice.bezbarier.info/ rozpoczyna pobieranie IntelligentWeb Reader https://pks.katowice.eu/ -Platforma Konsultacji Społecznych (forum) https://www.sekap.pl -System Elektronicznej Komunikacji Administracji Publicznej http://bip.um.katowice.pl/ -Biuletyn Informacji Publicznej (BIP) wersja anglojęzyczna i niemieckojęzyczna wersja z wysokim kontrastem (zmienia się typografia)

Funkcje - opis Kalendarz Kalendarz zawiera spis wydarzeń zaplanowanych na dany dzień.

Aby zapoznać się z artykułem związanym z danym wydarzeniem, należy kliknąć na zielony pasek.

Pasek wyszukiwania Po wpisaniu poszukiwanego słowa i wciśniciu ENTER następuje przekierowanie do wyników wyszukiwania, czyli spisu artykułów związanych z szukanym słowem.

Wirtualny spacer Odnośnik do strony, na której można oglądać panoramy wykonane w charakterystycznych punktach miasta.

Funkcje - opis KISS Katowicki nformacyjny serwis SMS - dzięki niemu na telefon możemy dostawać infaormacje z dziedzin: wydarzenia, przemiany, społeczeństwo, urząd

KatowiceTV.eu „Oficjalny Serwis Telewizyjny Miasta Katowice. Jest to pierwsze tego typu przedsięwzięcie na Śląsku i jak dotąd jedyna udana próba zebrania w jednym miejscu reportaży, newsów i informacji dotyczących stolicy Aglomeracji.”

Interakcje •

•

rozwijanie po najechaniu

powiększanie po najechaniu

•

klikanie

•

odświetlanie i wyświetlanie opisu p po najechaniu

•

podkreślanie po najechaniu

•

scrollowanie

•

wyświetlanie po najechaniu

Błędy i niejasności •

zbyt rozbudowany system podzakładek

•

niejasne nazwy zakładek (np.: zakładka „MIASTO” - co się w niej znajduje?)

•

błędna kategoryzacja podzakładek

•

brak oznaczenia odsyłania do strony zewnętrznej

•

niewygodny system wybierania podzakładek

•

brak wizualizacji wydarzeń w kalendarzu

•

brak przeznaczenia treści dla konkretnego użytkownika

•

ładowanie strony za każdym razem

•

błędy w załadowywaniu strony

Wstęp do badań W celu weryfikacji spostrzeżeń powstałych w wyniku analizy strony, przeprowadzone zostaną badania zachowań użytkowników.

Cele badania •

Sprawdzenie czy zakładki są pogrupowane w taki sposób, że użytkownik może bezproblemowo dotrzeć do celu

•

Sprawdzenie czy i w jaki sposób przeglądanie zakładek w postaci rozwijanego menu wpływa na efektywność wyszukiwania.

•

Weryfikacja skuteczności podziału informacji w zakładkach menu.

Pytania badawcze •

Ile kroków potrzeba by badany odnalazł na stronie poszukiwaną informację i jaki jest czas między tymi krokami?

•

Czy menu, które nie daje wglądu w całą architekturę informacji ma jakiś wpływ na czas i efektywność wyszukiwania?

•

Czy aktualny podział podzakładek głównego menu pozwala na szybkie i efektywne wyszukiwanie informacji?

•

Czy użytkownik podczas wyszukiwania napotka problemy? Jeśli tak, to jakie?

Opis badania Badanie I Badanie polega na obserwacji drogi użytkownika na stronie internetowej podczas wykonywania zaplanowanych wcześniej zadań oraz analizie jego zachowań.

Scenariusz badania - polecenia: Znajdź na stronie internetowej katowice.eu, nie korzystając z wyszukiwarki: 1. dostępne oferty pracy w Katowicach 2. informacje o tym jak segregować odpady 3. Spędzasz weekend w Katowicach, znajdź interesujący Cię sposób spędzenia wolnego czasu poza domem.

W celu przeprowadzenia badania będziemy korzystać z : •

komputera z dostępem do internetu

•

programu do rejestracji obrazu interfejsu – Camtasia Studio

•

arkusza zawierającego zadania dla osób badanych

Podczas wykonywania zadania rejestrowane będą rówież zachowania użytkownika (w formie notatek) : reakcje, komentarze, wrażenia.

W czasie trwania badania osoba badająca nie będzie udzielać badanemu wskazówek dotyczących strony internetowej oraz poruszania się po niej.

Opis badania Badanie II Badanie Card Sorting Badanie to pomaga stworzyć intuicyjną architekturę informacji tak, by kluczowe dla użytkowników elementy strony były łatwe do znalezienia.

Osobom badanym zostaną przedstawione tytuły podstron występujących na stronie katowice.eu. Ich zadaniem będzie dopasowanie podanych tytułów do czterech zakładek głównego menu w sposób intuicyjny, kierując się skojarzeniami.

Badanie zostanie przeprowadzone w zakresie jednego poziomu podzakładek.

Narzędzia: •

komputer z dostępem do internetu

•

badanie card sorting przygotowane w serwisie Optimal Workshop

Badanie to nie wymaga bezpośredniego kontaktu z osobą badaną.

W każdym badaniu weźmie udział 5 osób.

Analiza wyników badania I Wykresy przedstawiają drogę użytkownika podczas wykonywania zadania na stronie internetowej, z poszczególnymi krokami zaznaczonymi na osi czasu.

Kolory oznaczają poszczególnych badanych, na każdym wykresie przedstawione zostało osobne polecenie. badany 11 - 3 kroków badany 1 badany badany 22 - 6 kroków badany 2 badany badany 3 badany 3 badany 3 - 6 kroków badany 4 badany 4 badany 4 - 2 kroków

droga użytkownika droga użytkownika droga użytkownika kliknięcie

kliknięcie kliknięcie

rozwinięcie zakładki rozwinięcie zakładki rozwinięcie zakładki

badany 5 5 badany 5 - 15badany kroków

zadanie 1 zadanie 1

Zadanie 1 1 poziom menu 2 poziom menu 3 poziom menu

czas (s)

najkrótszy czas wykonania zadania – 0:43 min najdłuższy czas wykonania zadania – 4:25 min najkrótszy czas wykonania – 0:43 min – 0:43 min najkrótszy czaszadania wykonania zadania najdłuższy czas wykonania – 4:25 min – 4:25 min najdłuższy czaszadania wykonania zadania

Analiza wyników badania I Zadanie 2 badany 11 - 7 kroków badany

1 poziom menu

badany 22 - 7 kroków badany badany 3 badany 3 - 7 kroków

2 poziom menu

badany 4 badany 4 - 2 kroków

3 poziom menu

droga użytkownika kliknięcie rozwinięcie zakładki

badany 5 badany 5 - 14 kroków

czas (s)

zadanie 1

najkrótszy czas wykonania zadania – 0:31 min najdłuższy czas wykonania zadania – 2:28 min

Zadanie 3 badany 11 - 10 kroków badany

1 poziom menu

badany 22 - 9 kroków badany badany 3 badany 3 - 12 kroków

2 poziom menu

badany 4 badany 4 - 1 krok

3 poziom menu

kliknięcie rozwinięcie zakładki

badany 5 badany 5 - 7 kroków

czas (s) najkrótszy czas wykonania zadania – 0:25 min najdłuższy czas wykonania zadania – 1:55 min

droga użytkownika

najkrótszy1czas wykonania zadania – 0:43 min zadanie

najdłuższy czas wykonania zadania – 4:25 min

Spostrzeżenia użytkowników Spostrzeżenia użytkowników Najczęściej powtarzające się uwagi użytkowników dotyczącyh funkcjonowania strony: •

Problemy z „najechaniem” na odpowiednie miejsce w menu, zwijanie się menu

•

Problemy z powrotem na stronę główną

•

Nieaktywne zakładki

•

Długie ładowanie strony

Wnioski z analizy wyników badania I •

Rozwijane menu negatywnie wpływa na efektywność poszukiwania. „Zwijanie się” menu wydłuża czas znajdowania informacji, wzbudza w użytkowniku frustrację.

•

Brak wglądu w pełną architekturę informacji, zmusza użytkownika do rozwinięcia wielu zakładek nie związanych z celem jego poszukiwania.

•

Brak odnośnika powrotu do strony głównej jest poważnym błędem, użytkownicy szukają na górze strony. Często klikając w podzakładkę użykownik zostaje przeniesiony na nową kartę, wtedy nie może powrócić na stronę.

•

Na stronach z dużą ilością informacji, użykownik jest zmuszony do ciągłego scrollowania.

•

Na funkcjonalność strony wpłynął również długi czas jej załadowywania, wzbudzało to niechęć do przeglądania poszczególnych zakładek.

Analiza wyników badania card sortingu UKŁAD ZGODNY Z 6/7 WYNIKÓW CARD SORTINGU

RADA MIASTA

Komisje Rada miasta Katowice Biuro rady miasta Akty prawa miejscowego Młodzieżowa rada miasta Rady jednostek pomocniczych Oświadczenie majątkowe radnych Urząd miasta Władze miasta

Styl Życia

Archiwum

O mieście

URZĄD MIASTA BIZNES

O mieście Przemiana Katowic Co, gdzie, kiedy?

Turystyka i sport Transport miejski Gazeta miejska Akty prawa miejscowego Rada miasta Katowice Komisje Młodzieżowa rada miasta Rady jednostek pomocniczych Oświadczenie majątkowe radnych Biuro rady miasta Władze miasta Urząd miasta Rodzina i zdrowie Edukacja Ekologia Konsultacje społeczne Zamieszkaj w Katowicach E-learning Archiwum Katowice bez barier Convention Bureau Międzynarodowe centrum kongresowe Pracuj w Katowicach Inwestuj w Katowicach

MIASTO

ORYGINALNE UŁOŻENIE ZAKŁADEK

zakładek głównych. Wyróżnione zostały trzy najbardziej podobne do siebie podziały wykonane przez użytkowników.

Administracja

Przedstawienie wyników badania card sortingu - kropki oznaczają pozczególne podzakładki, a kolor ich oryginalną przynależność do

Edukacja Ekologia E-learning Rodzina i zdrowie Turystyka i sport Co, gdzie, kiedy?

O mieście Przemiana Katowic Transport miejski Gazeta miejska Konsultacje społeczne Zamieszkaj w Katowicach Katowice bez barier Convention Bureau Międzynarodowe centrum kongresowe Pracuj w Katowicach Inwestuj w Katowicach

Analiza wyników badania card sortingu

Władze

Komisje Rada miasta Katowice Akty prawa miejscowego Młodzieżowa rada miasta Rady jednostek pomocniczych Biuro rady miasta Oświadczenie majątkowe radnych Władze miasta Konsultacje społeczne Archiwum

Informacje

UKŁAD ZGODNY Z 5/7 WYNIKÓW CARD SORTINGU

Edukacja Ekologia E-learning Rodzina i zdrowie Katowice bez barier Międzynarodowe centrum kongresowe

RADA MIASTA

O mieście

Turystyka i sport

Warto w Katowicach

URZĄD MIASTA BIZNES

O mieście Przemiana Katowic Co, gdzie, kiedy?

Turystyka i sport Transport miejski Gazeta miejska Akty prawa miejscowego Rada miasta Katowice Komisje Młodzieżowa rada miasta Rady jednostek pomocniczych Oświadczenie majątkowe radnych Biuro rady miasta Władze miasta Urząd miasta Rodzina i zdrowie Edukacja Ekologia Konsultacje społeczne Zamieszkaj w Katowicach E-learning Archiwum Katowice bez barier Convention Bureau Międzynarodowe centrum kongresowe Pracuj w Katowicach Inwestuj w Katowicach

MIASTO

ORYGINALNE UŁOŻENIE ZAKŁADEK

Przemiana Katowic Transport miejski Gazeta miejska Co, gdzie, kiedy?

O mieście Urząd miasta Zamieszkaj w Katowicach Convention Bureau Pracuj w Katowicach Inwestuj w Katowicach

Analiza wyników badania card sortingu

Dla mieszkańca

UKŁAD ZGODNY Z 1/7 WYNIKÓW CARD SORTINGU Archiwum E-learning Edukacja Katowice bez barier Zamieszkaj w Katowicach Rodzina i zdrowie Konsultacje społeczne O mieście Przemiana Katowic Pracuj w Katowicach Inwestuj w Katowicach Rady jednostek pomocniczych Ekologia

Sprawy miasta

Turystyka i sport Co, gdzie, kiedy?

Gazeta miejska Transport miejski Urząd miasta Władze miasta Akty prawa miejscowego Convention Bureau Międzynarodowe centrum kongresowe

Rada miasta

Kultura

RADA MIASTA URZĄD MIASTA BIZNES

O mieście Przemiana Katowic Co, gdzie, kiedy?

Turystyka i sport Transport miejski Gazeta miejska Akty prawa miejscowego Rada miasta Katowice Komisje Młodzieżowa rada miasta Rady jednostek pomocniczych Oświadczenie majątkowe radnych Biuro rady miasta Władze miasta Urząd miasta Rodzina i zdrowie Edukacja Ekologia Konsultacje społeczne Zamieszkaj w Katowicach E-learning Archiwum Katowice bez barier Convention Bureau Międzynarodowe centrum kongresowe Pracuj w Katowicach Inwestuj w Katowicach

MIASTO

ORYGINALNE UŁOŻENIE ZAKŁADEK

Młodzieżowa rada miasta Rada miasta Katowice Komisje Biuro rady miasta Oświadczenie majątkowe radnych

Wnioski z analizy wyników card sortingu •

Aktualny podział podzakładek tylko w małym stopniu odpowiada oczekiwaniom użytkowników. Utrudnia to poszukiwanie konkretnych informacji.

•

Grupom zakładek są nadawane inne nazwy.

•

Najczęstsza liczba grup, do których przypasowane są podzakładki wynosi ok 4-5

Podsumowanie Przeprowadzona analiza oraz badania pozwoliły na uzyskanie odpowiedzi na nasze pytania badawcze.

Ile kroków potrzeba by badany odnalazł na stronie poszukiwaną informację i jaki jest czas między tymi krokami?

•

wykresy do badania I

Czy menu, które nie daje wglądu w całą architekturę informacji ma jakiś wpływ na czas i efektywność wyszukiwania?

•

dzięki baaniu nr I możemy zauważyć, że osoby musiały szukać i cofać się do poprzedniej zakładki aby znaleźć szukaną treść

Czy aktualny podział podzakładek głównego menu pozwala na szybkie i efektywne wyszukiwanie informacji?

•

wykres do badania nr I pokazuje, że czas potrzebny do wyszukania informacji jest stosunkowo długi dla poszczególnych użytkowników

Czy użytkownik podczas wyszukiwania napotka problemy?

•

nagrania wykonane podczas badań pozwoliły na wykrycie problemów napotkanych podczas korzystania ze strony. Są to m. in. problem ze znalezieniem odnośnika powrotu do poprzedniej strony, oraz znikanie rozwijających się podzakładek.