Jak samodzielnie badać użyteczność stron www? – prototypowanie instrukcji

Prototypowanie instrukcji analizy strony UAL 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

Wprowadzenie Wstęp Użytkownikowi została przedstawiona instrukcja opracowania analizy strony internetowej University of Arts London. Jego zadaniem było rozwiązywanie poszczególnych zadań wykorzystując udostępnione mu narzędzia, takie jak: laptop z dostępem do internetu, kartki A4, telefon.

Cele • Sprawdzenie w jaki sposób użytkownik rozumie polecenia • Ustalenie jak szybko rozwiązuje polecenia • Zweryfikowanie poprawności poleceń

Opis badania Wykonanie

Prezentacja instrukcji Użytkownik otrzymuje instrukcję w formie elektronicznej w formacie pdf.

Wprowadzenie Twoim zadaniem będzie przeprowadzenie analizy strony internetowej Londyńskiego Uniwersytetu Artystycznego. Badanie będzie składało się z dziesięciu kroków.

W prawej kolumnie umieszczane będą konkretne polecenia. Przydatne będą kartki A4 do rysowania i zapisywania swoich notatek.

STWÓRZ

Użytkownik zapoznaje się ze wprowadzeniem oraz rozwiązuje wstępne zadanie, jakim jest stworzenie folderu, w którym będzie gromadził swoje zrzuty oraz notatki.

Folder, w którym będziesz umieszczał gromadzone przez siebie notatki, zrzuty ekranu oraz rysunki.

pisanie/rysowanie czytanie/przeglądanie treści strony poprawnie wykonane zadanie zadanie częściowo wykonane poprawnie niepoprawnie wykonane zadanie/niewykonane inna czynność

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

Pierwsze kroki W pierwszym poleceniu użykownik zapoznaje się z witryną poprzez rozwiązywanie prostych zadań i odpowiadanie na postawione pytania.

Zadanie nr 1 I. Cele portalu

Użytkownik bez problemu rozwiązał polecenie, skierował się do zakładki UAL

W tym poleceniu wstępnie zapoznasz się ze stroną, dowiesz się o tym jakie treści występują na stronie, czym zajmuje się uczelnia, jakie są cele uczelni.

Badany stworzył plik notatnika, w którym zapisał odpowiedzi na zadane pytania

ZNAJDŹ: Zakładkę „About UAL”

WYPISZ: Jaka jest tematyka strony?

Czym zajmuje się uczelnia?

Jakie są cele uczelni?

WYBIERZ:

Badany wybrał funkcje jakie jego zdaniem spełnia witryna, nie zaznaczył funkcji reklamowej, jaką zdecydowanie strona spełnia

Które z funkcji spełnia strona?

EDUKACYJNA REKLAMOWA USŁUGOWA INFORMACYJNA SZKOLENIOWA FOTOGRAFICZNA SPOŁECZNOŚCIOWA ROZRYWKOWA

Badany nie wypisał docelowych uzytkowników dla każdej z zakładek

WYPISZ: Dla każdej zakładki z menu po dwa przykłady docelowych użytkowników strony.

0:00

0:30

1:00

1:30

2:00

2:30

3:00

Badany miał problem z wypisaniem odpowiedniej ilości użytkowników docelowych. Polecenia może być zmyt wymagające - ciężko sprecyzować dla kogo konkretne zakładki są przeznaczone.

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

Layout W drugim poleceniu użytkownik dowiaduje się z jakich elementów zbudowana jest strona, dzieli te elementy ze względu na ich funkcje.

Zadanie nr 2 II. Layout witryny

Użytkownik zrobił zrzuty ekranu strony głównej i podstrony za pomocą wtyczki

Dowiesz się z jakich elementów zbudowana jest strona, podzielszi te elementy ze względu na ich funkcje.

ZRÓB ZRZUT EKRANU: Posłuż się wtyczką do przeglądarki Chrome Page Screen Capture Strony głównej Dowolnej podstrony

OBRYSUJ NA PODSTAWIE ZRZUTÓW:

Użytkownik wykorzystał program Photoshop do obrysowania strony głównej i podstrony.

Badany nie uzwględnił wszystkich elementów na podstronie.

