Podstawy Inżynierii Oprogramowania
Wykład 6/7  Interfejs użytkownika
Pojęcia podstawowe; klasyfikacje interfejsów
Ergonomia interfejsu (normy i zalecenia budowy interfejsu)
Projekt techniczny interfejsu
Przewodniki styli
Projektowanie nawigacji  maszyny stanów UML
Przykłady
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
1
Podstawy Inżynierii Oprogramowania
Prototyp interfejsu użytkownika
Cele:
- Weryfikacja modelu przypadków użycia
- Odkrywanie nowych wymagań użytkownika
Kroki:
- Projekt logicznego interfejsu użytkownika;
specyfikacja elementów i ich atrybutów, którymi
będzie manipulował użytkownik; np. faktury,
zamówienia itp.
- Projekt i budowa fizycznego interfejsu użytkownika;
szkice ekranów; budowa wykonywalnego prototypu
w celu walidacji interfejsu
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
2
Podstawy Inżynierii Oprogramowania
Definicja interfejsu użytkownika
INTERFEJS(styk, łącze) użytkownika  zespół narzędzi
programowych i sprzętowych, które umożliwiają komunikację
między człowiekiem i systemem informatycznym (ta część
systemu, którą człowiek bezpośrednioużywa)
Pożądane cechy interfejsu użytkownika:
-ascetyczny
-jasny (wizualnie, pojęciowo, lingwistycznie)
-kompatybilny z użytkownikiem
-zrozumiały
-konfigurowalny
-spójny
-kontrolowalny
-efektywny (ergonomia)
-przewidywalny
-powinien  wybaczać użytkownikowi błędy
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
3
Podstawy Inżynierii Oprogramowania
Interfejs użytkownika  cykl życia
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
4
Podstawy Inżynierii Oprogramowania
Kontekst projektowania interfejsu użytkownika
Kontekst użycia jest definiowany w terminach:
" użytkowników,
" zadań,
" środowiska: fizycznego, społeczno-kulturowego
Klasyfikacja użytkowników:
" nowi
" niedoświadczenie
" doświadczeni
" eksperci
Zalecane jest wykonanie analizy kosztów i korzyści planowanego
systemu.
W metodyce USDP/RUP elementy te sÄ… zawarte w wizji systemu.
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
5
Podstawy Inżynierii Oprogramowania
Kontekst projektowania interfejsu użytkownika (cd)
Charakterystyka użytkowników i zadań dla grupy kierowcy
y
ródło: Inżynieria oprogramowania, J. Górski
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
6
Podstawy Inżynierii Oprogramowania
Model konceptualny interfejsu
Mentalny model użytkownika (w skrócie MMU), to model
posiadany przez użytkownika wyrażający jego wiedzę o systemie,
w zakresie: " konstrukcji systemu, " oraz sposobów interakcji z nim.
Może być opisany w terminach obiektowych, np.
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
7
Podstawy Inżynierii Oprogramowania
Interfejs użytkownika - style interakcji
Tryb klawiszowy Bezpośrednia Lingwistyczna
manipulacja
Oparty na menu graficzna linia komend
Pytanie-odpowiedz
formularze tekstowa, język naturalny
Klawisze funkcyjne
Oparta na głosie
Wybór stylu interakcji
Wybór stylu jest podstawowy dla tworzenia interfejsu, jego
użyteczności, kosztu;
Jest szeroki zakres styli, lecz zwykle sprowadza siÄ™ do jednego lub
dwu.
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
8
Podstawy Inżynierii Oprogramowania
Interfejs użytkownika  łatwość użytkowania
elementy czynnik podczynnik kryteria
jakości
100% realizacji
niezawodność
użytkownik pomoc, dialog w
kontrolowal-
przenośność
nigdy siÄ™ nie komendach
ność
skuteczność
zgubił
jakoÅ›
ilość  kroków
użyteczność
efektywność odpowiedniość
średni czas =
dialogu
dla zadań 10 min
ć
satysfakcja
rodzaje
testowalność
użytkownik
tolerancja dla
przerywajÄ…cych
nigdy nie
błędów
komend
poczuł się
zablokowany
. . .
. . .
przeciętna
ocena 2.0
(w skali 1-5)
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
9
Podstawy Inżynierii Oprogramowania
Interfejs użytkownika - ergonomia
Ergonomia interfejsu użytkownika służy:
" wzbogaceniu użyteczności -> satysfakcja i produktywność
użytkownika
" uzyskaniu spójności między aplikacjami/systemami
" pomocÄ… w wyborze i nabyciu produktu
Ergonomię posługiwania się interfejsem należy uwzględnić przy:
" projektowaniu struktury ekranu,
" wyborze odpowiednich rodzajów okien,
" opracowywaniu menu,
" wyborze odpowiednich kontrolek,
" organizacji i wyglÄ…dzie okien,
" wyborze kolorów,
" tworzeniu ikon.
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
10
Podstawy Inżynierii Oprogramowania
Interfejs użytkownika - ergonomia
Ilość prezentowanej informacji
" minimalizacja ilości informacji
" skróty
" poziom szczegółowości
" słownictwo
" stosowania typowych formatów danych
Grupowanie informacji
" zastosowanie kolorów
" granice
" Rozjaśnianie
Uwydatnianie informacji
·ð zastosowanie kolorów
·ð podkreÅ›lanie
·ð migotanie
·ð rozjaÅ›nianie
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
11
Podstawy Inżynierii Oprogramowania
Interfejs użytkownika  ergonomia (cd)
Położenie i kolejność informacji Prezentacja tekstu
" kolejność wykorzystywania - duże litery
" typowość zastosowań - justowanie
" ważność - interlinia
" częstotliwość wykorzystywania - akapity
" ogólność prezentowanej informacji - długość linii
" uporzÄ…dkowanie
Zależności przestrzenne miedzy danymi Prezentacja grafiki
" wyrównanie i wcięcia - obrazy
" etykietowanie - piktogramy
" symetria - prezentacja
danych liczbow.
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
12
Podstawy Inżynierii Oprogramowania
Projekt techniczny interfejsu
Wybór:
- środowiska programowego
- stylu interakcji
- Jeśli WIMP (Windows, Icons, Menus, Poiting device)
-model zarzÄ…dzania oknami
- dobór okien
- narzędzi interakcji( metafory modelu konceptualnego)
- projekt ekranów
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
13
Podstawy Inżynierii Oprogramowania
Projekt techniczny  organizacja elementów
ekranu
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
14
Podstawy Inżynierii Oprogramowania
Projekt techniczny  organizacja elementów
ekranu
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
15
Podstawy Inżynierii Oprogramowania
Projekt techniczny  organizacja elementów
ekranu
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
16
Podstawy Inżynierii Oprogramowania
Projekt techniczny  dobór okien
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
17
Podstawy Inżynierii Oprogramowania
Projekt techniczny  dobór elementów
interakcji
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
18
Podstawy Inżynierii Oprogramowania
Projekt techniczny  dobór elementów
interakcji: menu
Wytyczne do wyboru menu:
·ð stosuj semantykÄ™ zadaÅ„ do organizowania menu
(pojedyncze, liniowe sekwencje, struktury drzewiaste, sieci
cykliczne i acykliczne)
·ð preferuj szerokie i pÅ‚ytkie niż wÄ…skie i gÅ‚Ä™bokie
·ð pokazuj pozycjÄ™ graficznie, liczbowo lub tytuÅ‚ami,
·ð używaj nazw elementów jako tytułów dla drzew
·ð stosuj znaczÄ…ce grupowanie elementów,
·ð stosuj znaczÄ…ce sekwencjonowanie elementów
·ð twórz elementy krótkie zaczynajÄ…ce siÄ™ sÅ‚owami,
·ð stosuj spójnÄ… gramatykÄ™, wyglÄ…d, terminologiÄ™,
·ð pozwól na pisanie-w- przód, skoki-w-przód i inne skróty,
·ð pozwól na skok do poprzedniego i głównego menu,
·ð rozważ pomoc on-line, mechanizm wyboru noweli, czas
odpowiedzi, szybkość wyświetlania i rozmiar ekranu
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
22
Podstawy Inżynierii Oprogramowania
Projekt techniczny  dobór elementów
interakcji: listy
Lista: klasa JList oparta na współpracy modelu danych listy z
widokiem tych danych. Elementy: teksty i/lub obrazki, a nawet
inne komponenty GUI (wygląd). Różne elementy listy mogą
mieć różny wygląd (kolor, pismo, obrazek lub nie etc).
Lista rozwijalna: JComboBox
oszczędność miejsca w GUI te same właściwości co lista +
możliwość przechodzenia do elementu tekstowego po
wciśnięciu pierwszej litery napisu, który on reprezentuje
Tabela: klasa JTable
Ogromne możliwości konfiguracyjne, przestawianie kolumn
(myszką i programistycznie), różny wygląd kolumn (teksty,
obrazki, komponenty interakcyjne), sortowanie wierszy,
wielozaznaczanie (po wierszach i po kolumnach)
Drzewo: klasa JTree
Reprezentowanie hierarchii. Węzły drzewa mają te same
właściwości co elementy tabeli (tzn. mogą być reprezentowane
w postaci napisów i/lub ikon oraz innych komponentów)
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
23
Podstawy Inżynierii Oprogramowania
Projekt techniczny  dobór elementów
interakcji: ikony
Ikona odzwierciedla obiekty, idee i działania, które nie są nowe dla
człowieka.
Ikona, by spełniła swoje zadanie :
" powinna wyglądać odmiennie od innych,
" oddawać to, czym jest lub co reprezentuje,
" być rozpoznawalna, jeśli jest mnie większa niż 16x16pikseli
" wyglądać dobrze zarówno czarno-biało jak i w kolorze.
Prezentacja ekranowa ikon powinna:
" być w zgodzie z ogólnymi zasadami projektowania ekranu,
" być ograniczona do liczby symboli do 12 (max 20),
" odpowiednio zaaranżować układ ikon (znacząco, spójnie),
" umieszczać ikony obiektów i działania w innych grupach,
" pozwolić na aranżację ikon użytkownikowi,
" pozwolić użytkownikowi na wybór w wyświetlaniu: ikony czy tekst.
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
25
Podstawy Inżynierii Oprogramowania
Interfejs użytkownika 
przewodniki styli i standardy
Przewodniki styli obejmujÄ… powszechnie
akceptowane reguły, stosowane podczas
opracowywania np. interfejsu, kodu.
Standardy  zatwierdzone przez organizacje
normalizacyjną zbiór reguł, pojęć i zasad ; dla
interfejsu użytkownika opracowano standard
ISO/IEC 9241, 17-częściowy; część 4 dotyczy menu
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
26
Podstawy Inżynierii Oprogramowania
Przewodniki styli  cel i zalety stosowania
Przewodnik stylu może służyć jako:
1. Narzędzie zapewnienia spójności w zbiorze produktów;
2. Sposób uzyskania współpracy w grupie;
3. Repozytorium dla norm i zaleceń projektowych
4. Pomoc w szkoleniu nowych członków zespołu
Uzytkownicy końcowi Wytwórcy Zespół klientów
Redukcja błędów Utrzymywania kontroli nad  look &feel Wytworzenie użytecznych systemów
które redukują koszty wspierania i
zwiększają satysfakcje klientów
Mniejsza frustracja Minimalizacja  nowych pomysłów Zwiększenie zainteresowania rynku
Zwiększone morale Nacisk na naukę Zwiększenie zainteresowania produktem
Poprawiona wydajność Umożliwia produkcję produktów Zmniejszony koszt szkoleń
 ponownego użycia
