Projektowanie Graficznych Interfejsów Użytkownika Robert Szmurło

Transkrypt

1 Projektowanie Graficznych Interfejsów Użytkownika Robert Szmurło LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 1

2 Plan szczegółowy Projektowanie UI (1h) Rozszerzona powtórka Projekt Wizualny Projekt Leksykalny Ćwiczenie w Enterprise Architect LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 2

3 UCD - User Centered Design 1) User Centered Design Projekt Skoncentrowany na Użytkowniku 2) Model Centered Design Projekt Oparty na Modelach Projekt Ewaluacja Implementacja LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 3

4 User Centered Design (UCD) 1) Analiza zadań 2) Szkice projektu Projekt 3) Papierowy prototyp 4) Testy wewnętrzne 5) Prototyp komputerowy 6) Ewaluacja heurystyczna 7) Implementacja 8) Testy z użytkownikami 8 Ewaluacja Implementacja LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 4

5 Projekt systemu Projekt GUI Fazę projekt podzielimy na 5 podprojektów: A) Projekt pojęciowy (analiza) wyodrębnienie podstawowych koncepcji systemu jak np. obiektów, relacji i uogólnień. B) Projekt funkcjonalny (semantyczny) zdefiniowanie operacji na wszystkich obiektach oraz danych wejściowych i wyjściowych. C) Projekt sekwencyjny (syntaktyczny) definiuje kolejność operacji wprowadzania danych wejściowych i wyjściowych. Przykładem sekwencji jest: Wciśnij przycisk myszy na obiekcie, zmień pozycję myszy, zwolnij przycisk. Projekt syntaktyczny elementów wyjściowych uwzględnia rozmieszczenie elementów wyświetlanych oraz ich zmiany. D) Projekt wizualny definiuje układ obiektów w widokach, kolejność widoków - storyboards, E) Projekt leksykalny czasem określany jako projekt integrujący ze sprzętem, określa w jaki sposób i z jakimi rzeczywistymi prymitywami sprzętowymi połączone są elementy syntaktyczne. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 5

6 Projekt pojęciowy (A) Etap Odkrywania / Analizy: 1) określ klasy użytkowników (aktorów) 2) określ cele użytkowników (oczekiwania) 3) przeanalizuj aktualnie wykonywane czynności użytkownika 4) zbuduj projekt przypadków użycia LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 6

7 Poznaj Użytkowników (A) Określ charakterystykę docelowej grupy użytkowników, która będzie wpływała na wymagania: wiek, płeć, kulturę poziom wykształcenia możliwości fizyczne (np.: niepełnosprawni) ogólne doświadczenie komputerowe umiejętności (szybkie pisanie, czytanie) doświadczenie związane z dziedziną pracy doświadczenie z podobnymi aplikacjami środowisko pracy i pozostałe elementy kulturowe zależności i wzorce komunikacyjne LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 7

8 Projekt pojęciowy (A) Etap Odkrywania / Analizy: 1) określ klasy użytkowników (aktorów) 2) określ cele użytkowników (co musi być zrobione, wymagania) 3) przeanalizuj aktualnie wykonywane czynności użytkownika 4) zbuduj projekt przypadków użycia LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 8

9 Co musi zrobione? - CEL! Cele użytkowników (A) Co musi być zrobione aby coś innego było możliwe? - Warunki Od jakich innych czynności zależy dane zadanie? Jakich informacji potrzebuje użytkownik aby wykonać zadanie? Z jakich etapów składa procedura wykonania zadania? Podetapy mogą być podzielone na mniejsze Jak robić analizę? Rozmowy z 'przyszłymi' użytkownikami Bezpośrednia obserwacja aktualnie wykonywanej pracy Zagrożenia: Powtarzanie złych wzorców Nie uwzględnienie pozytywnych aspektów aktualnych prac LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 9

10 Projekt pojęciowy (A) Etap Odkrywania / Analizy: 1) określ klasy użytkowników (aktorów) 2) określ cele użytkowników (oczekiwania) 3) przeanalizuj aktualnie wykonywane czynności użytkownika 4) zbuduj projekt przypadków użycia Diagram czynności LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 10

11 Projekt pojęciowy (A) Etap Odkrywania / Analizy: 1) określ klasy użytkowników (aktorów) 2) określ cele użytkowników (oczekiwania) 3) przeanalizuj aktualnie wykonywane czynności użytkownika 4) zbuduj projekt przypadków użycia (które stają się częścią formalnej specyfikacji wymagań) LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 11

