Badanie użyteczności strony internetowej uniwersytetu autor: Bartosz Płóciennik prowadzący: prof. ASP dr hab. Wiesław Gdowicz, asyst. dr Marta Więckowska Badania użyteczności rok II | wzornictwo 2017/2018 Zakład Badań Wizualnych i Interakcji Akademia Sztuk Pięknych w Katowicach
1
Przedstawienie strony
Uniwersytet Artystyczny w Londynie jest szóstą, najlepszą uczelnią na świecie w kategorii Uniwersytetów Sztuki i Dizajnu w rankingu QS. Uczelnia oferuje szeroki wybór kursów z zakresu sztuki, wzornictwa, komunikacji i sztuk performatywnych.
Strona internetowa uniwersytetu ma charakter informacyjny i reklamowy. Treści zawarte na witrynie najczęściej związane są z życiem i charakterem uczelni, procesami rekrutacyjnymi, prowadzonymi badaniami, czy też dostępnymi kursami.
Hasło powitalne witryny
2
Intuicyjna ocena strony WWW
Zalety: • zdjęcia wysokiej jakości • szybki dostęp do mediów społecznościowych • prosty panel nawigacyjny • obecność wyszukiwarki na stronie • podział na wersję komputerową jak i mobilną
Wady: • nieliczne błędy w kodowaniu strony • przytłaczająca ilość wątków/podstron
Skojarzenia: • Przez ilość zdjęć mamy wrażenie, jakbyśmy oglądali stronę z fotografiami (Pinterest, Instagram) • Zestawione ze sobą ilustracje i elementy typograficzne przypominają odnośniki do artykułów ze stron gazet • Układ przypomina stronę sklepu internetowego 3
Podobieństwa do innych witryn Górna belka nawigacyjna oraz szerokie fotografie kojarzą się ze stroną producenta butów sportowych Converse. Mimo rozbieżnej tematyki stron, są one do siebie wizualnie podobne.
4
Założenia strony Cele strony: • Motywacja do podjęcia studiów na uniwersytecie • Informowanie o uczelni i jej zadaniach • Ułatwianie kontaktu z uczelnią • Prezentowanie osiągnięć uczniów i pracowników • Utworzenie pozytywnego wizerunku uczelni • Propagowanie wiedzy o sztuce • Promowanie instytucji i wydarzeń związanych z dziedziną sztuki i dizajnu
Grupa odbiorców: • Osoby zainteresowane podjęciem studiów na uczelni • Studenci • Wykładowcy • Pracownicy uczelni • Osoby zainteresowanę pracą na Akademii • Partnerzy biznesowi • Pasjonaci sztuki i wzornictwa
5
Układ strony Układ strony jest dynamiczny - w zależności od obszaru na jakim wyświetlana jest strona, zawartość dopasowuje się do ekranu. Stronę można podzielić na belkę nawigacyjną, treść zasadniczą podstrony oraz stopkę. Informacje pomiędzy paskiem nawigacyjnym a stopką układają się w kolumny o szerokościach zależnych od wyświetlanych treści. Każda z podstron po lewej stronie posiada listę zakładek dostępnych w danej kategorii. Największą powierzchnię strony zajmują tło, zdjęcia i ilustracje.
zdjęcia i ilustracje elementy interaktywne ilustracje nawigacyjne elementy typograficzne elementy typograficzne nawigacyjne 6
Strona główna:
Przykładowa podstrona:
Cechy wizualne Kolory
Typografia:
Pomijając ilustracje i fotografie na stronie występują tylko trzy kolory: biel, czerń oraz róż.
Krojem pisma używanym na stronie jest Helvetica Neue w odmiannach Regular i Bold oraz Light. W nagłówkach czasami pojawiają się kroje Bureau oraz Leviathan. Typografia również występuje w tylko trzech wcześniej wymienionych kolorach.
#000000
#ffffff
#e5006e Helvetica Neue Regular
Helvetica Neue Bold
Leviathan A
Helvetica Neue Light Bureau Grot Bold
Kolory w typografii:
A A A 7
Dynamiczne elementy nawigacyjne Najechanie kursorem
Kliknięcie kursorem
Elementy typograficzne oraz ich tło zmieniają swój kolor w momencie najechania na nich kursorem.
Nawigacja na bieżącej stronie odbywa się poprzez najechanie kursorem i kliknięciem na interaktywny element.
8
Sposoby nawigacji na stronie Głównymi narzędziami służącymi do filtrowania informacji na witrynie są: pasek nawigacyjny, opcja szukania oraz stopka.
Logotyp, po wciśnięciu odsyła użytkownika na stronę główną
Menu - mieści w sobie podstrony
Wyszukiwarka
Odsyłacz do innych domen siedzib uczelni Dane kontaktowe, stanowiska uczelni, polityka strony itp.
Odsyłacze do mediów społecznościowych
Wyszukiwarka kursów dostępnych na uczelni
9
Sposoby nawigacji na stronie Drzewo podstron Każda z podstron pozwala na rozwinięcie listy podstron poprzędzajacych stronę na której znajduje się użytkownik.
10
Wyszukiwarka Na witrynie znajduje się złożona wyszukiwarka kursów/zajęć jakie można podjąć na uczelni.
11
Architektura informacji
5
4
3
2
Course Summ
BA (Hons) 3D Design
Detail
BA (Hons) 3D Effects
How to Apply
MA 3D Computer
Fees
BA (Honours)
Careers
MA Acting - Drama
1
0
1
3
4
5
Study at UAL
Research Deegres
Courses A-Z
...
2
Foundation
Impact
Study
Research
...
Undergraduate
...
...
...
...
...
...
...
... Student Jobs Subjects
Find Jobs
Careers
College
...
Course Level
Programme
Benefits Mode
Search Course Summ
BA (Hons) 3D Design
Detail
BA (Hons) 3D Effects
How to Apply
MA 3D Computer
Fees
BA (Honours)
Careers
MA Acting - Drama
Courses Search (lupa)
Alumni Group
UAL
Alumni & Friends
...
Business
Business
...
...
...
Contact UAL
UAL Jobs
About
filtr
About UAL Strategy
Postgraduate
Courses
Undergradua
News
Camberwell
Course Summ
MA 3D Animation
Education
Events
CSM
Detail
MA Advertising
Short Courses
Open Days
Chelsea
...
...
...
...
...
...
...
strona kursu
narzędzie szukaj
How to Apply
MA Animation
Study Abroad
People
LCC
Fees
MA Arts
Support
Research
LCF
Changes
Business
Wimbledon
Careers
link dwukierunkowy
połączenie na stronie bieżącej
12
The Big Welcome
Colleges
strona
...
Students
...
...
Wnioski Zalety: Ogromna ilość informacji może z początku przytłaczać użytkownika, jednak sposób w jaki informacje są porządkowane oraz możliwość ich filtrowania są bardzo pomocne. Przechowywanie informacji również jest bardzo przemyślane. Użytkownik przenosząc się do podstrony będzie miał do czynienia tylko z informacjami związanymi z daną kategorią. W razie jakiejkolwiek dezorientacji może on otworzyć drzewo podstron i wrócić do poprzednio odwiedzonych podstron.
• możliwość powrotu do strony głównej z każdego miejsca na stronie • drzewo podstron pokazujące w jakim miejscu znajduje się użytkownik • szeroki zakres informacji • wyszukiwarka umożliwiająca znalezienie słów kluczowych lub kursów • nieskomplikowana szata graficzna
Wady: • niespójny layout między podstronami uczelni • powtarzalny layout strony, uczelnia artystyczna powinna się pod tym względem wyróżniać
13
Opis badania Cele badania: • Określenie jaką najczęstszą drogę obiera użytkownik. • Sprawdzenie w jaki sposób użytkownik filtruje informacje.
Ogólnym celem badania jest sprawdzenie co sprawia trudność użytkownikom podczas poruszania się po stronie, filtrowania informacji, obsługi interfejsu. W tym celu zweryfikuję jakie są najprostsze i najkrótsze możliwe drogi dotarcia do informacji, jak większa ilość sposobów filtrowania informacji wpłynie na drogę użytkownika, czy na stronie precyzyjnie są opisane zakładki, czy ilość informacji jest przytłaczająca dla użytkownika?
14
Badanie: • Badanie polega na dokumentowaniu drogi oraz zachowania użytkownika podczas wykonywania poleceń. • Polecenia polegają na znajdywaniu informacji zawartych na witrynie. • Ilość badanych: 5
Przebieg badania: Badanie rozpoczyna się od wprowadzenia użytkownika w przedmiot badania. Każdy badany otrzymuje taki sam zestaw pytań. Ekran oraz ścieżka dźwiękowa są nagrywane podczas przeprowadzania badania. Użytkownik wykonuje po kolei 5 zadań.
Polecenia: 1. Znajdź dane kontaktowe uczelni . 2. Znajdź biografię dr. Jonathana Gandera, prowadzącego badania na uniwersytecie. 3. Znajdź informację ile trwa kurs MA Graphic Media Design na uczelni London College of Communication. 4. Znajdź cenę kursu MA Textile Design. 5. Znajdź datę rozpoczęcia podyplomowego (postgraduate) kursu MA Public Relations.
Polecenie nr 1 Polecenia:
i kn
i
l m ak io z m Su Po
0 0 0 0 1 0 0 0 0 0 0 0 0
2 2 1 4 5 1 -
su
ej
f er
ęć
t
en
badany nr 1
1. Znajdź dane kontaktowe uczelni . 2. Znajdź biografię dr. Jonathana Gandera, prowadzącego badania na uniwersytecie. 3. Znajdź informację ile trwa kurs MA Graphic Media Design na uczelni London College of Communication. 4. Znajdź cenę kursu MA Textile Design. 5. Znajdź datę rozpoczęcia podyplomowego (postgraduate) kursu MA Public Relations.
t in
badany nr 2 badany nr 3 badany nr 4 badany nr 5
m le
E
„Logo” Study Research Careers Exhibit & Sell Your Work Alumni & Friends Business About UAL Contact UAL Students Courses Colleges „Szukaj”
0:00
0:30
1:00
1:30
2:00
2:30
3:00
3:30
4:00
15
Polecenie nr 2 0 0 0 1 1 2 2 1
1 1 7 1 5 1 1 1
2 3 3 3 4 0 0 0 0 0 0 0 0 0
2 3 1 3 5 4 4 2 1 1 2
„Logo” Study Research Research UAL Staff Researchers Current Research UAL Research Projects Researching at UAL Professors Staff Research Profiles „J” „G” Dr. Jonathan Gander Careers Alumni & Friends Business About UAL Teaching & Learning Students Courses Colleges „Szukaj”
0:00
16
0:30
1:00
1:30
2:00
2:30
3:00
3:30
4:00
Polecenie nr 3
0 0 1 1 2 3 3 0 0 0 0 0 0 0 0 0 0
1 2 2 5 2 1 1 2 4 1 1 4 1 -
„Logo” Study Postgraduate Study Courses A - Z MA Graphic Media Design Course Detail Short Courses Research Careers Alumni & Friends Business About UAL Students Courses Colleges „Szukaj” Contact UAL
0:00
0:30
1:00
1:30
2:00
2:30
3:00
3:30
4:00
17
Polecenie nr 4
0 0 1 2 3 1 2 1 1 0 0 0 0 0 0 0 0 0 0
2 1 5 1 1 1 1 2 2 -
„Logo” Study Courses A - Z MA Textile Design Course Detail Student Fees Tutition Fees Undergraduate Short Courses Research Careers Alumni & Friends Business About UAL Students Courses Colleges „Szukaj” Contact UAL
0:00
18
0:30
1:00
1:30
2:00
2:30
3:00
3:30
4:00
Porównanie poleceń Badana w poleceniu nr 3 błądzi po witrynie podczas szukania kursu. Po jakimś czasie natrafia na wyszukiwarkę, dzięki której znajduję podstronę z polecenia. W następnych zadaniach pozostaje przy używaniu wyszukiwarki. 0 0 1 1 2 3 3 0 0 0 0 0 0 0 0 0 0
1 2 2 5 2 1 1 2 4 1 1 4 1 -
0 0 1 2 3 1 2 1 1 0 0 0 0 0 0 0 0 0 0
„Logo” Study Postgraduate Study Courses A - Z MA Graphic Media Design Course Detail Short Courses Research Careers Alumni & Friends Business About UAL Students Courses Colleges „Szukaj” Contact UAL
0:00
0:30
1:00
1:30
2 1 5 1 1 1 1 2 2 -
„Logo” Study Courses A - Z MA Textile Design Course Detail Student Fees Tutition Fees Undergraduate Short Courses Research Careers Alumni & Friends Business About UAL Students Courses Colleges „Szukaj” Contact UAL
0:00
0:30
19
Polecenie nr 5
0 0 1 2 3
2 1 5 -
3 0 0 0 0 0 0 0 0 0 0
3 1 -
„Logo” Study Courses A - Z MA Public Relations Course Detail Short Courses Research Careers Alumni & Friends Business About UAL Students Courses Colleges „Szukaj” Contact UAL
0:00
20
0:30
1:00
1:30
2:00
2:30
3:00
3:30
4:00
Badany nr 1 kobieta, 21 lat
0:00
0:30
1:00
1:30
2:00
2:30
3:00
3:30
4:00
4:30
5:00
5:30
6:00
6:30
7:00
7:30
8:00
8:30
9:00
9:30
10:00
poziom 0 poziom 1 poziom 2 zad. 1 poziom 3 zad. 3
zad. 4
zad. 5
poziom 4 zad. 2 poziom 5
Badanej często zdarza się wracać na stronę główną (poziom 0)
Przydatna okazuje się wyszukiwarka kursów.
przeglądanie treści scrollowanie kliknięcie w logo kliknięcie opcji „szukaj”
Polecenia: 1. Znajdź dane kontaktowe uczelni . 2. Znajdź biografię dr. Jonathana Gandera, prowadzącego badania na uniwersytecie. 3. Znajdź informację ile trwa kurs MA Graphic Media Design na uczelni London College of Communication. 4. Znajdź cenę kursu MA Textile Design. 5. Znajdź datę rozpoczęcia podyplomowego (postgraduate) kursu MA Public Relations.
kliknięcie w zakładkę poprawne wykonanie zadania zmiana poziomu/kliknięcie w link komentarz
komentarz badanego
21
Badany nr 2 mężczyzna, 28 lat
0:00
0:30
1:00
1:30
2:00
2:30
3:00
3:30
4:00
4:30
5:00
5:30
6:00
6:30
7:00
7:30
8:00
8:30
9:00
9:30
10:00
poziom 0 poziom 1 poziom 2
zad. 1
poziom 3
zad. 3
zad. 4
zad. 5
poziom 4 zad. 2 poziom 5
Badany skorzystał ze stopki.
Badany poprawnie wykonuje polecenia
Używanie funkcji „szukaj” okazuje się bardzo wydajne
przeglądanie treści scrollowanie kliknięcie w logo kliknięcie opcji „szukaj”
Polecenia: 1. Znajdź dane kontaktowe uczelni . 2. Znajdź biografię dr. Jonathana Gandera, prowadzącego badania na uniwersytecie. 3. Znajdź informację ile trwa kurs MA Graphic Media Design na uczelni London College of Communication. 4. Znajdź cenę kursu MA Textile Design. 5. Znajdź datę rozpoczęcia podyplomowego (postgraduate) kursu MA Public Relations.
22
kliknięcie w zakładkę poprawne wykonanie zadania zmiana poziomu/kliknięcie w link komentarz
komentarz badanego
Badany nr 3 kobieta, 21 lat
0:00
0:30
1:00
1:30
2:00
2:30
3:00
3:30
4:00
4:30
5:00
5:30
6:00
6:30
7:00
7:30
8:00
8:30
9:00
9:30
10:00
poziom 0 poziom 1 poziom 2 zad. 1 poziom 3 zad. 3
zad. 4
zad. 5
poziom 4 zad. 2 poziom 5
Za małe! Bez sensu... (za mała wielkość fonta)
Czy ja go ominęłam?
Gdzie tu jest „wróć”?
Badana szuka kursów poprzez wyszukiwarkę
przeglądanie treści scrollowanie kliknięcie w logo kliknięcie opcji „szukaj”
Polecenia: 1. Znajdź dane kontaktowe uczelni . 2. Znajdź biografię dr. Jonathana Gandera, prowadzącego badania na uniwersytecie. 3. Znajdź informację ile trwa kurs MA Graphic Media Design na uczelni London College of Communication. 4. Znajdź cenę kursu MA Textile Design. 5. Znajdź datę rozpoczęcia podyplomowego (postgraduate) kursu MA Public Relations.
kliknięcie w zakładkę poprawne wykonanie zadania zmiana poziomu/kliknięcie w link komentarz
komentarz badanego
23
Badany nr 4 kobieta, 21 lat
0:00
0:30
1:00
1:30
2:00
2:30
3:00
3:30
4:00
4:30
5:00
5:30
6:00
6:30
7:00
7:30
8:00
8:30
9:00
9:30
10:00
poziom 0 poziom 1 poziom 2 poziom 3 poziom 4 poziom 5
Czemu to wszystko wygląda tak samo?
Badana szuka kursów poprzez wyszukiwarkę
Badana poprawnie wykonałapolecenia
przeglądanie treści scrollowanie kliknięcie w logo kliknięcie opcji „szukaj”
Polecenia: 1. Znajdź dane kontaktowe uczelni . 2. Znajdź biografię dr. Jonathana Gandera, prowadzącego badania na uniwersytecie. 3. Znajdź informację ile trwa kurs MA Graphic Media Design na uczelni London College of Communication. 4. Znajdź cenę kursu MA Textile Design. 5. Znajdź datę rozpoczęcia podyplomowego (postgraduate) kursu MA Public Relations.
24
kliknięcie w zakładkę poprawne wykonanie zadania zmiana poziomu/kliknięcie w link komentarz
komentarz badanego
Badany nr 5 mężczyzna, 29 lat
0:00
0:30
1:00
1:30
2:00
2:30
3:00
3:30
4:00
4:30
5:00
5:30
6:00
6:30
7:00
7:30
8:00
8:30
9:00
9:30
10:00
poziom 0 poziom 1 poziom 2 zad. 1 poziom 3 zad. 3
zad. 4
zad. 5
poziom 4 zad. 2 poziom 5
Powrót za pomocą funkcji drzewa. Badany szuka kursów poprzez listę alfabetyczną
przeglądanie treści scrollowanie kliknięcie w logo kliknięcie opcji „szukaj”
Polecenia: 1. Znajdź dane kontaktowe uczelni . 2. Znajdź biografię dr. Jonathana Gandera, prowadzącego badania na uniwersytecie. 3. Znajdź informację ile trwa kurs MA Graphic Media Design na uczelni London College of Communication. 4. Znajdź cenę kursu MA Textile Design. 5. Znajdź datę rozpoczęcia podyplomowego (postgraduate) kursu MA Public Relations.
kliknięcie w zakładkę poprawne wykonanie zadania zmiana poziomu/kliknięcie w link komentarz
komentarz badanego
25
Porรณwnanie 0:00
0:30
1:00
1:30
2:00
2:30
3:00
3:30
4:00
4:30
5:00
5:30
6:00
6:30
7:00
7:30
8:00
8:30
9:00
9:30
10:00
poziom 0 poziom 1 poziom 2 poziom 3
zad. 1 zad. 3
poziom 4
zad. 4
zad. 5
zad. 2
poziom 5
poziom 0 poziom 1 poziom 2 poziom 3
zad. 1 zad. 3
poziom 4
zad. 4
zad. 5
zad. 2
poziom 5
poziom 0 poziom 1 poziom 2
zad. 1
poziom 3
zad. 3
poziom 4
zad. 4
zad. 5
zad. 2
poziom 5
poziom 0 poziom 1 poziom 2 poziom 3
zad. 1
poziom 4 poziom 5
zad. 3
zad. 2
zad. 4
zad. 5
poziom 0 poziom 1 poziom 2 poziom 3
zad. 1 zad. 3
poziom 4 poziom 5
26
zad. 2
zad. 4
zad. 5
Porównanie Podsumowanie zapisu drogi użytkownika uwzględniające procesy badania takie jak: ilość kliknięć, ilość najechań na elementy interaktywne, nawigacyjne, czas scrollowania, ilość przejść pomiędzy podstronami.
Ilość kliknięć
Ilość najechań
Czas scrollowania
Zmiana stanu (przejście na podstronę)
Użytkownik 1
39
121
44 sekundy
18
Użytkownik 2
14
21
15 sekund
9
Użytkownik 3
33
46
111 sekund
14
Użytkownik 4
22
53
33 sekundy
9
Użytkownik 5
25
99
47 sekund
13
27
Wnioski We wszystkich przypadkach badanym udało się wykonać każde z poleceń. Nie obyło się jednak bez błądzenia po stronie internetowej, które najczęściej wynikało z nieprawidłowego oznakowania poszczególnych zakładek.
Najlepsza droga
Drzewo podstron
Najbardziej efektywnym sposobem szukania informacji na stronie są wyszukiwarki. W każdym z przypadków użycia wyszukiwarki, pierwszym wynikiem jest docelowa podstrona.
Wbrew oczekiwaniom, badani rzadko i niechętnie korzystali z drzewa podstron. Zagubieni najczęściej wracali na stronę główną. Może być to spowodowane niejednoznacznym wyglądem funkcji.
Ilość dróg użytkownika Trzy drogi dotarcia do kursów zamiast pomagać, utrudniają filtrowanie informacji. Znając docelową nazwę kursu nie warto poszukiwać kursu poprzez jego cechy (postgraduate, undergradute, itp...). Żaden z badanych nie szukał kursów poprzez uczelnię, na której się odbywały.
Porządkowanie treści Niektórzy badani mieli problem z dotarciem do informacji. Najczęściej było to związane ze zbyt ogólną nazwą zakładki, która wprowadzała w błąd użytkownika z ograniczoną ilością informacji.
28