Projekt interfejsu i badanie interakcji interfejsu
Badania Użyteczności Nina Duda Prowadzący: prof. ASP dr hab. Wiesław Gdowicz, asyst. Marta Więckowska Zakład Badań Wizualnych i Interakcji ASP Katowice
Projekt interfejsu Założenia projektowe interfejsu: Interfejs ma charakter gry. Użytkownik klikając w elementy oraz wzorując się na dostępnej „galerii” układa wybrany przez siebie portret. Nie istnieje żaden stan końcowy, gra kończy się, gdy użytkownik odgadnie, że nie ma ona rozwiązania. • •
o projektu interfejsu zostało wykorzystanych 8 fotografii – portretów. D Fotografie podzielone są na 4 równe części (czoło, oczy, nos, usta) Każda z fotografii występuje w czterech wersjach zniekształcenia obrazu (raster, mozaika, ziarno, ciemne kreski) – po podziale daje to 128 elementów
wygląd zastosowanych filtrów przetworzenia obrazu
Layout interfejsu podzielony jest na dwie części: „Galeria” Część znajdująca się po lewej stronie layoutu składa się z 8 prostokątów . Każdy z nich przedstawia jeden portret złożony z 4 fragmentów przetworzonych obrazów. Przykłady te mają za zadanie pomóc użytkownikowi w odnalezieniu poszukiwanej części fotografii. Interakcje: po najechaniu kursorem na prostokąt następuje zmiana miejsca występowania każdego z filtrów. Ilość możliwych zmian dla każdego portretu – 4 „Ukłądanka” Po prawej stronie znajduje się obszar gry składający się z czterech prostokątów ułożonych w kolumnie, wypełnionych przetworzonymi fragmentami fotografii. Tutaj użytkownik klikając przełącza elementy układanki. Interakcje: po kliknięciu na prostokąt następuje zmiana wyświetlanego fragmentu fotografii na inny. W każdym prostokącie istnieje możliwość wyświetlenia 32 różnych obrazów Obie części interfejsu są są niezależne od siebie i nie łączą się ze sobą żadnym aktywnym linkiem.
schemat layoutu interfejsu. odcienie szarości oznaczają różne filtry przetworzenia obrazu.
Projekt interfejsu Budowa i zasada działania interfejsu
Interakcje
Schemat przedstawia budowę interfejsu z podpisanymi ilościami elementów możliwych do wyświetlenia w danym polu. Elementy te dzięki określonym interakcjom przełączają się między sobą. Litery od A do H są oznaczeniem kolejnych portretów znajdujących się w lewej części interfejsu.
Najechanie kursorem na jeden z elementów w części „galerii” powoduje zmianę jego wyglądu – przesunięcie każdego filtru na inną część portretu. Kliknięcie na jedno z pól w części układanki powoduje wyświetlenie w nim innego elementu pochodzącego z grupy 32 elementów przynależnych do konkretnego pola.
schemat pokazuje w jaki sposób następuje zmiana miejsc występowania każdego z filtrów na portretach w „galerii”. Każdy odcień szarości odpowiada innemu rodzajowi przetworzenia obrazu.
w każdym z pól w zaznaczonym obszarze istnieje możliwość wyświetlenia 4 różnych obrazów
w każdym z pól w zaznaczonym obszarze istnieje możliwość wyświetlenia 32 różnych obrazów
Projekt interfejsu Aby uniemożliwić użytkownikowi ułożenie całego portretu jednej osoby elementy w polach zostały pogrupowane w określony sposób. Poniższy schemat przedstawia dwa sposoby przydzielenia elementów fotografii do konkretnego pola układanki. Odcienie szarości symbolizują różne rodzaje graficznej modyfikacji obrazu. Każdy z tych sposobów został użyty dla 4 portretów (8 przetworzonych fotografii).
sposób 1
sposób 2
Droga użytkownika
element „galerii”
Przykadowy scenariusz drogi użytkownika
a b c d e f g
element „układanki”
h
20
kliknięcie najechanie
40
60
czas [s]
Badanie interakcji interfejsu Cel badania i pytania badawcze • • •
rzeanalizowanie drogi, jaką wykona użytkownik podczas korzystania z interfejsu, p jaka będzie kolejność działań podczas korzystania z zaprojektowanego interfejsu? po jakim czasie użytkownik zrozumie, że gra nie ma rozwiązania?
Badanie interakcji interfejsu Przebieg badania Badanie polega na obserwacji drogi i zachowań użytkownika podczas gdy badany korzysta z interfejsu. Badanie kończy się gdy użytkownik zrozumie, że nie istnieje żaden stan końcowy interfejsu oraz, że nie da się ułożyć żadnego portretu. Badany nie otrzyma żadnych wskazówek dotyczących działania interfejsu. • ilość osób badanych: 10 • w badaniu wzięły udział osoby w przedziale wiekowym 20-35 lat Osoby badane zajmują miejsce przed ekranem komputera, na którym wyświetlony zostanie interfejs, oraz dostaną polecenie: „Zapoznaj się z interfejsem” Sposób dokonywania pomiaru: • •
zapis drogi użytkownika na ekranie za pomocą programu Camtasia zapis komentarzy i uwag użytkownika wypowiadanych w trakcie badania
Badanie interakcji interfejsu Zapis drogi użytkownika – badany nr 1, 25 lat
a b c d e f g h
01
02
kliknięcie najechanie czas badania: 79 sekund ilość kliknięć: 63 ilość najechań: 3 czas, w którym badany wywołuje interakcje w części „galerii”
03
04
05
06
0
Osoba badana zrozumiała sens aplikacji po 1 minucie i 19 sekundach. Wielokrotne kliknięcia w jeden element świadczą o poszukiwaniu przez badanego „brakującej” części portretu, którą spodziewał się zobaczyć w danym miejscu. Badany wywołał 3 interacje (następujące po sobie) w „galerii”, jednak nie okazał większego zainteresowania tą częścią.
70
80
czas [s]
Badanie interakcji interfejsu
elementy „układanki”
elementy „galerii”
Zapis drogi użytkownika – badany nr 2, 21 lat a b c d e f g h
0
10
20
30
40
50
kliknięcie najechanie czas badania: 84 sekundy ilość kliknięć: 77 ilość najechań: 0
Osoba badana zrozumiała sens aplikacji po 1 minucie i 24 sekundach. Badany zapoznawał się z interfejsem klikając wielokrotnie w każdy z elementów (kliknięcia następują po sobie). Badany nie podjął żadnych działań w obszarze „galerii”. Kilkosekundowe przerwy między seriami kliknięć spowodowane są wypowiedziami badanego bądź wahaniem przed podjęciem dalszych działań.
60
70
80
czas [s]
90
Badanie interakcji interfejsu
elementy „układanki”
elementy „galerii”
Zapis drogi użytkownika – badany nr 3, 27 lat a b c d e f g h
0
10
20
30
kliknięcie najechanie
a b
czas badania: 104 sekundy ilość kliknięć: 69 ilość najechań: 13
c d e f g
50
60
80
70
czas [s]
Osoba badana zrozumiała sens aplikacji po 1 minucie i 44 sekundach. Badany zapoznawał się z interfejsem klikając wielokrotnie w każdy z elementów (kliknięcia następują po sobie w seriach). Badany poświęcił około 20 sekund na zapoznanie się z „galerią”. Nie udało mu się jednak odgadnąć jej celu.
czas, w którym badany wywołuje interakcje w części „galerii”
h
80
40
0
90
10
100
20
110
30
120
40
130
50
140
60
150 70
0
0
Badanie interakcji interfejsu
elementy „układanki”
elementy „galerii”
Zapis drogi użytkownika – badany nr 4, 22 lata a b c d e f g h
0
10
0
0
0
0
60
80
70
0
czas [s]
a b c d e f g h
80
0
0
10
100
20
110
30
1 0
40
1 0
50
1 0
60
1 0
70
160
0
170
0
Badanie interakcji interfejsu Zapis drogi użytkownika – badany nr 4, 22 lata – ciąg dalszy
a b c d e f g h
170
0
180
10
1 0
20
00 30
1040
050
60 0
czas [s]
kliknięcie najechanie czas badania: 230 sekund ilość kliknięć: 173 ilość najechań: 11 czas, w którym badany wywołuje interakcje w części „galerii”
Osoba badana zrozumiała sens aplikacji po 3 minutach i 50 sekundach. Badany zapoznawał się z interfejsem klikając wielokrotnie w każdy z elementów (kliknięcia następują po sobie w seriach różnej długości – od kilku do kilkunastu kliknięć). Badany skorzystał z „galerii” dwukrotnie, poświęcając na to łącznie około 14 sekund. Udało mu się odgadnąć cel tej części interfejsu i świadomie się nią posługiwać. Wzorując się na wyświetlanych portretach wyszukiwał w „układance” odpowiedniego fragmentu fotografii.
70
0
0
Badanie interakcji interfejsu
elementy „układanki”
elementy „galerii”
Zapis drogi użytkownika – badany nr 5, 23 lata a b c d e f g h
0
10
20
30
a b
40
50
czas badania: 109 sekund ilość kliknięć: 73 ilość najechań: 14
c d
czas, w którym badany wywołuje interakcje w części „galerii”
h
80
0
90
kliknięcie najechanie
10
100
20
110
30
120
40
130
80
70
czas [s]
Osoba badana zrozumiała sens aplikacji po 1 minucie i 49 sekundach. Badany zapoznawał się z interfejsem klikając wielokrotnie w każdy z elementów (od kilku do kilkunastu kliknięć). Kilkakrotnie zdarzają się również pojedyncze kliknięcia. Badany skorzystał z „galerii” trzykrotnie, poświęcając na to łącznie około 20 sekund. Udało mu się odgadnąć cel tej części interfejsu oraz świadomie się nią posługiwać. Wzorując się na wyświetlanych portretach wyszukiwał w „układance” odpowiedniego fragmentu fotografii.
e f g
60
50
140
60
150
70
0
0
90
Badanie interakcji interfejsu
elementy „układanki”
elementy „galerii”
Zapis drogi użytkownika – badany nr 6, 22 lata a b c d e f g h
0
10
20
30
40
c d f g
70
0
0
Osoba badana zrozumiała sens aplikacji po 1 minucie i 48 sekundach. Wielokrotne kliknięcia w jeden element świadczą o poszukiwaniu przez badanego „brakującej” części portretu, którą spodziewał się zobaczyć w danym miejscu. Badany trzykrotnie najeżdżał kursorem na „galerię”, jednak nie okazał większego zainteresowania tą częścią.
czas, w którym badany wywołuje interakcje w części „galerii”
e
60
czas [s]
czas badania: 108 sekund ilość kliknięć: 87 ilość najechań: 7
a b
50
h
00
kliknięcie najechanie
10010
20
30
40
50
60
70
0
0
Badanie interakcji interfejsu
elementy „układanki”
elementy „galerii”
Zapis drogi użytkownika – badany nr 7, 34 lata a b c d e f g h
0
10
20
30
50
60
70
80
90
czas [s]
czas badania: 104 sekundy ilość kliknięć: 78 ilość najechań: 15
a b c d
czas, w którym badany wywołuje interakcje w części „galerii”
e f g h
90
40
0
kliknięcie najechanie
100
10
20
30
Osoba badana zrozumiała sens aplikacji po 1 minucie i 44 sekundach. Badany klikając wielokrotnie w każdy z elementów zapoznawał się z obrazami wyświetlanymi w każdym z pól. Badany poświęcił około 15 sekund na zapoznanie się z „galerią” i stwierdził, że istnieje zależność miedzy tą częścią i „układanką”. Wzorując się na wyświetlanych portretach wyszukiwał w „układance” odpowiedniego fragmentu fotografii. 40
50
60
70
0
0
Badanie interakcji interfejsu
elementy „układanki”
elementy „galerii”
Zapis drogi użytkownika – badany nr 8, 22 lata a b c d e f g h
0
10
20
30
40
50
60
70
80
90
czas [s]
czas badania: 149 sekund ilość kliknięć: 116 ilość najechań: 11
a b c d e f g h
90
0
100
kliknięcie najechanie
10
110
20
120
30
czas, w którym badany wywołuje interakcje w części „galerii”
130
40
140
50
150
60
Osoba badana zrozumiała sens aplikacji po 2 minutach i 29 sekundach. Badany najpierw klikając wielokrotnie w każdy z elementów zapoznawał się z obrazami wyświetlanymi w każdym z pól. Krótsze serie kliknięć wiążą się z poszukiwaniem konkretnych fragmentów portretu Badany zapoznał się z „galerią”, jednak nie 0 0 70 odgadł zasady jej działania.
Badanie interakcji interfejsu Zapis drogi użytkownika – badany nr 9, 25 lat
elementy „galerii”
a b c d e
elementy „układanki”
f g h
0
10
20
30
40
a b
50
60
czas badania: 126 sekund ilość kliknięć: 92 ilość najechań: 16
c d e
h
90
0
100
kliknięcie najechanie
10
110
20
120
30
130
40
140
50
90
czas [s]
Osoba badana zrozumiała sens aplikacji po 2 minutach i 6 sekundach. Badany przeglądał obrazy dostępne w różnych polach, oraz poszukiwał „brakujących” obrazów za pomocą krótkich serii kliknięć (4–7) w różne elementy „układanki” . Badany zapoznał się z „galerią”, jednak nie odgadł zasady jej działania.
czas, w którym badany wywołuje interakcje w części „galerii”
f g
80
70
150
60
70
0
0
Badanie interakcji interfejsu elementy „galerii”
a b
elementy „układanki”
Zapis drogi użytkownika – badany nr 10, 20 lat
h
c d e f g
0
10
20
30
40
50
60
70
90
czas [s]100
Osoba badana zrozumiała sens aplikacji po 2 minutach i 42 sekundach. Badany zapoznał się z „galerią”, w ciągu ok. 30 sekund, mimo to nie udało mu się zrozumieć jej sensu ani zasady działania. Badany przeglądął obrazy dostępne w różnych polach za pomocą krótkich serii kliknięć. Dwukrotnie skupił się na poszukiwaniu obrazu w jednym polu klikając w nie wielokrotnie.
a b c d e f g h
90
80
0
100
kliknięcie najechanie
10
110
20
120
30
130
40
czas, w którym badany wywołuje interakcje w części „galerii”
140
50
150
60
160
czas badania: 162 sekundy ilość kliknięć: 106 ilość najechań: 21
70
0
0
100
Badanie interakcji interfejsu Komentarze i reakcje użytkowników podczas badania •
• •
• •
szyscy użytkownicy wyrażali zdziwienie gdy w polu, na które klikali pojawiał W się fragment portretu, który nie odpowiadał normalnemu układowi elementów ludzkiej twarzy. Dwoje użytkowników miało problemy ze zidentyfikowaniem przetworzonych graficznie fragmentów fotografii. Użytkownicy przyznawali, że nie rozumieją zasady działania aplikacji, ale rozumieli jej sens – dochodzili do wniosku, że nie da się ułożyć żadnej fotografii w całości. Badanych irytował fakt, że układanka nie ma żadnego rozwiązania. Tylko trzy osoby badane zrozumiały jaką funkcję pełnią przykładowe portrety w lewej części interfejsu. Jeden badany całkowicie zignorował tę część.
Badanie interakcji interfejsu Zestawienie czasów badania użytkowników. Badany 1
czas badania Badany 2
czas korzystania z „galerii”
Badany 3 Badany 7 Badany 6 Badany 5 Badany 9 Badany 8 Badany 10 Badany 4 01
min
2 min3
min
4 min
Wykres przedstawia zestawienie czasów badania wszystkich użytkowników oraz czasów jakie spędzili oni korzystajc z „galerii”. czas [minuty]
Nazwy badanych, którym udało się odgadnąć sens działania „galerii” zostały zaznaczone niebieskim kolorem. Z wykresu wynika, że zrozumienie celu części „galerii” nie jest zależne od długości czasu poświęconego na zapoznanie się z nią. Wszyscy przebadani użytkownicy doszli do wniosku, że aplikacja nie ma rozwiązania (zrozumieli sens interfejsu). Zajęło im to od 1 minuty 19 sekund do 3 minut 50 sekund. Średnia z czasów badania wszystkich użytkowników to 2 minuty 5 sekund.
Badanie interakcji interfejsu Wnioski i podsumowanie •
• • •
•
•
żytkownicy potrzebowali od 1 minuty 19 sekund do 3 minut i 50 sekund. U Dwoje badanych wykonało zadanie w czasie krótszym niż 1 minutę 40 sekund sekund, najdłuższe badanie trwało 3 minuty 50 sekund sekund. Pozostałe 7 osób badanych mieściły się w przedziale czasowym 1 min 44 -2 min 43 s. Użytkownicy nie rozumieli dlaczego w każdym polu występują różne fragmenty portretów. Większość badanych nie zrozumiała zasady działania przykładowych portretów, bądź z nich nie skorzystała. Badani podejmowali próby ułożenia całego portretu jednej osoby. Nie mogąc znaleźć brakującego elementu układanki reagowali poirytowaniem lub rozczarowaniem. Większość kliknięć występuje w bardzo krótkich odstępach czasowych. Świadczy to o tym, że osoby badane starały się jak najszybciej skończyć układankę, nie skupiając się na zrozumieniu zasady działania interfejsu. Wielokrotne klikanie w jeden element wynika z poszukiwania brakującego elementu portretu (użytkownik po odnalezieniu 3 pasujących części stara się jak najszybciej znaleźć 4 element tej samej fotografii).