Projekt badania interfejsu do sterowania urządzeniami w sali Zakładu Badań Wizualnych i Interakcji. Aleksandra Zubala Badania Użyteczności prowadzący: prof. ASP dr hab Wiesław Gdowicz mgr. Marta Więckowska rok akademicki 2012/2013, semestr zimowy
Zadanie polegało na zaprojektowaniu interfejsu do sterowania użądzeniami do sterowania urządzeniami w sali Zakładu Badań Wizualnych i Interakcji.
Projekt interakcji i wizualnej postaci interfejsu
Prototyp - badania z użytkownikiem
Prezentacja zmienionego protypu interfejsu po uwzględnieniu wniosków z badań
Projekt papierowego prototypu Przed przystąpieniem do wykonania prototypu multimedalnego interfejsu, został stworzony, przy pomocy prostych metod, interfejs papierowy. Pozwala on na przetestowanie graficznego wyglądu interfejsu oraz jego struktury np wymiary, kolory, ropoznawalność poszczególnych elementów, sposób poruszania się użytkownika i wyemiinować podstawowe błedy już na początku procesu projektowania.
Po naciśnięciu jednego z tych przycisków zmienia on kolor - lampa jest włączona.
Na stronie startowej wyświetlane są Lampy.
Na tej stronie wyświetla się rysunek oraz 9 przycisków.
Aktualnie wyświetlana zakładka jest zaznaczona w panelu menu kolorem jasno-zielonym.
Ekran: w tej zakładce znajduje się element wysuń/schowaj, który po naciśnięciu zmienia kolor, oraz komunikat werbalny
Rzutnik: na tej podstronie znajduje się element wyłącz/ wyłacz.
Element włącz/wyłącz po naciśnięciu zmienia kolor oraz komunikat werbalny.
Projekt interakcji i wizualnej postaci interfejsu
Prototyp - badania z użytkownikiem
Prezentacja zmienionego protypu interfejsu po uwzględnieniu wniosków z badań
Projekt papierowego prototypu Wmiary interfejsu: 20 x 20 cm Projekt interfejsu składa się z dwóch poziomów: 1.Pierwszy poziom: strona startowa - Ośwlenie 2.Drugi poziom: zawartość zakładek: Żaluzje Temperatura Ekran Rzutnik Menu jest elementem stałym tj. wyświetla sią na każdym etapie einterfejsu. Menu znajduje się po lewej stronie interfejsu i jest dostępne z każdej pozycji interfejsu. Menu zawiera 5 elementów odpowiadających pięciu zakładką. Każdy z nich po naciśnięciu powoduje wyświetlenie odpowiedniej zakładki po prawej stronie, pod warunkiem, że dana zakładka nie jest aktualnie wyświetlana.
Temperatura: zawiera rysunek termometru oraz znajdujący się na tym rysunku wskaźnik.
Żaluzje: na tej podstronie znajdują się sześć elemetów, które po naciśnięciu i przeciągnięciu zmieniają swój kształt.
Użytkownik może dowolnie przemieszczać się między zakładkami i zmieniać stany elementów.
Użytkownik przesuwa wskaźnik na wybrane pole.
Projekt interakcji i wizualnej postaci interfejsu
Prototyp - badania z użytkownikiem
Prezentacja zmienionego protypu interfejsu po uwzględnieniu wniosków z badań
150 mm 12 mm
12 mm
6 mm
15 mm 2,5 mm 1, 5 mm
15 mm
2 mm
23,5 mm
120 mm
7 mm
8 mm 3 mm
10 mm
2,5 mm
użyty krój pisma: Din Bold 10 pt i 5 pt
Projekt interakcji i wizualnej postaci interfejsu
Prototyp - badania z użytkownikiem
Prezentacja zmienionego protypu interfejsu po uwzględnieniu wniosków z badań
Projekt layoutu interfejsu (stanów interfejsu), elementów graficznych interfejsu. Strona startowa interfejsu Przykładowy stan Interfejs po dokonaniu określonych akcji przez użytkownika
Podział na elementy aktywne i nieaktywne elementy aktywne, zmienne elementy nieaktywne, stałe
Projekt interakcji i wizualnej postaci interfejsu
Prototyp - badania z użytkownikiem
Prezentacja zmienionego protypu interfejsu po uwzględnieniu wniosków z badań
Projekt layoutu interfejsu (stanów interfejsu), elementów graficznych interfejsu. Komunikaty werbalne: oświetlenie rolety temperatura ekran rzutnik 10 11 12 13 14 15 16 17 18 19 20 21 22 21 23 24 °C
Komunikaty niewerbalne:
Kolorystyka interfejsu C=0 M=0 Y=47 K=0
Lampa jest wyłączona.
Lampa jest włączona.
Okno jest odsłonięte.
Okno jest zasłonięte. Czarne pole oznacza roletę.
Czarny - kolor podstawowy określa elementy rysunku, konturów, typografię. Rolety są koloru czarnego ponieważ ten kolor oznacza ciemność. brak światła, zaciemnienie pomieszczenia. 44% czerń
Ekran jest schowany
Ekran jest wysunięty.
Szary - tym kolorem oznaczone są wyłączone lampy. Kojarzy się z czymś neutralnym, niezauważalnym, cichym. Został wyeliminowany na kolejnych etapach projektowania celem uproszczenia graficznej postaci interfejsu. C=3 M=81 Y=49 K=0
Temperatura jest ustawiona na 10°C
Temperatura jest ustawiona na 18°C
Rzutnik jest wyłączony
Rzutnik jest włączony
Czerwony - na tym interfejsie oznaczono tym kolorem wskaźnik temperatury, który określa wartość temperatury czyli ile jest ciepła w pomieszczeniu. Jest uważany za ciepłą barwę i kojarzony z ciepłem, gorącem, ogniem.
Ponieważ czerwień jest barwą niezwykle wyrazistą i przykuwającą uwagę w tym projekcie użyty został nieco rozbielony odcień.
C=0 M=0 Y=47 K=0
Żółty - powszechnie kojarzony ze słońcem, światłem słonecznym lub światłem żarówek, które mają właśnie ten kolor. W interfejsie określa zapalone lampy.
Projekt interakcji i wizualnej postaci interfejsu
Projekt interakcji - jakiego rodzaje ruchy, manipulacje wykonywane przez użytkownika powodują określone zmiany w interfejsie
Prototyp - badania z użytkownikiem
Prezentacja zmienionego protypu interfejsu po uwzględnieniu wniosków z badań
Interfejs nr 1
Interfejs nr 2
23 elementów 46 stanów elementów
18 elementów 36 akcji
Projekt interakcji i wizualnej postaci interfejsu oświetlenie 1 klik zmiana koloru
1 klik zmiana koloru
Prototyp - badania z użytkownikiem
roleta
Prezentacja zmienionego protypu interfejsu po uwzględnieniu wniosków z badań tamperatura
1 klik zmiana koloru 10% - 100%
1 klik zmiana koloru 10% - 100%
1 klik zmiana koloru 1 klik zmiana koloru 10% - 100% 1 klik zmiana koloru
1 klik zmiana kształtu 10% - 100%
1 klik zmiana koloru 10% - 100% 1 klik zmiana koloru
1 klik zmiana koloru
ekran 1 klik zmiana koloru 10% - 100% 1 klik zmiana kształtu
1 klik zmiana koloru
1 klik zmiana koloru
1 klik zmiana koloru 10% - 100%
rzutnik 1 klik zmiana koloru
1 klik zmiana koloru
Projekt interakcji i wizualnej postaci interfejsu
Badanie prototypu interfejsu z użytkownikami Cele badania:
Celem przeprowadzonego badania jest wykazanie błędów i funkcjonalności zaprojektowanego interfejsu.
Scenariusz badania:
W badaniu wzięły udział trzy osoby w różnym przedziale wiekowym. 1. Osoby badane wygodnie siadają przed ekranem komputera o wymiarach piętnastu cali i rozdzielczości 1366x768 pikseli, na ekranie komputera jest wyświetlany interfejs o wymiarach 12 x15 cm. 2. Osoby badane są zapoznawane z działaniem interfejsu i jego podstawowymi funkcjami. 3. Osoby badane są proszone o wykonanie następujących czynności: 1. Zapal osiem lamp. 2. Ustal temperaturę na dziewiętnaście stopni. 3. Zasuń rolety. 4. Wysuń ekran. 5. Włącz rzutnik. 6. Wyłącz lampy. 7. Włącz lampy.
Prototyp - badania z użytkownikiem
8. Wyłącz rzutnik. 9. Zasuń ekran. 10. Odsłoń rolety. 11. Wyłącz lampy. 5. Każda akcja wykonana przez użytkownika oraz jego uwagi jest odnotowywana przez osobę przeprowadzającą badania. Sprawdza jak szybko użytkownik dociera do odpowiednich elementów oraz czy użytkownik się wacha, a jeśli tak to na jakich etapach. 6. Sposób poruszania się użytkownika po elementach interfejsu jest wskaźnikiem dobrze zaprojektowania interfejsu.
interfejs nr 1
Prezentacja zmienionego protypu interfejsu po uwzględnieniu wniosków z badań
interfejs nr 2
Wnioski po badaniu interfejsu nr1 Jeden z użytkowników czuł się zdezorientowany tym, że elementy nie były podpisane. Użytkownicy nie mieli problemów z użytkowaniem interfejsu. Natomiast w ogólnej strukturze interfejsów nie zauważony błędów. Żaden z użytkowników nie wyraził zdecydowanego z dania na temat wyglądu interfejsu. Elementy różniły się wielkością co sugerowało użytkownikowi określoną hierarchię elementów, niezamierzoną przez projektanta. Do kolejnego prototypu poszczególne grupy elementów zostały tak dopasowane aby każda z nich zajmowała tę samą lub zbliżoną rozmiarem powierzchnię interfejsu.
o funkcji danej grupy elementów. Elementy interfejsu zostały podpisane, co zwiększyło ich rozpoznawalność. Jednak punktacja kroju pisma okazała się zbyt mała (4 pt.) na co skarżyły się osoby badane. Odstępy między elementami oświetlenia i roletami okazały się za małe. Użytkownicy mieli problem z nawigacją np. przypadkowo aktywowali inną roletę niż zamierzali.
Wprowadzone zmiany po badaniu interfejsu nr2 interfejs nr 3
Wnioski po badaniu interfejsu nr2
Elementy aktywne zmieniają wygląd po najechaniu na nie kursorem co daje wskazówkę dla użytkownika, że dany element jest aktywny, użytkownicy bez problemu rozróżniali elementy aktywne od elementów nieaktywnych. Do interfejsu zostały dodane napisy informujące
Odstępy pomiędzy poszczególnymi elementami grup elementów: oświetlenia i rolety, zostały zwiększone a wymiary tych elementów zmieniona. Punktacja pisma została powiększona z 6 pt do 10 pt. Zmieniony został kształt i wymiary elementu “rzutnik”. Tak by był bardziej rozpoznawalny.
Projekt interakcji i wizualnej postaci interfejsu
Prototyp - badania z użytkownikiem
Prezentacja zmienionego protypu interfejsu po uwzględnieniu wniosków z badań
Badanie Card Sorting Badanie Card Sorting to metoda służąca określeniu właściwych nazw dla elementów interfejsu. Jest prostą techniką badań z użytkownikiem, w których respondenci tworzą falksomię, taksonomię lub drzewo kategorii. Dla potrzeb tego projektu wykorzystano metodę card
Test zamknięty
sorting do stworzenia falksomi i taksonomii dla podanych przez projektanta grupę wyrazów. Test był przeorowadzony online z wykorzystaniem portalu w badaniu odpowiedziało dziesięć osób. Test składał się z dwóch części : Test zamknięty- polegał na
przyporządkowaniu, przez użytkownika pojęć (24 karty) do sześciu kategorii. Test otwarty - polegał na uporządkowaniu, przez użytkownika pojęć (24) w grupy i określenie dla tych grup odpowiednich nazw (kategorii). Po wykonaniu przez użytkowników ankiet, wyniki zostały
policzone przez program. Na podstawie tych zestawień zostały wysunięte wnioski: 1. Elementy takie jak: włącz, wyłącz, wysuń, schowaj, 5 stopni, 20 stopni nie mogą zostać odpowiednio sklasyfikowane przez osobę badaną bez podania odpowiedniego kontekstu w jakich te znaczenia
występują. 2. Wyrazy takie jak lampa 1, lampa 2, żaluzja 1 zostały sklasyfikowane przez użytkowników bez problemów.
Projekt interakcji i wizualnej postaci interfejsu
Badanie Card Sorting Test otwarty
Prototyp - badania z użytkownikiem
Prezentacja zmienionego protypu interfejsu po uwzględnieniu wniosków z badań
Projekt interakcji i wizualnej postaci interfejsu
Badanie Card Sorting Test otwarty
Prototyp - badania z użytkownikiem
Prezentacja zmienionego protypu interfejsu po uwzględnieniu wniosków z badań
Projekt interakcji i wizualnej postaci interfejsu
Badanie Card Sorting Test otwarty
Prototyp - badania z użytkownikiem
Prezentacja zmienionego protypu interfejsu po uwzględnieniu wniosków z badań
Projekt interakcji i wizualnej postaci interfejsu
Badanie Card Sorting Test otwarty
Prototyp - badania z użytkownikiem
Prezentacja zmienionego protypu interfejsu po uwzględnieniu wniosków z badań
Projekt interakcji i wizualnej postaci interfejsu
Prototyp - badania z użytkownikiem
Struktura interfejsu przed badaniem card sorting Test otwarty
Prezentacja zmienionego protypu interfejsu po uwzględnieniu wniosków z badań
Projekt interakcji i wizualnej postaci interfejsu
Prototyp - badania z użytkownikiem
Badanie Card Sorting Struktura interfejsu po badaniu card sorting
Prezentacja zmienionego protypu interfejsu po uwzględnieniu wniosków z badań
Prototyp nr 1
Prototyp nr 1
Prototyp nr 1