Inżynieria oprogramowania

część X – Projektowanie interfejsu użytkownika

mgr inż. Piotr Greniewski

Europejska Wyższa Szkoła Informatyczno-

Ekonomiczna

Slajd nr 2

©Ian Sommerville 2000 - Inżynieria oprogramowania

Materiały do wykładu



Wykład opracowano na podstawie książki:



Inżynieria oprogramowania - Jan Sommerville



Wydawnictwa Naukowo – Techniczne



Warszawa 2003 r.



Prawa własności:



Rysunki, diagramy oraz układ prezentowanych treści są
własnością:

©Ian Sommerville 2000

.



Prezentacja stanowi tłumaczenie prezentacji autora
książki pobranej z witryny

http:/www.software-

engin.com.



Zgodnie z wolą autora: ”wykładowcy mają prawo
dowolnie modyfikować i adoptować tę prezentacje”
(Przedmowa – Witryna WWW – punkt 2 ) co też czynię.

Slajd nr 3

©Ian Sommerville 2000 - Inżynieria oprogramowania

Projektowanie interfejsu użytkownika

Zawartość:



Zasady projektowania interfejsu użytkownika



Interakcja z użytkownikiem



Prezentacja informacji



Pomoc dla użytkownika



Ocena interfejsu

Slajd nr 4

©Ian Sommerville 2000 - Inżynieria oprogramowania

Zasady projektowania interfejsu
użytkownika



Projektowanie systemów komputerowych obejmuje
szeroki zakres czynności: od projektowania sprzętu
do projektowania interfejsu użytkownika.



Do projektowania sprzętu zatrudnia się wybitnych
fachowców natomiast do projektowania interfejsu
prawie nigdy.



Inżynierowie oprogramowania często muszą brać na
siebie odpowiedzialność za zaprojektowanie
interfejsu użytkownika oraz za zaprojektowanie
oprogramowania będącego implementacją tego
interfejsu.



W dużych firmach czasami zatrudnia się
psychologów

Slajd nr 5

©Ian Sommerville 2000 - Inżynieria oprogramowania

Zasady projektowania interfejsu
użytkownika



dobry projekt interfejsu użytkownika jest jednym
z niezbędnych warunków powodzenia systemu.



Interfejs trudny w użyciu prowadzi do wielu
pomyłek i do zniechęcenia użytkownika.



W najgorszym przypadku użytkownicy odmawiają
użytkowania systemu niezależnie od jego
funkcjonalności.



Jeśli informacja przedstawiana jest w sposób
zagmatwany i mylący użytkownicy mogą źle
rozumieć działanie systemu.



Mogą wykonywać ciągi poleceń, które uszkodzą
dane lub doprowadzą do awarii systemu.

Slajd nr 6

©Ian Sommerville 2000 - Inżynieria oprogramowania

Zasady projektowania interfejsu
użytkownika



Początkowo jedynym rozwiązaniem był
terminal znakowy z interfejsem
alfanumerycznym.



Obecnie niemal wszyscy użytkownicy używają
interfejs graficzny tzw. GUI obsługujący ekran
o dużej rozdzielczości i interakcje za pomocą
myszy i klawiatury.

Slajd nr 7

©Ian Sommerville 2000 - Inżynieria oprogramowania

Zasady projektowania interfejsu
użytkownika

Właściwość

Opis

Okna

Wiele okien umożliwia jednoczesne
wyświetlanie różnych informacji na

ekranie użytkownika

Ikony

Ikony reprezentują różne rodzaje
informacji. W niektórych systemach
odpowiadają plikom, w innych

procesom.

Menu

Polecenie wybiera się z menu a nie
wpisuje w wierszu komend.

Wskazywanie

Urządzenie do wskazywania, takie jak

mysz, służą do wyboru z menu i
wskazywania potrzebnych elementów w
oknie.

Grafika

elementy graficzne można łączyć z
tekstowymi na tym samym ekranie

Slajd nr 8

©Ian Sommerville 2000 - Inżynieria oprogramowania

Zasady projektowania interfejsu
użytkownika



Interfejsy tekstowe są dalej stosowane,
zwłaszcza w systemach odziedziczonych.



Obecnie większość użytkowników oczekuje
interfejsu GUI.



Wyjątek stanowią administratorzy i nie tylko w
systemach UNIX’owych i LINUX’owych.

Slajd nr 9

