Interakcja człowiek – komputer GUI (graphical user interface) mgr inż. Marek Malinowski Zespół Matematyki i Fizyki Wydz. BMiP PW Płock

GUI (graphical user interface) 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 (graphical user interface) 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)

Wzorzec MVC - (komponenty): model, widok, sterownik GUI (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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ń 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 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

GUI (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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

(Do you want to quit? ( Y / N ): _ Y Are you sure ? ( Y / N ): _ GUI (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – metody realizacji dialogu Rodzaje menu – przykłady:

GUI (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 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

GUI (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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 (graphical user interface) 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