Pobierz prezentację
Pobieranie prezentacji. Proszę czekać
OpublikowałBronisław Turczyn Został zmieniony 9 lat temu
1
Interakcja człowiek – komputer GUI (graphical user interface)
mgr inż. Marek Malinowski Zespół Matematyki i Fizyki Wydz. BMiP PW Płock
2
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
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
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
5
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
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
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
8
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
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
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
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
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
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
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
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
(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 ): _
17
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
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
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
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
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
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
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
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
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
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
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
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
GUI (graphical user interface)
Metody realizacji dialogu – realizacja dialogu Graficzny interfejs – metody realizacji dialogu Rodzaje menu – przykłady:
30
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
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
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ść”).
33
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
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
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
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
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
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
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
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
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
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
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
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
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
Podobne prezentacje
© 2024 SlidePlayer.pl Inc.
All rights reserved.