©Ian Sommerville 2000 - Inżynieria oprogramowania

Zasady projektowania interfejsu
użytkownika



Zalety interfejsu GUI:



Jest łatwy do nauczenia dla użytkownika. Nawet
użytkownicy bez doświadczeń z komputerami są w
stanie nauczyć posługiwania się programem w
czasie krótkiego szkolenia.



Użytkownik ma kilka ekranów (okien) do interakcji z
systemem. Można przejść do drugiego zadania nie
tracąc z oczu pierwszego.



Szybka interakcja za pomocą pełnego ekranu daje
dostęp do każdego miejsca na ekranie.



Proces projektowania interfejsu użytkownika.

Slajd nr 10

©Ian Sommerville 2000 - Inżynieria oprogramowania

Zasady projektowania interfejsu
użytkownika

Oceń projekt

z

użytkownikiem

Zanalizuj

czynności

użytkowni

ka

Opracuj

papierowy

prototyp

projektu

Oceń projekt

z

użytkownikami

Zaprojektuj

prototyp

Zbuduj

dynamiczny

prototyp

Wykonywalny

prototyp

Zaimplemen

tuj

docelowy

interfejs

Proces projektowania interfejsu użytkownika

Slajd nr 11

©Ian Sommerville 2000 - Inżynieria oprogramowania

Zasady projektowania interfejsu
użytkownika



Przedstawię kilka porad na temat
projektowania udogodnień interfejsu
użytkownika.



Omówimy jedynie interfejsy graficzne.



Nie będziemy mówić o interfejsach telefonów
komórkowych, magnetowidów, telewizorów,
kopiarek i faksów.

Slajd nr 12

©Ian Sommerville 2000 - Inżynieria oprogramowania

Zasady projektowania interfejsu
użytkownika

Zasada

Opis

Zbliżenie do

użytkownika

Interfejs powinien posługiwać się pojęciami i

kategoriami wziętymi z doświadczeń osób, które

najczęściej będą korzystać z systemu

Spójność

Interfejs powinien być spójny tzn. tam, gdzie to

jest możliwe, podobne operacje powinny być

wykonywane w ten sam sposób

Minimum

niespodziane

k

Użytkownicy nie powinni być zaskakiwani

zachowaniem systemu

Możliwość

wycofania

Interfejs powinien obsługiwać mechanizmy, które

umożliwią użytkownikom wycofanie się z błędów

Porady dla

użytkownika

interfejs powinien przekazywać znaczące

informacje zwrotne, gdy dochodzi do błędów.

powinien oferować kontekstową pomoc.

Rozróżnianie

użytkownikó

w

Interfejs powinien oferować udogodnienia do

interakcji dostosowane do rodzajów

użytkowników systemu.

Slajd nr 13

©Ian Sommerville 2000 - Inżynieria oprogramowania

Interakcja z użytkownikiem



Projektant komputerowego interfejsu ma do
czynienia z dwoma zasadniczymi
zagadnieniami:



Jak systemowi komputerowemu dostarczyć
informacje od użytkownika?



Jak przedstawić użytkownikowi informacje od
systemu komputerowego?



Spójny interfejs użytkownika musi integrować
interakcję użytkownika i prezentację
informacji.

Slajd nr 14

©Ian Sommerville 2000 - Inżynieria oprogramowania

Interakcja z użytkownikiem



Rodzaje interakcji z użytkownikiem



Działanie bezpośrednie



Wybór z menu



Wypełnianie formularza



Język poleceń



Język naturalny

Slajd nr 15

©Ian Sommerville 2000 - Inżynieria oprogramowania

Interakcja z użytkownikiem



Działanie bezpośrednie



Polega na tym, że użytkownik bezpośrednio porozumiewa
się z obiektami na ekranie. Usunięcie pliku może na
przykład polegać na przeciągnięciu go do kosza na
śmieci.



Wybór z menu



polega na tym że użytkownik wybiera polecenie z listy
możliwości (menu).



Wypełnienie formularza



Polega na tym, że użytkownik wypełnia rubryki
formularza. Z pewnymi polami mogą być związane menu.
Formularz może mieć przyciski, których naciśnięcie,
których naciśnięcie powoduje wykonanie pewnej akcji.

Slajd nr 16

©Ian Sommerville 2000 - Inżynieria oprogramowania

Interakcja z użytkownikiem



Język poleceń



