Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

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

Podobne prezentacje


Prezentacja na temat: "Interakcja człowiek – komputer GUI (graphical user interface) mgr inż. Marek Malinowski Zespół Matematyki i Fizyki Wydz. BMiP PW Płock."— Zapis prezentacji:

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

2 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

3 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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)

4 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski GUI (graphical user interface) Metody realizacji dialogu - koncepcje Wzorzec MVC - (komponenty): model, widok, sterownik model – hermetyzuje dane i funkcjonalności aplikacji widok – decyduje o sposobie prezentacji danych, każdy widok związany jest ze swoim sterownikiem Sterownik – zapewnia interakcję z systemem, odbiera zdarzenia odpowiadające działaniom użytkownika

5 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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. * * *

6 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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.)

7 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski GUI (graphical user interface) Metody realizacji dialogu - koncepcje Model warstwowy – opis elementów: - warstwa fizyczna,- urządzenia, - metoda, - metafora 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 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ń

8 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

9 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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.

10 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

11 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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ć

12 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

13 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

14 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

15 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

16 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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 ): _

17 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

18 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

19 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

20 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

21 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

22 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

23 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

24 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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ć.

25 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

26 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

27 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

28 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

29 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski GUI (graphical user interface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – metody realizacji dialogu Rodzaje menu – przykłady:

30 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

31 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

32 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski GUI (graphical user interface) Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – metody realizacji dialogu Uwagi:  Daje natychmiastowy efekt (zmiana kształtu, wymiarów, położenia), także „przeciągnij i upuść”). Manipulacja bezpośrednia – metoda bezpośredniego dokonywania zmian na obiektach ekranowych, bez pośrednictwa okien dialogowych lub innych elementów pośredniczących

33 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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”.

34 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

35 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

36 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

37 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

38 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

39 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

40 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

41 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

42 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

43 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

44 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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

45 Wydz. BMiP Zakład Matematyki i Fizyki - Marek Malinowski 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


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

Podobne prezentacje


Reklamy Google