Projekt interfejsu i badania zachowań użytkownika

Projekt interfejsu i badania użyteczności interfejsu Patrycja Paprotny Badania użyteczności prowadzący: prof Asp dr hab. Wiesław Gdowicz, dr Marta Więckowska Zakład Badań Wizualnych i Interakcji ASP Katowice 2015

założenia projektowe WSTĘP W ramach zadania zaprojektowana została prosta gra, która pozwoli sprawdzić, jak użytkownik porusza się po interfejsie ZAŁOŻENIA PROJEKTOWE INTERFEJSU • sensem działania interfejsu jest układanie zestawu elementów, złożonego z 8 fotografii ludzkich twarzy • każda z 8 fotografii twarzy podzielona została na 4 części: czoło, oczy, nos i usta • Niemożliwe jest ułożenie kompletnej twarzy jednej osoby oraz wybranie jednocześnie oczu i ust tej samej osoby

elementy interfejsu 850 px 43px

375 px

230 px

43px

83 px

portret ułożony przez użytkownika

k1

k2

k3

m1

m2

m3

k4

m4 24 px

286 xt

560 px

sylwety postaci

budowa interfejsu ZASADA DZIAŁANIA • sylwety postaci po uruchomieniu interfejsu zaczynają kolejno poruszać się (drgać) • kliknięcie w ikonę powoduje zatrzymanie animacji sylwety • sylwety postaci są powiązane z częściami fotografii, umieszczonymi na poszczególnych poziomach • przyciśnięcie sylwety uaktywnienia elementy fotografii przypisane do wybranych sylwet • włączenie elementu na danym poziomie powoduje przysłonięcie wszystkich elementów znajdujących się na niższych poziomach. W ten sposób widoczne są tylko elementy z pierwszych, nieprzysłoniętych poziomów.

• pole z utworzonym przez użytkownika portretem nie jest widoczne aż do momentu przyciśnięcia przycisku „gotowe” • ukazany portret składa się z 4 fragmentów fotografii przypisanych do wybranych sylwet

SCHEMAT BUDOWY INTERFEJSU

k1

p8

k2

p6

k3

p4 p2

k4 m1

czoło oczy

m2

nos

m3 m4

usta gotowe

p5

p3

poziom 1

p7

m3 k1 m1 m4

m2 k2 k1 m3

k2 k3 m2 m1

k3 k4 k2 m1

m2 m1 k3 k4

m1 m2 m3 k3

restart

k4 m3 m4 k2

k3 m4 k4 k1

zasada działania ZASADA PORUSZANIA SIĘ PO INTERFEJSIE

PRZYKŁADOWA DROGA UŻYTKOWNIKA

I. wybór sylwet postaci

(ukazanie się przycisku „gotowe”)

• użytkownik może wybrać dowolną liczbę ikon • wybór ikon umożliwia utworzenie jednego losowego portretu złożonego z fotografii osób, które odpowiadają ikonom II. wybór przycisku „gotowe”

(ukazanie się portretu złożonego z 4 części fotografii twarzy)

k1 k2 p4 p2

k4

poziom 1

m1 m2

III. restart gry

m4

• Przycisk „jeszcze raz” powoduje powrót do stanu początkowego interfejsu

p6

k3

• portret złożony z różnych części jest odsłaniany po wybraniu przycisku „gotowe” (wszystkie elementy interfejsu poza sylwetami postaci znikają)

p8

k3 k1 k1

m3

k3 gotowe

p7

p5

p3

m3 k1 m1 m4

m2 k2 k1 m3

k2 k3 m2 m1

k3 k4 k2 m1

m2 m1 k3 k4

m1 m2 m3 k3

restart

k4 m3 m4 k2

k1 m4 k4 k1

stany interfejsu I. wybór sylwet postaci

II. wybór przycisku „gotowe”

III. restart gry

Po uruchomieniu interfejsu widoczne są drgające sylwety postaci. Ruch tych elementów zachęca badanego do klikania w te elementy.

Po wybraniu sylwety postaci pojawia się przycisk „gotowe”.

Po wybraniu dowolnej ilości sylwet, użytkownik klika w przycisk „gotowe”. Przycisk ten zatrzymuje wszystkie aktywne dotąd animacje.

W polu po lewej stronie widoczny jest portret utworzony przez użytkownika.