Elementy budujące stronę główną Elementy budujące podstronę Możesz posłużyć się programem Photoshop.

PODPISZ NA RYSUNKU:

Badany podpisał każdy element

Czym jest każdy z obrysowanych obszarów

Zrzut ekranu

0:00

0:30

1:00

1:30

2:00

2:30

3:00

Wykorzystywanie programu Photoshop może być problematyczne dla użytkowników. Przydatne okazuje się możliwość edytowania, dodawania tekstu, zmiany krycia.

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

Cechy wizualne W trzecim kroku użytkownik gromadzi informacje o użytych fontach oraz kolorach występujących na witrynie.

Zadanie nr 3 III. Cechy wizualne

Użytkownik korzystał z narzędzia wycinanie w Windowsie, nie wyciął wszystkich fontów dostępnych na witrynie

Zgromadzisz informacje o użytych fontach oraz kolorach występujących na witrynie.

WYTNIJ ZE ZRZUTU: Po każdym rodzaju kroju pisma występującego na stronie

Użytkownik nie wiedział jak zmierzyć wysokość krojów pisma, polecenie jest nieprecyzyjne

ZMIERZ I ZAPISZ:

Badany nie podpisuje wszystkich fontów dostępnych na stronie

PODPISZ KAŻDY FONT

Wysokość występujących krojów pisma

Posłuż się wtyczką „What Font?” do przeglądarki.

Badany poprawnie wypisał parametry za pomocą narzędzia pipeta w programie Photoshop

WYPISZ: Parametry stałych kolorów występujących na stronie Parametry stałych kolorów fontów występujących na stronie

0:00

0:30

1:00

1:30

2:00

2:30

3:00

Polecenie zmierzenia wysokości fontów jest nieprecyzjne. Użytkownik nie wie za pomocą jakiego narzędzia zmierzyć fonty.

3:30

4:00

4:30

5:00

5:30

6:00

6:30

Badany nie wykorzystał wszystkich krojów dostępnych na stronie.

W poleceniu należałoby sprecyzować, w których miejscach użytkownik ma ich szukać.

7:00

7:30

8:00

8:30

9:00

9:30

10:00

Nawigacja W trzecim kroku użytkownik gromadzi informacje o użytych fontach oraz kolorach występujących na witrynie.

Zadanie nr 4 IV. Nawigacja

Badany poprawnie wykonał zadanie

ZNAJDŹ:

Nauczysz poruszać się szybko po stronie

Kurs „MA Animation” wykorzystując odpowiednią wyszukiwarkę kursów Artykuł „How to work as a freelancer” wykorzystując odpowiednią wyszukiwarkę wyrazów

Użytkownik wypisał podonieństwa oraz różnice

WYPISZ: Podobieństwa pomiędzy dwoma wyszukiwarkami Różnice pomiędzy dwoma wyszukiwarkami

0:00

0:30

1:00

1:30

2:00

2:30

3:00

Porównanie okazało się dobrym rozwiązaniem. Badany skorzystał obu wyszukiwarek i zauważył pomiędzy nimi różnice.

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

Architektura informacji Użytkownik buduje schemat architektury informacji. Rozpoznaje poszczególne drogi dotarcia do informacji.

Zadanie nr 5 V. Architektura Informacji

Badany znalazł biografię dr Jamesa Clarka

ZNAJDŹ:

Zbudujesz mapę strony, wraz z drogami jakimi można się po niej poruszać.

Biografię doktora Jamesa Clarka w zakładce „Research” Do tego zadania nie używaj żadnej z wyszukiwarek

ZAPISZ:

Badany zapisał w notatniku nazwy podstron jakie odwiedził docierając do biografii

Chronologicznie drogę jaką przeszedłeś docierając do biografii uwzględniając każdą z odwiedzonych podstron.

NARYSUJ:

Badany nie uprościł drogi, ponieważ uwzględnił wszystkie odwiedzone podstrony

Najprostszą drogę dotarcia do tej informacji.

Każdą z podstron potraktuj jako prostokąt, natomiast przejście z jednej podstrony na drugą jako linię.

ZNAJDŹ:

Badany znalazł podstronę

Zakładkę „Site Map” na stopce

PORÓWNAJ:

