Interakcja człowiek – komputer GUI ( graphical user interface )

Interakcja człowiek – komputerGUI (graphicaluserinterface) mgr inż. Marek Malinowski Zespół Matematyki i Fizyki Wydz. BMiP PW Płock

GUI (graphicaluserinterface) Metody realizacji dialogu • Metody realizacji dialogu - zagadnienia • koncepcje interfejsu użytkownika • realizacja dialogu użytkownik system • projektowanie graficzne interfejsu użytkownika • nowe rozwiązania interakcji – wybrane trendy

GUI (graphicaluserinterface) Metody realizacji dialogu - koncepcje • Ewolucja interfejsów użytkownika • (tryb wsadowy > komputery PC > praca zespołowa > mobilność) • interakcja oparta na języku (język poleceń) • (język poleceń – składnia + parametry) • interakcja oparta na przyciskach • (menu przyciskowe, klawisze funkcyjne, pytania-odpowiedź) • interakcja oparta na manipulacji bezpośredniej • (GUI, WIMP, WYSIWYG) • interakcja oparta na interfejsach naturalnych • (interfejsy kinetyczne 3D, metafory świata zewnętrznego)

GUI (graphicaluserinterface) Metody realizacji dialogu - koncepcje Wzorzec MVC - (komponenty): model, widok, sterownik Sterownik – zapewnia interakcję z systemem, odbiera zdarzenia odpowiadające działaniom użytkownika widok – decyduje o sposobie prezentacji danych, każdy widok związany jest ze swoim sterownikiem model – hermetyzuje dane i funkcjonalności aplikacji

GUI (graphicaluserinterface) Metody realizacji dialogu - koncepcje Wzorzec MVC - charakterystyka • możliwe różne widoki tego samego modelu (zmiana danych w modelu odzwierciedlana jest w widoku) • możliwe rozdzielenie sposobu zmiany danych od rozwiązań dotyczących interakcji • Wzorzec MVC jako model trójwarstwowy ułatwia zmiany, rozbudowę i modyfikację systemu. * * *

GUI (graphicaluserinterface) Metody realizacji dialogu - koncepcje Model warstwowy – każda warstwa realizuje część dialogu: - metafora, - metoda, - urządzenia, - warstwa fizyczna dopasowanie środowiska graficznego do zadania dopasowanie metod do zadania i percepcji człowieka dopasowanie urządzeń i warstwy fizycznej (warunków środowiska – oświetlenie, hałas, itp.)

GUI (graphicaluserinterface) Metody realizacji dialogu - koncepcje Model warstwowy – opis elementów: - warstwa fizyczna,- urządzenia, - metoda, - metafora • Metafora –wizualna reprezentacja obszaru pracy na ekranie • odwołanie do obiektów znanych użytkownikowi z wcześniejszego doświadczenia • ma wpływ na dobór metod realizacji dialogu i zakres dozwolonych użytjkowni działań • Warstwa fizyczna – fizyczny punkt przestrzeni • miejsce kontaktu użytkownika z manipulatorem (np. myszą, klawiaturą, ekranem dotykowym), • miejsce kontaktu wzrokowego z obrazem na ekranie • Urządzenia– dostępny użytkownikowi zestaw • Urządzenia wejściowe: np. mysz, klawiatur, ekran dotykowy, joystick, tablet mikrofon, skaner, kamera • Urządzenia wyjściowe: np. monitor, okulary, projektor, drukarka, głośnik • Metoda –zestaw zastosowanych środków realizacji dialogu, np. komendy wierszowe, przyciski funkcyjne, formularze, okna dialogowe, manipulacja bezpośrednia • zestaw metod zależy od zastosowanych urządzeń • zestaw ma związek z rodzajem zastosowanej metafory

