Projekt badania interfejsu

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