Wykład 9 Projektowanie interfejsu użytkownika
-
Upload
wayne-barron -
Category
Documents
-
view
44 -
download
1
description
Transcript of Wykład 9 Projektowanie interfejsu użytkownika
![Page 1: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/1.jpg)
Wykład 9
Projektowanie interfejsu użytkownika
![Page 2: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/2.jpg)
Treść wykładu
generacje w rozwoju interfejsu użytkownika tryb wsadowy graficzny interfejs użytkownika interfejs znakowy język poleceń metafory technika okien zestaw reguł projektowania graficznego
![Page 3: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/3.jpg)
Projektowanie interfejsu użytkownika - ogólne tendencje
wydłużenie czasu dialogu użytkownika z komputerem wprowadzenie transakcji
użytkowanie baz danych
praca poprzez Internet
użytkowanie systemy transakcyjne
systemy wspomagania decyzji
systemy informowania kierownictwa
systemy ekspertowe
![Page 4: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/4.jpg)
Generacje w rozwoju interfejsu użytkownika
tryb wsadowy terminale wielodostępnych systemów
informacyjnych graficzny interfejs użytkownika WIMP post-WIMP
![Page 5: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/5.jpg)
Tryb wsadowy
zastosowania gospodarcze karty perforowane
taśmy magnetyczne
drukarki bębnowe
brak interfejsu użytkownika brak interaktywnych użytkowników
![Page 6: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/6.jpg)
Terminale wielodostępnych systemów informacyjnych
kontakt użytkownika z komputerem na zasadzie pytanie-odpowiedź
poleceń zawierających określone parametry
systemy DOS
UNIX
![Page 7: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/7.jpg)
Graficzny interfejs użytkownika WIMP
WIMP - standard firmy Xerox W - Windows - okna
I - Icons - ikony
M - Menus - menu
P - Pointer - kursor
synteza popularnych graficznych oraz znakowych form interakcji człowieka z komputerem
popularyzacja w systemach operacyjnych Windows - PC, Motif na stacjach roboczych Unix
dominuje obecnie
![Page 8: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/8.jpg)
Wady standardu WIMP
zbyt wielka liczba funkcji przekraczająca potrzeby użytkownika
zbyt duża funkcjonalność powoduje, że użytkownicy spędzają zbyt wiele czasu na manipulowanie funkcjami interfejsu a nie koncentrują się na istocie zastosowania
WINP był stworzony do zastosowań dwuwymiarowych edytory tekstu, arkusze elektroniczne czy baz danych a nie do zastosowań trójwymiarowych o większej złożoności wizualnej
WINP korzysta z jednego zmysłu człowieka -wzroku
![Page 9: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/9.jpg)
Graficzny standard użytkownika post-WIMP
równoległe współdziałanie innych zmysłów człowieka rozpoznawanie gestów
komunikacja w języku naturalnym
![Page 10: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/10.jpg)
Praktyczne zastosowania interfejsu użytkownika
znakowy - druga generacja graficzny - trzecia generacja
![Page 11: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/11.jpg)
Interfejs znakowy i ich rodzaje
kontaktowanie człowieka z komputerem poprzez sekwencje znaków alfanumerycznych
rodzaje interfejsów znakowych dialog pytanie-odpowiedź
język poleceń
język naturalny
![Page 12: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/12.jpg)
Interakcja typu dialog-odpowiedź
sekwencja interakcji pomiędzy użytkownikiem a systemem użytkownik jest pytany o określone dane po wprowadzeniu danych następuje zapytanie o kolejne dane
aż do zarejestrowania wszystkich danych związanych z określoną transakcją
różne postacie dialogu
wybór określonej opcji spośród zaprezentowanego zestawu poprzez wprowadzenie odpowiedniego numeru lub symbolu opcji
udzielenie odpowiedzi w trybie ciągów znaków alfanumerycznych na zapytania systemu
wprowadzanie danych do formatek opowiadającym poszczególnym polom rekordu
![Page 13: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/13.jpg)
Język poleceń
użytkownicy wprowadzają bezpośrednio polecenia w celu zainicjowania określonych operacji
interfejs znakowy
komendy w systemach operacyjnych DOS, UNIX specyficzna forma języka poleceń poprzez stosowanie
klawiszy lub kombinacji klawiszy z klawiatury wprowadzenie języka naturalnego jako interfejsu
użytkownika
wykorzystanie sztucznej inteligencji
wejścia i wyjścia mogą być wyrażane w zdaniach konwencjonalnego języka
bariery - technologie rozpoznawania mowy
![Page 14: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/14.jpg)
Graficzny interfejs użytkownika
GUI - Graphical User Interface pliki, programy, polecenia są wybierane poprzez
wskazanie odpowiedniej formy graficznej a nie poprzez wprowadzanie skrótów mnemotechnicznych języka poleceń
efektywny interfejs ułatwia interakcję użytkownika z komputerem pod warunkiem interfejs jest zgodny a w każdym razie zbliżony do
naturalnego sposobu pracy użytkownika czyli sposobu w jaki postrzega on problem
![Page 15: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/15.jpg)
Podstawowe charakterystyki graficznego interfejsu użytkownika
sposób prezentacji układ informacji na ekranie
prowadzenie dialogu sekwencja interakcji między człowiekiem a
komputerem
![Page 16: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/16.jpg)
Warstwy projektowania i użytkowania graficznego interfejsu użytkownika
warstwa metafor imitacje sytuacji rzeczywistej
warstwa metod sposób kontaktowania się użytkownika z komputerem
warstwa urządzeń urządzenia eksploatowane przez użytkownika
warstwa fizyczna czynności wykonywane w związku z użytkowaniem
metod i urządzeń
![Page 17: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/17.jpg)
Warstwa metafor podobieństwo zachowania się systemu do sytuacji
którą zna użytkownik z codziennego życia przykłady metafor
metafora dokumentu - ekran jest imitacją papieru i zaznaczonych rubryk
metafora biurka - ekran jest imitacją biurka z rozłożonymi materiałami i różnymi akcesoriami np. zegar, kalendarz itp. z możliwością ich dowolnego przemieszczenia
metafora tablicy rozdzielczej - przyciski, suwaki, lampki kontrolne
metafora ścieżek i segregatorów - założone i opisywane w systemie katalogi
![Page 18: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/18.jpg)
Kokpit zarządzania
![Page 19: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/19.jpg)
Metody
pojęcie graficznego interfejsu użytkownika podstawowe metody interfejsu użytkownika
menu - zestaw opcjonalnych wyborów oferowanych użytkownikowi na ekranie
formatki
okna
inne obiekty graficzne
![Page 20: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/20.jpg)
Różne rodzaje menu
pojedyncze sekwencyjne wielopoziomowe wielopoziomowe menu z wierzchołkami
macierzystymi wielopoziomowe menu z wierzchołkami
macierzystymi i punktami zwrotnymi menu wyskakujące
![Page 21: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/21.jpg)
Technika okien najbardziej znana technika - MS Windows standard interfejsu użytkownika IBM CUA - Common
User Access zestaw reguł współpracy użytkownika z systemem
zasady użytkowania klawiatury i myszy
wybór opcji menu w oknie
zasady budowy podpowiedzi
zasady przejść między aplikacjami
forma interfejsu graficznego opartego na obiektach ikony - piktogramy
ikony reprezentują poszczególne obiekty, funkcje i polecenia systemu
![Page 22: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/22.jpg)
Kokpit sterowania
![Page 23: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/23.jpg)
Szczegółowe zasady graficznego interfejsu użytkownika
układ poszczególnych informacji i poleceń w okienku czy menu
wygląd piktogramów zasady kontroli wprowadzania i poprawności
danych formułowanie funkcji podpowiedzi kontrola dostępu użytkownika - procedury
autoryzacji i szyfrowania kolejność dialogu
![Page 24: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/24.jpg)
Punkty wyjściowe projektowania graficznego interfejsu użytkownika
diagramy przepływu danych opracowane w trakcie analizy systemu informacyjnego
zasadnicza rolę odgrywają przepływy do i z terminatorów - obiektów zewnętrznych
terminatory określają dialog komunikowania się z systemem formatki wejściowe
wyjścia tabelaryczne
wyjścia graficzne
![Page 25: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/25.jpg)
Zestaw reguł projektowania graficznego konkretne metafory
system powinien opierać się na użytkowaniu konkretnych metafor odpowiadających działaniom, operacjom, akcjom w świecie rzeczywistym
bezpośrednie oddziaływanie
użytkownik powinien mieć możliwość wykonywania poszczególnych poleceń
system informuje o wykonaniu bądź powodach dla których danej operacji nie wykonano
tryb wskazywania - see and point
ekran powinien zapewniać środowisko pracy
bezpośrednia interakcja z ekranem komputera poprzez wybór oraz wskazanie określonych obiektów
mysz, klawiatura manipulatory
![Page 27: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/27.jpg)
Zestaw reguł projektowania graficznego - c.d.
spójność istnieje spójny ciąg funkcji poprzez które użytkownik
realizuje zamierzone działania
zasada WYSIWYG what you see is what you get
użytkownik ma wpływ zarówno na treść oraz na formatowanie
system powinien pokazywać rezultaty wyborów szybko i w bezpośredni sposób
![Page 28: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/28.jpg)
Peryferyjne urządzenia wejścia i wyjścia
etap po zaprojektowaniu warstw oraz metafor klawiatura oraz myszka manipulator drążkowy manipulator kulkowy ekran dotykowy rysownica urządzenia rozpoznawania mowy
![Page 29: Wykład 9 Projektowanie interfejsu użytkownika](https://reader035.fdocument.pub/reader035/viewer/2022062314/56813737550346895d9ec713/html5/thumbnails/29.jpg)
Peryferyjne urządzenia wejścia i wyjścia - ograniczenia
rozdzielczość monitora zestaw znaków klawiatury możliwości kart graficznych i dźwiękowych przewijanie pionowe oraz poziome na ekranie kolor