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…