Badany porównał drogę ze swoim rysunkiem, okazało się że drogi dotarcia do informacji znacząco się różnią

Każdy etap dotarcia do biografii ze swoim rysunkiem.

NARYSUJ:

Badany narysował mapę tylko zakładki „Research”.

Mapę, na której umieścisz każdą z dróg dostępnych na liście.

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

10:00

10:30

11:00

11:30

12:00

12:30

13:00

13:30

14:00

14:30

15:00

15:30

16:00

16:30

17:00

17:30

18:00

18:30

19:00

19:30

20:00

Badany opisując drogę dotarcia do artykułu zapomniał o dwóch podstronach, które odwiedził. Można byłoby tego uniknąć gdyby badany jednocześnie szukał artykułu oraz zapisywał swoją drogę.

Polecenie jest nieprecyzyjne. Narysowanie tak złożonej mapy strony jest zbyt czasochłonne dla badanego. Należałoby zmienić polecenie tak, aby badany narysował tylko część architektury.

Wnioski badanego Użytkownik zwraca uwagę na zalety i wady strony.

Zadanie nr 6 VI. Wnioski

Użytkownik wypisał swoje wnioski

WYPISZ:

Zwrócisz uwagę na wady i zalety strony.

Zalety strony Co podobało Ci się na stronie?

Wady strony Jakie problemy napotkałeś?

Wnioski z dotychczasowych analiz Co warto byłoby zmienić?

0:00

0:30

1:00

1:30

2:00

2:30

3:00

Użytkownik prawidłlowo rozwiązał zadanie. Sprawdziła się metoda stawiania konkretnych pytań.

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

Cele badania Użytkownik planuje badanie, opisuje cele oraz badanych.

Zadanie nr 7 VII. Cele badania Zaplanujesz badanie dla użytkowników, w celu sprawdzenia swoich wniosków i wątpliwośći.

Badany wypisał trudności użytkowników, oraz odpowiedział na zadane pytania.

NAPISZ: Co twoim zdaniem może sprawiać trudność użytkownikom strony?

Jaki wpływ mogą mieć liczne drogi dotarcia do informacji?

OKREŚL I WYPISZ:

Badany nie precyzyjnie opisał badanie, błędnie określił cele badania.

Na czym polega badanie?

Jakie są cele badania?

Jaki badanie będzie przebiegało?

NAPISZ:

Zadania skonstruowane przez badanego nie wyczerpują problemów

Zadania dla badanych sprawdzające wpływ zaobserwowanych problemów.

0:00

0:30

1:00

1:30

2:00

2:30

3:00

Drugie pytanie było bardzo nieprecyzyjne. Użytkownik nie wiedział czym badanie się charakteryzuje, jakich narzędzi użyć do jego przeprowadzenia. Nie obyło się bez wskazówek autora.

3:30

4:00

4:30

5:00

5:30

6:00

6:30

Badany skonstruował tylko 2 zadania dla użytkownika. Żadne z nich nie obejmowało metod przeglądania kursów, które były kluczowe w procesie filtrowania informacji.

7:00

7:30

8:00

8:30

9:00

9:30

10:00

Przeprowadzenie badań Przeprowadza badanie na użytkownikach, dokumentuje drogę i ich zachowania.

Zadanie nr 8 VIII. Przeprowadzenie badań Przeprowadzisz badania na użytkownikach oraz je udokumentujesz.

Użytkownik przeprowadził badanie na tylko jednej osobie.

ZBIERZ: 5 osób, które wykonają Twoje polecenia

Użytkownik nagrał drogę badanego za pomocą nagrywarki pulpitu Windows

NAGRAJ;

Użytkownik narysował oś czasu oraz opisał co wykonywał badany

NARYSUJ:

Ekran, na którym każdy z badanych wykonuje polecenia.

Osie czasu na których przedstawisz czynności, jakie wykonywał każdy z użytkowników.

ZAZNACZ NA OSIACH:

Użytkownik narysował oś czasu oraz zaznaczył jakie czynności wykonywał badany

Przejścia na podstrony Kliknięcia w zakładki Użycie funkcji wyszukiwania Scrollowanie Poprawnie wykonane zadania

NAPISZ:

