Projektowanie Graficznych Interfejsów Użytkownika

Transkrypt

Projektowanie Graficznych Interfejsów
Użytkownika
Robert Szmurło
LATO 2007
1
Plan szczegółowy
●
Projektowanie UI (1h)
●
●
●
●
LATO 2007
Rozszerzona powtórka
Projekt Wizualny
Projekt Leksykalny
Ćwiczenie w Enterprise Architect
2
UCD - User Centered Design
●
1) User Centered Design – Projekt Skoncentrowany na Użytkowniku
●
2) Model Centered Design – Projekt Oparty na Modelach
Projekt
Ewaluacja
LATO 2007
Implementacja
3
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
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
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
6
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
7
●
–
(aktorów)
–
(co musi być zrobione, wymagania)
–
–
LATO 2007
8
Cele użytkowników (A)
●
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?
● 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
9
●
–
(aktorów)
–
(oczekiwania)
–
Diagram
czynności
–
LATO 2007
10
●
–
(aktorów)
–
(oczekiwania)
–
–
(które stają się częścią formalnej specyfikacji wymagań)
LATO 2007
11
Projekt funkcjonalny (B)
●
Projekt funkcjonalny (semantyczny) – zdefiniowanie operacji na
–
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
12
●
–
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
–
użytkownik aby ukończyć zadanie
–
z systemem
–
LATO 2007
13
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
14
Jak tworzyć model obiektów użytkownika? (B)
Obiekt
Atrybuty
●
●
Operacje
Relacja
(kompozycja
składa się z)
Liczebność
●
●
●
●
LATO 2007
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
15
Jak tworzyć model obiektów użytkownika? (B)
●
●
LATO 2007
Dla zależności wiele do
wielu zaleca się
określenie innego obiektu
łączącego
Najczęściej
wykorzystywane są
dotychczasowo
wykorzystywane w firmie
formularze
16
–
1) Obiekty Użytkownika - określ obiekty którymi operuje
użytkownik
–
jakie użytkownik
–
–
z systemem
–
LATO 2007
17
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
18
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
19
Diagram czynności – Przykład 2 (B)
●
Przykład aplikacji typu FlashCard.
LATO 2007
20
●
–
1) Obiekty Użytkownika - określ obiekty/elementy/pojęcia którymi
operuje użytkownik
–
jakie użytkownik
–
–
z systemem
–
LATO 2007
21
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
22
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
23
Jak tworzyć widoki abstrakcyjne? (B)
Zależność,
który aktor
używa widoku
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
24
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.
–
z systemem
–
LATO 2007
25
●
zmiany.
–
z systemem
–
LATO 2007
26
●
zmiany.
–
z systemem
–
2) Stany Obiektów - co dzieje się z danymi obiektami w trakcie
LATO 2007
27
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
28
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
29
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
30
Identyfikacja obiektów (D)
●
Przeanalizujmy interfejs sklepu internetowego wyodrębniając z
niego odpowiednie widoki.
LATO 2007
31
Logo serwisu (D)
LATO 2007
32
Panel nawigacyjny (D)
LATO 2007
33
Reklama (D)
LATO 2007
34
Widok panelu wyszukiwania (D)
LATO 2007
35
Widok panelu ofert z zagnieżdżonymi widokami pojedynczych ofert
(D)
LATO 2007
36
Widok reklam tematycznych (D)
LATO 2007
37
I jeszcze kilka innych... (D)
LATO 2007
38
Projekt abstrakcyjny dla przykładu (D)
stm sklep.benchmark.pl
« Wid o k»
Logo
« Wi do k»
Reklama
PanelWyszukiwaniaProduktu
« Wid o k»
GłównySklepu
« Wid o k»
MenuGlowne
+
+
+
+
+
+
+
+
+
ko nfig u ra 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 ra n sp o rtPla tno sci ra ty() : vo id
Wsp a rcie () : vo id
Dla przykładu
udokumntowane
elementy
funkcjonalne
MenuGlownego.
« Wi d ok»
PanelOfert
« Wid o k»
OfertyDnia
« Wid o k»
ReklamyTematyczne
« Wid o k»
Oferta
« Wid o k»
OfertaDnia
LATO 2007
«Wid o k»
ReklamaTematyczna
39
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”)
●
●
–
LATO 2007
dokumenty tekstowe
prezentacja OpenOffice Impress lub PowerPoint itp.
prototypów
40
„Storyboard” (D)
LATO 2007
41
„Storyboard” - Przykład 2 (D)
LATO 2007
42
Projekt leksykalny
Cel: mapowanie elementów interfejsu graficznego z
elementami architektury systemu: akcje, kontrolki
stosowane dla odpowiednich elementów
graficznych.
LATO 2007
43
Projekt leksykalny – Akcje (E)
ui Proj ekt leksykalny
«www»
ZamowienieBiletu
cm dZatwierdz
cm dAnuluj
(from P rojekt w izualny)
«trace»
«trace»
«navigate»
«instantiate»
Screen2
«GUIAction»
Akcj aWalidacj i
Walidacj aDanych
Czy poprawna?
T ak
«trace»
Screen1
Nie
LATO 2007
44
Projekt leksykalny – Akcje (E)
cd User Interface
po kaz
dostaw y.lista
Model
« acti o n»
:Dostawa.Lista.Akcj a
Po rt1
L i sta Dostaw
(fro m L ogi cal Mode l )
::Dosta w a .Li sta .Akcja
+ exe cute () : vo i d
IM od el
Dod aj
Edytu j
Dru ku j
Zatwi erd z
p okaz
dod aj
« acti o n»
Dostawa.Lista.Akcja
+
exe cute () : vo i d
po kaz
Dostawa.Pozycj a.Usun
Dostawa.Dodaj
Dostawca
Ni e
T ak
Kuri er
p okaz
Data
Pozycj e
u sun
« acti o n»
:Dostawa.Dodaj .Akcj a
Dod aj
Usuń
Edytu j
«a cti on »
:Dostawa.Dodaj .Akcj a
Zachowaj
::Do staw a.Dod aj.Akcja
+ execute() : voi d
::Dostaw a.Doda j.Akcja
+ execute() : voi d
An ul uj
«a cti on »
zachowa j
Dostawa.Dodaj.Akcja
+
exe cute() : vo i d
po ka z
LATO 2007
45
Projekt leksykalny – implementacja (E)
ui Proj ekt wizualny
DropDownList
«www»
DateTimePicker
ZamowienieBiletu
M i ejsce i da ta wylo tu:
cbo M ie jsce Wylo tu
dtWylot
M iejsce i da ta do ce lowa :
cbo M ie jsce Ce l
dtCel
L iczb a p rze sia dek:
cbo Prze siad ki
M ożliwo ść a nu lowan ia
re zerwa cji :
chkA nu lowa nie Reze rwacji
CheckBox
Ka rta
Fo rm a pł atn ości:
Go towka
cbo Kla sa
Kla sa b ile tu:
cm dZatwi erd z
cm dAn ulu j
«www»
ZamowienieBiletuAutobusowego
ZamowineieBiletuKolej owego
T ypo po cią gu :
Prze lewe
Kli m a tyzacja
cbo T yp Pocia gu
ZamowienieBiletuLotniczego
Jed ze nie :
LATO 2007
cb oWyzywien ie
46
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]
47

Projektowanie Graficznych Interfejsów Użytkownika

Transkrypt

Podobne dokumenty

Web Designer - Grafik - kariera.uni.opole.pl

Lato w muzeum - Malowanie na szkle 9.07.2015

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

Film z Akcji Lato (zobacz!)

Projektowanie Graficznych Interfejsów Użytkownika

kliknij

Projektowanie Graficznych Interfejsów Użytkownika