Po lewej stronie pojawia się wtedy pole z utworzonym przez użytkownika portretem oraz przycisk „restart”.

Przycisk „restart” powoduje powrót do stanu początkowego gry i wznawia animacje sylwet postaci.

przykładowy zapis drogi użytkownika WYKRES PRZEDSTAWIA KOLEJNE KLIKNIĘCIA UŻYTKOWNIKA W CZASIE elementy interfejsu

10 krok zrozumienie interfejsu

usta nos oczy jeszcze raz gotowe m4 m3 m2 m1 k4 k3 k2 k1

0 czas

2

4

6

8

10

12

14

16

18

20

22

24

26

28

30

32

34

36

38

40

42

44

46

[s]

LEGENDA: – wybór sylwety postaci – wybór przycisku „gotowe” – restart gry – wybór elementu nieaktywnego – kroki niezgodne ze schematem działania

Zrozumienie zasady działania interfejsu Użytkownik rozumie interfejs, gdy postępuje zgodnie ze schematem działania: wybiera dowolną ilość sylwet postaci, następnie klika przycisk „gotowe”. Po ukazaniu się portretu złożonego z różnych fotografii twarzy restartuje grę za pomocą przycisku „jeszcze raz”.

48

50

52

54

56

58

60

62

64

66 7

przebieg badania cele badawcze

sposób dokonania pomiaru

• prześledzenie drogi, jaką pokonuje użytkownik korzystający z interfejsu • stwierdzenie, czy użytkownik zrozumiał zasadę działania interfejsu

• zapis drogi użytkownika uwzględniający kliknięcia • komentarze użytkownika usłyszane podczas wykonywania zadania • zapis drogi użytkownika za pomocą programu rejestrującego ruchy myszki

osoby badane • badaniu poddane zostanie 6 osób • wiek osób badanych: 20–30 lat polecenie wydane badanym: • „zapoznaj się z interfejsem”

zakończenie badania • użytkownik stwierdzi, że zapoznał się z interfejsem i rozumie zasadę jego działania • użytkownik jest znudzony korzystaniem z interfejsu określenie stopnia zrozumienia interfejsu • użytkownik rozumie interfejs, gdy wybiera elementy w sposób wskazany w schemacie poruszania się po interfejsie • użytkownik jest w stanie stwierdzić jakie zależności występują pomiędzy elementami interfejsu

wyniki badania Badany 1

9 krok zrozumienie interfejsu

elementy interfejsu usta nos oczy jeszcze raz gotowe m4 m3 m2 m1 k4 k3 k2 k1

0

2

4

6

8

10

12

14

16

18

20

22

24

26

28

30

32

34

36

38

40

42

44

46

48

50

52

54

56

58

60

62

64

66

68

70

72

74

76

78

80

82

84

86

90

92

94

czas [s]

Wybór sylwet postaci był przypadkowy.

Od 9 kroku kliknięcia użytkownika są zgodne ze schematem – wybiera ikony i odsłania gotowy portret złożony z elementów fotografii, użytkownik od momentu zrozumienia interfejsu sprawdza różne zestawienia sylwet postaci z kobietą 3.

średni czas pomiędzy kliknięciami: 3,7 suma kliknięć: 18 najczęściej klikana ikona postaci: K1 (3) komentarze użytkownika: • ciekawa

LEGENDA: – wybór sylwety postaci – wybór przycisku „gotowe” – restart gry – wybór elementu nieaktywnego – kroki niezgodne ze schematem działania

wyniki badania Badany 2

5 krok zrozumienie interfejsu

elementy interfejsu usta nos oczy jeszcze ra z gotowe m4 m3 m2 m1 k4 k3 k2 k1

0

2

4

6

8

10

12

14

16

18

20

22

24

26

28

30

32

34

36

38

40

42

44

46

48

50

52

54

56

58

60

62

64

66

68

70

72

74

76

78

80

82

84

86

90

92

94

czas [s]

Wybór sylwet postaci był chaotyczny, nieprzemyślany. Użytkownik po zrozumieniu działania interfejsu grał dalej przez 31 sekund, celowo wybierając elementy w kolejności niezgodnej ze schematem poruszania się po interfejsie

średni czas pomiędzy kliknięciami: 3,6 suma kliknięć: 22 najczęściej klikana ikona postaci: K1, M4

Komentarze użytkownika: • fajna • ciekawa, szczególnie gdy można obserwować, jak zmieniają się twarze

