Projekt interfensu i badania interakcji interfejsu

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