12 Projekt funkcjonalny (B) Projekt funkcjonalny (semantyczny) zdefiniowanie operacji na wszystkich obiektach oraz danych wejściowych i wyjściowych. 1) Obiekty Użytkownika - określ obiekty/elementy/pojęcia którymi operuje użytkownik 2) Przegląd Zadań - określ które czynności wykonuje system a które użytkownik 3) Widoki Abstrakcyjne - jakie informacje musi widzieć użytkownik aby ukończyć zadanie poszczególne zadania (związane z konkretnymi przypadkami użycia) 4) Przepływ Zadań - sprecyzuj dokładnie interakcję użytkownika z systemem 5) Stany Obiektów - co dzieje się danymi obiektami w trakcie interakcji z użytkownikiem LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 12

13 Projekt funkcjonalny (B) Projekt funkcjonalny (semantyczny) zdefiniowanie operacji na wszystkich obiektach oraz danych wejściowych i wyjściowych. 1) Obiekty Użytkownika - określ obiekty którymi operuje użytkownik 2) Przegląd Zadań - określ jakie czynności wykonuje system a jakie użytkownik 3) Widoki Abstrakcyjne - jakie informacje musi widzieć użytkownik aby ukończyć zadanie 4) Przepływ Zadań - sprecyzuj dokładnie interakcję użytkownika z systemem 5) Stany Obiektów - co dzieje się danymi obiektami w trakcie interakcji z użytkownikiem LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 13

14 Projekt funkcjonalny Obiekty użytkownika (B) 1) Wyodrębnij obiekty zazwyczaj są to rzeczowniki z diagramu zawierającego cele użytkowników 2) Posortuj obiekty w specjalnej tabeli (opcjonalnie, posiadając wprawę, można przejść do dalszego etapu) 3) Zdefiniuj jednoznaczne i zrozumiałe dla użytkownika nazwy obiektów (w niektórych metodologiach nazywa się to słownikiem pojęciowym) 4) Uporządkuj obiekty w modelu uwzględniając ich definicje, atrybuty, operacje oraz relacje między nimi. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 14

15 Jak tworzyć model obiektów użytkownika? (B) Obiekt Atrybuty Operacje Relacja (kompozycja składa się z) Liczebność 1) Utwórz diagram klas. 2) Dodaj obiekty, wraz atrybutami i operacjami. 3) Utwórz definicje. 4) Określ zależności (relacje). 5) Uzupełnij informację o liczebności 6) Sukcesywnie dodawaj wszystkie obiekty włącznie z aktorami o których musi wiedzieć system LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 15

16 Jak tworzyć model obiektów użytkownika? (B) Dla zależności wiele do wielu zaleca się określenie innego obiektu łączącego Najczęściej wykorzystywane są dotychczasowo wykorzystywane w firmie formularze LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 16

17 Projekt funkcjonalny (B) 1) Obiekty Użytkownika - określ obiekty którymi operuje użytkownik 2) Przegląd Zadań - określ jakie czynności wykonuje system a jakie użytkownik 3) Widoki Abstrakcyjne - jakie informacje musi widzieć użytkownik aby ukończyć zadanie 4) Przepływ Zadań - sprecyzuj dokładnie interakcję użytkownika z systemem 5) Stany Obiektów - co dzieje się danymi obiektami w trakcie interakcji z użytkownikiem LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 17

18 Projekt funkcjonalny Przegląd zadań (B) Przegląd Zadań - określ które czynności wykonuje system, a które użytkownik. Na etapie zaczyna się określenie doświadczenia użytkownika z systemem. Po raz pierwszy pojawia się system. Definicja: wysokiego poziomu opis określający strukturę funkcjonalności (ogólnie sekwencji aktywności oraz punktów decyzyjnych), którą system udostępnia dla użytkownika w celu zrealizowania intencji. Punktem startowym modelu jest odwzorowanie aktualnych procesów w instytucji użytkownika. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 18

19 Przegląd zadań Przykład przeglądu zadań w którym określamy które czynności są realizowane przez system a które przez użytkownika. Jest to często nazywane scenariuszem przypadku użycia. Diagram czynności. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 19

20 Diagram czynności Przykład 2 (B) Przykład aplikacji typu FlashCard. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 20

21 Projekt funkcjonalny (B) Projekt funkcjonalny (semantyczny) zdefiniowanie operacji na wszystkich obiektach oraz danych wejściowych i wyjściowych. 1) Obiekty Użytkownika - określ obiekty/elementy/pojęcia którymi operuje użytkownik 2) Przegląd Zadań - określ jakie czynności wykonuje system a jakie użytkownik 3) Widoki Abstrakcyjne - jakie informacje musi widzieć użytkownik aby ukończyć zadanie 4) Przepływ Zadań - sprecyzuj dokładnie interakcję użytkownika z systemem 5) Stany Obiektów - co dzieje się danymi obiektami w trakcie interakcji z użytkownikiem LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 21

