Projekt badania interfejsu by Zakład Badań Wizualnych i Interakcji

Projekt badania interfejsu do obsługi urządzeń w pracowni Zakładu Badań Wizualnych i Interakcji.

• Projekt interfejsu A • Badanie z użytkownikami • Projekt interfejsu B wykonany po badaniu z użytkownikami • Wskazanie zmian i ich uzasadnienie

Paweł Mularczyk, II rok pracownia: Badań Użyteczności prowadzący: Prof ASP dr hab Wiesław Gdowicz mgr Marta Więckowska 2012/2013

Projekt badania interfejsu do obsługi urządzeń w pracowni Zakładu Badań Wizualnych i Interakcji. • Projekt interfejsu A

• Badanie z użytkownikami

• Wyniki badania

1. Główne funkcje interfejsu (założenia początkowe) • Sterowanie oświetleniem – w zakładce oświetlenie będzie można bądź wyłączyć wybrany zestaw lamp – w zakładce oświetlenie będzie można zapisać różne układy oświetleń • Sterowanie roletami – zakładka będzie umożliwiać odsunięcie bądź zasunięcie wybranych rolet • Włączanie rzutnika – w zakładce rzutnik będzie można zarówno sterować włączaniem i wyłączaniem rzutnika oraz opuszczaniem oraz zwijaniem ekranu rzutnika • Włączanie ogrzewania – w zakładce ogrzewanie będzie można je włączyć, bądź wyłączyć raz ustawić odpowiednią temperaturę • Uruchamianie klimatyzacji – zakładka: klimatyzacja będzie umożliwiać sterowanie klimatyzacją • Kalendarz/Zegar – godzina i data będzie widoczna zawsze na interfejsie – klikając na datę i godzinę wejdziemy do kalendarza gdzie będzie można można je ustawić

• Interfejs B - poprawiony

Projekt badania interfejsu do obsługi urządzeń w pracowni Zakładu Badań Wizualnych i Interakcji. • Projekt interfejsu A

• Badanie z użytkownikami

2. Badanie Card Sorting Badanie Card Sorting pozwoliło na odpowiednie kategoryzowanie informacji które miały z kolei posłużyć do stworzenia i poprawienia architektury strony

Architektura interfejsu przed badaniem Card Sorting

• Wyniki badania

• Interfejs B - poprawiony

Projekt badania interfejsu do obsługi urządzeń w pracowni Zakładu Badań Wizualnych i Interakcji. • Projekt interfejsu A

• Badanie z użytkownikami

• Wyniki badania

2. Badanie Card Sorting Wyniki badania otwartego

Przeprowadzenie badania otwartego pozwoliło utworzyć pięć grup wzajemnie powiązanych ze sobą znaczeń

• Interfejs B - poprawiony

Projekt badania interfejsu do obsługi urządzeń w pracowni Zakładu Badań Wizualnych i Interakcji. • Projekt interfejsu A

• Badanie z użytkownikami

• Wyniki badania

2. Badanie Card Sorting Architektura interfejsu po badaniu Card Sorting

– po przeanalizowaniu wyników badania połączono zakładki klimatyzacja i Ogrzewanie w jedną zakładkę o nazie Temperatura

• Interfejs B - poprawiony

Projekt badania interfejsu do obsługi urządzeń w pracowni Zakładu Badań Wizualnych i Interakcji. • Projekt interfejsu A

• Badanie z użytkownikami

• Wyniki badania

• Interfejs B - poprawiony

3. Paper prototyping Druga wersja papierowego prototypu interfejsu, która służyłą do przeprowadzania badań 9:40 /

14.03.2013

9:40 /

14.03.2013

9:40 /

14.03.2013

9:40 /

14.03.2013

9:40 /

14.03.2013

9:40 /

14.03.2013

zapisane oświetlenie 1

9:40 /

14.03.2013

9:40 /

14.03.2013

zapisane oświetlenie 2

18˚C

zapisane oświetlenie 3

21˚C 18˚C

9:40 /

21˚C

14.03.2013

9:40 /

14.03.2013

zapisane oświetlenie 1

9:40 /

˚C

zapisane oświetlenie 1

14.03.2013

9:40 /

14.03.2013 9:40 /

9:40 /

14.03.2013

9:40 /

14.03.2013

9:40 /

– dzięki papierowemu prototypowi zostały dostrzeżone niejasności interfejsu, takie jak problem z orientacją na jakiej zakładce się znajdujemy

14.03.2013

21˚C

9:40 14.03.2013

Projekt badania interfejsu do obsługi urządzeń w pracowni Zakładu Badań Wizualnych i Interakcji. • Projekt interfejsu A

