Interfejs, interakcja, interaction design /pierwsze kroki/

interfejs-interakcja-naglowek-ok

Studentom IV roku w semestrze letnim został wydany temat związany z projektowaniem i badaniem interfejsu. <szczegóły> Przed przystąpieniem do tego zadania należy zapoznać się z podstawowymi pojęciami związanymi z tym zagadnieniem: interfejs, interakcja, interaction design.

Co oznacza słowo Interfejs? …

W bezpośrednim tłumaczeniu oznacza: pomiędzy twarzami. Interfejs jest to coś pomiędzy dwoma stronami, co pozwala na ich połączenie. Interfejs to połączenie, sposób współpracy lub sposób porozumiewania się różnych systemów. Za jego pośrednictwem, następuje przekazywanie komunikatów między dwoma stronami – np. między człowiekiem a urządzeniem. W informatyce jest to urządzenie elektroniczne, które umożliwia połączenie ze sobą dwóch lub więcej urządzeń np. port USB.

Kolejne pojęcie to interakcja, które jest definiowane jako wzajemne oddziaływanie na siebie obiektów (osób, przedmiotów, zjawisk itp.); zetknięcie, spotkanie kilku akcji lub dążeń.

Interfejs i interakcję spina razem dziedzina Interaction Design . Jest to dyscyplina, która obejmuje kreowanie i definiowanie komunikacji pomiędzy urządzeniem mechanicznym a człowiekiem – a dokładniej „reakcji” urządzenia na zachowania użytkownika. Dotyczy to systemów takich jak: oprogramowanie komputerowe, produkty (kuchenka mikrofalowa, żelazko itd.), urządzenia przenośne, usługi (bankomat)…
Interfejs jest projektowany wszędzie tam, gdzie dochodzi do wykonywania czynności za pośrednictwem urządzenia.

Głównym celem Interaction design jest polepszenie użyteczności interfejsu poprzez prowadzenie analiz potrzeb użytkownika. To możliwości i potrzeby użytkownika stają się punktem wyjścia do projektu. Ale w jaki sposób dowiedzieć się jaki jest ich zakres?
I na to pytanie muszą odpowiedzieć studenci IV roku.
(Należy badać umysł, dany z perspektywy pierwszej osoby, przy pomocy nauki, uprawianej z perspektywy trzeciej osoby.)

Jaki jest IDEALNY INTERFACE?
To taki, którego nie trzeba się uczyć?

Obsługa idealnego interfejsu wydaje się powinna być intuicyjna. Mechanizmy znane z życia codziennego z innymi ludźmi można by wykorzystać w relacjach człowiek-maszyna – maszyny byłyby dostosowane do ludzi, a nie ludzie do maszyn.

Uczenie odbywałoby się poprzez obserwację – interfejs dostosowuje się do użytkownika, reaguje aktywnie na jego działanie, dostosowuje się do jego potrzeb.

Próbą odpowiedzenia na to wyzwanie jest Interfejs – prywatny, wirtualny asystent. Aktualnie spora część badań skupia się na kreowaniu tzw. virtual humans, wykorzystywanych przede wszystkim w Internecie, jako wirtualni doradcy i przewodnicy po stronach WWW korporacji. Po drugiej stronie znajduje się wirtualny człowiek, który reaguje na nasz głos, odczytuje nasz nastrój, potrafi szybko odpowiedzieć na nasze pytanie.

ELEMENTY INTERAKCJI

Bez RUCHU nie byłaby możliwa interakcja.
PRZESTRZEŃ stanowi kontekst dla ruchu.
Ruch w przestrzeni jest związany z CZASEM zakończenia zadania.
Czas jest bardzo ważnym elementem przy projektowaniu interfejsów. Czas cyfrowy, mierzony w milisekundach, różni się od czasu odczuwanego przez człowieka. Zmiany często mogą być szybsze od mrugnięcia okiem.