22 Projekt funkcjonalny Widoki abstrakcyjne Widoki Abstrakcyjne cel: jakie informacje obiektów musi widzieć użytkownik aby ukończyć zadanie oraz jaka musi być udostępniona funkcjonalność. Definicja: niezależna od implementacji reprezentacja tego co musi widzieć użytkownik do zakończenia zadania. Użytkownicy nie pracują na obiektach ale na ich widokach. Wykorzystując model obiektów użytkownika, należy stworzyć abstrakcyjny model widoków obiektów niezbędny do wykonania zadania. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 22

23 Jak tworzyć widoki abstrakcyjne? (B) 1) Przeanalizuj i wyodrębnij najczęściej wykorzystywane aktywności. 2) Określ które obiekty biorą udział w danej aktywności oraz elementy, które są niezbędne do przedstawienia w widoku LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 23

24 Zależność, który aktor używa widoku Jak tworzyć widoki abstrakcyjne? (B) Określa z czego się składa oraz kolejność prezentacji EAN może być brany z innej klasy, z której składa się Produkt, np. ProductInfo Zależność, który obiekt prezentuje LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 24

25 Projekt sekwencyjny (syntaktyczny) (C) Definiuje kolejność operacji wprowadzania danych wejściowych i wyjściowych. Projekt syntaktyczny elementów wyjściowych uwzględnia rozmieszczenie elementów wyświetlanych oraz ich zmiany. 1) Przepływ Zadań - sprecyzuj dokładnie interakcję użytkownika z systemem 2) Stany Obiektów - co dzieje się danymi obiektami w trakcie interakcji z użytkownikiem LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 25

26 Projekt sekwencyjny (syntaktyczny) (C) Definiuje kolejność operacji wprowadzania danych wejściowych i wyjściowych. Projekt syntaktyczny elementów wyjściowych uwzględnia rozmieszczenie elementów wyświetlanych oraz ich zmiany. 1) Przepływ Zadań - sprecyzuj dokładnie interakcję użytkownika z systemem 2) Stany Obiektów - co dzieje się danymi obiektami w trakcie interakcji z użytkownikiem LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 26

27 Projekt sekwencyjny (syntaktyczny) (C) Definiuje kolejność operacji wprowadzania danych wejściowych i wyjściowych. Projekt syntaktyczny elementów wyjściowych uwzględnia rozmieszczenie elementów wyświetlanych oraz ich zmiany. 1) Przepływ Zadań - sprecyzuj dokładnie interakcję użytkownika z systemem 2) Stany Obiektów - co dzieje się z danymi obiektami w trakcie interakcji z użytkownikiem LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 27

28 Projekt wizualny (D) Zgodność z projektem abstrakcyjnym Wszystkie elementy i decyzje podjęte w fazie projektu abstrakcyjnego powinny mieć swój odpowiednik w projekcie wizualnym. Nie powinno się robić żadnych rozszerzeń. Czytelność reprezentowanych obiektów Obiekty, wyodrębnione w fazie abstrakcyjnej powinny być w czytelny sposób reprezentowane dla użytkownika. Obiekty powinny być łatwo rozpoznawalne przez użytkownika na wszystkich etapach procesu używania systemu. W jasny i czytelny sposób powinny być reprezentowane aktualne stany obiektów oraz ich zmiany. Zgodność i czytelność mają bezpośredni wpływ na użyteczność systemu. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 28

29 Projekt wizualny Trzy poziomy (D) Poszczególne obiekty Prezentacja pojedynczych obiektów Model obiektów, Środowisko Widoki prezentacji Układy, interakcje Widoki abstrakcyjne, sekwencje, stany, platforma, środwisko Całkowity odbiór użytkownika Weryfikacja zgodności i czytelności Prototypowanie, testy zespołowe (in-house) LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 29

30 Projekt wizualny Identyfikacja (D) Pojedyncze obiekt użytkownika pojawiają się w wiele razy w różnych widokach z różnymi liczebnościami oraz z różnymi możliwościami zajęcia powierzchni ekranu. Każdy obiekt musi być identyfikowalny w całym systemie. Obiekty Różne reprezentacje wizualne obiektu 1 Obiekt 1 Obiekt 2 Obiekt 2 Obiekt 2 Obiekt 1 Obiekt 2 Obiekt 3 Obiekt 3 Obiekt 1 Obiekt 1 Obiekt 1 Obiekt 1 Obiekt 3 Obiekt 1 Obiekt 1 LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 30