Zwiększone zaufanie Redukcja czasu wytwarzania Polepszenie personelu
Zredukowany opór do Redukcja arbitralnych decyzji Zwiększenie stopnia akceptacji nowych
nowych technologii projektowych technologii przez użytkownika
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
27
Podstawy Inżynierii Oprogramowania
Przewodniki styli do projektowania interfejsu
JAX related Usability Guidelines (What is Ajax?)
More Ajax Usability Guidelines
Ten good practices for writing (AJAX) JavaScript in 2005
AJAX Usability Guidelines and Ajax Patterns
Related: How to add groovy Scriptaculous effects
Microsoft Windows Usability Guidelines
Windows XP Guidelines for Applications
Microsoft Vista User Experience (UI) Guidelines
Sun Microsystems- Java related
Java Look and Feel Guidelines (Version 1) http://java.sun.com/products/jlf/ed1/dg/index.htm
Java Look and Feel Guidelines (Version 2)
Java Look and Feel Guidelines: Advanced Topics
Java Swing related UI style guides
A Java Swing GUI Framework
Sun Java Look and Feel Class Reference
Creating a Custom Look and Feel with Java Swing
Using Java Swing's Pluggable Look and Feel
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
28
Podstawy Inżynierii Oprogramowania
Przewodniki styli  pakiet SWING (JAVA)
javax.swing - opublikowany w lipcu 1997r.
Swing zapewnia:
" zbiór kontrolek do tworzenia zaawansowanych GUI:
tabele, listy, drzewa, taby, etc &
" rozbudowaną funkcjonalność do pracy z tekstem
" wsparcie dla wielonarodowości (języki, odpowiedni
układ elementów)
" look & feels (zaawansowane l n f z synth)
" Java 2D (Swing został zbudowany na tym pakiecie)
" Mechanizm do przywracania i ponawiania operacji
(undo & redo)
" wsparcie dla osób niepełnosprawnych (lupa, syntezator,
wyświetlanie informacji na wyświetlaczu brile a)
" transfer danych: operacja wklej, wytnij, drag&drop
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
29
Podstawy Inżynierii Oprogramowania
Pakiety Javy dla interfejsu
JFC
http://java.sun.com/products/jlf/ed1/dg/index.htm
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
30
Podstawy Inżynierii Oprogramowania
Projekt nawigacji po interfejsie
Narzędzie modelowania nawigacji:
Maszyna stanów UML
" Przeznaczenie
 do opisu (wewnętrznego) zachowania obiektów pewnej klasy lub metod, w
