Projektowanie Graficznych Interfejsów Użytkownika

Transkrypt

Projektowanie Graficznych Interfejsów
Użytkownika
Robert Szmurło
LATO 2007
1
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
LATO 2007
Implementacja
2
User Centered Design (UCD)
●
1) Analiza zadań
●
2) Szkice projektu
●
3) Papierowy prototyp
●
4) Testy wewnętrzne
●
5) Prototyp komputerowy
●
6) Ewaluacja heurystyczna
●
●
7) Implementacja
8) Testy z użytkownikami
LATO 2007
Projekt
1
8
6
4
Ewaluacja
2
3
5
7
Implementacja
3
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
4
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
5
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
6
●
–
(aktorów)
–
(co musi być zrobione, wymagania)
–
–
LATO 2007
7
Cele użytkowników (A)
●
●
Co musi zrobione? - CEL!
Co musi być zrobione aby coś innego
było możliwe? - Warunki
●
●
●
●
Jakich informacji potrzebuje użytkownik
aby wykonać zadanie?
Z jakich etapów składa proces wykonania zadania?
–
●
Od jakich innych czynności zależy
dane zadanie?
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
8
●
–
(aktorów)
–
(oczekiwania)
–
czynności użytkownika i zbuduj diagram czynności
–
LATO 2007
9
●
–
(aktorów)
–
(oczekiwania)
–
–
(które stają się częścią formalnej specyfikacji wymagań)
LATO 2007
10
Projekt funkcjonalny (B)
●
Projekt funkcjonalny (semantyczny) – zdefiniowanie operacji na
–
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
11
Projekt funkcjonalny (B)
●
–
użytkownik
–
jakie użytkownik
–
–
systemem
–
LATO 2007
12
Projekt funkcjonalny (C)
●
–
użytkownik
–
jakie użytkownik
–
–
systemem
–
LATO 2007
13
Projekt funkcjonalny (C)
●
–
użytkownik
–
jakie użytkownik
–
–
systemem
–
LATO 2007
14
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
15
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
16
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 3
Obiekt 2
Obiekt 1
Obiekt 1
Obiekt 2
Obiekt 1
Obiekt 3
Obiekt 1
Obiekt 2
Obiekt 3
Obiekt 1
Obiekt 1
Obiekt 1
LATO 2007
17
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ą:
–
–
LATO 2007
scenopisów (np. „storyborads”)
●
dokumenty tekstowe
●
prezentacja OpenOffice Impress lub PowerPoint itp.
prototypów
18
„Storyboard” (D)
LATO 2007
19
„Storyboard” - Przykład 2 (D)
LATO 2007
20
Projekt leksykalny
Cel: mapowanie elementów interfejsu graficznego z
elementami architektury systemu: akcje, kontrolki
stosowane dla odpowiednich elementów
graficznych.
LATO 2007
21
Projekt leksykalny - Akcje
u i P ro j e k t le k s y k a ln y
«w w w »
Z a m o w ie n ie B ile tu
c m d Z a tw ie rd z
c m d A n u lu j
( f r o m P r o je k t w i z u a l n y )
« tra c e »
« tra c e »
« n a v ig a te »
« in sta n tia te »
S c re e n 2
« G U IA c tio n »
A k c j a W a lid a c j i
W a lid a c j a D a n y c h
C z y p o p ra w n a ?
T ak
« tra c e »
S c re e n 1
N ie
LATO 2007
22
Projekt leksykalny - Akcje
c d U s e r In te r fa c e
p o ka z
d o s ta w y .lis ta
M odel
« a c tio n »
:D o s ta w a .L is ta .A k c j a
P o rt1
L ista D o sta w
(fro m L o g ic a l M o d e l)
: : D o s t a w a . L i s t a . A k c ja
+
e x e c u te () : v o id
IM o d e l
D o daj
E d y tu j
D ru ku j
Z a tw ie rd z
p o ka z
do daj
« a c tio n »
D o s ta w a .L is ta .A k c ja
+
p o ka z
D o s ta w a .P o z y c j a .U s u n
D o s ta w a .D o d a j
D o sta w c a
N ie
T ak
K u rie r
p o ka z
D a ta
P o z y c je
u su n
« a c tio n »
:D o s ta w a .D o d a j .A k c j a
D od aj
U su ń
E d y tu j
« a c tio n »
:D o s ta w a .D o d a j .A k c j a
Zachow a j
: : D o s t a w a . D o d a j. A k c ja
+
: : D o s t a w a . D o d a j. A k c ja
+
A n u lu j
« a c tio n »
zacho w a j
D o s ta w a .D o d a j.A k c ja
+
p o ka z
LATO 2007
23
Projekt leksykalny - implementacja
u i P r o j e k t w iz u a ln y
D r o p D o w n L is t
«w w w »
D a te T im e P ic k e r
Z a m o w ie n ie B ile tu
M ie jsc e i d a ta w y lo tu :
c b o M ie jsc e W y lo tu
d tW y lo t
M ie jsc e i d a ta d o c e lo w a :
c b o M ie jsc e C e l
d tC e l
L ic z b a p rz e sia d e k:
c b o P rz e sia d ki
M o ż liw o ść a n u lo w a n ia
re z e rw a c j i:
c h kA n u lo w a n i e R e z e rw a c ji
CheckBox
K a rta
F o rm a p ła tn o śc i:
G o to w ka
c b o K la sa
K la sa b ile tu :
c m d Z a tw ie rd z
c m d A n u lu j
«w w w »
Z a m o w ie n ie B ile tu A u to b u s o w e g o
Z a m o w in e i e B ile tu K o le j o w e g o
T y p o p o c ią g u :
P rz e le w e
K lim a ty z a c ja
c b o T y p P o c ia g u
Z a m o w ie n i e B ile tu L o tn ic z e g o
J e d ze n ie :
LATO 2007
c b o W y z y w ie n ie
24
Interakcja
●
Dziękuję za uwagę.
●
Chcemy być coraz lepsi!
●
Jeżeli coś cię zainteresowało napisz e-maila:
–
●
Jeżeli coś cię bardzo znudziło napisz e-maila:
–
●
[email protected]
[email protected]
Jeżeli zauważyłeś błąd napisz e-maila:
–
LATO 2007
[email protected]
25

Projektowanie Graficznych Interfejsów Użytkownika

Transkrypt

Podobne dokumenty

Babie lato Na pajęczych nitkach odlatuje lato . Dokąd leci , kto to wie