Download pdf - Projekt badania interfejsu

Projekt Badania Interfejsu do sterowania urządzeniami w sali ZBWi

autor: Karolina Wilk, rok II, sem IV, rok akademicki 2012/2013pracownia: Zakład Badań Wizualnych i Interakcjiprowadzący: prof. ASP Wiesław Gdowicz, asyst. Marta Więcowska

autor: Karolina Wilk, sem IV, rok akademicki 2012/2013pracownia: Zakład Badań Wizualnych i Interakcjiprowadzący: prof. ASP Wiesław Gdowicz,asyst. Marta Więckowska

Prezentacja projektu interakcji i wizualnej postaci interfejsu

Prototyp - badania z żytkownikiem.

Funkcje interfejsu badanie paper prototypingbadanie card sorting badanie prototypu 1 badanie prototypu 2

13:05 poniedziałek

• 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)

menuoświetlenie

a b

c

menurolety

1

menu

w dółekran:

projektor :

projekcja menu

godz.

:

:

godz.

ustaw zegar:

ustaw alarm:

dzień tyg.

alarmu powtarzanie

min.

min.

13

00

05

05

poniedziałek

menu

ustaw temperaturę:

temperatura

od

od

do

do

godz.

godz. godz.

godz.

temperatura

temperatura

00

00

20.5

20.0

00

00





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ą

1. cel badania:

badanie ma na celu wykazanie czy nazwy elementów architektury informacji są zrozumiałe dla potencjanlych użytkowników interfejsu

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 role-ty 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

badanie wykazało że użytkownik może nie domyślić sie że pod kategorią zegarznajduje się opcja alarmu

większość badanych przypasowywała elementy z kategorii ekran oraz kategorii rzutnik do jednej grupy ( projekcja )

kategorie AI przed badaniem 7 grup:

lampyroletykomputerekranrzutniktemperaturazegar

kategorie aI po badaniu6 grup:

lampyroletykomputerprojekcja

temperaturazegar/ alarm

4. Wnioski





1. Cel badaniaWeryfikacja 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 papierowegmodelu, 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

wniosek 5

komputer oświetlenie

rolety wszystkie

roleta n

1

2

3

rolety projekcja zegar/alarm temperatura

4. papierowy prototyp przykałady stron

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.

3. Badani ignorowali zakładke komputer, po otrzymaniu poleceniawyłącz komputer badani klikali na guzik włączanie, który został również zinterpretowany jako wyłącznik.

4. Badani nie zrozumieli komendy uśpij,

5. Strzałka w prawym dolny rogu nie została zrozumiana jakopowrót do strony startowej

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

7. Osoby badane zwróciły uwage na część graficzną interfejsu.według nich pole interfejsu było znacznie za duże w stosunku doilości i wielkości elementów interfejsu.

5. Wnioski

wniosek 3

wniosek 1

wniosek 7,1,3,5

wniosek 5





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 inter-fesju zmieniały się tak by odpowiadały kolejnemu stanu inetr-fejsu• Osoby biorące udział w badaniu zostały poproszone abyna 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

1. cele badaniaPrzed 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; 32. włącz wszytkie lampy w sali3. włącz jedynie jedną grupe lamp4 wyłącz lampy 5. chcesz aby w sali panował półmrok, włącz tylko jedną lampe 6 włącz rzutnik8. ustaw alarm który zasygnalizuje koniec zajęc ( 14:00 )9. zwiększ temperature w saliWykład się skończył11. wyłącz projektor i zwiń ekran10. Odsłoń dwa okna, trzecią rolete podnieś do połowy

menu

lampy wszystkie

oświetlenie oświetlenie

lampy wszystkie

menuoświetlenie

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





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.

13:15

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

13:05 poniedziałek

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.

Po drugim badaniu została wprowadzona zmiana:zmiana:

menu

lampy wszystkie

oświetlenie

po kliknięciu na przycisk lampy zapalają sie automatycznie a napis na guziku zmienia się na , przycisk pozostaje aktywny. Aby wyłączyć lampy nalezy na niegokliknąć

menuoświetlenie

3. badanym trudno było zorientować sie jak opuścić rolety, mylący był dla nich kierunek strzałki:

wszyscy badani radzili aby przycisk zastąpić:

menu

w dół

w górę

rolety menurolety




Projekt interfejsu Projekt interakcji prezentacja działania interfejsu

układ + grId:

13:05 poniedziałek

menuoświetlenie

a b

c

menurolety

1

menu

w dółekran:

projektor :

projekcja menu

godz.

:

:

godz.

ustaw zegar:

ustaw alarm:

dzień tyg.

alarmu powtarzanie

min.

min.

13

00

05

05

poniedziałek

menu

ustaw temperaturę:

temperatura

od

od

do

do

godz.

godz. godz.

godz.

temperatura

temperatura

00

00

20.5

20.0

00

00

°C

°C

menu glowne oświetlenie rolety prokekcja zegar/alarm temperatura





oświetlenie zegar/alarmrolety

podstrony

menu głównekOLOrYSTYka TYPOgraFIa

LINIa

projekcja

projekcja

temperatura

temperatura

projekcja

temperaturazegar/alarm

rolety

oświetlenie

13:05 poniedziałek

projekcja


rolety

oświetlenie

13:05 poniedziałek

projekcja


rolety

oświetlenie

13:05 poniedziałek

projekcja


rolety

oświetlenie

13:05 poniedziałek

projekcja


rolety

