1
Projekt interfejsu i badania interakcji interfejsu Agata Gancarczyk
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 interfejsu Interfejs jest zaprojektowany jako ciąg zdarzeń (przyczyna - skutek) od stanu początkowego (9 kwadratów układ 3x3) do stanu końcowego. Interfejs składa się z 9 kwadratów ułożonych w układ 3x3, z których każdy jest wypełniony wzorem, tak by można było określić położenie kwadratu po jego obrocie. Kwadraty zmniejszają się do środka Możliwe interakcje: 1) kliknięcie Opis stanu końcowego interfejsu 1. Kwadraty 1,3,7,9 pomniejszają się do wierzchołków kwadratu nr 5. 2. Kwadraty 2,4,6,8 pomnieszają się do środka boku kwadratu nr 5. 3. Kwadrat 5 nie zmienia się.
2 Stan początkowy
Stan końcowy
Projekt interfejsu
3
Prezentacja projektu
Stany Interakcja elementów
Opis interakcji - przykładowy
Opis
Symbol stanu
Jeden z dziewięciu (1,2,3,4,5,6,7,8,9) dużych tej samej wielkości elementów podstawowych interfejsu
1. Kliknięcie w duży - duży do małego w innym polu lub polach. 2. Kliknięcie w duży - mały do dużego w innym polu lub polach. 3. Kliknięcie w duży - mały do dużego w innych polach. 4. Kliknięcie w mały - mały do dużego w innym polu lub polach. 5. Kliknięcie w mały - duży do małego w innym polu lub polach. 6. Kliknięcie w mały - mały do dużego w innych polach.
Duży kwadrat z czarnym wypełnieniem
Jeden z ośmiu (1,2,3,4,5, 6,7,8) zmniejszonych o 75% elementów podstawowych interfejsu.
Mały kwadrat z czarnym wypełnieniem
kliknięcie Stan Element
Czynność
Stan
Element
duży
1
zmniejszenie mały
7
duży
1
zwiększenie
duży
7
duży
2
zmniejszenie mały
8
duży
2
zwiększenie
duży
8
duży
3
zmniejszenie mały
9
duży
3
zwiększenie
duży
9
duży
4
zwiększenie
duży
1i7
duży
5
zmniejszenie mały
4i6
duży
5
zwiększenie
duży
4i6
duży
6
zwiększenie
duży
3i9
duży
7
zmniejszenie mały
1
duży
7
zwiększenie
duży
1
duży
8
zmniejszenie mały
2
duży
8
zwiększenie
2
duży
9
zmniejszenie mały
3
duży
9
zwiększenie
3
duży
duży
Kwadraty 1,2,3 działają na kwadraty 7,8,9 i odwrotnie. Kwadraty 4 i 6 tylko powiększają kwadraty przylegające do ich boków w pionie. Nr 5 działa na kwadraty 4 i 6. W interfejsie można klikać we wszyskie kwadraty. Zarówno ,,duży” stan elementów jaki i ,,mały” dają możliwość wpływania na pozostałe kwadraty.,
tabela nr 2 - opis interakcji
Opis
Kliknięcie w duży element
to nie jest stan
Kliknięcie w mały element
to nie jest stan
Czerwone koło Po kliknięciu elemnet się zmniejsza lub powiększa do wielkości elementu podstawowego Po kliknięciu elemnet powiększa się do wielkości elementu podstawowego lub zmniejsza się
tabela nr 1 - Język operacyjny
Numeracja elementów
1
2
3
4
5
6
7
8
9
Przykłady korzystnia z interfejsu
4
Scenariusze
W scenariuszu I droga została pokonana najszybszym i najłatwiejszym sposobem. W scenariuszu II został przedstawiony sposób dojścia do stanu końcowego na zasadzie kilikania kilka razy w ten sam przycisk, po to aby zobaczyć zasadę działania interfejsu.
0
1
1
1
0
1
1
1
0
1
2
1
0
1
2
1
0
1
3
2
0
2
3
0
1
0
4
1
0
0
4
0
0
1
5
0
0
1
5
0
1
0
6
1
0
1
6
1
0
1
7
1
0
1
7
1
0
1
8
1
0
1
8
1
0
1
9
3
0
1
9
7
3
4
1
3
3
3
2
3
3
3
3
3
0
0
4
0
0
1
5
3
0
0
6
5
3
3
7
3
3
3
8
3
3
3
9 1
2
3
4
2
3
Scenariusz II ilość kliknięć: 23
5
6
7
8
9
4
5
6
7
Czas w sekundach
Scenariusz III ilość kliknięć: 11
ilość zmian stanu ilość kliknięć pod rząd ilość kliknięć
1
1 ilość zmian stanu ilość kliknięć pod rząd ilość kliknięć
Scenariusz I ilość kliknięć: 7
ilość zmian stanu ilość kliknięć pod rząd ilość kliknięć
1
2
3
4
5
6
7
8
9
10
Czas w sekundach
Powstałe scenariusze różnią się ilością kliknięć oraz czasem, w którym został osiągnięty stan końcowy. W scenariuszach został pominięty wątek zastanowienia się, ponieważ wzorce stworzyła osoba dobrze znająca interfejs. Scenariusz III pokazuje przeciętną drogę wykonywaną, przez użytkownika. 10
11
12
13
14
15
16
17
18
19
20
21 22 23
Czas w sekundach
11
Badanie interakcji interfejsu 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 realizacji • ilość osób badanych: 10 • osoby badane są w różnym wieku, w związku z tym można wyznaczyć dwie grupy wiekowe: - 5 osób 20-30 lat, - 5 osób 50 +, • osoby badane siadają przed ekranem komputera, na którym wyświetlany jest interfejs, • polecenie dla osoby badanej: „zapoznaj się z interfejsem”. Sposób dokonywania pomiaru • zapis drogi użytkownika uwzględniający kilknięcia, • komentarze użytkownika wymawiane w trakcie korzystania z interfejsu,
5
Przeprowadzone badanie
6
I grupa użytkowników
Użytkownik I, 21 lat ilość kliknięć: 9
ilość zmian stanu ilość kliknięć pod rząd ilość kliknięć 3
0
1
1
1
0
1
2
1
0
1
3
1
0
0
4
0
0
3
0
1
0
0
6
1
3
3
7
1
0
1
8
1
0
1
9
Wykres czasu interakcji i zmian stanu elementów
1
2
3
4
5
6
7
8
9
10
11 12
13
14
15
Czas w sekundach
zrozumienie działania Wykres rozkładu kliknięć w czasie
3 4
Użytkownik doszedł do stanu końcowego po 15s, klikając 9 razy. Interfejs został zrozumiany w po kilknięciu trzykrotnie w ten sam kwadrat.
5 6
Średni czas badania: 1,6 s
1 2
7 8 9 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Przeprowadzone badanie
7
I grupa użytkowników
Użytkownik II, 25 lat ilość kliknięć: 14
ilość zmian stanu ilość kliknięć pod rząd ilość kliknięć 3
0
2
1
1
0
3
2
1
0
1
3
3
2
2
4
0
3
3
5
3
0
0
6
4
0
1
7
3
0
1
8
1
0
1
9 1
2
3
4
5
6
7
8
9
10
11 12
Wykres czasu interakcji i zmian stanu elementów
13
14
15
Wykres rozkładu kliknięć w czasie
16
17
18
19 20
21 22 23
24
25
26
27 28
Czas w sekundach
zrozumienie działania
Użytkownik doszedł do stanu końcowego po 28s, klikając 14 razy. Interfejs został zrozumiany po 20s, gdy zostały wykonane dwa kliknięcia pod rząd na kwadrat odpowiadający za interakcje z kwadratami 4 i 6.
1 2 3 4 5 6 7 8 9
Średni czas badania: 2 s 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
Przeprowadzone badanie
8
I grupa użytkowników
Użytkownik III, 20 lat ilość kliknięć: 11
ilość zmian stanu ilość kliknięć pod rząd ilość kliknięć 1
0 1
1
1
0 3
2
1
0 1
3
3
0
0
4
0
2
3
5
3
0
0
6
1
0
1
7
3
0
1
8
1
0
1
9 1
2
3
4
5
6
7
8
9
10
Wykres rozkładu kliknięć w czasie
11 12
Wykres czasu interakcji i zmian stanu elementów
13
14
15
16
17 18
19
Czas w sekundach
zrozumienie działania
Użytkownik doszedł do stanu końcowego po 19s, klikając 11 razy.
1 2 3 4
Zrozumienie działania w 14 sekundzie badnia.
5 6
Średni czas badania: 1,27 s
7 8 9 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
Przeprowadzone badanie
9
I grupa użytkowników
Użytkownik IV, 27 lat ilość kliknięć: 11
ilość zmian stanu ilość kliknięć pod rząd ilość kliknięć 3
0
1
1
1
2
3
2
1
0
1
3
1
0
0
4
0
0
1
5
1
0
0
6
1
3
3
7
3
0
1
8
1
0
1
9 1
2
3
4
5
6
7
8
9
10
11 12
Wykres czasu interakcji i zmian stanu elementów
13
14
Wykres rozkładu kliknięć w czasie
15
16
17
18 19
20 21 22 23
24
25
Czas w sekundach
zrozumienie działania
1 2
Użytkownik doszedł do stanu końcowego po 25s, klikając 11 razy.
3 4
Średni czas badania: 2,27 s
5 6 7 8 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
Przeprowadzone badanie
10
I grupa użytkowników
Użytkownik V, 22 lat ilość kliknięć: 7
ilość zmian stanu ilość kliknięć pod rząd ilość kliknięć 3
0
1
1
1
2
3
2
1
0
1
3
1
0
0
4
0
0
1
5
1
0
0
6
1
3
3
7
3
0
1
8
1
0
1
9 1
2
3
4
5
6
7
8
9
Wykres rozkładu kliknięć w czasie
10
11 12
Wykres czasu interakcji i zmian stanu elementów
13
14
15
16 17
18
Czas w sekundach
zrozumienie działania
3 4
Użytkownik doszedł do stanu końcowego W 18s, klikając tylko 7 razy. Jest to najszybszy sposób przejścia interfejsu.
5 6
Średni czas badania: 2,57 s
1 2
7 8 9 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
Podsumowanie
11
I grupy użytkowników
Kolejność wybieranych elementów
śr ed n uż ia yt k uż ow yt ni k k uż ow I yt nik k uż own II yt ko ik II uż w I yt nik ko w IV ni k V uż yt k uż ow yt ni k k uż ow I yt nik k uż own II yt ko ik II uż w I yt nik ko w IV śr ed nik ni V a
Tabela opisu zadrzeń - droga użytkownika
2,6
3
3
1
3
3
1
1
2
1
1
1
1,2
1
1
1
1
1
1
2
1
3
3
3
3
2,6
1
1
1
1
1
1
3
1
1
1
1
1
1
1,8
1
3
3
1
1
4 5
3
3
1
1
3
3
3
1
1
6
1,6
1
4
1
1
1
7
3
1
1
3
3
2,2
2,6
1
3
3
3
3
8
1
1
1
1
1
1
1
1
1
1
1
1
9
1
1
1
1
1
1
1 1
1 1 3
1 3
Czas akcji
Ilość kliknięć
Sposób wybierania elementów: - cztery osoby zaczęło drogę od 5 kwadratu - trzy osoby w drugim kroku klikneło w 2 kwadrat
3 2
2
1
Najczęściej klikano w kwadraty: 2,5,7 więc najwięcej zmian stanu miały kwadraty: 8,4 i 6, 1.
2
2
2,2
1,8
Ilość zmian stanów
2
0,4
2 3
3
Cztery na pięć osób zaczęło badanie od środka, tylko jedna zaczęła od narożnika. Użytkownicy swobodnie poruszali się po całym interfejsie.
1 2 3 4 5 6 7 8 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
Przeprowadzone badanie
12
II grupa użytkowników
Użytkownik VI, 51 lat ilość kliknięć: 12
ilość zmian stanu ilość kliknięć pod rząd ilość kliknięć 3
2
4
1
1
0
1
2
2
2
6
3
1
2
2
4
0
0
1
5
1
0
0
6
6
0
1
7
1
0
1
8
6
0
2
9 1
2
3
4
Wykres rozkładu kliknięć w czasie
5
6
7
8
9
10
Wykres czasu interakcji i zmian stanu elementów
11 12
13
14
15
16
17
18
19 20 21 22 23
24
25
Czas w sekundach
zrozumienie działania
3 4
Użytkownik doszedł do stanu końcowego po 25s, klikając 12 razy. Od początku badanie było wykonywane tak aby zrozumieć działanie interfejsu.
5 6
Średni czas badania: 2,08 s
1 2
7 8 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
Przeprowadzone badanie
13
II grupa użytkowników
Użytkownik VII 56 lat ilość kliknięć: 17
ilość zmian stanu ilość kliknięć pod rząd ilość kliknięć 2
2
4
1
1
0
1
2
2
2
6
3
1
2
2
4
0
0
1
5
1
0
0
6
6
0
1
7
1
0
1
8
6
0
2
9 1
2
3
4
Wykres rozkładu kliknięć w czasie
5
6
7
8
9
10
11 12
Wykres czasu interakcji i zmian stanu elementów
13
14
15
16
17
18
19 20 21 22 23
24
25
26
27
28 29
30
31
32 33
34
35
36 37
Czas w sekundach
zrozumienie działania
Użytkownik doszedł do stanu końcowego po 37s, klikając 17 raz. Interfejs został zrozumiany w 23s, gdy zostały wykonane dwa kliknięcia pod rząd.
1 2 3 4 5 6
Średni czas badania: 2,17 s
7 8 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 36 37
Przeprowadzone badanie
14
II grupa użytkowników
Użytkownik VIII 55 lat ilość kliknięć: 15
ilość zmian stanu ilość kliknięć pod rząd ilość kliknięć 3
0
2
1
1
2
4
2
3
0
1
3
1
2
2
4
0
0
1
5
1
0
1
6
4
0
1
7
4
0
1
8
2
2
2
9 1
2
3
4
5
6
7
8
9
10
11 12
Wykres czasu interakcji i zmian stanu elementów
13
14
15
16
17
18
19 20 21 22 23
Wykres rozkładu kliknięć w czasie
24
25
26
27
28 29
30
31
32 33
Czas w sekundach
zrozumienie działania
Użytkownik doszedł do stanu końcowego po 33s, klikając 15 razy. Badanie było wykonywane spokojnie i powoli, użytkowinik starał się zrozumiec działanie interfejsu.
1 2 3 4 5 6
Średni czas badania: 2,2 s
7 8 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
Przeprowadzone badanie
15
II grupa użytkowników
Użytkownik IX, 50 lat ilość kliknięć: 12
ilość zmian stanu ilość kliknięć pod rząd ilość kliknięć 2
0
2
1
1
0
3
2
1
0
1
3
3
0
1
4
0
0
3
5
3
0
0
6
3
0
1
7
3
0
1
8
1
0
1
9 1
2
3
4
5
6
7
8
9
10
11 12
Wykres czasu interakcji i zmian stanu elementów
13
14
15
16
17
Wykres rozkładu kliknięć w czasie
18
19 20 21 22 23
24
25
26
27
28 29
30
Czas w sekundach
zrozumienie działania
Użytkownik doszedł do stanu końcowego po 33s, klikając 15 razy. Badanie było wykonywane spokojnie i powoli, użytkowinik starał się zrozumiec działanie interfejsu.
1 2 3 4 5 6
Średni czas badania: 2,5 s
7 8 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
Przeprowadzone badanie
16
II grupa użytkowników
Użytkownik X, 58 lat ilość kliknięć: 15
ilość zmian stanu ilość kliknięć pod rząd ilość kliknięć 2
2
4
1
1
0
1
2
2
2
6
3
1
2
2
4
0
0
1
5
1
0
0
6
6
0
1
7
1
0
1
8
6
0
2
9 1
2
3
4
5
6
7
8
9
10
11 12
Wykres czasu interakcji i zmian stanu elementów
13
14
15
16
17
18
19 20 21 22 23
Wykres rozkładu kliknięć w czasie
24
25
26
27
28 29
30
31
32 33
34
35
36 37 38 39 40
zrozumienie działania
Użytkownik doszedł do stanu końcowego po 40 s, klikając 15 razy. Czas pomiędzy poszczególnymi kliknięciami wydłużył się ponieważ użytkownik próbował po każdym kliknięciu zrozumieć zasadę działania. Średni czas badania: 2,6 s
1 2 3 4 5 6 7 8 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 36 37 38 39 40
Podsumowanie
17
II grupy użytkowników
Kolejność wybieranych elementów
śr ed n uż ia yt k uż ow yt ni k k uż ow VI yt nik k uż own VII yt ko ik V uż w II yt nik I ko w IX ni k X uż yt k uż ow yt ni k k uż ow VI yt nik k uż own VII yt k ik uż ow VIII yt nik ko w IX śr ni ed k ni X a
Tabela opisu zadrzeń - droga użytkownika
2,4
3
2
3
2
2
1
1
1
1
1
1
1
2
1
1
4
3
1
2
2
2
2
3
1
2
3
6
6
1
1
6
4
1,4
1
1
1
3
1
4
2
2
2
1
2
1,8
5
1
1
1
3
1
1,4
4
4
2
2
4
3,2
0,2
1,4
1
1
1
3
1
6
5
6
6
4
3
6
7
1
1
1
1
1
1
2
1
1
4
3
1
8
1
1
1
1
1
1
4,2
6
6
2
1
6
9
2
2
2
1
2
1,8
Ilość zmian stanów
1
1 1
1 2
3 2
2 3
3
3 2
Tylko jeden z badanych kliknął w 6 kwadrat. Ilość kliknięć w pozostałe kwadraty są podobne dla każdego badanego.
1
Najczęściej klikano w kwadraty: 1,2,3 więc najwięcej zmian stanu miały kwadraty: 7,8,9.
3
1
Użytkownicy bardzo zachowawczo poruszali się po całym interfejsie, tak aby zanalizować poszczególne interakcje i przewidzieć swój kolejny krok.
Czas akcji
Ilość kliknięć
Sposób wybierania elementów: - droga aż trzech osób z pięciu pokrywa się - dwie osoby z pięciu po raz pierwszy kliknęło w inny kwadrat niż 1, - trzy osoby w drugim kroku kliknęło w 2 kwadrat, - trzy osoby w trzecim kroku kliknęło w 3 kwadrat,
2
1 2 3 4 5 6 7 8 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 36 37 38 39 40
Porównanie
18
Obydwie grupy uytkowników Grupa I, 20-30 lat
śr ed n uż ia yt uż kow yt n k i uż ow k I yt nik k uż own II yt ko ik II uż w I yt nik ko w IV ni k V uż yt k uż ow yt ni k k uż ow VI yt nik k uż own VII yt ko ik V uż w II yt nik I ko w IX śr ni ed k ni X a
Tabela najczęściej klikanych elementów przez użytkowników
1
2
1
1
1
1
4
4
2
2
4
3,2
2,6 1
3
3
3
3
2
1
1
4
3
1
2
1
1
1
1
1
3
6
6
1
1
6
4
4
2
2
2
1
2
1,8
5
1
1
1
3
1
1,4
1,2
1
2
0,4 2,2
3
3
3
1
1
1
6
0,2
2,2
3
1
1
3
3
7
1
1
1
1
1
1
1
1
1
1
1
1
8
1
1
1
1
1
1
1
1
1
1
1
1
9
2
2
2
1
2
1,8
Grupa II, 50 +
Średni czas pomiędy kliknięciami: 1,91s Średni czas pomiędy kliknięciami: 2,31s Średnia czasów wszystkich badań: 21s Średnia czasów wszystkich badań: 33s najczęściej używane
często używane
W I grupie najczęściej używano kwadratu nr 2, potem 5 i 7 a w II grupie kwadratu nr 1 następinie 2 i 3. Nie widać dużej różnicy pomiędzy ilością kliknięć w grupie I a II.
najdłuższy czas: 28s najkrótszy czas: 18s
najdłuższy czas: 40s najkrótszy czas: 25s
Średnia ilosć kliknięć: 10,4 największa ilość kliknięć: 14 najmniejsza ilość kliknięć: 7
Średnia ilosć kliknięć: 14,2 największa ilość kliknięć: 17 najmniejsza ilość kliknięć: 12
Ilość kliknięć 9 14 11 11 7
Wnioski Kliknięcia w odniesieniu do czasu, były szybciej wykonywane w grupie I. Jest tam mniej kliknięć i w krótszym czasie badani przeszli do stanu końcowego. Również, I grupie badani nie starali się od początku zrozumieć interfejs, tylko jak najszybciej ukończyć test. W II grupie poruszanie się po interfejsie jest bardziej przemyślne, świadczą o tym większe przerwy czasowe pomiędzy kolejnymi kliknięciami. Widać dużą różnice pomiędzy I a II grupę jeżeli chcodzi o trzy pierwsze kliknięcia. W I grupie rozpoczynano od 5 następnie klikano w 2 i 1. II grupie kilkano po kolei w kwadraty 1,2,3.
Ilość kliknięć
Czas
12 17 15 12 15
15 28 19 25 18
3
2
2
3
2
1 1
3
3 1
1 3
3 2
2 3
1
1 2
2 1
1 2
1
25 37 33 30 40
1
2
3
Czas
3
3 2
19
Agata Gancarczyk Pracownia Badań Użyteczności Zakład Badań Wizualnych i Interakcji Akademia Sztuk Pięknych w Katowicach Katowice 2014