LEGENDA: – wybór sylwety postaci – wybór przycisku „gotowe” – restart gry – wybór elementu nieaktywnego – kroki niezgodne ze schematem działania

wyniki badania Badany 3

5 krok zrozumienie interfejsu

elementy interfejsu usta nos oczy jeszcze raz gotowe m4 m3 m2 m1 k4 k3 k2 k1

0

2

4

6

8

10

12

14

16

18

20

22

24

26

28

30

32

34

36

38

40

42

44

46

48

50

52

54

56

58

60

62

64

66

68

70

72

74

76

78

80

82

84

86

90

92

94

czas [s]

Od momentu zrozumienia interfejsu wybory sylwet postaci były dokonywane w sposób celowy – użytkownik sprawdzał różne kombinacje sylwet zawsze wybierając kobietę 3. W 63 sekundzie badania użytkownik postąpił niezgodnie ze schematem drogi – klikał w ikony postaci bez uprzedniego wybrania przycisku jeszcze raz. Umożliwiło to badanemu obserwowanie na bieżąco jak zmieniają się fragmenty fotografii.

średni czas pomiędzy kliknięciami: 2,8 suma kliknięć: 31 najczęściej klikana ikona postaci: K3 (6) komentarze użytkownika

• obserwowanie jak na bieżąco zmieniają się fotografie jest ciekawsze • przyciski „gotowe” i „jeszcze raz” sprawiają, że gra jest nudna.

LEGENDA: – wybór sylwety postaci – wybór przycisku „gotowe” – restart gry – wybór elementu nieaktywnego – kroki niezgodne ze schematem działania

wyniki badania Badany 4

5 krok zrozumienie interfejsu

elementy interfejsu usta nos oczy jeszcze raz gotowe m4 m3 m2 m1 k4 k3 k2 k1

0

2

4

6

8

10

12

14

16

18

20

22

24

26

28

30

32

34

36

38

40

42

44

46

48

50

52

54

56

58

60

62

64

66

68

70

72

74

76

78

80

82

84

86

90

92

94

czas [s]

Wybór sylwet postaci był przypadkowy, nieprzemyślany. Interfejs nie zainteresował użytkownika- zakończył korzystanie z interfejsu już po 63 sekundach.

średni czas pomiędzy kliknięciami: 4,6 suma kliknięć: 10 najczęściej klikana ikona postaci: K2,M1 (4) komentarze użytkownika: • prosty w obsłudze • zrozumiały

LEGENDA: – wybór sylwety postaci – wybór przycisku „gotowe” – restart gry – wybór elementu nieaktywnego – kroki niezgodne ze schematem działania

wyniki badania Badany 5 elementy interfejsu usta nos oczy jeszcze raz gotowe m4 m3 m2 m1 k4 k3 k2 k1

0

2

4

6

8

10

12

14

16

18

20

22

24

26

28

30

32

34

36

38

40

42

44

46

48

50

52

54

56

58

60

62

64

66

68

70

72

74

76

78

80

82

84

86

90

92

94

czas [s]

Użytkownik nie zrozumiał działania interfejsu Czas pomiędzy kolejnymi kliknięciami jest mały, a kliknięcia użytkownika bardzo chaotyczne, próbował nawet klikać w elementy nieaktywne (portret złożony z fotografii).

średni czas pomiędzy kliknięciami: 2,7 suma kliknięć: 18 najczęściej klikana ikona postaci: K2 (3) komentarze użytkownika: • nie wiadomo o co tu chodzi • niezrozumiała

LEGENDA: – wybór sylwety postaci – wybór przycisku „gotowe” – restart gry – wybór elementu nieaktywnego – kroki niezgodne ze schematem działania

wyniki badania Badany 6

6 krok zrozumienie interfejsu

elementy interfejsu usta nos oczy jeszcze raz gotowe m4 m3 m2 m1 k4 k3 k2 k1

0

2

4

6

8

10

12

14

16

18

20

22

24

26

28

30

32

34

36

38

40

42

44

46

48

50

52

54

56

58

60

62

64

66

68

70

72

74

76

78

80

82

84

86

90

92

94

czas [s]

Użytkownik postępuje wedle schematu: wybiera ikony postaci i odsłania portret złożony z fragmentów fotografii. Interfejs jest na tyle zrozumiały, że użytkownik kończy badanie już w 58 s.

