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.