terminach zmian stanów zachodzących pod wpływem nadchodzących zdarzeń
" Składowe
 stany (states)
 przejścia (transitions)
 zdarzenia (events)
" Specyfikacja  diagram maszyny stanów
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
Podstawy Inżynierii Oprogramowania
Diagram stanów - elementy składowe
" Pseudostany
 początkowy (initial) i stan końcowy (final)
 rozgałęzienia (fork) i złączenia (join)
 rozgałęzienia warunkowego (branch)
 historyczny płytki (shallow history)
i głęboki (deep history)
H
" Stan - (opcjonalne) części składowe
H*
 nazwa
 aktywność wykonywana przy wejściu do stanu
 entry  / activity-expression
 aktywność wykonywana przy wyjściu ze stanu
 exit  / activity-expression
 przejścia wewnętrzne
event-name argument-list  [ guard-condition  ]  /
action-expression
 aktywność wewnętrzna wykonywana w stanie
 do  / activity-expression
 zdarzenia odroczone
event-name argument-list  /  defer
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
Podstawy Inżynierii Oprogramowania
Maszyny stanów  przejścia i kolejność
wykonywania aktywności
StateName
Entry/
EntryActivit
/ Action-A / Action-F
Exit/
ExitActivity
y
do/ InternalActivity
Event( EventActivity
Args ) /
1. Action-A
2. EntryActivity
3. InternalActivity
4. ExitActivity
5. Action-F
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
Podstawy Inżynierii Oprogramowania
Maszyna stanów - przykład
Inc() Inc()
Clock
hour
Set Minutes
Set Hours
Mode() minute
Entry / display_min()
Entry / display_hrs()
mode()
inc()
display_min()
Mode() Mode()
display_hrs()
display_time()
Display
Entry / display_time()
Inc()
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
Podstawy Inżynierii Oprogramowania
Maszyny stanów  przykład Bankomat
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
39
Podstawy Inżynierii Oprogramowania
Maszyna stanów - przykład
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
41
Podstawy Inżynierii Oprogramowania
Maszyny stanów - przykład
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
42
Podstawy Inżynierii Oprogramowania
Maszyna stanów  przykład dla interfejsu
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
Podstawy Inżynierii Oprogramowania
Diagram maszyny stanów  notacja
Instytut Informatyki, Wydział Informatyki i Zarządzania,
2012/2013
46