Prezentacja zawiera projekt pewnego niedużego systemu
informatycznego (właściwie jego fragment), oczywiście
nie pozbawiony błędów, w zakresie: DPU, diagramy
czynności, diagram klas.

Celem prezentacji jest przedstawienie metodyki
projektowania interfejsu, a także pokazania, że przy tym
następuje sprzężenie zwrotne – tzn. przy projektowaniu
interfejsu uwidaczniają się błędy i nieścisłości w
założeniach projektowych z innych etapów.

uc Use Case View

pracownik

aktualizuj dane

studentów

aktualizuj wydziały

«include»

uc aktualizuj dane studentów

pracownik

dodaj

usuń

act aktualizuj wydziały

Aktualizuj wydziały

Wybierz operację

Wpisz wydział

Edytuj dane wydziału

Usuń dane wydziału

Koniec

act dodaj

Dodaj studenta

Wpisz dane studenta

Czy chcesz dopisać wydział?

Wpis wydziału

Wybierz wydział

Koniec

[tak]

[nie]

act usuń

Usuń studenta

Wybierz studenta

Czy chcesz go usunąć?

Usuń

studenta

Czy chcesz wybrać innego studenta?

Koniec

[tak]

[nie]

[tak]

[nie]

class Logical View

student

-

imie: string

-

nazwisko: string

+ m_ wydział: wydział

+ wyświetl(string, string) : void

wydział

-

nazwa: string

+ wyświetldane(string) : void

1

1..*

Diagram klas nie zawiera wszystkich potrzebnych metod – jest do
poprawienia. Spróbujmy jednak stworzyć diagram hierarchii
funkcji – po to aby wykonać pewne założenia co do interfejsu,
stworzyć wstępny jego model i go przetestować – w oparciu o
DPU i czynności.

• PU:

Czynności:

1) aktualizuj dane studentów:
- dodaj

- dodaj studenta

- Usuń

- usuń studenta

2) aktualizuj wydziały - aktualizuj

wydziały

W oparciu o to zestawienie można
ustalić zestaw funkcjonalny naszej
aplikacji. Wcześniej należy wybrać typ
urządzeń interfejsowych oraz styl
interfejsu – wybrano monitor i
klawiaturę, styl WIMP (Windows).

Wstępne zestawienie funkcji - z organizacją

tematyczną (diagram hierarchii funkcji – DHF)

:

System

Student

Wydział

- dodaj

usuń

aktualizuj

Czy ten diagram hierarchii funkcji
odzwierciedla wszystkie potrzebne funkcje,
czy jest to dostateczne rozbicie na funkcje
elementarne?

Aby sprawdzić czy zrobiliśmy dobry DHF najlepiej jest
zastosować podejście zadaniowe. Jest ono dosyć pracochłonne
i nie da się przetestować całego interfejsu. Wybiera się
najczęściej występujące operacje wykonywane w systemie i się
testuje interfejs do ich wykonania. Pozostałe części interfejsu
wykonuje się przez analogię.

Zadania muszą być sformułowane konkretnie – w naszym
przypadku:

1) Wpisać na listę wydziałów wydział medycyny i usunąć
wydział techniczny.

2) Wpisać na listę studentów Jana Nowaka, który jest
studentem wydziału humanistycznego (wpis wydziału już
istnieje), wpisać na listę studentów Andrzeja Sytę, który jest
studentem wydziału prawa (wpisu tego wydziału brak) oraz
usunąć z listy studentów Adama Rojka .

