Wykład 6 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 2009/2010 1
Prototyp interfejsu uŝytkownika Cele: Kroki: - Weryfikacja modelu przypadków uŝycia - Odkrywanie nowych wymagań uŝytkownika - 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 2009/2010 2
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 2009/2010 3
Interfejs uŝytkownika cykl Ŝycia 2009/2010 4
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. 2009/2010 5
Kontekst projektowania interfejsu uŝytkownika (cd) Charakterystyka uŝytkowników i zadań dla grupy kierowcy Źródło: InŜynieria oprogramowania, J. Górski 2009/2010 6
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. 2009/2010 7
Interfejs uŝytkownika - style interakcji Tryb klawiszowy Bezpośrednia Lingwistyczna manipulacja Oparty na menu graficzna linia komend Pytanie-odpowiedź 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. 2009/2010 8
Interfejs uŝytkownika łatwość uŝytkowania elementy jakości niezawodność czynnik podczynnik kryteria 100% realizacji przenośność skuteczność kontrolowalność uŝytkownik nigdy się nie zgubił pomoc, dialog w komendach jakoś uŝyteczność efektywność odpowiedniość dla zadań średni czas = 10 min ilość kroków dialogu testowalność... satysfakcja tolerancja dla błędów... uŝytkownik nigdy nie poczuł się zablokowany rodzaje przerywających komend przeciętna ocena 2.0 (w skali 1-5) 2009/2010 9
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. 2009/2010 10
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 2009/2010 11
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. 2009/2010 12
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 2009/2010 13
Projekt techniczny organizacja elementów ekranu 2009/2010 14
Projekt techniczny organizacja elementów ekranu 2009/2010 15
Projekt techniczny organizacja elementów ekranu 2009/2010 16
Projekt techniczny dobór okien 2009/2010 17
Projekt techniczny dobór elementów interakcji 2009/2010 18
Projekt techniczny dobór elementów interakcji: pola tekstowe, podpowiedzi (JAVA) 2009/2010 19
Projekt techniczny dobór elementów interakcji: przyciski, menu (JAVA) Przyciski JButton, JToggleButton, JCheckBox, JRadioButton - tekst i/lub ikona na przycisku z dowolnym pozycjonowaniem - róŝne ikony dla róŝnych stanów (wciśnięty, kursor myszko nad przyciskiem etc) - ustalanie tekstu w HTML - programistyczne symulowanie kliknięć (metoda doclick()) - ustalanie mnemoniki (metoda setmnemonic()) Suwak: klasa JSlider Ustalanie wartości za pomocą suwaka. W pełni konfigurowalny, jako etykiety moŝe zawierać ikony. Menu: JMenu, JMenuItem, JChceckBoxMenuItem, JRadioMenuItem. Pochodzą od AbstractButton wszystkie właściwości przycisków! Menu kontekstowe: klasa JPopupMenu 2009/2010 20
Projekt techniczny rozkład przycisków (JAVA) 2009/2010 21
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 2009/2010 22
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) 2009/2010 23
Projekt techniczny dobór elementów interakcji 2009/2010 24
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. 2009/2010 25
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 2009/2010 26
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 Redukcja błędów Mniejsza frustracja Zwiększone morale Poprawiona wydajność Zwiększone zaufanie Zredukowany opór do nowych technologii Wytwórcy Utrzymywania kontroli nad look &feel Minimalizacja nowych pomysłów Nacisk na naukę UmoŜliwia produkcję produktów ponownego uŝycia Redukcja czasu wytwarzania Redukcja arbitralnych decyzji projektowych Zespół klientów Wytworzenie uŝytecznych systemów które redukują koszty wspierania i zwiększają satysfakcje klientów Zwiększenie zainteresowania rynku Zwiększenie zainteresowania produktem Zmniejszony koszt szkoleń Polepszenie personelu Zwiększenie stopnia akceptacji nowych technologii przez uŝytkownika 2009/2010 27
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 2009/2010 28
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 2009/2010 29
Pakiety Javy dla interfejsu JFC http://java.sun.com/products/jlf/ed1/dg/index.htm 2009/2010 30
Kategorie okien przykład (Java) http://java.sun.com/products/jlf/ed1/dg/index.htm 2009/2010 31
Kategorie elementów okna- przykład 2009/2010 32
Struktura okna- przykład Np., okno główne aplikacji ma organizację: ramka okna zawiera listwę (bar) menu i panel listwa menu zawiera menu panel zawiera toolbar i scroll pane oraz scrollbar toolbar zawiera przyciski narzędzi scroll pane zawiera edytor pane wraz z edytorem tor plug-in kit dla tekstu stylizowanego http://java.sun.com/products/jlf/ed1/dg/index.htm 2009/2010 33
Struktura okna- przykład http://java.sun.com/products/jlf/ed1/dg/index.htm 2009/2010 34
Struktura komponentu JFC Model MVC!! 2009/2010 35