Czas zmian, akcji w interfejsie tworzy RYTM.
Rytm jest elementem animacji: jak szybko otwiera się folder, albo zamyka się aplikacja?
Projektant musi kontrolować ten rytm, zależności między czasem reakcji maszyny na polecenia operatora, a płynnością pracy samego operatora.
W wyniku różnych badań okazało się, że wraz z wydłużaniem się czasu oczekiwania na odpowiedź maszyny, wzrasta poziom frustracji użytkownika i spada poziom płynności pracy, co aktualnie ma również konsekwencje w związku z czasem „ładowania się” strony WWW.

Wpływ na korzystanie z interfejsu ma również miejsce, w którym się znajdujemy:
– obsługa pralki w mieszkaniu odbywa się w całkowicie innych warunkach niż wypłacanie pieniędzy z bankomatu na zatłoczonym lotnisko.

“How something looks gives us cues as to how it behaves and how we should interact with it.”

Wygląd jest jednym z głównych źródeł informacji o przeznaczeniu/funkcji urządzenia.
Psycholog James Gibson, in 1966, nazwał elementy wizualne, które wskazują na funkcję obiektu jako: affordances

np. Krzesło posiada „affordances” siedzenia poprzez swój kształt.
Przycisk posiada „affordances” przyciskania poprzez swój kształt, czy sposób poruszania
się.

„affordances” – związane jest z kontekstem, aspektami kulturowymi oraz z naszym wcześniejszymi doświadczeniem.

Dlatego ważne jest by wziąć uwagę przy projektowaniu interfejsu na jego cechy wizualne:

• proporcje
• struktura
• rozmiar
• kształt
• ciężar
• kolor

Sposoby projektowania interfejsu:

Koncepcje Scenariuszy/Personas/Profilów
I. Projektant najpierw określa jakie osoby będą korzystać z danego interfejsu i buduje profile użytkowników.
Czego ma dotyczyć komunikacja pomiędzy człowiekiem a urządzeniem?
Jakie są cele użytkownika?
Jakich informacji poszukuje?

II. Scenariusz użytkowania interfejsu (wyobrażenie w jaki sposób będzie funkcjonował interfejs):
W jaki sposób będzie przebiegać proces komunikacji?
Budowany jest scenariusz
– krok po kroku opisywany jest sposób korzystania z interfejsu.

Prototypowanie | Badanie
Można stosować kilka rodzajów prototypowania, które badają interfejs z różnych aspektów:
– badanie sprawdzające wpływ struktury logicznej
– badanie sprawdzające wpływ aspektów wizualnych
– Badanie sprawdzające wpływ kontekstu – wygląd interfejsu po implementacji
Prototypy muszą uwzględniać interaktywną naturę interfejsów. Mogą przybierać postać fizyczną lub cyfrową (z większą lub mniejszą dokładnością odwzorowania oryginału)

Ważnym elementem interfejsu jest jego struktura, czyli elementy i powiązania pomiędzy nimi. Analiza struktur wybranych interfejsów jest pierwszym etapem zadania wydanego studentom.

Studenci mieli do wyboru następujące interfejsy:

1. Bankomat.
2. Automat do wydawania i parzenia kawy, herbaty, itp.. – tutaj chodzi o automaty dostępne publicznie oraz zawansowane technicznie ekspresy do kawy.
3. Pralka.
4. Punkt informacyjny w akademiku – to oczywiście nie jest urządzenie – w tym przypadku analiza funkcji dotyczy takiego miejsca w akademiku, w którym istnieje możliwość zapisu różnych informacji. Informacja może przybierać różną postać. Zostaw wiadomość itp..

Analizując strukturę poszczególnych interfejsów studenci, mieli za zadanie zebrać wszystkie dostępne funkcje. Przy bankomatach należało przeanalizować wszystkie możliwe transakcje, jakie można przy jego pomocy wykonać: np. robienie wypłat, wpłat, przelewów.

Przedmiotem zadania jest zaprojektowanie interfejsu, który może dotyczyć urządzenia nieco innego niż te które są analizowane. Założenia zadania:

1. Interfejs jest przeznaczony dla Ipada: http://events.apple.com.edgesuite.net/1001q3f8hhr/event/index.html
2. Interfejs łączy się z urządzeniem przez WIFI.
3. Forma interfejsu – ekran dotykowy wykonany w programie flash (w tym zadaniu dotyk jest zastąpiony kliknięciem myszki).
4. Wizualna postać interfejsu musi zawierać elementy typografii (nazwy, polecenia itp..) oraz piktogramy.
Interfejs posiada funkcję pamięci.
5. Możliwość planowania i sterowania funkcjami urządzenia za pośrednictwem płaskiego interfejsu.

Rezultatem analizy jest określenie funkcji, które będą obsługiwane przez interfejs:
– funkcje do tej pory używane
– inne dodane przez studenta, które do tej pory nie były uwzględniane ze względu na rodzaj interfejsu – czy ograniczenia a mogłyby ułatwić dany proces.

Możemy sobie wyobrazić, że interfejs do obsługi pralki może również pełnić rolę „pośrednika” w zakupie proszku do prania przez internet.

Kolejnym elementem analizy jest porównanie struktur wybranych interfejsów.
Michalina Barzycka przedstawiła to porównanie prezentując zdjęcia poszczególnych stanów/etapów interfejsu bankomatu. Jest to nie dobre rozwiązanie ponieważ trudno jest zobaczyć samą strukturę i dostrzec różnice czy podobieństwa pomiędzy prezentowanymi przykładami.

Daria Leśniak również wybrała bankomat i starała się zaprezentować strukturę przy pomocy zdjęć, ale z pewnymi różnicami:
– przedstawiła z jakich elementów składa się interfejs
– Zdjęcia – poszczególne stany interfejsu starała się przedstawić w postaci drzewa prezentującego strukturę.
Kiedy wyobrazimy sobie 10 struktur interfejsów pokazanych za pomocą zdjęć – porównanie ich między sobą będzie bardzo utrudnione.
Strukturę należy prezentować w postaci grafu – prostej formy graficznej. Dzięki temu łatwiej będzie porównywać ilość elementów i relacje pomiędzy nimi.


Ola Nigbor, która wybrała pralkę, bardziej skupiła się na samym produkcie i jego funkcjach. Swoją analizą przedstawia w postaci mind mapy. Na pewno przyda się to Oli w kolejnych etapach zadania jednak to nie jest nadal struktura interfejsu.

Najlepiej z zadaniem poradził sobie Krzyś Czaicki.
Przedmiotem jego badania jest interfejs pralki. Przeanalizował wszystkie elementy interfejsu, jego strukturą oraz przebieg procesui prania na kilku wybranych przykładach.

Prezentowane struktury mają postać graficzną jednak należy je bardziej upodobnić. Prezentując funkcje wyboru na poszczególnych etapach Krzyś posługuje się piktogramami występującymi w konkretnym interfejsie. W każdym z wybranych przykładów te ikony są różne. Ta różnorodność opisów utrudnia porównanie struktur interfejsów. Trzeba wszystkie te opisy sprowadzić do jednego mianownika – gdzie ta sama funkcja w każdym przypadku jest tak samo prezentowana.

Nie należy zapominać, że celem zadania jest zaprojektowanie interfejsu służącego do badania jego użyteczności i czytelności.

Na kolejne zajęcia studenci mają wykonać następujące elementy:

1. Graficzna postać struktury wybranych interfejsów
2. Porównanie struktur wybranych interfejsów
3. Przeanalizowanie możliwych funkcji interfejsu (dodanie nowych funkcji, do tej pory nie stosowanych, które ułatwią proces, który obsługiwany jest prze interfejs)
4. W wyniku przeprowadzonych analiz należy zaproponować nowe rozwiązanie interfejsu przedstawiając go za pomocą – paper prototyping – papierowego modelu interfejsu.
http://www.paperprototyping.com/download.html
http://www.youtube.com/watch?v=ykJ60H4Qkvg&feature=related
http://www.youtube.com/watch?v=c4-A-9hGn0U&feature=related

Reklamy