oświetlenie

13:05 poniedziałek

projekcja

zegar/alarm

rolety

oświetlenie

13:05 poniedziałek

projekcja


rolety

oświetlenie

13:05 poniedziałek

AAAAA

AA

AAAAA

A

A

A

AAAA

A

AAAA

A

a

a

a

a

a

a

a

nazwa krój pt

pt pt

kolor

kolor kolor

kontrast

kontrast kontrast

titillum medium

titillum medium

titillum medium

titillum medium

titillum medium

titillum medium

titillum medium

bezszeryfowy 3412

12

12

12

12

12

18

zegar/alarm

rolety

oświetlenie

menu główne

menu główne projekcjamenu główne

oświetlenie zegar/alarm

rolety temperatura

2 2

2 2

22

1 1

1 1

11

1 1

1 1

11

eFekTYdrop shadows: oppacity 30%; distance 0,2 mm; angle 90˚; offset x 0mm; offset y 0,2 mm; size 1mm

bevel and embross: size 2mm; soften 0,0 mm; depth100%; shading: angle -86 ˚; altitude 36 ˚hightlight oppacity 100%shadow oppacity 13%

bevel and embross: size 0, 2mm; soften 0,0 mm; depth 0%; shading: angle 120; altitude 28 ˚hightlight oppacity 100%shadow oppacity 20%inner glow oppacity 75%size 2mm; choke 78%source : center

bevel and embross: size 0,4mm; soften 0,0 mm; depth100%; shading: angle 120 ˚; altitude 30 ˚;hightlight oppacity 100%shadow oppacity 100%

te same efekty z elementami:

inner shadow:distance 1,75 mm; opacity 50%; angle 120˚x offset 0,9 mm; y offset 1,5 mm; size 3mm





a b

11

1

1

1

1

1

1

1

1

1

1

22

2

2

2

2

2

2

2

2

2

2

1 2a b

element aktywny

element nieaktywny

otwarcie nowego oknapo kliknięciu w powiązany element:

animacja- zatrzymanie

animacja- elementporusza sie w góre

animacja- elementporusza sie w dół

pojwienie sie grupynowych elementów

element zmienia kolor

cyfry zmieniaja sie

napisy zmieniaja sie zmiana koloru po najechaniu palcemzmiana koloru w trakcie klikniecia

zmiana koloru po klinięciu

elementelement najechaniezmiana koloru

najechaniezmiana koloru

klikzmiana koloru

klikzmiana koloru

zmiana kolorupo kliknięciu

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





element najechaniezmiana koloru

klikzmiana koloru

po kliknieciuzmiana koloru

po kliknieciu w powiazanyelement : zmiana napisu

lampy wszyst.

lampy grupa

stop stop stop

w górę w górę w górę

w dół w dół

WT WT

animacja- po kliknięciu w powiązany element, element animacji porusza się w :

w dół w dół w góręstop stop

13 14

poniedziałek wtorek

20.0 20.5 °C °C

WT





proces działania:

projekcja projekcja projekcja

temperatura temperatura temperaturazegar/alarm zegar/alarm

rolety rolety

oświetlenie oświetlenie oświetlenie

13:05 13:05 13:05 poniedziałek

poniedziałek

poniedziałek

menu

menu menu

lampy wszyst. lampy wszyst

lampy grupa lampy grupa

lampy osobno lampy osobno

oświetlenie

oświetlenie oświetlenie menu menu menuoświetlenie oświetlenie oświetlenie

lampy osobno lampy osobno lampy osobno

lampy grupa lampy grupa lampy grupa

wyłącz lampy wyłącz lampy wyłącz lampy

menuoświetlenie

stany, elementy zaprezentowanew procesie działania interfejsu

najechanie na element

najechanie na element najechanie na element

kliknięcie w element

kliknięcie w element kliknięcie w elementzmiana stanu elementów interfesju w eyniku kliknięcia

otwarcie nowego okna






proces działania:stany, elementy zaprezentowanew procesie działania interfejsu


najechanie na elementnajechanie na elementpojeawienie sie

nowych elementów


kliknięcie w element kliknięcie w elementzmiana stanupo kliknięcia


menu

menu menu

rolety

rolety rolety

1

1 1

2

2 1

3

3 3

13:05 13:05 13:05

menu menu menu menurolety rolety rolety rolety

w dół w dółw dół

w górę w górę w górę w górę

stop stop stop stop

2 2 2 21 1 1 13 3 3 3






a b

proces działania:stany, elementy zaprezentowanew procesie działania interfejsu




kliknięcie w element kliknięcie w elementzmiana stanu po kliknięcia


13:05 13:05 13:05


menu

menu menumenumenu

godz.

godz. godz.godz.godz.

:

: :::

:

: :::

godz.

godz. godz.godz.godz.

ustaw zegar:

ustaw zegar: ustaw zegar:ustaw zegar:ustaw zegar:

ustaw alarm:

ustaw alarm: ustaw alarm:ustaw alarm:ustaw alarm:

dzień tyg.

dzień tyg. dzień tyg. dzień tyg. dzień tyg.

alarmu

alarmu alarmu alarmu alarmu

powtarzanie

powtarzanie powtarzanie powtarzanie powtarzanie

min.

min. min.min.min.

min.

min. min.min.min.

13

13 131413

00

00 000000

05

05 050505

00

00 000000

poniedziałek

poniedziałek poniedziałekponiedziałekponiedziałek

1

1

1

1

2

2

2

2