• Badanie z użytkownikami

• Wyniki badania

• Interfejs B - poprawiony

4. Struktura interfejsu Ekran główny

oświetlenie

temperaura

wszystkie lampy podświetlenie się wszystkich lamp lampa 1 podświetlenie się lampy 1

rolety

ogrzewanie/ ustawienie temperatury jeden stopień w górę zmiana wartości jeden stopień w dół

lampa n podświetlenie się lampy n zapisane konfiguracje

zmiana wartości klimatyzacja/ ustawienie temperatury

włącz zapisaną konfigurację załącza wybraną konfigurację

jeden stopień w górę

zapisz konfigurację

jeden stopień w dół

dodanie kolejnej zapisanej konfiguracji do listy

zmiana wartości

usuń konfigurację usuwa załączoną konfigurację z listy

zmiana wartości

rzutnik

ustawienia godziny

wszystkie rolety

ekran rzutnika

opuszczenie się wszystkich rolet

podświetlenie się przycisku ekrany

roleta 1 opuszczenie się rolety 1 roleta 2 opuszczenie się rolety 2 roleta 3 opuszczenie się rolety 3 roleta 4 opuszczenie się rolety 4

rzutnik podświetlenie się przycisku rzutnika

godzina do przodu zmiana wartości godzina do tyłu zmiana wartości minuta do przodu zmiana wartości minuta do tyłu zmiana wartości dzień do przodu zmiana wartości dzień do tyłu zmiana wartości miesiąc do przodu zmiana wartości miesiąc do tyłu zmiana wartości

Projekt badania interfejsu do obsługi urządzeń w pracowni Zakładu Badań Wizualnych i Interakcji. • Projekt interfejsu A

• Badanie z użytkownikami

• Wyniki badania

• Interfejs B - poprawiony

5. Projekt layoutu interfejsu (stanów interfejsu) strona główna interfejsu

przycisk powrotu

ustawienia zegara

strzałki odpowiadające za ustawienia daty i godziny

menu interfejsu oświetlenie

przycisk włączający wszystkie lampy przycisk przechodzenia do zapisanych konfiguracji miejsce w menu w którym się znajdujemy

oświetlenie

przyciski włączające poszczególne lampy

Projekt badania interfejsu do obsługi urządzeń w pracowni Zakładu Badań Wizualnych i Interakcji. • Projekt interfejsu A

• Badanie z użytkownikami

• Wyniki badania

• Interfejs B - poprawiony

5. Projekt layoutu interfejsu (stanów interfejsu) zapisane konfiguracje

przycisk zapisywania konfiguracji (po jego kliknięciu zostaje dodana kolejna zapisana konfiguracja)

zapisane konfiguracje – zapisanie konfiguracji

usunicie zapisanej konfiguracji ustawienie temperatury

włączenie ogrzewania

włączenie klimatyzacji

Projekt badania interfejsu do obsługi urządzeń w pracowni Zakładu Badań Wizualnych i Interakcji. • Projekt interfejsu A

• Badanie z użytkownikami

• Wyniki badania

• Interfejs B - poprawiony

5. Projekt layoutu interfejsu (stanów interfejsu) rolety

rolety – opuszczenie rolet przycisk odpowiadający za opuszczenie wszystkich rolet

rzutnik

przyciski opuszczające poszczególne rolety

rzutnik – opuszczony ekran + włączony projektor przycisk wyłączający wszystko

Projekt badania interfejsu do obsługi urządzeń w pracowni Zakładu Badań Wizualnych i Interakcji. • Projekt interfejsu A

• Badanie z użytkownikami

• Wyniki badania

• Interfejs B - poprawiony

6. Projekt interakcji – najechanie na przycisk

pojawienie się cienia sugerującego przycisk

– kliknięcie na przycisku

przejście do innego miejsca w interfejsie w tym przypadku przejście do oświetlenia

Projekt badania interfejsu do obsługi urządzeń w pracowni Zakładu Badań Wizualnych i Interakcji. • Projekt interfejsu A

• Badanie z użytkownikami

• Wyniki badania

• Interfejs B - poprawiony

6. Projekt interakcji – kliknięcie na przycisku

podświetlenie się przycisku w tym przypadku załączenie określonej lampy

– kliknięcie na przycisku

podświetlenie się przycisku + pojawienie się regulacji W tym przypadku załączenie klimatyzacji + pojawienie się regulacji

Projekt badania interfejsu do obsługi urządzeń w pracowni Zakładu Badań Wizualnych i Interakcji. • Projekt interfejsu A

• Badanie z użytkownikami

• Wyniki badania

• Interfejs B - poprawiony