Użytkownik nie wypisał komentarzy

Komentarze badanych przy osiach czasu

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

10:00

10:30

11:00

11:30

12:00

12:30

13:00

13:30

14:00

14:30

15:00

15:30

16:00

16:30

17:00

17:30

18:00

18:30

19:00

19:30

20:00

Ze względu na czasochłonność zadania, użytkownik przeprowadził badanie na jednej osobie, co uniemożliwiło dokładne przeanalizowanie danych.

Nagranie nie obejmowało komentarza głosowego. Badany nie pokusił się także o dodanie uwag osoby rozwiązującej jego zadania.

Przedstawienie wyników Użytkownik zestawia ze sobą osie czasu użytkowników, znajduje zależności.

Zadanie nr 9 IX. Przedstawienie wyników Zestawisz ze sobą poszczególne osie czasu i zwrócisz uwagę na ich zależnośći.

Użytkownik przeprowadził badanie z tylko jednym badanym

PORÓWNAJ: Osie czasu każdego z badanych

WYPISZ:

Użytkownik przeprowadził badanie z tylko jednym badanym

Zależności pomiędzy drogami użytkownika Podobieństwa

0:00

0:30

1:00

1:30

2:00

2:30

3:00

Bez zebrania odpowiedniej ilości danych nie było możliwe przeprowadzenie porównania. Poza tym polecenia nie mówiły na czym miałoby to porównanie polegać oraz co należałoby z niego wysnuć.

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

Wnioski z badań Użytkownik wyciąga wnioski z całej przeprowadzonej analizy.

Zadanie nr 10 X. Wnioski z badań NAPISZ:

Użytkownik wysnuł tylko częściowe wnioski z badania.

Jaka jest najwydajniejsza droga dotarcia do informacji?

Jak sprawdzają się liczne drogi dotarcia do informacji?

Jak sprawdzają się funkcjonalności strony?

Wyszukiwarka, drzewo podstron?

0:00

0:30

1:00

1:30

2:00

2:30

3:00

Wnioski były niekompletne przez brak odwołań do metod nawigacyjnych. Polecenie z góry zakładało, że użytkownik będzie sprawdzał liczne drogi dotarcia do informacji.

3:30

4:00

4:30

5:00

5:30

6:00

6:30

Niestety przez nieprecyzyjne wcześniejsze polecenia, nie udało się naprowadzić badanego do przeprowadzenia konkretnych badań na użytkownikach.

7:00

7:30

8:00

8:30

9:00

9:30

10:00

Wnioski Badanie na początku nie sprawiało problemów użytkownikowi. Każde rozwiązane zadanie naprowadzało użytkownika na zagadnienia potrzebne do następnych zadań. W przypadku bardziej skomplikowanych zagadnień, takich jak tworzenie mapy strony, przeprowadzanie badań z użytkownikami proste polecenia były niewystarczająće. Bez wstępu/wprowadzenia użytkownika do zagadnienia/ definicji trudno było przeprowadzić wystarczająca ilość zadań.

Po części sprawdziło się dawanie wolnej ręki badanemu. W przypadku poleceń, gdzie nie precyzowałem narzędzia, jakiego użytkownik powinien użyć, zazwyczaj wybierał te najłatwiejsze (najwydajniejsze). Przykładowo: przerysowując zrzuty podstron, użytkownik wykorzystał możliwości programu photoshop, żeby w miarę precyzyjnie obrysować konkretne obszary. Zadania z architekturą nie potrzebowały już takich rozwiązań, dlatego użytkownik zdecydował się wykonywać je na kartce papieru. Ciężko stwierdzić jak zmiana narzędzi komputerowych na manualne wpłynęła na jakość instrukcji.

Wnioski badanego pozostawiają wiele do życzenia. Ma się wrażenie, że użytkownik nie zrozumiał większości zagadnień, a jedynie posługiwał się wcześniejszymi doświadczeniami. W przypadku konstruowania zadania dla osoby badanej, użytkownik skorzystał z zadań wcześniej mu zadanych (Znalezienie biografii, zakładki „About UAL”). W instrukcji należałoby zawrzeć metodę weryfikowania, czy użytkownik prawidłowo rozwiązał zadanie.