Projekt badania interfejsu

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