Każdy użytkownik wydaje specjalne polecenia i
podaje parametry informujące system co ma robić.
Aby np. usunąć plik użytkownik wydaje polecenie
kasuj z parametrem nazwa pliku.



Język naturalny



Użytkownik wydaje polecenia w języku naturalnym.
Aby usunąć plik użytkownik może napisać usuń plik
o nazwie abc.

Slajd nr 17

©Ian Sommerville 2000 - Inżynieria oprogramowania

Interakcja z użytkownikiem

Sposób

interakc

ji

Główne zalety

Główne wady

Przykład

zastosowania

Bezpośredni
e działanie

Szybka i intuicyjna
interakcja. Łatwe do
nauczenia.

Może być trudna do implementacji.
Odpowiednie jedynie wówczas gdy
istnieje graficzne wyobrażenie
czynności i obiektów.

Gry wideo
Systemy CAD

Wybór z
menu

Umożliwia uniknięcie
błędów użytkownika.
wymaga mało pisania

Zbyt powolny dla doświadczonych
użytkowników. Może być
skomplikowany gdy opcji menu jest
dużo.

Większość systemów
ogólnego przeznaczenia

Wypełnienie
formularza

Proste wprowadzanie
danych. Łatwe do
nauczenia.

Zajmuje duży obszar ekranu

Zarządzanie magazynem.
przetwarzanie informacji
o kredytach. Wpłatach na
poczcie i w banku

Język
poleceń

Solidny i elastyczny.

Trudny do nauczenia. Małe
możliwości obsługi błędów

Systemy operacyjne.
Systemy wydobywania
informacji bibliotecznych

Język
naturalny

Dostępny dla
przypadkowych
użytkowników. Łatwy
do rozszerzania

Wymaga więcej pisania. Systemy
rozpoznające język naturalny są
zawodne.

Systemy rozkładów jazdy.
Systemy informacyjne

Slajd nr 18

©Ian Sommerville 2000 - Inżynieria oprogramowania

Interakcja z użytkownikiem

System operacyjny

Menedżer

GUI

Menedżer

GUI

GUI

Interfejs

poleceń

języka

Różne interfejsy użytkownika

Slajd nr 19

©Ian Sommerville 2000 - Inżynieria oprogramowania

Prezentacja informacji



Wszystkie systemy interakcyjne muszą zapewniać

sposoby przedstawiania informacji użytkownikom.



Prezentacja informacji może być bezpośrednim

uwidocznieniem danych wejściowych np. tekstu w

procesorze lub mieć formę graficzną.



Dobrą praktyką programistyczną jest oddzielenie

oprogramowania do prezentacji informacji od

samej informacji.



Jest to co prawda trochę w sprzeczności z filozofią

obiektową, często jednak trudno jest przewidzieć

najlepszy sposób prezentacji danych w czasie ich

definiowania.



Struktury obiektowe nie powinny mieć na sztywno

wbudowanych operacji prezentacyjnych

Slajd nr 20

©Ian Sommerville 2000 - Inżynieria oprogramowania

Prezentacja informacji

informacja do

wyświetlenia

Oprogramowanie

prezentacyjne

0

10

20

30

40

50

60

70

80

90

1. Kw

2. Kw

3. Kw

4. Kw

Wsch.

Zach.

Płn.

---------------------

--------------------

---------------------

--------------------

---------------------

Ekran

Slajd nr 21

©Ian Sommerville 2000 - Inżynieria oprogramowania

Prezentacja informacji



Dzięki oddzieleniu systemu prezentacji od
danych można zmieniać sposób wyświetlania
danych na ekranie użytkownika bez
modyfikowania leżącego pod nim systemu
obliczeniowego

Slajd nr 22

©Ian Sommerville 2000 - Inżynieria oprogramowania

Prezentacja informacji



Na następnym slajdzie przedstawiono podejście MVC.

Jest ono efektywnym sposobem realizacji różnych

prezentacji danych.



Użytkownicy mogą współpracować z dowolną

prezentacją za pomocą wygodnego dla nich sposobu.

Dane do wyświetlania są obudowane w obiekcie

modelu.



Każdy obiekt danych jest skojarzony z kilkoma

oddzielnymi obiektami widoku. Każdy widok jest inną

prezentacją modelu.



Każdy widok jest związany z obiektem koordynatora

który obsługuje działania użytkownika i interakcje z