Do każdego z zadań należy przygotować projekty – jak będą
wyglądać ekrany na poszczególnych etapach wykonania
zadania i scenariusz poleceń dla osoby testującej – co ma na
każdym etapie wykonać (ale nie za pomocą czego – czyli nie
„naciśnij przycisk zapisz” tylko „zapisz wpisane dane”. Można
najpierw przygotować scenariusze, potem do poszczególnych
punktów zaprojektować ekrany.

Należy też wykonać charakterystykę użytkowników systemu – ustalić
ich wiek, wykształcenie, poziom obycia z obsługą komputera. Można
to zrobić wypełniając poniższą tabelkę (niektóre pola zapełnione są
przykładowymi danymi):

Zakres w punktach,
np.1-10

Wynikające z tego
wymagania do
interfejsu

wiek

15 - 50

uniwersalny

wykształcenie i
inteligencja

wykształcenie
zawodowe, średnie lub
wyższe

komunikatywny

zdolności językowe

język polski , angielski

wersja w jęz. angielskim

zdolności manualne

widzący, sprawny
manualnie

maksymalna prostota

częstość użycia

rzadko-często

standardowość

swoboda użytkowania

umiarkowana

wiedza o zadaniach

średnia

obycie komputerowe

użycie myszy, proste
pisanie

prosta obsługa

Diagram czynności jest mało precyzyjny, ale dostosujmy do niego

scenariusz aby sprawdzić, czy takie rozbicie funkcji w FHD jest dobre.

Przykładowy scenariusz do funkcji „Aktualizacja wydziałów” do zadania

„dopisz wydział medycyny i usuń wydział techniczny ” (zaczynamy od
menu głównego):

1. Wybierz stosowną opcję.

2. Wybierz dopisywanie wydziałów.

3. Wpisz dane wydziału medycyny.

4. Zapisz wprowadzone dane.

5. Czy dane zostały zapisane?

6. Masz usunąć wydział techniczny - wybierz stosowną opcję.

7. Wybierz wydział techniczny.

8. Usuń go.

9. Czy dane wydziału zostały usunięte?

10. Wróć do początkowego menu – głównego ekranu.

Przejścia: 1 2 3 4 5 6 7 8 9

Sposoby testowania.

Testy można podzielić na:

- testy bez udziału użytkownika
-- testy z udziałem użytkownika.

Testy bez udziału użytkownika:

-wędrówka w myśli
- formalna analiza czynności (test GOMS)
-nieformalna analiza czynności
-ocena heurystyczna
-cognitive walkthrough

Testy z udziałem użytkownika:

-metoda głośnego mówienia

-podstawowe pomiary użyteczności

Opis wybranych metod.

Wędrówka w myśli

Projektant wczuwa się w rolę użytkownika – stara się patrzeć na
interfejs oczami użytkownika. Do każdego kroku zalecane jest
stawianie pytań i ustalenie odpowiedzi:

-Czy użytkownik będzie się chciał zapoznać ze wszystkimi możliwymi
działaniami i ich skutkami?

-Czy użytkownik będzie widział cały obszar sterowania?
-Czy jeżeli znajdzie właściwą funkcję rozpozna że to jest to?
-Czy po wykonaniu działania zrozumie potwierdzenie właściwego
wykonania?

To myślenia przy wykonaniu zadania należy zapisać.

Metoda GOMS

Polega na ocenie czasu wykonania zadania uwzględniając czynności
elementarne. Są oszacowane czasy wykonania elementarnych
czynności typu: przemieszczenie kursora myszy, przeniesienie wzroku z
punktu do punktu itd. . Tworzy się opis wykonania zadania na poziomie
czynności elementarnych i szacuje łączny czas wykonania zadania.
Metoda jest pracochłonna i raczej do projektowania interfejsów w
systemach czasu rzeczywistego.

Analiza nieformalna

Metoda polega na wyobrażeniu sobie, że objaśniamy sposób
obsługi typowemu użytkownikowi – w stylu: wybierz aktualizację
wydziałów, wybierz dopisywanie wydziałów, wpisz dane wydziału
medycyny, wybierz zatwierdzenie wpisu, sprawdź, że dane się
zapisały itd.. Te objaśnienia można spisać. Następnie trzeba sobie
odpowiedzieć na kilka pytań:

-Czy proste zadanie może być wykonane prostą sekwencją
czynności?

-Czy częste zadania wykonywane są szybko?
-Ile faktów i kroków użytkownik musi zapamiętać?
-Czy wszystko znajduje się w dokumentacji? – a w zasadzie co
powinno się znaleźć.

Ocena heurystyczna

Wariant metody – dziewięć heurystyk Nielsena i Molicha:

-prosty i naturalny dialog

-Mów językiem użytkownika

-Zmniejsz do minimum obciążenie pamięci

-Bądź spójny

-Zapewnij potwierdzenia

-Zapewnij dobrze oznaczone wyjścia
-Zapewnij możliwość pracy na skróty
-Dobre komunikaty o błędach
-Zapobiegaj błędom

Przy ocenianiu należy dać odpowiedź – na ile dany wymóg został
spełniony.

Cognitive walktrough

Pytanie podstawowe (cel) – Co użytkownik chce osiągnąć?

Do każdego ekranu związanego z krokiem wykonania scenariusza
zdajemy trzy pytania:

- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?

-Czy użytkownik powiąże opis poprawnej akcji z tym co chce zrobić?

-Czy użytkownik

jest pewien, że użył poprawnej akcji ? (kwestia

potwierdzenia poprawności akcji).

Na następnych slajdach przedstawiony jest projekt wstępny
interfejsu do zadania 1. Oczywiście jest on daleki od
doskonałości.

Testowanie interfejsu przedstawione jest po projekcie
wstępnym.

Student

Wydział

Wybierz:

Student

Wydział

Aktualizuj:

Wpisz

Edytuj

Usuń

Wpisz dane wydziału:

Nazwa wydziału

Adres

Dziekan

Zapisz

Wpisz dane wydziału:

Wydział Medycyny

Nazwa wydziału

Adres

Olsztyn ul. Barcza 11

Dziekan

Prof. dr Jan Kowalski

Zapisz

Wpisz dane wydziału:

Nazwa wydziału

Adres

Dziekan

Zapisz

Powrót

Wpisz

Edytuj

Usuń

Wpisz wydział do usunięcia:

Wpisz wydział do usunięcia:

Wydział techniczny

Usuń

Wpisz wydział do usunięcia:

Powrót do początku

Należy go przetestować wykorzystując jedną z
metod. Zróbmy to metodą „Cognitive walkthrough”.

Student

Wydział

Wybierz:

Trzy pytania:
-- Czy właściwa (poprawna) akcja jest oczywista
dla użytkownika?
- Czy użytkownik powiąże opis poprawnej akcji z
tym co chce zrobić?
- Czy użytkownik jest pewien, że użył poprawnej
akcji ? (kwestia potwierdzenia poprawności akcji).

Tak

Tak

Tak

Student

Wydział

Aktualizuj:

Nie

Nie

Tak

Trzy pytania:
-- Czy właściwa (poprawna) akcja jest oczywista
dla użytkownika?
- Czy użytkownik powiąże opis poprawnej akcji z
tym co chce zrobić?
- Czy użytkownik jest pewien, że użył poprawnej
akcji ? (kwestia potwierdzenia poprawności akcji).

Wpisz

Edytuj

Usuń

Trzy pytania:
-- Czy właściwa (poprawna) akcja jest oczywista
dla użytkownika?
- Czy użytkownik powiąże opis poprawnej akcji z
tym co chce zrobić?
- Czy użytkownik jest pewien, że użył poprawnej
akcji ? (kwestia potwierdzenia poprawności akcji).

Tak

Tak

Tak

Wpisz dane wydziału:

Nazwa wydziału

Adres

Dziekan

Zapisz

Trzy pytania:
-- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
- Czy użytkownik powiąże opis poprawnej akcji z tym co chce zrobić?
- Czy użytkownik jest pewien, że użył poprawnej akcji ? (kwestia
potwierdzenia poprawności akcji).

Tak
Tak
Tak

Wpisz dane wydziału:

Wydział Medycyny

Nazwa wydziału

Adres

Olsztyn ul. Barcza 11

Dziekan

Prof. dr Jan Kowalski

Zapisz

Trzy pytania:
-- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
- Czy użytkownik powiąże opis poprawnej akcji z tym co chce zrobić?
- Czy użytkownik jest pewien, że użył poprawnej akcji ? (kwestia
potwierdzenia poprawności akcji).

Tak
Tak
Tak

Wpisz dane wydziału:

Nazwa wydziału

Adres

Dziekan

Zapisz

Powrót

Nie
Nie
Nie

Trzy pytania:
-- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
- Czy użytkownik powiąże opis poprawnej akcji z tym co chce zrobić?
- Czy użytkownik jest pewien, że użył poprawnej akcji ? (kwestia
potwierdzenia poprawności akcji).

Wpisz

Edytuj

Usuń

Tak
Tak
Tak

Trzy pytania:
-- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
- Czy użytkownik powiąże opis poprawnej akcji z tym co chce zrobić?
- Czy użytkownik jest pewien, że użył poprawnej akcji ? (kwestia
potwierdzenia poprawności akcji).

Wpisz wydział do usunięcia:

Tak
Tak
Tak

Trzy pytania:
-- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
- Czy użytkownik powiąże opis poprawnej akcji z tym co chce zrobić?
- Czy użytkownik jest pewien, że użył poprawnej akcji ? (kwestia
potwierdzenia poprawności akcji).

Wpisz wydział do usunięcia:

Wydział techniczny

Usuń

Tak
Tak
Nie

Trzy pytania:
-- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
- Czy użytkownik powiąże opis poprawnej akcji z tym co chce zrobić?
- Czy użytkownik jest pewien, że użył poprawnej akcji ? (kwestia
potwierdzenia poprawności akcji).

Wpisz wydział do usunięcia:

Powrót do początku

Tak
Tak
Tak

Trzy pytania:
-- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
- Czy użytkownik powiąże opis poprawnej akcji z tym co chce zrobić?
- Czy użytkownik jest pewien, że użył poprawnej akcji ? (kwestia
potwierdzenia poprawności akcji).

Przeprowadzona analiza zasygnalizowała pewne
niejasności w projekcie interfejsu. Należy je
przeanalizować i wnieść korekty do projektu.

Odpowiedzi na pytania były podawane w wersji tak/nie.
Lepszym rozwiązaniem jest dodawanie komentarzy
(zwłaszcza przy odpowiedziach negatywnych)
mówiących dlaczego w tym miejscu są niejasności.

Wnioski:

- dotyczące całości projektu:
Jeżeli porównamy diagram hierarchii funkcji z
diagramem klas, to widać, że klasy nie zawierają
wszystkich potrzebnych metod, z kolei DPU (i
diagramy czynności) nie zawiera PU „wyświetl” dla
PU „student” i „wydział”.

Należy poprawić DPU, diagramy czynności, diagram
hierarchii funkcji oraz diagram klas. Modyfikacji diagramu
klas można dokonać po stworzeniu projektu interfejsu.

Poprawiony DPU

uc Use Case View

pracownik

aktualizuj dane

studentów

aktualizuj wydziały

«include»

uc aktualizuj dane studentów

pracownik

dodaj

usuń

wyszukaj

edytuj

«extend»

«extend»

act dodaj

Dodaj studenta

Wpisz dane studenta

Czy chcesz dopisać wydział?

Wpisz wydział

Wybierz wydział

Zapisz dane

Koniec

[nie]

[tak]

Poprawione
diagramy
czynności

Czynność:
dodaj
studenta

act wyszukaj

Start

Wpisz dane studenta

Wyszukaj

Czy został znaleziony?

Koniec

Czy szukać dalej?

Komunikat

że tak

Komunikat

że nie

[tak]

[tak]

[nie]

Czynność:
Wyszukaj
studenta

[nie]

act edytuj

Początek

Popraw dane

Zapisz dane

Koniec

Czynność:
edytuj dane
studenta

act usuń

Poczatek

Czy chcesz go usunąć?

Usuń

studenta

Czy chcesz wybrać innego studenta?

Koniec

[nie]

[nie]

[tak]

Czynność:
usuń studenta

[tak]

act aktualizuj wydziały

Aktualizuj wydziały

Wybierz operację

Wpisz wydział

Edytuj dane wydziału

Usuń dane wydziału

Koniec

Czynność:
aktualizuj wydziały

act Wpisz wydział

start

1. wyświetl listę

wydziałow

czy chcesz
dopisywać
nowy wydział?

2. wpisz nowy wydział

stop

[tak]

[nie]

act Edytuj dane wydziału

start

1. wyświetl listę

wydziałow

Wybierz wydział

Edytuj dane wydziału

czy chcesz
edytować
nowy wydział?

stop

[nie]

[tak]

Czynność:
edytuj dane wydziału

2

3

act Usuń dane wydziału

start

1. wyświetl listę

wydziałow

Wybierz wydział

Usuń dane wydziału

czy chcesz
usunąć inny
wydział?

stop

[nie]

[tak]

Czynność:
usuń dane wydziału

2

3

Poprawiony diagram hierarchii funkcji

System

Student

Wydział

wyszukaj

dodaj

aktualizuj

edytuj

usuń

Student

Wydział

System rejestracji studentów

Wydziały
:

Administracji

Biologii

Budownictwa

Elektroniczny

Usuń

Edytuj

Usuń

Edytuj

Usuń

Edytuj

Usuń

Edytuj

Wpisz nazwę:

Wpisz nowy

wydział

Wróć do menu

głównego

Wpisz dane wydziału:

Wydział Medycyny

Nazwa wydziału

Adres

Olsztyn ul. Barcza 11

Dziekan

Prof. dr Jan Kowalski

Zapisz

Wróć

Wydziały
:

Techniczny

Technologii żywności

Teologiczny

Towaroznawstwa

Usuń

Edytuj

Usuń

Edytuj

Usuń

Edytuj

Usuń

Edytuj

Wpisz nazwę:

T

Wpisz nowy

wydział

Wróć do

menu

głównego

Wydziały:

Technologii żywności

Teologiczny

Towaroznawstwa

Weterynarii

Usuń

Edytuj

Usuń

Edytuj

Usuń

Edytuj

Usuń

Edytuj

Wpisz nazwę:

T

Wpisz nowy

wydział

Wróć do

menu

głównego

Dane wydziału

technicznego zostały

usunięte

Powróćmy do testowania interfejsu – należy go sprawdzić pod

względem rozmieszczenia elementów, obecności i czytelności
komunikatów, czytelności nawigacji itd. . Przetestujmy wykonanie
zadania 1.

Scenariusz do funkcji „Aktualizacja wydziałów” do zadania „dopisz

wydział medycyny i usuń wydział techniczny ” (zaczynamy od
menu głównego):

1. Wybierz stosowną opcję.

2. Wybierz dopisywanie wydziałów.

3. Wpisz dane wydziału medycyny.

4. Zapisz wprowadzone dane.

5. Czy dane zostały zapisane?

6. Masz usunąć wydział techniczny - wybierz stosowną opcję.

7. Wybierz wydział techniczny.

8. Usuń go.

9. Czy dane wydziału zostały usunięte?

10. Wróć do początkowego menu – głównego ekranu..

Przejścia: 1 2 3 4 5 6 7 8 9

Student

Wydział

System rejestracji studentów

1. Wybierz stosowną opcję.

-- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
- Czy użytkownik powiąże opis poprawnej akcji z tym co chce zrobić?
- Czy użytkownik jest pewien, że użył poprawnej akcji ? (kwestia
potwierdzenia poprawności akcji).

Tak
Tak
Tak/Nie

Scenariusz do funkcji „Aktualizacja wydziałów” do
zadania „dopisz wydział medycyny i usuń wydział
techniczny ”

Wydziały
:

Administracji

Biologii

Budownictwa

Elektroniczny

Usuń

Edytuj

Usuń

Edytuj

Usuń

Edytuj

Usuń

Edytuj

Wpisz nazwę:

Wpisz nowy

wydział

Wróć do menu

głównego

2. Wybierz dopisywanie

wydziałów.

-- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
- Czy użytkownik powiąże opis poprawnej akcji z tym co chce zrobić?
- Czy użytkownik jest pewien, że użył poprawnej akcji ? (kwestia
potwierdzenia poprawności akcji).

Tak
Tak
Tak

Wpisz dane wydziału:

Wydział Medycyny

Nazwa wydziału

Adres

Olsztyn ul. Barcza 11

Dziekan

Prof. dr Jan Kowalski

Zapisz

Wróć

3. Wpisz dane wydziału medycyny.

4. Zapisz wprowadzone dane.
5. Czy dane zostały zapisane?
6. Masz usunąć wydział techniczny -

wybierz stosowną opcję.

-- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
- Czy użytkownik powiąże opis poprawnej akcji z tym co chce zrobić?
- Czy użytkownik jest pewien, że użył poprawnej akcji ? (kwestia
potwierdzenia poprawności akcji).

Tak – Nie – p .6
Tak – Nie – p.5,6
Tak - Nie – p.5,6

Wydziały
:

Techniczny

Technologii żywności

Teologiczny

Towaroznawstwa

Usuń

Edytuj

Usuń

Edytuj

Usuń

Edytuj

Usuń

Edytuj

Wpisz nazwę:

T

Wpisz nowy

wydział

Wróć do

menu

głównego

7. Wybierz wydział techniczny.
8. Usuń go.

-- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
- Czy użytkownik powiąże opis poprawnej akcji z tym co chce zrobić?
- Czy użytkownik jest pewien, że użył poprawnej akcji ? (kwestia
potwierdzenia poprawności akcji).

Tak
Tak
Tak

Wydziały:

Technologii żywności

Teologiczny

Towaroznawstwa

Weterynarii

Usuń

Edytuj

Usuń

Edytuj

Usuń

Edytuj

Usuń

Edytuj

Wpisz nazwę:

T

Wpisz nowy

wydział

Wróć do

menu

głównego

Dane wydziału

technicznego zostały

usunięte

9. Czy dane wydziału zostały usunięte?

10. Wróć do początkowego menu – głównego ekranu.

-- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
- Czy użytkownik powiąże opis poprawnej akcji z tym co chce zrobić?
- Czy użytkownik jest pewien, że użył poprawnej akcji ? (kwestia
potwierdzenia poprawności akcji).

Tak
Tak
Tak

Student

Wydział

System rejestracji studentów

Analiza projektu interfejsu metodą Cognitive Walktrough wykazała pewne
niedociągnięcia:

-Ekran 1 – napis na przycisku „Wydział” może nie być oczywistym do

-uznania go za właściwą akcję. Można dodać komentarz np. „Zarządzanie”

Studentami

Wydziałami

System rejestracji studentów

Zarządzanie:

- Ekran 3 ma więcej niedociągnięć – brak potwierdzenia
zapisania danych – po wybraniu opcji „Zapisz” powinien
pojawić się komunikat potwierdzający, nie wiadomo jak wrócić
do ekranu poprzedniego – napis na przycisku „Wróć” można
zamienić na „Powrót do listy wydziałów”

Wpisz dane wydziału:

Wydział Medycyny

Nazwa wydziału

Adres

Olsztyn ul. Barcza 11

Dziekan

Prof. dr Jan Kowalski

Zapisz

Powrót do

listy

wydziałów

Dane zostały

zapisane

Na wszystkich ekranach brakuje informacji dotyczącej nawigacji –
która funkcja i która opcja zostały wybrane np. do ekranu 3:

Wpisz dane wydziału:

Wydział Medycyny

Nazwa wydziału

Adres

Olsztyn ul. Barcza 11

Dziekan

Prof. dr Jan Kowalski

Zapisz

Powrót do

listy

wydziałów

Zarządzanie wydziałami Wpisz nowy
wydział

Zadaniem Państwa jest stworzenie do zadania
2:

-- scenariusza

- projektu ekranów
- przetestowanie ich jedną z metod,
opisanych w prezentacji (lub inna Państwu
znaną).