1
Projekt interfejsu i badania interakcji interfejsu Klaudia Gołaszczyk
Pracownia Badań Użyteczności prowadzący: prof. ASP dr hab. Wiesław Gdowicz, asyst Marta Więckowska Zakład Badań Wizualnych i Interakcji Akademia Sztuk Pięknych w Katowicach 2014
Projekt interfejsu ZAłożenia projektowe iterfejsu • interfejs składa się z 9 kwadratów ułożonych w układ 3x3, z których każdy jest wypełniony dwukolorowym wzorem, tak by można było określić położenie kwadratu po jego obrocie w prawo lub lewo • kwadraty po kliknięciu zmieniają kolor • możliwe interakcje: (1) kliknięcie • interfejs jest zaprojektowany jako ciąg zdarzeń (przyczyna - skutek) od stanu początkowego (9 kwadratów układ 3x3) do stanu końcowego
2 stan początkowy
stan końcowy
Sposób zapisu stanu elementów interfejsu oraz interakcji stan Elementu
interakcja
opis Jeden z dziewięciu (1, 2, 3, 4, 5, 6, 7, 8, 9) fioletowych elementów podstawowych interfejsu.
znak stanu
3 opis
Fioletowy kwadrat.
Jeden z dziewięciu (1, 2, 3, 4, 5, 6, 7, 8, 9) różowych elementów interfejsu.
Różowy kwadrat.
Jeden z dziewięciu (1, 2, 3, 4, 5, 6, 7, 8, 9) białych (niewidocznych) elementów
Biały kwadrat z outlinem.
Ciemno różowe kółko.
kliknięcie Kliknięcie w element fioletowy.
Po kliknięciu element zmienia sam siebie, lub elementy które znajdują się dookoła narożnika na kolor różowy.
Kliknięcie w element różowy.
Po kliknięciu element zmienia sam siebie, lub elementy które znajdują się dookoła narożnika na kolor biały (niewidoczny).
Kliknięcie w element biały (niewidoczny).
Po kliknięciu element zmienia sam siebie, lub elementy które znajdują się dookoła narożnika na kolor fioletowy.
Interakcje akcja
4 element
skutek :
zmiana stantu elementów które znajdują się dookoła narożnika
kliknięcie
1
1
2
4
kliknięcie
3
2
3
6
kliknięcie
7
4
7
8
kliknięcie
9
6
8
9
skutek :
kliknięcie
zmiana stantu elementu który został kliknięty
kliknięcie
2
2
kliknięcie
4
4
kliknięcie
5
5
kliknięcie
6
6
kliknięcie
8
8
Scenariusz drogi użytkownika
io ść kl ilo ikn ię ść zm ć po ilo d ść ian rz kl sta ąd el ikni nu em ęć po en la zd ty ar in ze ń te
rf e
js
u
5
-
2
2
1
-
5
1
2
-
2
2
3
-
5
1
4
-
2
2
5
-
5
1
6
-
2
2
7
-
5
1
8
-
2
2
9
W scenariuszu została pokazana jedna z dróg, która wymaga jak najmniej kliknięć do uzyskania stanu końcowego interfejsu. Ilość kliknięć: 14 Aby zrozumieć sens interfejsu muszą być spełnione warunki takie jak: jak najmniejsza liczba powrotów do stanu początkowego, im mniej użytkownik wraca do stanu początkowego, tym lepiej rozumie interfejs. Minimalna ilość powóceń do stanu początkowego wynosi 4 kliknięcie wszystkich narożników pod rząd kliknięcie w element 2 razy pod rząd (aby doprowadzić do zniknięcia) kliknięcie w różowe elementy które zmieniają same siebie na niewidoczne i dojście do stanu końcowego
Opis badania Cel badania • śledzenie drogi jaką wykona użytkownik od stanu wyjściowego do stanu końcowego • na podstawie wyników wykazanie błędów i funkcjonalności interfejsu • stwierdzenie stopnia rozumienia struktury interfejsu
sposób dokonywania pomiaru • zapis drogi użytkownika uwzględniający kilknięcia
sposób realizacji • ilość osób badanych: 10 • osoby badane siadają przed ekranem komputera, na którym wyświetlany jest interfejs • polecenie dla osoby badanej: „zapoznaj się z interfejsem”
6
Zapis drogi użytkownika
7
tabela opisu zdarzeń - droga użytkownika
io ść
kl ik ni
ęc ia
zm pod ia rz ilo n st ąd ść an kl u ik ni el ęć em e po nt y la zd ar ze ń
Badany nr 1
Podsumowanie:
-
2
2
1
suma wszystkich kliknięć : 14
-
5
1
2
czas wykonywania zadania :
19s
-
2
2
3
-
5
1
4
średni czas kliknięć:
1,3s
1
2
2
5
-
5
1
6
-
2
2
7
-
5
1
8
-
2
2
9
Użytkownik doszedł do stanu końcowego w sposób jaki przewiduje scenariusz. Ilość i sposób wyboru kliknięć jest przemyślana.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
en
ty
liczba kliknięć
el
em
wykres czasu interakcji i zmian stanu elementów
1 2 3 4 5 6 7 8 9 1
2
3
4
5
6
7
pola oznaczeń czasu w sekundach
8
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
Użytkownik zrozumiał iterfejs w 5 kliknięciu, w 8 sekundzie.
26
27
28
29
30
31
32
33
34
35
Zapis drogi użytkownika
8
tabela opisu zdarzeń - droga użytkownika
io ść
kl ik ni
ęc ia
zm pod ia rz ilo n st ąd ść an kl u ik ni el ęć em e po nt y la zd ar ze ń
Badany nr 2
Podsumowanie:
-
2
2
1
suma wszystkich kliknięć :
25
-
7
3
2
-
2
2
3
czas wykonywania zadania :
32s
1
7
4
4
średni czas kliknięć:
1,2s
1
2
2
5
1
8
4
6
-
2
2
7
1
8
4
8
-
2
2
9 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
en
ty
liczba kliknięć
el
em
wykres czasu interakcji i zmian stanu elementów
1 2 3 4 5 6 7 8 9 1
2
3
4
5
6
7
pola oznaczeń czasu w sekundach
8
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
Droga użytkownika bardzo różni się od scenariusza. Duża ilość powróceń do stanu początkowego występuje do czasu 19 kliknięcia. Kolejne kliknięcia są nieprzypadkowe, użytkownik klika w odpowiedni sposób i dochodzi do 26stanu 27 koncowego. 28 29 30 31 32 33 34 35 Użytkownik zrozumiał interfejs w 19 kliknięciu, w 25 sekundzie.
Zapis drogi użytkownika
9
tabela opisu zdarzeń - droga użytkownika
io ść
kl ik ni
ęc ia
zm pod ia rz ilo n st ąd ść an kl u ik ni el ęć em e po nt y la zd ar ze ń
Badany nr 3
Podsumowanie:
-
2
2
1
suma wszystkich kliknięć :
19
-
8
4
2
czas wykonywania zadania :
27s
-
2
2
3
średni czas kliknięć:
1,4s
-
4
0
4
-
2
2
5
1
8
4
6
-
2
2
7
-
5
1
8
-
2
2
9
Użytkownik do 17 kliknięcia nie wykazuje żadnych czynników świadczących o zrozumieniu interfejsu. Użytkownik zrozumiał interfejs w 17 kliknięciu, w 25 sekundzie. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
en
ty
liczba kliknięć
el
em
wykres czasu interakcji i zmian stanu elementów
1 2 3 4 5 6 7 8 9 1
2
3
4
5
6
7
pola oznaczeń czasu w sekundach
8
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
26
27
28
29
30
31
32
33
34
35
Zapis drogi użytkownika
10
tabela opisu zdarzeń - droga użytkownika
io ść
kl ik ni
ęc ia
zm pod ia rz ilo n st ąd ść an kl u ik ni el ęć em e po nt y la zd ar ze ń
Badany nr 4
Podsumowanie:
-
2
2
1
suma wszystkich kliknięć :
20
-
8
4
2
czas wykonywania zadania :
20s
-
2
2
3
1s
-
4
1
4
średni czas kliknięć:
-
2
2
5
-
8
4
6
-
2
2
7
-
5
1
8
-
2
2
9
Całkowite zrozumienie następuje w 15 kliknięciu kiedy po tym czasie użytkownik nie wraca do żadnego stanu początkowego i dochodzi do stanu końcowego. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
en
ty
liczba kliknięć
el
em
wykres czasu interakcji i zmian stanu elementów
1 2 3 4 5 6 7 8 9 1
2
3
4
5
6
7
pola oznaczeń czasu w sekundach
8
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
Użytkownik zrozumiał interfejs 27 28 29 30 31 32 33 34 w 15 kliknięciu, w 15 sekundzie.
26
35
Zapis drogi użytkownika
11
tabela opisu zdarzeń - droga użytkownika
io ść
kl ik ni
ęc ia
zm pod ia rz ilo n st ąd ść an kl u ik ni el ęć em e po nt y la zd ar ze ń
Badany nr 5
Podsumowanie:
-
2
2
1
suma wszystkich kliknięć :
23
-
5
1
2
czas wykonywania zadania :
25s
-
2
2
3
2
5
1
4
średni czas kliknięć:
1,1s
-
2
2
5
1
5
1
6
-
2
2
7
1
5
1
8
-
2
2
9
Użytkownik do 18 kliknięcia wraca do stanów początkowych, jest ich o tyle więcej niż w scenriuszu, oraz są na tyle nieprzemyślane, że świadczy to o niezroumieniu do tej pory interfejsu. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
en
ty
liczba kliknięć
el
em
wykres czasu interakcji i zmian stanu elementów
1 2 3 4 5 6 7 8 9 1
2
3
4
5
6
7
pola oznaczeń czasu w sekundach
8
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
Użytkownik zrozumiał interfejs 27 28 29 30 31 32 33 34 35 w 18 kliknięciu, w 20 sekundzie.
26
Zapis drogi użytkownika
12
tabela opisu zdarzeń - droga użytkownika
io ść
kl ik ni
ęc ia
zm pod ia rz ilo n st ąd ść an kl u ik ni el ęć em e po nt y la zd ar ze ń
Badany nr 6
Podsumowanie:
-
2
2
1
suma wszystkich kliknięć :
14
-
5
1
2
czas wykonywania zadania :
28s
-
2
2
3
-
5
1
4
średni czas kliknięć:
2s
1
2
2
5
-
5
1
6
-
2
2
7
-
5
1
8
-
2
2
9
Użytkownik doszedł do stanu końcowego w sposób jaki przewiduje scenariusz. Ilość i sposób wyboru kliknięć jest przemyślana.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
en
ty
liczba kliknięć
el
em
wykres czasu interakcji i zmian stanu elementów
1 2 3 4 5 6 7 8 9 1
2
3
4
5
6
7
pola oznaczeń czasu w sekundach
8
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
Użytkownik zrozumiał iterfejs w 5 kliknięciu, w 11 sekundzie.
26
27
28
29
30
31
32
33
34
35
Zapis drogi użytkownika
13
tabela opisu zdarzeń - droga użytkownika
io ść
kl ik ni
ęc ia
zm pod ia rz ilo n st ąd ść an kl u ik ni el ęć em e po nt y la zd ar ze ń
Badany nr 7
Podsumowanie:
-
2
2
1
suma wszystkich kliknięć :
23
2
8
4
2
czas wykonywania zadania :
35
-
2
2
3
1,5s
-
5
1
4
średni czas kliknięć:
-
2
2
5
1
8
4
6
-
2
2
7
1
8
4
8
-
2
2
9
Użytkownik w 18 kliknięciu wykazuje jeden z czynników świadczących o zrozumieniu interfesjsu: kliknięcie w różowe elementy które zmieniają same siebie na niewidoczne i dojście do stanu końcowego. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
en
ty
liczba kliknięć
el
em
wykres czasu interakcji i zmian stanu elementów
1 2 3 4 5 6 7 8 9 1
2
3
4
5
6
7
pola oznaczeń czasu w sekundach
8
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
26
27
28
29
30
31
32
33
34
Użytkownik zrozumiał iterfejs w 18 kliknięciu, w 30 sekundzie.
35
Zapis drogi użytkownika
14
tabela opisu zdarzeń - droga użytkownika
io ść
kl ik ni
ęc ia
zm pod ia rz ilo n st ąd ść an kl u ik ni el ęć em e po nt y la zd ar ze ń
Badany nr 8
-
2
2
1
1
8
4
2
-
2
2
3
-
8
4
4
-
2
2
5
-
11
4
6
-
2
2
7
1
11
4
8
-
5
5
9 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
en
ty
liczba kliknięć
el
em
wykres czasu interakcji i zmian stanu elementów
1 2 3 4 5 6
Podsumowanie: suma wszystkich kliknięć : 29 czas wykonywania zadania : 32s średni czas kliknięć: 1,1s
7 8 9 1
2
3
4
5
6
7
pola oznaczeń czasu w sekundach
8
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
Użytkownik od 25 kliknięcia wykazuje przemyślane ruchy, nie wraca do stanów początkowych. Użytkownik zrozumiał iterfejs w 25 kliknięciu, w 29 sekundzie.
Zapis drogi użytkownika
15
tabela opisu zdarzeń - droga użytkownika
io ść
kl ik ni
ęc ia
zm pod ia rz ilo n st ąd ść an kl u ik ni el ęć em e po nt y la zd ar ze ń
Badany nr 9
Podsumowanie:
-
2
2
1
suma wszystkich kliknięć :
23
-
5
1
2
czas wykonywania zadania :
35s
1
2
2
3
-
8
4
4
średni czas kliknięć:
1,5s
-
2
2
5
-
8
4
6
-
2
2
7
-
8
4
8
-
2
2
9
Użytkownik od 19 kliknięcia wykazuje przemyślane ruchy, nie wraca do stanów początkowych i dochodzi do stanu końcowego.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
en
ty
liczba kliknięć
el
em
wykres czasu interakcji i zmian stanu elementów
1 2 3 4 5 6 7 8 9 1
2
3
4
5
6
7
pola oznaczeń czasu w sekundach
8
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
Użytkownik zrozumiał iterfejs w 19 kliknięciu, w 31 sekundzie.
26
27
28
29
30
31
32
33
34
35
Zapis drogi użytkownika
16
tabela opisu zdarzeń - droga użytkownika
io ść
kl ik ni
ęc ia
zm pod ia rz ilo n st ąd ść an kl u ik ni el ęć em e po nt y la zd ar ze ń
Badany nr 10
-
2
2
1
Podsumowanie:
-
5
1
2
suma wszystkich kliknięć :
17
-
2
2
3
czas wykonywania zadania :
32s
-
5
1
4
średni czas kliknięć:
1,8s
-
2
2
5
-
8
3
6
-
2
2
7
-
5
1
8
-
2
2
9 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
en
ty
liczba kliknięć
el
em
wykres czasu interakcji i zmian stanu elementów
1 2 3 4 5 6 7 8 9 1
2
3
4
5
6
7
pola oznaczeń czasu w sekundach
8
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
Do 5 sekundy użytkownik zachowuje się zgodnie ze scenariuszem. Zrozumienie scenariusza następuje dopiero w 16 kliknięciu, kiedy już w ogóle nie wraca do satnu początkowego i dochodzi do 26stanu 27 końcowego. 28 29 30 31 32 33 34 35 Użytkownik zrozumiał iterfejs w 16 kliknięciu, w 31 sekundzie.
2
2
2
2
2
2
1
2
5
7
8
8
5
5
8
8
5
5
2
6
2
2
2
2
2
2
2
2
2
2
3
2
5
7
4
4
5
5
5
8
8
5
4
5
2
2
2
2
2
2
2
2
2
2
5
2
5
8
8
8
5
5
8
11
8
8
6
8
2
2
2
2
2
2
2
2
2
2
7
2
5
8
5
5
5
5
8
11
8
5
8
5
2
2
2
2
2
2
2
5
2
2
9
2
nr d an 2 io ię ść y ć nr kl b ad ik ni io an 3 ść ęć y kl n ba ik da r 4 ni io ny ęć ść n kl ba ik da r 5 ni io ny ęć ść b kl ad nr 6 ik an io ni ść ęć y nr kl b ad ik n an 7 io i ę ść y ć ba n kl ik da r 8 n ny el i em ęć b nr ad en an 9 śr ty y ed nr ni 10 a
y
nr
Najrzadziej klikane były narożniki, które powodowały zmianę nie tylko siebie, ale również dwóch pozostałych elementów, oraz środek. Średnia ilość zmian stanu oraz ilość kliknięć dla każdego z tych elementów jest taka sama.
ik n
kl
kl
ik n
ię ć
ba
da n
y
Najczęściej klikanym elementem i jednocześnie o największej częstotliwości zmian stanu był element 6, który jest neutralny, zmienia tylko sam siebie.
ba
da n
porównanie śreniej kliknięć ze średnią ilością zmian stanu dla danych elementów
ię ć
ba
22 51 22
ik n
ię ć
51 22 84
kl
ik n kl
22 62 22
io ść
2
io ść
2
io ść
2
io ść
io ść
2
17 1
zm ia io n ść s zm tan u ia io ba n ść zm stan dan y u ia io nr b n ad ść st an 1 an zm y u ia io nr ba n ść s d an 2 zm tan y u ia io nr ba n ść s d t zm an 3 an y u ia io nr ba n ść s zm tan dan 4 y u ia io nr ba n ść st d an 5 an zm y u ia io nr ba n ść s d t an 6 zm an y u i an io nr ba ść st d an an 7 zm u y ia ba n n el st da r 8 em ny en anu nr t ba śr 9 da ed y ny ni a nr 10
Analiza zapisu drogi użytkowników
2
2
2
2
2
2
2
2
2
2
1
2
1
3
4
4
1
1
4
4
1
1
2
2
2
2
2
2
2
2
2
2
2
2
3
2
1
4
0
1
1
1
1
4
4
1
4
1
2
2
2
2
2
2
2
2
2
2
5
2
1
4
4
4
1
1
4
4
4
3
6
4
2
2
2
2
2
2
2
2
2
2
7
2
1
4
1
1
1
1
4
4
4
1
8
1
2
2
2
2
2
2
2
5
2
2
9
2
y
n da r 2 ny nr ba 3 da ny n ba da r 4 ny n ba da r 5 ny n ba da r 6 ny nr ba 7 da ny ba n da r 8 ny nr ba 9 da ny nr na 10 jc w zę yb śc ie iej ra ny
18
ba
ba
da n
ba
da n
y
nr
1
Analiza pierwszych trzech kliknięć
pierwszy wybrany element
1
1
1
1
5
1
5
1
1
3
1
drugi wybrany element
3
2
2
5
6
9
6
4
4
1
4
trzeci wybrany element
9
4
1
2
3
3
9
9
5
6
3
trzy pierwsze najczęściej wybierane elementy
70% badanych jako pierwszy wybrało element nr 1. Kolejno wybierane elementy w większości różniły się od siebie. 20% wybrało element nr 4 jako drugi. Jako element trzeci 20% kolejnych osób wybrało element nr 3.
badany nr 1
badany nr 2
badany nr 3
badany nr 4
badany nr 5
badany nr 6
badany nr 7
badany nr 8
badany nr 9
badany nr 10
Średnia czasu i kliknięć
19 n da r 2 ny nr ba 3 da ny n ba da r 4 ny n ba da r 5 ny n ba da r 6 ny nr ba 7 da ny ba n da r 8 ny nr ba 9 da ny nr w 10 ar to w ś ar ć m to a śr ść xym m ed a ni ini ln a m a al na
liczba kliknięć
5
19
17
15
18
5
18
25
19
16
25
5
16
suma kliknięć
14
25
10
20
23
14
23
28
23
17
28
10
20
czas
8
25
25
15
20
11
30
29
31
31
31
8
22
czas wykonania zadania
19
32
27
20
25
28
35
32
35
32
35
19
29
średni czas kliknięć
1,3
1,2
1,4
1
1,1
2
1,5
1,1
1,5 1,8
1
2
1,4
zestawienie ilości kliknięć z czasem, w którym użytkownik zrozumiał interfejs
ba
ba
da n
y ba
da n
ba
ba
y
nr
1
n da r 2 ny n ba da r 3 ny nr ba 4 da ny n ba da r 5 ny nr ba da 6 ny ba nr 7 da ny n ba da r 8 ny nr ba da 9 ny nr w 10 ar to w ś ar ć m to a śr ść xym m ed in aln ni im a a al na
y da n
ba
da n
y
nr
1
wykonania zadania oraz momentu zrozumienia interfejsu
zestawienie ilości kliknięć z czasem, oraz średnim czasem kliknięć
Zestawienie średnich czasów oraz kliknięć momentu zrozumienia interfejsu ze średnią sumy i czasu kliknięć. 30
max max
25 20
średnia Średnia
liczba kliknięć
15 10
min
5
min
0
5
10
15
20
25
30
35
pola oznaczeń czasu w sekundach
Moment zrozumienia interfejsu następował po 3/4 przebycia drogi przez badanego. Do dojścia do stanu końcowego, od momentu zrozumienia interfejsu pozostawały mu 4 kliknięcia, w przeciągu 7 sekund.
Podsumowanie
20
Wnioski: - użytkownicy, pomimo tego, że zaczynali badanie od narożników, niechętnie w nie klikali - poruszali się pewnie po polach neutralnych (nie narożnik, nie środek), - interfejs był rozumiany po przebyciu średnio 3/4 drogi do etapu końcowego, - największą trudność w zrozumieniu interfejsu sprawiała zasada oddziaływania narożników - użytkownicy bardzo szybko orientowali się jak powinien wyglądać etap końcowy (zniknięcie wszystkich elementów interfejsu)
Klaudia Gołaszczyk Pracownia Badań Użyteczności Zakład Badań Wizualnych i Interakcji Akademia Sztuk Pięknych w Katowicach Katowice 2014