urządzeniem.



Model obsługujący dane numeryczne może mieć

postać histogramu lub tabeli. Model można

modyfikować poprzez wybranie innej skali lub innego

typu wykresu

Slajd nr 23

©Ian Sommerville 2000 - Inżynieria oprogramowania

Prezentacja informacji

Metody widoku

Stan widoku

Metody

modeluidoku

Stan modelu

Metody

koordynatora

Stan koordynatora

Komunikaty o modyfikacji

widoku

Modyfikacje modelu

Zapytania i aktualizacje

modelu

Model MVC interakcji

z użytkownikiem

Slajd nr 24

©Ian Sommerville 2000 - Inżynieria oprogramowania

Prezentacja informacji



Decydując o sposobie prezentacji informacji
projektant musi wziąć pod uwagę kilka
czynników:



Czy użytkownik potrzebuje dokładnej informacji, czy
tylko związków pomiędzy różnymi wartościami danych?



Jak szybko zmienia się informacja? Czy użytkownik
musi natychmiast widzieć te zmiany?



Czy użytkownik musi wykonywać pewne działania w
odpowiedzi na zmianę informacji.



Czy użytkownik ma oddziaływać na wyświetlaną
informację przez interfejs bezpośredniego działania?



Czy wyświetlana informacja jest tekstowa, czy
numeryczna? Czy wartości względne są ważne?

Slajd nr 25

©Ian Sommerville 2000 - Inżynieria oprogramowania

Prezentacja informacji



Informacja która nie zmienia się w czasie sesji
może być przedstawiana zarówno graficznie
jak i tekstowo. Wybór zależy od zastosowania.



Prezentacja tekstowa zajmuje mniej miejsca
ale jest gorzej widoczna.



Informacja która się nie zmienia powinna być
odróżniona od informacji dynamicznej za
pomocą innego stylu wyświetlania.



Informację wyświetlamy w formie tekstu gdy
potrzebne są precyzyjne dane np. numeryczne

Slajd nr 26

©Ian Sommerville 2000 - Inżynieria oprogramowania

Prezentacja informacji



Wykres kolumnowy

0

10

20

30

40

50

60

70

80

90

1. Kw

2. Kw

3. Kw

4. Kw

Wsch.

Zach.

Płn.

0

20

40

60

80

100

1. Kw 2. Kw 3. Kw 4. Kw

Wsch.

Wsch.

Zach.

Płn.

Slajd nr 27

©Ian Sommerville 2000 - Inżynieria oprogramowania

Prezentacja informacji



Wykres słupkowy

0

50

100

1. Kw

2. Kw

3. Kw

4. Kw

Płn.

Zach.

Wsch.

0%

50%

100%

1. Kw

2. Kw

3. Kw

4. Kw

Wsch.

Zach.

Płn.

Slajd nr 28

©Ian Sommerville 2000 - Inżynieria oprogramowania

Prezentacja informacji



Wykres liniowy

0

10

20

30

40

50

60

70

80

90

100

1. Kw

2. Kw

3. Kw

4. Kw

Wsch.

Zach.

Płn.

0

20

40

60

80

100

1. Kw 2. Kw 3. Kw 4. Kw

Wsch.

Wsch.

Zach.

Płn.

Slajd nr 29

©Ian Sommerville 2000 - Inżynieria oprogramowania

Prezentacja informacji



Wykres kołowy

1. Kw

2. Kw

3. Kw

4. Kw

1. Kw

2. Kw

3. Kw

4. Kw

Slajd nr 30

©Ian Sommerville 2000 - Inżynieria oprogramowania

Prezentacja informacji

0

10

20

30

40

50

60

70

80

90

100

0

2

4

6

Wsch.

Zach.

Płn.

0

10

20

30

40

50

60

70

80

90

100

0

2

4

6

Wsch.

Zach.

Płn.

Wykres punktowy

Slajd nr 31

©Ian Sommerville 2000 - Inżynieria oprogramowania

Prezentacja informacji



Wykres warstwowy

1. Kw

2. Kw

3. Kw

4. Kw

Wsch.

Płn.

0

50

100

Wsch.

Zach.

Płn.

1. Kw

2. Kw

3. Kw

4. Kw

0%

20%

40%

60%

80%

100%

Płn.

Zach.

Wsch.

Slajd nr 32

©Ian Sommerville 2000 - Inżynieria oprogramowania

