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

Prezentacja na temat: "Prezentacja zawiera projekt pewnego niedużego systemu informatycznego (właściwie jego fragment), oczywiście nie pozbawiony błędów, w zakresie: DPU, diagramy."— Zapis prezentacji:

1 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.

2

3

4

5

6

7 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.

8 1) aktualizuj dane studentów: dodaj - dodaj studenta
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).

9 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?

10 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.

11 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 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

12 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): Wybierz stosowną opcję. Wybierz dopisywanie wydziałów. Wpisz dane wydziału medycyny. Zapisz wprowadzone dane. Czy dane zostały zapisane? Masz usunąć wydział techniczny - wybierz stosowną opcję. 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:

13 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

14 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.

15 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

16 -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).

17 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.

18 Wybierz: Student Wydział

19 Student Wydział Aktualizuj:

20 Wpisz Edytuj Usuń

21 Wpisz dane wydziału: Nazwa wydziału Adres Dziekan Zapisz

22 Wpisz dane wydziału: Wydział Medycyny Nazwa wydziału Adres Olsztyn ul. Barcza 11 Dziekan Prof. dr Jan Kowalski Zapisz

23 Wpisz dane wydziału: Nazwa wydziału Adres Dziekan Zapisz Powrót

24 Wpisz Edytuj Usuń

25 Wpisz wydział do usunięcia:

26 Wpisz wydział do usunięcia:
Wydział techniczny Usuń

27 Wpisz wydział do usunięcia:
Powrót do początku

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

29 -- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
Wybierz: Student Wydział 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

30 -- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
Student Wydział Aktualizuj: 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). Nie Tak

31 -- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
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

32 -- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
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

33 -- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
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

34 -- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
Wpisz dane wydziału: Nazwa wydziału Adres Dziekan Zapisz Powrót 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). Nie

35 -- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
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

36 -- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
Wpisz wydział do usunięcia: 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

37 -- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
Wpisz wydział do usunięcia: Wydział techniczny 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 Nie

38 -- Czy właściwa (poprawna) akcja jest oczywista dla użytkownika?
Wpisz wydział do usunięcia: Powrót do początku 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

39 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ł”.

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

41 Poprawiony DPU

42

43 Poprawione diagramy czynności
Czynność: dodaj studenta

44 Czynność: Wyszukaj studenta [nie]

45 Czynność: edytuj dane studenta

46 Czynność: usuń studenta [tak]

47 Czynność: aktualizuj wydziały

48

49 Czynność: edytuj dane wydziału 2 3

50 Czynność: usuń dane wydziału 2 3

51 Poprawiony diagram hierarchii funkcji
System Student Wydział wyszukaj dodaj aktualizuj edytuj usuń

52 System rejestracji studentów
Wydział

53 Wpisz nowy wydział Wydziały: Wpisz nazwę: Administracji Biologii
Budownictwa Elektroniczny Usuń Edytuj Wpisz nazwę: Wpisz nowy wydział Wróć do menu głównego

54 Wpisz dane wydziału: Wydział Medycyny Nazwa wydziału Adres Olsztyn ul. Barcza 11 Dziekan Prof. dr Jan Kowalski Zapisz Wróć

55 Wpisz nowy wydział Wróć do menu głównego
Wydziały: Techniczny Technologii żywności Teologiczny Towaroznawstwa Usuń Edytuj Wpisz nazwę: T Wpisz nowy wydział Wróć do menu głównego

56 Dane wydziału technicznego zostały usunięte
Wydziały: Technologii żywności Teologiczny Towaroznawstwa Weterynarii Usuń Edytuj Wpisz nazwę: T Wpisz nowy wydział Wróć do menu głównego Dane wydziału technicznego zostały usunięte

57 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): Wybierz stosowną opcję. Wybierz dopisywanie wydziałów. Wpisz dane wydziału medycyny. Zapisz wprowadzone dane. Czy dane zostały zapisane? Masz usunąć wydział techniczny - wybierz stosowną opcję. 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:

58 System rejestracji studentów
Wydział Scenariusz do funkcji „Aktualizacja wydziałów” do zadania „dopisz wydział medycyny i usuń 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 Tak/Nie

59 2. Wybierz dopisywanie wydziałów.
Wydziały: Administracji Biologii Budownictwa Elektroniczny 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

60 3. Wpisz dane wydziału medycyny. 4. Zapisz wprowadzone dane.
5. Czy dane zostały zapisane? 6. Masz usunąć wydział techniczny - wybierz stosowną opcję. Wpisz dane wydziału: Wydział Medycyny Nazwa wydziału Adres Olsztyn ul. Barcza 11 Dziekan Prof. dr Jan Kowalski Zapisz Wróć -- 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

61 7. Wybierz wydział techniczny. 8. Usuń go.
Wydziały: Techniczny Technologii żywności Teologiczny Towaroznawstwa 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

62 Dane wydziału technicznego zostały usunięte
Wydziały: Technologii żywności Teologiczny Towaroznawstwa Weterynarii 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

63 System rejestracji studentów
Wydział

64 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” System rejestracji studentów Zarządzanie: Studentami Wydziałami - 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”

65 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

66 Powrót do listy wydziałów
Na wszystkich ekranach brakuje informacji dotyczącej nawigacji – która funkcja i która opcja zostały wybrane np. do ekranu 3: Zarządzanie wydziałami Wpisz nowy wydział 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

67 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ą).