6. Projekt interakcji – kliknięcie na przycisku (strzałce)

zmiana wartości W tym przypadku zmiana godziny w ustawieniach

– kliknięcie w przycisk

zmiana wyglądu przycisku W tym przypadku opuszczenie się rolet

Projekt badania interfejsu do obsługi urządzeń w pracowni Zakładu Badań Wizualnych i Interakcji. • Projekt interfejsu A

• Badanie z użytkownikami

• Wyniki badania

• Interfejs B - poprawiony

7. Elementy interfejsu i przypisanie im cech wizualnych odnoszących się do ich funkcji – ikona oświetlenia

– ogrzewanie wył./ zał.

– ikona ustawień temperatury

– klimatyzacja wył./ zał.

– oświetlenie wył./ zał.

– zapisz konfigurację

– usuń – ikona rolet

– roleta odsunięta/ zasunięta – do góry

– ikona odpowiadająca za rzutnik i ekran rzutnika

– ekran rzutnika wył./ zał.

– wstecz

– rzutnik wył./ zał.

– ustawienia

– do dołu

Projekt badania interfejsu do obsługi urządzeń w Zakładu Badań Wizualnych i Interakcji. • Projekt interfejsu A

• Badanie z użytkownikami

1. Cele badania – sprawdzenie poprawności struktury interfejsu – sprawdzenie interakcji użytkownika z interfejsem – sprawdzenie czy elementom interfejsu zostały przypisane odpowiednie cechy wizualne – sprawdenie czy użytkownik nie ma trudności w poruszaniu się po interfejsie

2. Procedura i scenariusz badania – interfejs będzie badany na 4 osobach – osoba uczestnicząca w badaniu będzie wykonywała określone zadania na interfejsie (na komputerze) – jej działania będą rejestrowane za pomocą programu AutoScreenRecorder 3.1 – badanie nie będzie podlegało limitom czsowym – przed przystąpieniem do badania osoba uczestnicząca w badaniu nie będzie miała styczności z interfejsem – przed przystąpieniem do badania osobie w nim uczestniczącej zostanie przedstawiona lista zadań – podczas badania respondent będzie miał prawo przypomnieć sobie zadania do wykonania bądź spytać się o nie osobę kierującą badaniem – po wykonanym zadaniu osoba uczestnicząca w badaniu ma możliwość wolnej interakcji z interfejsem i jest poproszona o skomentowanie elementów, które sprawiały trudność

• Wyniki badania

• Interfejs B - poprawiony

Zadanie 1 Wszedłeś/aś do sali ZBWiI. Potrzebne jest byś załączył/a cześć lamp, po chwili decydujesz się na włączenie wszystkich. Zadanie 2 Jest za gorąco. Włączasz klimatyzację i ustawiasz ją na 17°C. Zadanie 3 Potrzebne jest byś opuścił/a ekran rzutnika i załączył/a projektor. Zadanie 4 Słońce przeszkadza w zajęciach Należy opuścić rolety. Zadanie 5 Wyłącz wszystko. Zadanie 6 Przestaw zegar o godzinę w tył

[sprawdzenie czy przyciski poszczegulnych lamp są odpowiednio odczytywane, oraz czy interakcja użytkownika z interfejsem przebiega prawidłowo] [sprawdzenie czy ikony ogrzewania i klimatyzacji są czytelne, i czy użytkownik rozrużnia przycisk włączony od wyłączonego] [sprawdzenie interakcji pomiędzy schowanym a wysuniętym ekranem rzutnika oraz włączonym i wyłączonym projektorem] [sprawdzenie czy sposób przedstawienia opuszczania się rolety jest prawidłowy] [sprawdzenie interakcji z użytkownikiem] [sprawdzenie czy użytkownik ma problemy w poruszaniu się po interfejsie]

Projekt badania interfejsu do obsługi urządzeń w Zakładu Badań Wizualnych i Interakcji. • Projekt interfejsu A

• Badanie z użytkownikami

• Wyniki badania

• Interfejs B - poprawiony

Projekt badania interfejsu do obsługi urządzeń w pracowni Zakładu Badań Wizualnych i Interakcji. • Projekt interfejsu A

• Badanie z użytkownikami

• Wyniki badania

• Interfejs B - poprawiony

3. Wyniki badania z użytkownikami 3.1 Wyniki [na podstawie zarejestrowanego badania oraz komentarzy osób badanych] – osoby uczestniczące w badaniu miały problem ze zidentyfikowniem przycisków gdy w przycisku nie występował pojawiający się po najechaniu na niego cień, czasami klikały w napis znajdujący się obok przycisku brak pojawienia się wyróżnienia po najechaniu na przycisk