Prezentacja informacji



Wykres pierścieniowy

1. Kw

2. Kw

3. Kw

4. Kw

Slajd nr 33

©Ian Sommerville 2000 - Inżynieria oprogramowania

Prezentacja informacji



Wykres radarowy

0

20

40

60

80

100

1. Kw

2. Kw

3. Kw

4. Kw

Wsch.

Zach.

Płn.

0

20

40

60

80

100

1. Kw

2. Kw

3. Kw

4. Kw

Wsch.

Zach.

Płn.

Slajd nr 34

©Ian Sommerville 2000 - Inżynieria oprogramowania

Prezentacja informacji



Wykres powierzchniowy

1. Kw 2. Kw

3. Kw 4. Kw

Wsch.

0

20

40

60

80

100

80-100

60-80

40-60

20-40

0-20

1. Kw

2. Kw

3. Kw

4. Kw

Wsch.

Zach.

Płn.

80-100

60-80

40-60

20-40

0-20

Slajd nr 35

©Ian Sommerville 2000 - Inżynieria oprogramowania

Prezentacja informacji



Wykres bąbelkowy

0

20

40

60

80

100

120

0

2

4

6

Wsch.

Płn.

0

20

40

60

80

100

120

0

2

4

6

Wsch.

Płn.

Slajd nr 36

©Ian Sommerville 2000 - Inżynieria oprogramowania

Prezentacja informacji



Dynamicznie zmieniające się informacje najlepiej
wyświetla się za pomocą prezentacji analogowej.
Ustawicznie zmieniające się dane numeryczne są
mylące ponieważ szybkie przyswajanie informacji
jest mylące.



Gdy przedstawia się dokładną informację
alfanumeryczną grafika może służyć do
uwidocznienia danych ukrytych w tle.



projektanci interfejsu powinni zdawać sobie sprawę
z możliwości prezentacji graficznych zwłaszcza gdy
systemowy interfejs ma przedstawiać byty fizyczne.



Przykłady na następnym slajdzie.

Slajd nr 37

©Ian Sommerville 2000 - Inżynieria oprogramowania

Prezentacja informacji



Informacje meteorologiczne.



Stan sieci telefonicznej jako zbiór połączonych
węzłów.



Stan reaktora chemicznego przedstawiony
jako zbiór temperatur i ciśnień.



Model cząsteczki uwidocznionej i zmienianej
w trzech wymiarach



Zbiór witryn www przedstawiony w postaci
drzewa hiperbolicznego

Slajd nr 38

©Ian Sommerville 2000 - Inżynieria oprogramowania

Prezentacja informacji



Kolor w projekcie interfejsu



Ogranicz liczbę stosowanych kolorów i używaj ich
ostrożnie



zmiany kolorów używaj do oznaczenia zmiany stanu
systemu



Skorzystaj z kodu kolorów, który pomorze
użytkownikowi w realizacji zadań.



Korzystaj z kodu kolorów spójnie i rozsądnie.



Uważaj na związki między kolorami.

Slajd nr 39

©Ian Sommerville 2000 - Inżynieria oprogramowania

Pomoc dla użytkownika



Zagadnienia związane z pomocą dla
użytkownika:



Komunikaty generowane przez system w odpowiedzi
na działanie użytkownika



System pomocy natychmiastowej



Dokumentacja dostępna w systemie

Slajd nr 40

©Ian Sommerville 2000 - Inżynieria oprogramowania

Pomoc dla użytkownika

Zagadnienie

Opis

Kontekst

Dostosowanie komunikatów do kontekstu
działania użytkownika

Doświadczeni

e

Odpowiedni poziom komunikatów do

doświadczenia użytkownika

Umiejętności

Dostosowanie komunikatów do
umiejętności użytkownika

Styl

Komunikaty powinny być pozytywne a nie

negatywne

Kultura

Projektant powinien znać kulturę kraju

Slajd nr 41

©Ian Sommerville 2000 - Inżynieria oprogramowania

Pomoc dla użytkownika



Dokumentacja użytkownika



Opis funkcjonalny w którym należy opisać funkcje
dostarczane przez system.



Podręcznik instalatora pokazujący w jaki sposób
należy zainstalować system



Przewodnik podstawowy obejmujący nieformalne
wprowadzenie do systemu. powinien zawierać wiele
przykładów.



Podręcznik