średni czas pomiędzy kliknięciami: 4,6 suma kliknięć: 10 najczęściej klikana ikona postaci: K2,

M1 (4) komentarze użytkownika: • powtarzalna • zrozumiała

LEGENDA: – wybór sylwety postaci – wybór przycisku „gotowe” – restart gry – wybór elementu nieaktywnego – kroki niezgodne ze schematem działania

zestawienie wyników badań

elementy interfejsu usta nos oczy jeszcze raz gotowe m4 m3 m2 m1 k4 k3 k2 k1

0

2

4

6

8

10

12

14

16

18

20

22

24

26

28

30

32

34

36

38

40

42

44

46

48

50

52

54

56

58

60

62

64

66

68

70

72

74

76

78

80

82

84

86

90

92

94

czas [s]

średni czas badania

średnia ilość kliknięć najczęściej wybierana ikona postaci

69 s 58 k1

badany 6 badany 5 badany 4

Podsumowanie: • użytkownicy tworzyli średnio po 3 portrety • badany 4 stworzył najwięcej kombinacji (5) i poruszał się po interfejsie w sposób bardzo przemyślany, tworząc konkretne kombinacje ikon • badany 5 nie zrozumiał zasady poruszania się po interfejsie i zakończył badanie zniechęcony już po 58 sekundach.

• 2 badanych (1 oraz 5) próbowało klikać w elementy nieaktywne • badani byli znudzeni po ok. 50 sekundach użytkowania interfejsu.

badany 3 badany 2 badany 1

częstotliwość wybierania elementów ilość kliknięć 18 16 14

12 10 8

6 4 2

0

k1

k2

k3

• Najczęściej wybieranym elementem z zestawu sylwet postaci jest sylweta kobiety 1 (dziecko) . Element ten znajduje się w centralnej części interfejsu.

Użytkownicy wybierają go najczęściej,

k4 m1 sylwety postaci

m2

ponieważ jako pierwszy z całego zestawu zaczyna drgać.

• Użytkownicy klikali częściej w sylwety kobiet.

m3

m4

kombinacje sylwet postaci ilość utworzonych kombinacji

17 16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1 0

portret złożony kobiety tylko z sylwet kobiet

portretmezczyzni złożony tylko z sylwet mężczyzn

Badani w trakcie zapoznawania się z interfejsem tworzyli przypadkowe kombinacje złożone z sylwet postaci. Najwięcej utworzonych portretów składa się zarówno z sylwet męskich i żeńskich. Fakt ten wskazuje na to, że badani traktowali interfejs jako grę, zabawę i nie przywiązywali wagi do układania konkretnych portretów.

portret złożony mic z sylwet kobiet i mężczyzn

O wyborze elementów decydowało ich położenie – chętniej wybierano sylwety z lewej strony, oraz kolejność w jakiej zaczynay drgać – najczęściej wybierany element (k1) zaczynał poruszać się jako pierwszy

wnioski 1. Trzech użytkowników postępowało zgodnie ze schematem działania interfejsu. Sylwety postaci wybierane były przez nich w sposób chaotyczny i nieprzemyślany. Znudzeni powtarzalnością gry, kończyli badanie.

2. Dwóch użytkowników nie postępowało zgodnie ze schematem . Po zrozumieniu działania zasady interfejsu, próbowali klikać w nieaktywne elementy i zmieniać kolejność swoich kroków. Ich kliknięcia były przemyślane – próbowali tworzyć różne kombinacje w sposób przemyślany i konsekwentny.

3. Użytkownicy, którzy zachowywali się niezgodnie ze schematem grali w grę dłużej, ale klikali mniej niż użytkownicy postępujący wedle schematu. Ocenili oni grę pozytywnie (ciekawa, zabawna) podczas gdy druga grupa uważała grę za nudną i monotonną.

4. Użytkownicy rozumieją zależności pomiędzy elementami interfejsu (sylwetami postaci, przyciskiem „gotowe”, polem z portretem i przyciskiem „jeszcze raz”) po pierwszym przejściu całego cyklu interfejsu założonego w schemacie poruszania się po interfejsie ( wybór ikon, przycisku „gotowe”, przycisku „jeszcze raz”).

5. Jeden z użytkowników nie zrozumiał zasady działania interfejsu. Drganie ikon nie zachęciło go do klikania w sylwety. Użytkownik ten grał w grę najkrócej.