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 UCD - User Centered Design 1) User Centered Design Projekt Skoncentrowany na Użytkowniku 2) Model Centered Design Projekt Oparty na Modelach Projekt Inżynieria oprogramowania, ale w konkretnym zastosowaniu, do projektowania interfejsów użytkownika. Ewaluacja Implementacja LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 2

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

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

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

6 Określ charakterystykę docelowej grupy użytkowników, która będzie wpływała na wymagania: wiek, płeć, kulturę poziom wykształcenia Poznaj Użytkowników (A) 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 6

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

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

9 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 i zbuduj diagram czynności 4) zbuduj projekt przypadków użycia 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 (które stają się częścią formalnej specyfikacji wymagań) LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 10

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

13 Projekt funkcjonalny (C) 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 (C) 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 14

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

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

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

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

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

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

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

22 Projekt leksykalny - Akcje u i P r o j e k t l e k s y k a l n y «w w w» Z a m o w i e n i e B i l e t u c m d Z a t w i e r d z c m d A n u l u j «t r a c e» ( f r o m P r o j e k t w i z u a l n y ) ( f r o m P r o j e k t w i z u a l n y ) «n a v i g a t e» ( f r o m P r o j e k t w i z u a l n y ) «t r a c e» «i n s t a n t i a t e» «G U I A c t i o n» W a l i d a c j a D a n y c h A k c j a W a l i d a c j i S c r e e n 2 C z y p o p r a w n a? N i e T a k «t r a c e» S c r e e n 1 LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 22

23 Projekt leksykalny - Akcje c d U s e r I n t e r f a c e «a c t i o n» : D o s t a w a. L i s t a. A k c j a p o k a z d o s t a w y. l i s t a L i s t a D o s t a w M o d e l P o r t 1 : : D o s t a w a. L i s t a. A k c j a + e x e c u t e ( ) : v o i d ( f r o m L o g i c a l M o d e l ) I M o d e l D o d a j E d y t u j D r u k u j Z a t w i e r d z p o k a z d o d a j «a c t i o n» D o s t a w a. L i s t a. A k c j a + e x e c u t e ( ) : v o i d p o k a z D o s t a w a. D o d a j D o s t a w a. P o z y c j a. U s u n D o s t a w c a K u r i e r D a t a p o k a z T a k N i e P o z y c j e u s u n «a c t i o n» : D o s t a w a. D o d a j. A k c j a D o d a j U s u ń E d y t u j Z a c h o w a j A n u l u j «a c t i o n» : D o s t a w a. D o d a j. A k c j a : : D o s t a w a. D o d a j. A k c j a + e x e c u t e ( ) : v o i d : : D o s t a w a. D o d a j. A k c j a + e x e c u t e ( ) : v o i d z a c h o w a j p o k a z «a c t i o n» D o s t a w a. D o d a j. A k c j a + e x e c u t e ( ) : v o i d LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 23

24 Projekt leksykalny - implementacja u i P r o j e k t w i z u a l n y D r o p D o w n L i s t «w w w» Z a m o w i e n i e B i l e t u D a t e T i m e P i c k e r M i e j s c e i d a t a w y l o t u : c b o M i e j s c e W y l o t u d t W y l o t C h e c k B o x M i e j s c e i d a t a d o c e l o w a : c b o M i e j s c e C e l d t C e l L i c z b a p r z e s i a d e k : c b o P r z e s i a d k i M o ż l i w o ś ć a n u l o w a n i a r e z e r w a c j i : F o r m a p ł a t n o ś c i : c h k A n u l o w a n i e R e z e r w a c j i K a r t a G o t o w k a P r z e l e w e K l a s a b i l e t u : c b o K l a s a c m d Z a t w i e r d z c m d A n u l u j «w w w» Z a m o w i n e i e B i l e t u K o l e j o w e g o Z a m o w i e n i e B i l e t u A u t o b u s o w e g o T y p o p o c i ą g u : c b o T y p P o c i a g u K l i m a t y z a c j a Z a m o w i e n i e B i l e t u L o t n i c z e g o J e d z e n i e : c b o W y z y w i e n i e LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 24

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