31 Identyfikacja obiektów (D) Przeanalizujmy interfejs sklepu internetowego wyodrębniając z niego odpowiednie widoki. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 31

32 Logo serwisu (D) LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 32

33 Panel nawigacyjny (D) LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 33

34 Reklama (D) LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 34

35 Widok panelu wyszukiwania (D) LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 35

36 Widok panelu ofert z zagnieżdżonymi widokami pojedynczych ofert (D) LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 36

37 Widok reklam tematycznych (D) LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 37

38 I jeszcze kilka innych... (D) LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 38

39 Projekt abstrakcyjny dla przykładu (D) stm sklep.benchmark.pl «Widok» Logo PanelWyszukiwaniaProduktu «Widok» GłównySklepu «Wi do k» Reklama «Widok» MenuGlowne + ko nfigura to rp C() : vo id + K o n ta kt() : vo id + P rze wod n ik() : vo id + S e rwis() : vo i d + S te ro wn iki () : vo id + stro n a Gl o wn a () : vo id + to p 10 () : voi d + T ransportplatnosciraty() : void + Wsp a rcie() : vo id Dla przykładu udokumntowane elementy funkcjonalne MenuGlownego. «Wi d ok» PanelOfert «Widok» OfertyDnia «Widok» ReklamyTematyczne «Widok» Oferta «Widok» OfertaDnia «Widok» ReklamaTematyczna LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 39

40 Projekt wizualny Całkowity odbiór (D) Całkowity odbiór aplikacji przez użytkownika musi uwzględniać: odpowiednie diagramy sekwencji, być zgodnym ze scenariuszami przypadków użycia, o ile były stworzone w wymaganiach, o ie to możliwe pozwalać na interakcję (prototypy), uwzględniać możliwość występowania kilku wersji do wyboru przez użytkownika, Jest realizowany za pomocą: scenopisów (np. storyborads ) dokumenty tekstowe prezentacja OpenOffice Impress lub PowerPoint itp. prototypów LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 40

41 Storyboard (D) LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 41

42 Storyboard - Przykład 2 (D) LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 42

43 Projekt leksykalny Cel: mapowanie elementów interfejsu graficznego z elementami architektury systemu: akcje, kontrolki stosowane dla odpowiednich elementów graficznych. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 43

44 Projekt leksykalny Akcje (E) ui Projekt leksykalny «www» ZamowienieBiletu cm dzatwierdz cm danuluj «trace» (from Projekt w izualny) (from Projekt w izualny) «navigate» (from Projekt w izualny) «trace» «instantiate» «GUIAction» Walidacj adanych Akcj awalidacj i Screen2 Czy poprawna? Nie T ak «trace» Screen1 LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 44

45 Projekt leksykalny Akcje (E) cd User Interface «action» :Dostawa.Lista.Akcja pokaz dostawy.lista Lista Dostaw Model Port1 ::Dostaw a.lista.akcja + execute() : void (from Logical Model) IM odel Dodaj Edytuj Drukuj Zatwierdz pokaz dodaj «action» Dostawa.Lista.Akcja + execute() : void pokaz Dostawa.Dodaj Dostawa.Pozycja.Usun Dostawca Kurier pokaz T ak Nie Data Pozycje Dodaj Usuń Edytuj «action» :Dostawa.Dodaj.Akcja usun «action» :Dostawa.Dodaj.Akcja ::Dostaw a.dodaj.akcja + execute() : void Zachowaj Anuluj ::Dostaw a.dodaj.akcja + execute() : void zachowaj pokaz «action» Dostawa.Dodaj.Akcja + execute() : void LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 45

46 Projekt leksykalny implementacja (E) ui Projekt wizualny DropDownList «www» ZamowienieBiletu DateTimePicker Miejsce i data wylotu: cbo M ie jsce Wylo tu dtwylot CheckBox M iejsce i data docelowa : cbomiejscecel dtcel Liczba przesiadek: cbo Prze siad ki M ożliwo ść a nu lowan ia re zerwa cji : Fo rm a pł atn ości: chka nu lowa nie Reze rwacji Ka rta Go towka Prze lewe Klasa biletu: cbo Kla sa cm dzatwierdz cm danuluj «www» ZamowineieBiletuKolejowego ZamowienieBiletuAutobusowego T ypo po cią gu : cbo T yp Pocia gu Kli m a tyzacja ZamowienieBiletuLotniczego Jed ze nie : cb owyzywien ie LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 46

47 Interakcja Dziękuję za uwagę. Chcemy być coraz lepsi! Jeżeli coś cię zainteresowało napisz a: Jeżeli coś cię bardzo znudziło napisz a: Jeżeli zauważyłeś błąd napisz a: LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 47