– respondenci mieli minimalne problemu z poruszaniem się pointerfejsie: wolniej znajdywali przycisk odpowiadający za zakładkę rzutnika [ikona kliszy filmowej]

? – zamiesznie wprowadził również brak zmiany stanu ikony po kliknięciu w przycisk opuszczania ekranu rzutnika przycisk wyłączający wszystko

kliknięcie w napis

Projekt badania interfejsu do obsługi urządzeń w pracowni Zakładu Badań Wizualnych i Interakcji. • Projekt interfejsu A

• Badanie z użytkownikami

• Wyniki badania

3. Wyniki badania z użytkownikami 3.1 Wyniki [na podstawie zarejestrowanego badania oraz komentarzy osób badanych] – zamiesznie wprowadził również brak zmiany stanu ikony po kliknięciu w przycisk opuszczania ekranu rzutnika – ekran rzutnika wył./ zał.

– zdażyło się że osoba by przesunąć godzinę klikała w cyfrowy zegar, a nie w ikonę zębatki [prowadzącą do ustawień] – różnica występująca między przyciskiem włączenia wszystkich lamp [przycisk z ikoną] a przyciskiem załączenia konkretnej lampy [sam przycisk] wprowadał w zakłopotanie i opuźniał jego odnalezienie wszystkie lampy wył./ zał.

wszystkie lampy wył./ zał.

brak porównania – linie i kolorz interfejsu są zbyt subtelne co wpływa na cztelność

• Interfejs B - poprawiony

Projekt badania interfejsu do obsługi urządzeń w pracowni Zakładu Badań Wizualnych i Interakcji. • Projekt interfejsu A

• Badanie z użytkownikami

• Wyniki badania

3. Wyniki badania z użytkownikami 3.2 Rekomendacje do wprowadzenia zmian – interfejs od strony graficznej jest zbyt subtelny, przyciski zbyt mało odznaczają się od tła, należy pogrubić linie oddzielające przyciski od reszty interfejsu, oraz jeszcze raz zastanowić się nad kolorystyką – należy także poprawić sposób interakcji przycisków, pojawianie się cienia po najechaniu na przycisk [w przypadku każdego przycisku] – jeszcze raz zastanowić się nad niektórymi ikonami - tak by były kojażone z przypisanymi im funkcjami – należy wprowadzić strzałkę odsyłającą do strony początkowej – należy zastanowić się nad tym czy nie zastosować przycisku off oddzielnie do każdej z zakładek – należy wprowadzić ikony lub podpisy dla pojedyńczych lamp

• Interfejs B - poprawiony

Projekt badania interfejsu do obsługi urządzeń w pracowni Zakładu Badań Wizualnych i Interakcji. • Projekt interfejsu A

• Badanie z użytkownikami

• Wyniki badania

1.Peojekt graficzny poprawionego interfejsu Parametry rozdzielczość 640x480 px

Zastosowany krój pisma Klavika Regular Aa

Kolorystyka tło interfejsu

przyciski

zakładki i ramki

• Interfejs B - poprawiony

Projekt badania interfejsu do obsługi urządzeń w pracowni Zakładu Badań Wizualnych i Interakcji. • Projekt interfejsu A

• Badanie z użytkownikami

• Wyniki badania

• Interfejs B - poprawiony

2. Interfejs B z uwzględnionymi rekomendacjami strona główna interfejsu

zwiększony został kontrast kolorów występujących w interfejsie

ustawienia zegara

kolor typografii został zmieniony co poprawiło jej czytelność

oświetlenie

granica przycisków została mocniej oświetlenie zaznaczona, opisy zostały przeniesione z zewnątrz do wewnątrz przycisków poprawiony został grid interfejsu, menu jest oddzielone od reszty interfejsu

zostały dodane opisy lamp

Projekt badania interfejsu do obsługi urządzeń w pracowni Zakładu Badań Wizualnych i Interakcji. • Projekt interfejsu A

• Badanie z użytkownikami

• Wyniki badania

• Interfejs B - poprawiony

2. Interfejs B z uwzględnionymi rekomendacjami przycisk off

ikona rzutnika w menu głównym przycisk off został przeprojektowany: pierwsze kliknięcie wyłącza sprzęt na obecnej zakładce, natomiast drugie wszystkie urządzenia kompatybilne z interfejsem

zmieniona została ikona odpowiadająca za rzutnik

zmiana wyglądu przycisków zależnie od ich stanów wył.

najechany

zał. strzałka powrotu dodana została strzałka powrotu do głównego menu zmiany wyglądów przyciskw zostały ujednolicone tak aby ułatwić zrozumienie interfejsu