GUI (graphicaluserinterface) Metody realizacji dialogu - koncepcje Model warstwowy – analiza i projektowanie • Dwa obszary: • dobór urządzeń i analiza ograniczeń warstwy fizycznej • dobór metafory i metod realizacji dialogu

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – charakterystyka ogólna WIMP • Windows: okna jako niezależne obszary robocze; • Icons: ikony reprezentują aplikacje, obiekty, komendy i narzędzia, ich „kliknięcie” uruchamia określone operacje; • Menu: prezentują listę opcji, które mogą być przewijane i wybierane; • Pointer: kontroluje ruchy kursora, który służy jako punkt wejścia do okien, menu i ikon na ekranie.

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – praca w oknach (zalety) • Dopasowanie rozmiaru i położenia stosownie do potrzeb • Przewijanie okien (suwaki pionowe i poziome) • Otwieranie kilku widoków w osobnych oknach • Okna jako „kontenery” osobnych jednocześnie wykonywanych zadań • Swobodne przełączanie się między oknami, widokami i zadaniami • Przenoszenie obiektów i zawartości między oknami

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – metafora • Metafora jako „scenografia ekranowa” naśladująca znane użytkownikowi wygląd i zachowanie obiektów • stwarza model pojęciowy danego systemu • przyspiesza proces uczenia się • ułatwia tworzenie wyobrażeń jak zachowuje się system i jak go obsługiwać

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – metafora • Dobra „scenografia”: • klarowna i oszczędna • czytelna (graficznie i znaczeniowo) • całościowa (obejmująca wszystko co potrzebne) • elastyczna (możliwość rozbudowy o nowe obiekty) • spójna (w całym systemie stosowana jednakowo) • atrakcyjna wizualnie

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – metody realizacji dialogu • Polecenia wierszowe • Pytanie – odpowiedź • Przyciski funkcyjne • Formularze • Okna dialogowe • Komunikaty informacyjne • Menu • Manipulacja bezpośrednia

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – metody realizacji dialogu Polecenia wierszowe – użytkownik do wiersza poleceń wpisuje z klawiatury (według określonej składni) komendy z parametrami • Uwagi: • sprawne posługiwanie się wymaga dobrej znajomości poleceń, parametrów i ich składni • metoda trudna dla przeciętnych użytkowników • metoda lubiana przez profesjonalistów

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – metody realizacji dialogu Pytanie – odpowiedź– metoda prowadzenia dialogu, mało elastyczna, w praktyce stosowana do potwierdzania wyboru. (Do you want to quit? ( Y / N ): _ Y Are you sure ? ( Y / N ): _

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – metody realizacji dialogu Przyciski funkcyjne– wybór bezpośredni polega na przyporządkowaniu określonemu klawiszowi stałych znaczeń dla uruchamiania określonych funkcji, np. F1 – pomoc, F12 - zapisz • Uwagi: • metoda dość szybka • ograniczona ilość możliwych do zapamiętania funkcji

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – metody realizacji dialogu Formularze– metoda stosowana powszechnie, wszędzie tam gdzie zbierane są określone zestawy danych w celu zapisania ich do bazy lub wykorzystania do przeprowadzenia określonej operacji • Uwagi: • Metoda niekłopotliwa w użyciu gdy: • formularz jest niezbyt długi • posiada weryfikację poprawności danych • umożliwia swobodne przejście między polami

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – metody realizacji dialogu • Formularze– zasady projektowania • układ i wyrównanie pól, czcionki, separatory powinny zapewniać czytelność • musi być zapewniona odporność na błędy użytkownika (oznaczenie pół etykietami, oznaczenie pól wymaganych, wskazanie domyślnego formatu, podawanie wartości domyślnych, konieczność weryfikacji podczas wypełniania) • należy zadbać o podobieństwo do wersji papierowej • należy zapewnić logiczny sposób nawigacji • stosowanie ułatwień dla niedowidzących (użycie lupki) • dane ważne powinny być wytłuszczone

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – metody realizacji dialogu Okna dialogowe– metoda pozornie podobna do formularzy, stosowana do zebrania parametrów/danych potrzebnych do uruchomienia pewnej funkcji (np. okno ustawienia opcji wydruku dokumentu). • Uwagi:metoda wykorzystuje dodatkowe elementy • listy rozwijalne • pola wyboru (radiowe, zaznaczania, kombinowane) • suwaki • okienka podglądu • zakładki

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – metody realizacji dialogu • Okna dialogowe– zasady projektowania • Należy zadbać o czytelny rozkład elementów wewnątrz okna, odpowiednie wyrównywanie elementów • Typowe wartości parametrów powinny być wstępnie ustawione jako domyślne • Należy zapewnić logiczne pogrupowanie obiektów, kierunek pracy „góra-dół” „lewo-prawo” oraz unikać zbędnych powrotów • Należy zapewnić spójne rozmieszczenie obiektów (np. zawsze jednakowe rozmieszczenie przycisków OK, Anuluj, Pomoc). Przycisk domyślny (zwykle OK) należy wyraźnie wyróżnić.

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – metody realizacji dialogu komunikaty informacyjne– metoda potwierdzania działań użytkownika i sygnalizowania ewentualnych błędów • Uwagi: • komunikaty nie mogą znikać samoczynnie • komunikaty o błędach powinny podawać informację, co się stało i co teraz trzeba nacisnąć • wskazany jest odnośnik do tematu w pomocy on-line

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – metody realizacji dialogu menu– metoda czytelnej, hierarchicznej organizacji dużej liczby funkcji systemu • Rodzaje menu: • menu hierarchiczne rozwijalne • menu hierarchiczne wstążkowe • menu hierarchiczne kaskadowe • menu kontekstowe • menu wieloetapowe • palety narzędzi • zakładki

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – metody realizacji dialogu Rodzaje menu – przykłady:

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – metody realizacji dialogu • Menu– zasady projektowania • Menu hierarchiczne należy projektować zgodnie z podziałem zadań użytkownika (podział na sekcje powinien uwzględniać wyodrębnione i trafnie nazwane etapy wykonywanej pracy, np. Dane-Edycja-Analiza-Opcje-Okno-Pomoc • Należy trafnie pogrupować opcje w menu (np. wg klucza – częstość użycia, logiki i kolejności użycia) • Należy zadbać o krótkie i treściwe opisy opcji menu (używać standardowych nazw znanych z innych aplikacji) • Należy udostępnić skróty klawiaturowe dla często używanych opcji menu

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – metody realizacji dialogu Manipulacja bezpośrednia– metoda bezpośredniego dokonywania zmian na obiektach ekranowych, bez pośrednictwa okien dialogowych lub innych elementów pośredniczących • Uwagi: • Daje natychmiastowy efekt (zmiana kształtu, wymiarów, położenia), także „przeciągnij i upuść”).

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – zasady projektowania graficznego • Punkt wyjścia - podejście Gestalt • Opis mechanizmu percepcji wzrokowej człowieka, który buduje wrażenia estetyczne pewnej kompozycji wizualnej poprzez łączenie pojedynczych elementów w całość i interpretację relacji „figura-tło”.

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – zasady projektowania graficznego • Zasada Gestalt • bliskość • człowiek ma skłonność do postrzegania jako grupy elementów, które są położone blisko siebie • Przykład z interfejsu • słowa na pasku menu, • kolumny tabeli, • słowa tekstu w akapicie

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – zasady projektowania graficznego • Zasada Gestalt • podobieństwo • człowiek ma skłonność do postrzegania jako grupy elementów, które mają podobne charakterystyki • Przykład z interfejsu • ikony na pasku narzędzi • punkty danych

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – zasady projektowania graficznego • Zasada Gestalt • ciągłość • człowiek ma skłonność do grupowania regularnie ułożonych elementów w kontury ciągłe lub powtarzające się wzory • Przykład z interfejsu • strona akapitów • siatka komórek tabeli • lista wypunktowana

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – zasady projektowania graficznego • Zasada Gestalt • domknięcie • człowiek ma skłonność do organizowania widocznych elementów w kompletne, domknięte zbiory przez „dopowiadanie” brakujących elementów • Przykład z interfejsu • menu • okna dialogowe • nakładające się okna

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – zasady projektowania graficznego • Zasada Gestalt • powierzchnia • człowiek ma skłonność do postrzegania kontrasto-wych elementów w sposób, który wyróżnia z tła najmniejszą możliwą powierzchnię • Przykład z interfejsu • ikony • logo na tle tekstu • menu kontekstowe

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – zasady projektowania graficznego • Zasada Gestalt • ymetria • człowiek ma skłonność do postrzegania symetrycznych elementów jako części tych samych figur (uzupełnianie kształtu) • Przykład z interfejsu • pasek przewijania • znacznik kształtu

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – zasady projektowania graficznego • Zasady Gestalt w projektowaniu: • Prostota (redukcja, regularność, kombinacja) • Kontrast (odróżnianie, podkreślanie – wyróżnianie z tła) • Pusta przestrzeń (zachowanie proporcji, unikanie stłoczenia elementów) • Równowaga (ustal oś, zadbaj o symetrię) • Wyrównywanie

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – zasady projektowania graficznego • rodzaj i kolejność ułożenia elementów na płaszczyźnie • zagospodarowanie przestrzeni, wykorzystanie trzeciego wymiaru i głębi • kierowanie uwagą i prowadzenie wzroku użytkownika • złożoność kompozycji elementów ekranowych • Dodatkowe czynniki: • Kompozycja • Użycie siatki • Użycie koloru • Typografia tekstu i opisów • Projektowanie ikon

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – zasady projektowania graficznego • Dodatkowe czynniki: • Kompozycja • Użycie siatki • Użycie koloru • Typografia tekstu i opisów • Projektowanie ikon • stosowanie rodziny spójnych formatek ekranowych • podział ekranu na dwie, trzy lub cztery kolumny • wybór układu elementów: symetria lub asymetria • marginesy odpowiedniej szerokości • wykorzystanie siatki

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – zasady projektowania graficznego • Dodatkowe czynniki: • Kompozycja • Użycie siatki • Użycie koloru • Typografia tekstu i opisów • Projektowanie ikon • spójna paleta barw • dobry kontrast znak-tło • oszczędne używanie ostrych kolorów • uwzględnianie różnic kulturowych w odbiorze koloru • uwzględnianie ograniczeń widzenia barwnego

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – zasady projektowania graficznego • Dodatkowe czynniki: • Kompozycja • Użycie siatki • Użycie koloru • Typografia tekstu i opisów • Projektowanie ikon • czcionki szeryfowe stosować do długich tekstów na papierze • czcionki bezszeryfowe stosować do nagłówków i tekstów na ekranie • czcionki monospace stosować do wyróżnienia charakterystycznych treści • unikać wymyślnych krojów czcionek (np. Script) • stosować nie więcej niż trzy kroje i trzy wielkości czcionek

GUI (graphicaluserinterface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – wybrane nowe trendy • Nowe formy interakcji: • Urządzenia ręczne • Ekrany dotykowe • Interfejsy głosowe • Avatary – wirtualni agenci • Interfejsy multimodalne • Rzeczywistość wirtualna • Rzeczywistość poszerzona • Komputery niewidzialne i wszechobecne

Interakcja człowiek – komputer GUI ( graphical user interface )