Projekt Badania Interfejsu do sterowania urządzeniami w sali ZBWi autor: Karolina Wilk, rok II, sem IV, rok akademicki 2012/2013 pracownia: Zakład Badań Wizualnych i Interakcji prowadzący: prof. ASP Wiesław Gdowicz, asyst. Marta Więcowska
Prototyp - badania z żytkownikiem.
autor: Karolina Wilk, sem IV, rok akademicki 2012/2013 pracownia: Zakład Badań Wizualnych i Interakcji prowadzący: prof. ASP Wiesław Gdowicz,asyst. Marta Więckowska
badanie paper prototyping
badanie card sorting
Funkcje interfejsu
Prezentacja projektu interakcji i wizualnej postaci interfejsu
badanie prototypu 1
badanie prototypu 2
• możliwość manipulowania obiektami interakcji w fizycznej i wirtualnej przestrzeni: 1. Manipulowanie żaluzjami okiennymi ( podnoszenie i opuszczanie żaluzji ) 2. Sterowanie oświetleniem w pomieszczeniu 3. Sterowanie projektorem ( włączanie, wyłączanie ) 4. manipulowanie ekranem ( chowanie, wysuwanie)
oświetlenie
menu
lampy wszyst.
rolety
1
menu
2
3
lampy grupa
lampy osobno
c w dół stop
w górę a
b
projekcja
menu
poniedziałek
13:05 oświetlenie
temperatura
menu
ustaw temperaturę: godz.
rolety
projekcja
od
00
do
godz.
temperatura
00
20.0
godz.
temperatura
projektor : włącz ekran:
ustaw zegar: min. godz.
13 : 05
od
zegar/alarm
temperatura
00 do 00
20.5
dzień tyg.
poniedziałek
w dół w dół stop
godz.
menu
zegar/alarm
w górę
ustaw alarm: godz. min.
00 : 05
powtarzanie alarmu PN WT SR CZ ND
PT
SB
Prototyp - badania z żytkownikiem.
autor: Karolina Wilk, sem IV, rok akademicki 2012/2013 pracownia: Zakład Badań Wizualnych i Interakcji prowadzący: prof. ASP Wiesław Gdowicz,asyst. Marta Więckowska
Funkcje interfejsu
badanie card sorting
badanie paper prototyping
Prezentacja projektu interakcji i wizualnej postaci interfejsu
badanie prototypu 1
badanie prototypu 2
1. Cel badania: Badanie ma na celu wykazanie czy nazwy elementów architektury informacji są zrozumiałe dla potencjanlych użytkowników interfejsu 2. Opis badania: • do przprowadzenia badania został użyty program dostępny pod linkiem: http://www.optimalworkshop.com • w badaniu wzieło udział 20 osób • każdej z osób został podany link do programu pozwalającego wykonać badanie • badanie card sorting było podzielone na 2 części: otwartą i zamkniętą: 1. badanie otwarte polegało na podzieleniu elementów na grupy oraz na nadaniu im nazw. 2. badanie zamknięte polegało na dopasowaniu elementów do grupy z nadną już nazwą 3. stworzone karty ( na podstawie elementów architektury informacji): ekran stop, klimatyzacja, lampa B, lampy grupa, lampy grupa A, lampy wszystkie, ogrzewanie, podnoszenie rolety, roleta stop, spuszczanie ekranu, spuszczanie rolety ustawianie temperatury, ustawienie godziny, usypianie komputera, wyłączenie alarmu, wyłącznie lampy C1, wyłącznie rzutnika , właczanie rzutnika, włączanie komputera przykład grup z dopasowanymi kartami
4. Wnioski kategorie AI przed badaniem 7 grup:
kategorie AI po badaniu 6 grup:
lampy rolety komputer ekran rzutnik temperatura zegar
lampy rolety komputer projekcja temperatura zegar/ alarm
Badanie wykazało że użytkownik może nie domyślić sie że pod kategorią zegar znajduje się opcja alarmu większość badanych przypasowywała elementy z kategorii ekran oraz kategorii rzutnik do jednej grupy ( projekcja )
autor: Karolina Wilk, sem IV, rok akademicki 2012/2013 pracownia: Zakład Badań Wizualnych i Interakcji prowadzący: prof. ASP Wiesław Gdowicz,asyst. Marta Więckowska
Funkcje interfejsu
badanie card sorting
1. Cel badania Weryfikacja wstępnego projektu interfejsu, wprowadzenia korekty na podstawie przprowadzonego badania 2. Opis badania: • Badanie zostało przeprowadzone na 6 osoba w wieku od 22 lat do 55 • Zadaniem badanych było wykonać polecenia przy użyciu papieroweg modelu, który mieli traktować ja dotykowe elekroniczne urządzenie. • W zależności od tego na co “kliknęli” badani, strony modelu były zmieniane tak by odpowiadały kolejnemu stanu inetrfejsu 3. Polecenia: • włącz komputer, • włącz wszystkie lampy • wyłącz lampy • włącz grupe lamp B i A • wyłącz obie grupy lamp • włącz lampe A1, B1, C1 • wyłącz lampy • spuść wszystkie rolety • podnieś wszystkie rolety • spuść rolete 1 i 2 • spuść Ekran • włącz rzutnik • wyłącz rzutnik • zwiń ekran • ustaw zegar na 9:55 • dodaj alarm na 20:00 • zwiększ temperature • uśpij urządzenia • wyłącz urządzenie
4. papierowy prototyp przykałady stron komputer
oświetlenie
rolety
rolety wszystkie roleta n 1
2
projekcja
zegar/alarm
Prototyp - badania z żytkownikiem. badanie paper prototyping
Prezentacja projektu interakcji i wizualnej postaci interfejsu
badanie prototypu 1
5. Wnioski 1. Badani intuicujnie wiedzieli ze aby zapalić lub wyłączyć lampy należy kliknąć na czarny/ żółty pasek lub grupe pasków. Napis włącz / wyłącz nie pomagał, a nawet wprowadzał niejasności. Jedynie w zakładce gdzie włącza sie wszystkie lampy jednocześnie napisy były pomocne.
badanie prototypu 2
wniosek 1
3. Badani ignorowali zakładke komputer, po otrzymaniu polecenia wyłącz komputer badani klikali na guzik włączanie, który został również zinterpretowany jako wyłącznik. 4. Badani nie zrozumieli komendy uśpij,
temperatura
5. Strzałka w prawym dolny rogu nie została zrozumiana jako powrót do strony startowej
3
6. Część badanych miała problem z wykonaniem polecenia - włącz lampe A1, B1, C1. Badani zasugerowali aby nazwe: lampa n zmienić na lampy osobno
wniosek 5
wniosek 3
7. Osoby badane zwróciły uwage na część graficzną interfejsu. według nich pole interfejsu było znacznie za duże w stosunku do ilości i wielkości elementów interfejsu. wniosek 7,1,3,5
wniosek 5
autor: Karolina Wilk, sem IV, rok akademicki 2012/2013 pracownia: Zakład Badań Wizualnych i Interakcji prowadzący: prof. ASP Wiesław Gdowicz,asyst. Marta Więckowska
Funkcje interfejsu
badanie card sorting
1. Cele badania Przed użytkownikiem postawione były konkretne zadania, których celem było sprawdzenie poprawnosci działania interfesju, jego czytelności, płynności nawigacji. Badanie miało na celu wskazanie błędów w funkcjonowaniu inetrfejsu Polecenie: Chcesz przygotować salę na wykład. 1. Spuść rolete 1; 2; 3 2. włącz wszytkie lampy w sali 3. włącz jedynie jedną grupe lamp 4 wyłącz lampy 5. chcesz aby w sali panował półmrok, włącz tylko jedną lampe 6 włącz rzutnik 8. ustaw alarm który zasygnalizuje koniec zajęc ( 14:00 ) 9. zwiększ temperature w sali Wykład się skończył 11. wyłącz projektor i zwiń ekran 10. Odsłoń dwa okna, trzecią rolete podnieś do połowy 2.Opis badania: • Badanie zostało przeprowadzone na 3 osoba w wieku od 22 lat do 55 • Zadaniem badanych było wykonać polecenia przy użyciu prototypy interaktywnego interfejsu, wyświetlanego na ekranie komputera. Ruch kursora i kliknięcie myszką miały być traktowane jak ruch dłoni i dotknięcie palcem ekranu • W zależności od tego na co “kliknęli” badani, strony interfesju zmieniały się tak by odpowiadały kolejnemu stanu inetrfejsu • Osoby biorące udział w badaniu zostały poproszone aby na głos komentować wykonywane czynności • Badanie opierało się głównie na obserwacji zachowań użytkownika, w jaki sposób porusza się po stronach nterfejsu, na co zwraca uwagę, co sprawia mu problem • Osoba badana nie miała ograniczenia czasowego, podczas wykonywanych zadań oraz nie miała możliwości zapoznania się z inetrfejsem przed badaniem
Prototyp - badania z żytkownikiem.
Prezentacja projektu interakcji i wizualnej postaci interfejsu
badanie paper prototyping
oświetlenie
menu
badanie prototypu 1
oświetlenie
badanie prototypu 2
menu
oświetlenie
lampy
lampy wszystkie
lampy wszystkie
lampy grupa
lampy grupa
lampy grupa
lampy osobno
lampy osobno
lampy osobno
wnioski: aby zapalić wszystkie lampy nalezy kliknąć w ikone ‘‘lampy wszystkie’’ a następnie kliknąć w prostokąt z włącznikiem, wszyscy badani po kliknięciu w ikone lampy wszytkie uznawali że lampy zostały już włączone proponowana zmiana: po kliknięciu w ikone z napisem : lampy wszystkie lampy zapalają się automatycznie
Prototyp - badania z żytkownikiem.
autor: Karolina Wilk, sem IV, rok akademicki 2012/2013 pracownia: Zakład Badań Wizualnych i Interakcji prowadzący: prof. ASP Wiesław Gdowicz,asyst. Marta Więckowska
Funkcje interfejsu
badanie card sorting
Po wprowadzeniu poprawek, badanie zostało powtórzone na 4 innych osobach. Badanie wykazało nowe błędy w funkjonowaniu interfejsu. Błędy które nie zostały zauważone podczas pierwszego badania. 1. Badani mylili zegar interfejsu z przyciskiem. Chcąc ustawić godzine klikali na zegar a nie na przyciski odsyłający do ustawień zegara. wniosek: należy usunąć ramke która otacza zegar inetrfejsu, zmienić kształt pola zegara tak by nie przypominał przycisku
Prezentacja projektu interakcji i wizualnej postaci interfejsu
badanie prototypu 1
badanie paper prototyping
badanie prototypu 2
2. Zmiana po pierwszym badaniu: po kliknięciu na przycisk z napisem lampy wszystkie lampy zapalają się automatycznie. Kliknięty klawisz zostaje podświetlolony na niebiesko, przestaje być aktywny. Aby wyłączyć lampy należy kliknąć na niebieski prostokąt z symbolem jednak po wprowadzonej zmianie badani chcąc wyłączyć lampy klikali na nieaktywny już przycisk.
3. badanym trudno było zorientować sie jak opuścić rolety, mylący był dla nich kierunek strzałki: w dół
wszyscy badani radzili aby przycisk zastąpić:
Po drugim badaniu została wprowadzona zmiana: zmiana:
poniedziałek
13:05
13:15
oświetlenie
oświetlenie
oświetlenie
lampy wszystkie
menu
oświetlenie
menu
wyłącz lampy
lampy grupa
lampy grupa
lampy osobno
lampy osobno
menu
rolety
1
2
3
w dół
rolety
projekcja
rolety
projekcja
w górę
rolety
1
menu
2
3
w dół stop
w górę
zegar/alarm
temperatura
zegar/alarm
temperatura
po kliknięciu na przycisk lampy wszystkie lampy zapalają sie automatycznie a napis na guziku zmienia się na wyłącz lampy , przycisk pozostaje aktywny. Aby wyłączyć lampy nalezy na niego kliknąć
Prototyp - badania z żytkownikiem.
autor: Karolina Wilk, sem IV, rok akademicki 2012/2013 pracownia: Zakład Badań Wizualnych i Interakcji prowadzący: prof. ASP Wiesław Gdowicz,asyst. Marta Więckowska
Prezentacja projektu interakcji i wizualnej postaci interfejsu
Projekt interakcji
Projekt interfejsu
prezentacja działania interfejsu
układ + grid: menu glowne
oświetlenie
rolety
prokekcja
zegar/alarm
temperatura
poniedziałek
13:05 oświetlenie
oświetlenie
menu
lampy wszyst.
rolety
1
projekcja
menu
2
3
lampy grupa
rolety
lampy osobno
projekcja
projektor : włącz ekran:
c w dół
temperatura
2
2
temperatura
poniedziałek od
ustaw alarm: godz. min.
powtarzanie alarmu PN WT SR CZ ND
PT
menu
ustaw temperaturę:
dzień tyg.
w dół w dół
00 : 05
w górę
zegar/alarm
13 : 05
w górę
b
menu
zegar/alarm
ustaw zegar: min. godz.
stop
stop
a
menu
SB
godz.
godz.
00
00
do
godz. od
2
godz.
00 do 00
temperatura
20.0 °C temperatura
20.5 °C
Prototyp - badania z żytkownikiem.
autor: Karolina Wilk, sem IV, rok akademicki 2012/2013 pracownia: Zakład Badań Wizualnych i Interakcji prowadzący: prof. ASP Wiesław Gdowicz,asyst. Marta Więckowska
Projekt interakcji
Projekt interfejsu LINIA
pt kolor kontrast
pt kolor kontrast
2
2
1
menu główne
rolety
1
projekcja
1
1
2
2
1
oświetlenie
1
1
2
2 temperatura
efekty drop shadows: oppacity 30%; distance 0,2 mm; angle 90˚; offset x 0mm; offset y 0,2 mm; size 1mm
bevel and embross: size 0,4mm; soften 0,0 mm; depth100%; shading: angle 120 ˚; altitude 30 ˚; hightlight oppacity 100% shadow oppacity 100%
1
KOLORYSTYKA
inner glow oppacity 75% size 2mm; choke 78% source : center
TYPOGRAFIA
menu główne
nazwa poniedziałek
oświetlenie
poniedziałek
poniedziałek
13:05 oświetlenie
poniedziałek
13:05
13:05
oświetlenie
oświetlenie
poniedziałek
13:05
rolety
projekcja
rolety
projekcja
rolety
projekcja
rolety
projekcja
zegar/alarm
temperatura
zegar/alarm
temperatura
zegar/alarm
temperatura
zegar/alarm
temperatura
poniedziałek
13:05 oświetlenie
13:05 oświetlenie
rolety
projekcja
rolety
zegar/alarm
temperatura
zegar/alarm
projekcja
projekcja
zegar/alarm
temperatura
oświetlenie
A
titillum medium
12
rolety
A
titillum medium
12
projekcja
A
titillum medium
12
A
titillum medium
12
A
titillum medium
18
A
titillum medium
12
zegar/alarm
rolety
projekcja
zegar/alarm
pt kolor kontrast
A
oświetlenie
rolety
krój
menu główne
podstrony
oświetlenie
bevel and embross: size 0, 2mm; soften 0,0 mm; depth 0%; shading: angle 120; altitude 28 ˚ hightlight oppacity 100% shadow oppacity 20%
inner shadow: distance 1,75 mm; opacity 50%; angle 120˚ x offset 0,9 mm; y offset 1,5 mm; size 3mm
1
1
poniedziałek
prezentacja działania interfejsu
bevel and embross: size 2mm; soften 0,0 mm; depth100%; te same efekty shading: angle -86 ˚; altitude 36 ˚ z elementami: hightlight oppacity 100% shadow oppacity 13%
1
zegar/alarm
1
13:05
Prezentacja projektu interakcji i wizualnej postaci interfejsu
temperatura temperatura
A
titillum bezszeryfowy 34 medium 12
A AAAA AAAA AAAA AAAAA A AAAAA
autor: Karolina Wilk, sem IV, rok akademicki 2012/2013 pracownia: Zakład Badań Wizualnych i Interakcji prowadzący: prof. ASP Wiesław Gdowicz,asyst. Marta Więckowska
Projekt interfejsu
Prototyp - badania z żytkownikiem.
Prezentacja projektu interakcji i wizualnej postaci interfejsu
Projekt interakcji
prezentacja działania interfejsu
1
1
a
1
1
element aktywny zmiana koloru po najechaniu palcem zmiana koloru w trakcie klikniecia
zmiana koloru po klinięciu element nieaktywny otwarcie nowego okna
pojwienie sie grupy nowych elementów po kliknięciu w powiązany element:
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
2
2
b
2
2
animacja- element porusza sie w góre
1
2
cyfry zmieniaja sie
animacja- zatrzymanie
a
b
napisy zmieniaja sie
animacja- element porusza sie w dół
element zmienia kolor
autor: Karolina Wilk, sem IV, rok akademicki 2012/2013 pracownia: Zakład Badań Wizualnych i Interakcji prowadzący: prof. ASP Wiesław Gdowicz,asyst. Marta Więckowska
Projekt interfejsu
element
najechanie zmiana koloru
klik zmiana koloru
Prototyp - badania z żytkownikiem.
Prezentacja projektu interakcji i wizualnej postaci interfejsu
Projekt interakcji
prezentacja działania interfejsu
element
najechanie zmiana koloru
klik zmiana koloru
lampy wszyst.
lampy wszyst.
lampy wszyst
lampy grupa
lampy grupa
lampy grupa
lampy osobno
lampy osobno
lampy osobno
wyłącz lampy
wyłącz lampy
wyłącz lampy
1
1
1
w dół
w dół
w dół
stop
stop
stop
w górę
w górę
w górę
zmiana koloru po kliknięciu
3
autor: Karolina Wilk, sem IV, rok akademicki 2012/2013 pracownia: Zakład Badań Wizualnych i Interakcji prowadzący: prof. ASP Wiesław Gdowicz,asyst. Marta Więckowska
Projekt interfejsu
element
włącz
najechanie zmiana koloru
klik zmiana koloru
włącz
włącz
stop lampy w dół wszyst.
stop
stop
lampy grupa w górę
w górę
w górę
w dół
WT
po kliknieciu zmiana koloru
Prototyp - badania z żytkownikiem.
Prezentacja projektu interakcji i wizualnej postaci interfejsu
Projekt interakcji
prezentacja działania interfejsu
animacja- po kliknięciu w powiązany element, element animacji porusza się w : w dół
stop
w dół
WT
WT
po kliknieciu w powiazany element : zmiana napisu
13
14
poniedziałek
wtorek
20.0 °C
20.5 °C
w dół
w górę
stop
autor: Karolina Wilk, sem IV, rok akademicki 2012/2013 pracownia: Zakład Badań Wizualnych i Interakcji prowadzący: prof. ASP Wiesław Gdowicz,asyst. Marta Więckowska
Projekt interfejsu
Prototyp - badania z żytkownikiem.
Prezentacja projektu interakcji i wizualnej postaci interfejsu
Projekt interakcji
prezentacja działania interfejsu
proces działania:
stany, elementy zaprezentowane w procesie działania interfejsu
najechanie na element
poniedziałek
poniedziałek
13:05
poniedziałek
13:05 oświetlenie
otwarcie nowego okna
kliknięcie w element
13:05 oświetlenie
oświetlenie
oświetlenie
menu
lampy wszyst. lampy grupa
najechanie na element
oświetlenie
menu
kliknięcie w element
oświetlenie
menu
rolety
projekcja
rolety
projekcja
rolety
projekcja
zegar/alarm
temperatura
zegar/alarm
temperatura
zegar/alarm
temperatura
otwarcie nowego okna
oświetlenie
menu
najechanie na element
oświetlenie
menu
kliknięcie w element
oświetlenie
menu
lampy osobno
zmiana stanu elementów interfesju w eyniku kliknięcia
oświetlenie
lampy wszyst.
lampy wszyst
wyłącz lampy
wyłącz lampy
wyłącz lampy
lampy wszyst.
lampy grupa
lampy grupa
lampy grupa
lampy grupa
lampy grupa
lampy grupa
lampy osobno
lampy osobno
lampy osobno
lampy osobno
lampy osobno
lampy osobno
menu
autor: Karolina Wilk, sem IV, rok akademicki 2012/2013 pracownia: Zakład Badań Wizualnych i Interakcji prowadzący: prof. ASP Wiesław Gdowicz,asyst. Marta Więckowska
Projekt interfejsu
Prototyp - badania z żytkownikiem.
Prezentacja projektu interakcji i wizualnej postaci interfejsu
Projekt interakcji
prezentacja działania interfejsu
proces działania:
stany, elementy zaprezentowane w procesie działania interfejsu
13:05
najechanie na element
kliknięcie w element
13:05
13:05
oświetlenie
oświetlenie
otwarcie nowego okna
oświetlenie
rolety
1
1
menu
2
projekcja
rolety
projekcja
rolety
projekcja
zegar/alarm
temperatura
zegar/alarm
temperatura
zegar/alarm
temperatura
pojeawienie sie nowych elementów
kliknięcie w element
najechanie na element
rolety
rolety
rolety
3
1
rolety
menu
1
3
1
menu
2
najechanie na element zmiana stanupo kliknięcia
rolety
3
1
menu
2
3
1
menu
2
2
3
animacja- element porusza sie w dół
kliknięcie w element
rolety
menu
rolety
3
1
menu
2
3
w dół
w dół
stop
stop
stop
stop
w górę
w górę
w górę
w górę
w dół
autor: Karolina Wilk, sem IV, rok akademicki 2012/2013 pracownia: Zakład Badań Wizualnych i Interakcji prowadzący: prof. ASP Wiesław Gdowicz,asyst. Marta Więckowska
Prototyp - badania z żytkownikiem.
Prezentacja projektu interakcji i wizualnej postaci interfejsu
Projekt interakcji
prezentacja działania interfejsu
Projekt interfejsu
stany, elementy zaprezentowane w procesie działania interfejsu
proces działania:
13:05
najechanie na element
kliknięcie w element
13:05
13:05
oświetlenie
1
1
oświetlenie
otwarcie nowego okna
zegar/alarm
oświetlenie
2
2
ustaw zegar: godz. min.
rolety
projekcja
rolety
projekcja
rolety
13 : 05
projekcja
ustaw alarm: godz. min.
a
00 : 00
b zegar/alarm
1
2
1
2
temperatura
zegar/alarm
temperatura
zegar/alarm
zmiana stanu po kliknięcia
menu
zegar/alarm
ustaw zegar: godz. min.
13 : 05 ustaw alarm: godz. min.
00 : 00
ustaw zegar: godz. min.
dzień tyg.
poniedziałek
powtarzanie alarmu PN WT SR
CZ
PT
SB
13 : 05 ustaw alarm: godz. min.
00 : 00
ustaw zegar: godz. min.
poniedziałek
powtarzanie alarmu PN WT SR
CZ
PT
menu
zegar/alarm
dzień tyg.
SB
14 : 05 ustaw alarm: godz. min.
00 : 00
poniedziałek
powtarzanie alarmu PN WT SR CZ
PT
SB
animacja- element porusza sie w dół
kliknięcie w element
menu
zegar/alarm
dzień tyg.
temperatura
najechanie na element kliknięcie w element
menu
ustaw zegar: godz. min.
dzień tyg.
poniedziałek
powtarzanie alarmu PN WT SR
CZ
PT
menu
zegar/alarm
SB
13 : 05 ustaw alarm: godz. min.
00 : 00
dzień tyg.
poniedziałek
powtarzanie alarmu PN WT SR
CZ
PT
SB