P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Graficzne interfejsy
użytkownika
Projektowanie miejsc pracy
przy komputerze
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Graficzne interfejsy
użytkownika
Projektowanie miejsc pracy
przy komputerze
2
Teoria
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Interfejs użytkownika w
teorii
• Interfejs – pojęcie złożone
• Gdzie występują interfejsy?
• Człowiek a komputer
• Co dokładnie obejmuje interfejs
użytkownika, GUI a UI?
• Sposób pracy – akcja i reakcja
• Ilu programistów, tyle
interfejsów...
3
Teoria
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Miejsce interfejsu w aplikacji
Umiejscowienie i rola interfejsu użytkownika na przykładzie aplikacji dydaktycznej
Aplikacja
dydaktyczna
Uczeń
Interfejs użytkownika
Formatowanie
materiału
Materiał
dydaktyczny
Obsługa
aplikacji
Receptory
Efektory
Pamięć
odpowiedzi
wiadomości
sprzężenie
Metoda
dydaktyczna
4
GUI wczoraj i dzisiaj
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Historia
• Rozwój hardware
• Rozwój software
• Interfejsy niegraficzne
Istotniejsze daty w historii rozwoju interfejsów użytkownika
5
GUI wczoraj i dzisiaj
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Kamienie milowe
1963 – pierwsze GUI: Sketchpad, Ivan Sutherland
Bardzo zaawansowany projekt.
Pióro świetlne pozwalało na rysowanie obiektów i bezpośrednią manipulację
nimi.
6
GUI wczoraj i dzisiaj
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Kamienie milowe
1963 – pierwsze GUI: Sketchpad, Ivan Sutherland
7
GUI wczoraj i dzisiaj
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Kamienie milowe
1968 – oN-Line System (NLS), Douglas Engelbart
Wprowadzenie myszki, wielu okien roboczych. NLS umożliwiał pracę grupową i korzystanie z
hipertekstu. Z powodu swoich możliwości demonstracyjnych nazywany był „matką wszystkich
demonstracji”. Jednak skomplikowany GUI i klawiatura akordowa przyczyniły się do upadku projektu.
8
GUI wczoraj i dzisiaj
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Kamienie milowe
1968 – pierwsza myszka używana w NLS
9
GUI wczoraj i dzisiaj
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Kamienie milowe
1973 – pojęcie interfejsu użytkownika, Alto firmy Xerox
Pierwszy raz zastosowany
paradygmat WIMP (windows, icons,
menus, pointers) stworzony przez
zespół Merzougi Wilbertsa. Po Alto
powstał Star, który rozwijał
przedstawioną ideę.
10
GUI wczoraj i dzisiaj
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Kamienie milowe
1983 – prawie jak Windows, Lisa firmy Apple
Pierwsze komercyjnie udane użycie GUI. Częściowo opierające się na idei
Xeroxa, jednak pierwsze wersje Lisy nie miały nawet ikon, oraz nie odpowiadały
idei WIMP.
11
GUI wczoraj i dzisiaj
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Kamienie milowe
1983 – prawie jak Windows, Lisa firmy Apple
12
GUI wczoraj i dzisiaj
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Pulpit i okienka
• WIMP i WYSIWYG – współczesne
standardy
• Interfejs systemu i interfejsy aplikacji
• Pulpit - stabilna metafora,
charakterystyczne słownictwo
• Aplikacje – dziedziczą GUI systemowe
13
GUI wczoraj i dzisiaj
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Windows dawniej
Pierwszy popularny Windows – funkcjonalny i czytelny
14
GUI wczoraj i dzisiaj
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Windows dzisiaj
Windows XP – ładniejszy i obecnie najpopularniejszy
Niewielkie zmiany w
interfejsie
użytkownika, ale
poprawa występuje.
Np. przenoszenie i
kopiowanie plików
(dość często
wykonywane
zadanie)
obsługiwane jest
przez nową funkcję,
która pamięta ostatni
katalog docelowy i
znacznie ogranicza
ilość operacji
potrzebnych do
wykonania.
15
GUI wczoraj i dzisiaj
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Mac OS X
System, który na pierwszym miejscu stawia przyjazność dla użytkownika
16
GUI wczoraj i dzisiaj
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Mac OS X
Mac OS to zupełnie inny sposób organizacji i obsługi okienek
17
GUI wczoraj i dzisiaj
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Linux KDE
Środowisko KDE – GUI w niczym nie ustępujące płatnym systemom
Darmowy,
zróżnicowany,
jednak
bazujący na
standardzie
WIPM
18
GUI wczoraj i dzisiaj
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Linux GNOME
GNOME – niewiele mniejsze możliwości, znacznie mniejsze wymagania sprzętowe
19
Interfejsy sieciowe
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Wpływ Internetu na GUI
• Idea hipertekstu, Xanadu
• GUI stworzone do nawigacji
• Konieczna prostota obsługi
• Jakość pracy a popularność witryn
• Smog informacyjny a efektywna
nawigacja
20
Interfejsy sieciowe
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Interfejs w przeglądarce
główne elementy nawigacyjne strony
elementy nawigacyjne przeglądarki
funkcje wyszukiwania
dodatkowe elementy nawigacyjne strony
Główne elementy interfejsu graficznego na stronie WWW
21
Interfejsy sieciowe
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Od hipertekstu do
hipermediów
Alternatywne podejście do nawigacji w Internecie –
kodowanie kolorem wspomaga wybór drogi
22
Interfejsy sieciowe
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Student też potrafi
Podręcznik on-line do przedmiotu PMPpK z prototypowym interfejsem
opartym o „Mind maps” – praca dyplomowa Tomasza Pacana
23
Usprawnienia GUI
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Rozwiązania dodatkowe
• Alternatywne GUI dla Windows
• Litestep
• Aston
• WindowBlinds
• Wybór GUI dla Linuxa
• Gnome
• KDE
• i wiele innych
24
Usprawnienia GUI
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
ASTON
Jedno z najefektywniejszych narzędzi do personalizacji GUI systemu Windows
25
Usprawnienia GUI
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
ASTON
Rozmieszczenie elementów GUI może być bardzo niestandardowe
26
Usprawnienia GUI
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Litestep
Możliwości większe od ASTONA przy zerowej cenie
27
Usprawnienia GUI
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
LCARS Terminal
W pełni funkcjonalny, mówiący i reagujący na głos GUI dla maniaków Startreka
28
Usprawnienia GUI
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Nawigacja po interfejsie
StarTree – struktura witryny wizualizowana na powierzchni
hiperbolicznej ukazująca wiele poziomów hierarchii znacząco
ułatwia nawigację
Ewolucja menu
jako jednego z
głównych
elementów GUI
29
Usprawnienia GUI
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Interfejsy w aplikacjach
• Nietypowe rozwiązania:
• Maya – nawigacja na płaszczyźnie
• Lightwave – interfejs opisowy
• oprogramowanie rozrywkowe i
edukacyjne
• mniejsza ilość funkcji
• atrakcyjny i oryginalny wygląd interfejsu
• szybki dostęp do funkcji, mała zajętość
miejsca
30
Usprawnienia GUI
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Maya
Nawigacja w przestrzeni ułatwia znajdywanie większej ilości funkcji
31
Usprawnienia GUI
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Gry komputerowe
Różne rozwiązania, zwykle
bardziej nowatorskie niż w
aplikacjach biurowych, często
zapewniające sporą wygodę
obsługi i szybki dostęp do
znaczącej ilości funkcji.
32
Usprawnienia GUI
P
M
P
2
0
0
6
©
W
.
S
u
sł
o
w
,
M
.
S
ta
tk
ie
w
ic
z
Dalsza ewolucja
• Zrobić więcej w krótszym czasie, czyli
wspomaganie, wykorzystanie kreatorów i
heurystyki
• 100% personalizacji - KDE, Aston i inne
• Interfejsy „intuicyjne” w wybranych aplikacjach
• Nie tylko „drag-and-drop” – gesty, mowa, mapy
• Poza płaszczyzną – „3D desktop”
• Elementy interfejsu pozostają te same
33
Podsumowanie
Podsumowanie
• Interfejsy i ich konstrukcja – problem złożony
• Sztuczna inteligencja jako wsparcie UI
• Czy mamy do czynienia z ewolucją?
• Czy paradygmat WIMP może ulec zmianie?
• Znaczenie GUI przy korzystaniu z dużej ilości
skrótów klawiaturowych
• Dlaczego niektóre GUI są lepsze od innych, jak
zrobić dobre GUI – na kolejnym wykładzie…