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.