Projektowanie interfejsu użytkownika (1)

[email protected]

[email protected]

Projektowanie Projektowanie interfejsu interfejsu

użytkownika (1)użytkownika (1)

Jarosław KuchtaJarosław Kuchta

Dokumentacja i Jakość Dokumentacja i Jakość OprogramowaniaOprogramowania

Dokumentacja i Jakość Oprogramowania 2/27

Projektowanie interfejsu użytkownika (1)

Charakterystyki Charakterystyki użytkownikówużytkowników

Nazwa użytkownikaNazwa użytkownika Cel korzystania z systemuCel korzystania z systemu KlasyfikacjaKlasyfikacja

przynależność organizacyjnaprzynależność organizacyjna doświadczenie i umiejętnościdoświadczenie i umiejętności uprawnienia decyzyjneuprawnienia decyzyjne

Dodatkowe cechy Dodatkowe cechy wiekwiek poziom wykształceniapoziom wykształcenia zastrzeżeniazastrzeżenia

Krytyczne czynniki powodzeniaKrytyczne czynniki powodzenia potrzeby i możliwościpotrzeby i możliwości preferencje i uprzedzeniapreferencje i uprzedzenia

Scenariusze zadańScenariusze zadań



Podstawowe zasady Podstawowe zasady projektowania interfejsu projektowania interfejsu

użytkownikaużytkownika WyglądWygląd –– i interfejs powinien być podzielony na różne obszary nterfejs powinien być podzielony na różne obszary

przeznaczone do różnych celów.przeznaczone do różnych celów. Uświadamianie zawartościUświadamianie zawartości – – i interfejs powinien uświadamiać nterfejs powinien uświadamiać

użytkownika, w którym miejscu się znajduje i co oznaczają użytkownika, w którym miejscu się znajduje i co oznaczają prezentowane informacje.prezentowane informacje.

EstetykaEstetyka – interfejs powinien zapewniać równowagę pomiędzy – interfejs powinien zapewniać równowagę pomiędzy ilością prezentowanej informacji a jej atrakcyjnością wizualną.ilością prezentowanej informacji a jej atrakcyjnością wizualną.

Doświadczenie użytkownikaDoświadczenie użytkownika – interfejs powinien uwzględniać – interfejs powinien uwzględniać zarówno łatwość nauki dla początkujących jak i łatwość użycia dla zarówno łatwość nauki dla początkujących jak i łatwość użycia dla doświadczonych użytkowników.doświadczonych użytkowników.

SpójnośćSpójność – interfejs powinien być spójny dla ułatwienia – interfejs powinien być spójny dla ułatwienia użytkownikowi przewidywania skutków podejmowanych przez niego użytkownikowi przewidywania skutków podejmowanych przez niego działań.działań.

Minimalizacja wysiłkuMinimalizacja wysiłku – interfejs powinien ułatwiać działania – interfejs powinien ułatwiać działania użytkownika, tak by ilość kroków wiodących do osiągnięcia celu była użytkownika, tak by ilość kroków wiodących do osiągnięcia celu była jak najmniejsza.jak najmniejsza.



Podział interfejsu na Podział interfejsu na obszaryobszary

Obszar nawigacjiprzeglądarki

Obszar nawigacjistrony

Obszar statusuprzeglądarki

Obszar nawigacjistrony Obszar nawigacji

strony

Obszar informacyjny strony



Zasady podziałuZasady podziału Każdy obszar powinien mieć jasno wytyczone Każdy obszar powinien mieć jasno wytyczone

granice.granice. Każdy obszar powinien mieć jasno określone Każdy obszar powinien mieć jasno określone

przeznaczenie.przeznaczenie. Każdy obszar powinien zawierać tylko te Każdy obszar powinien zawierać tylko te

informacje, które są potrzebne do realizacji informacje, które są potrzebne do realizacji określonego przeznaczenia.określonego przeznaczenia.

Obszary informacyjne powinny być Obszary informacyjne powinny być uszeregowane w kolejności przetwarzania tej uszeregowane w kolejności przetwarzania tej informacji przez użytkownika (z góry w dół, od informacji przez użytkownika (z góry w dół, od lewej do prawej).lewej do prawej).



Zasady uświadamiania Zasady uświadamiania zawartości (1)zawartości (1)

Wszystkie okna i raporty muszą mieć tytuły Wszystkie okna i raporty muszą mieć tytuły jednoznacznie identyfikujące ich zawartość.jednoznacznie identyfikujące ich zawartość.

Menu musi pokazywać, w którym miejscu Menu musi pokazywać, w którym miejscu jest użytkownik (i jak się tu dostał).jest użytkownik (i jak się tu dostał).

Przyciski powinny mieć napisy Przyciski powinny mieć napisy identyfikujące ich funkcje. Jeśli napisy te nie identyfikujące ich funkcje. Jeśli napisy te nie są pokazywane cały czas na ekranie, to są pokazywane cały czas na ekranie, to powinny być pokazywane przy najechaniu powinny być pokazywane przy najechaniu na przycisk wskaźnikem myszy.na przycisk wskaźnikem myszy.

Przyciski odpowiedzi na oknach Przyciski odpowiedzi na oknach komunikatów powinny być łatwo komunikatów powinny być łatwo interpretowane w kontekście treści interpretowane w kontekście treści komunikatu.komunikatu.



Zasady uświadamiania Zasady uświadamiania zawartości (2)zawartości (2)

Forma informacji na sąsiadujących obszarach Forma informacji na sąsiadujących obszarach powinna być różna (np. tekst-grafika, różne powinna być różna (np. tekst-grafika, różne czcionki). Rozróżnianie kolorem nie jest czcionki). Rozróżnianie kolorem nie jest wystarczające.wystarczające.

Jeśli informacje na sąsiadujących obszarach są Jeśli informacje na sąsiadujących obszarach są podobne w formie, to muszą być oddzielone podobne w formie, to muszą być oddzielone dodatkowym elementem (np. linią).dodatkowym elementem (np. linią).

Każde pole edycji musi mieć etykietę Każde pole edycji musi mieć etykietę jednoznacznie identyfikującą zawartość pola.jednoznacznie identyfikującą zawartość pola.

Pola edycji, których format wewnętrzny nie jest Pola edycji, których format wewnętrzny nie jest oczywisty (np. pola z datą), muszą mieć dodatkowe oczywisty (np. pola z datą), muszą mieć dodatkowe oznaczenie formatu wprowadzanych danych.oznaczenie formatu wprowadzanych danych.

Raporty powinny mieć datę sporządzenia.Raporty powinny mieć datę sporządzenia.



Zasady estetyki (1)Zasady estetyki (1) Interfejs użytkownika powinien być zarówno Interfejs użytkownika powinien być zarówno

funkcjonalny jak i „przyjemny dla oka”.funkcjonalny jak i „przyjemny dla oka”. Ilość wolnego miejsca pomiędzy elementami Ilość wolnego miejsca pomiędzy elementami

interfejsu powinna być dostosowana do interfejsu powinna być dostosowana do wymagań użytkownika (50% dla wymagań użytkownika (50% dla początkujących, 10% dla zaawansowanych).początkujących, 10% dla zaawansowanych).

Należy unikać tworzenia formularzy lub Należy unikać tworzenia formularzy lub raportów dużych, zawierających ponad 50 pól raportów dużych, zawierających ponad 50 pól danych. Formularz lub raport powinien danych. Formularz lub raport powinien zawierać tylko informacje, które mogą być zawierać tylko informacje, które mogą być jednorazowo przetworzone przez człowieka.jednorazowo przetworzone przez człowieka.



Zasady estetyki (2)Zasady estetyki (2) Tekst główny powinien być prezentowany Tekst główny powinien być prezentowany

czcionką 8-10 punktową. Na formularzach czcionką 8-10 punktową. Na formularzach powinna być używana czcionka bezszeryfowa, powinna być używana czcionka bezszeryfowa, na raportach – czcionka szeryfowa. na raportach – czcionka szeryfowa.

Należy unikać stosowania więcej niż dwóch Należy unikać stosowania więcej niż dwóch różnych czcionek. Stanowczo trzeba unikać różnych czcionek. Stanowczo trzeba unikać czcionek ozdobnych, lecz trudnych do czytania.czcionek ozdobnych, lecz trudnych do czytania.

Stosowane kolory powinny być stonowane Stosowane kolory powinny być stonowane (kontrastowe zwracają uwagę, lecz są męczące (kontrastowe zwracają uwagę, lecz są męczące dla oka).dla oka).

Kolor nie może być jedynym wyróżnikiem Kolor nie może być jedynym wyróżnikiem informacji. Interfejs użytkownika nie może informacji. Interfejs użytkownika nie może ukrywać informacji przed osobami cierpiącymi ukrywać informacji przed osobami cierpiącymi na daltonizm.na daltonizm.



Doświadczenie Doświadczenie użytkownika (1)użytkownika (1)

Interfejs użytkownika powinien być łatwy do nauczenia Interfejs użytkownika powinien być łatwy do nauczenia się posługiwania się nim przez początkujących się posługiwania się nim przez początkujących użytkowników.użytkowników.

Interfejs użytkownika powinien ułatwiać i przyspieszać Interfejs użytkownika powinien ułatwiać i przyspieszać wykonywanie działań przez zaawansowanych wykonywanie działań przez zaawansowanych użytkowników.użytkowników.

Menu powinno składać się nie więcej niż z trzech Menu powinno składać się nie więcej niż z trzech poziomów w przypadku menu głównego i nie więcej niż z poziomów w przypadku menu głównego i nie więcej niż z dwóch poziomów w przypadku menu kontekstowych. dwóch poziomów w przypadku menu kontekstowych.

Menu powinno prezentować wszystkie dostępne funkcje Menu powinno prezentować wszystkie dostępne funkcje aplikacji, tzn. nie powinno być takiej funkcji, do której aplikacji, tzn. nie powinno być takiej funkcji, do której nie można by się było dostać z menu.nie można by się było dostać z menu.

Menu na każdym poziomie powinno zawierać nie więcej Menu na każdym poziomie powinno zawierać nie więcej niż kilka pozycji. W przypadku bardziej rozbudowanego niż kilka pozycji. W przypadku bardziej rozbudowanego menu wskazane jest, by pozycje menu były logicznie menu wskazane jest, by pozycje menu były logicznie pogrupowane oraz by częściej używane funkcje były w pogrupowane oraz by częściej używane funkcje były w pewien sposób wyróżnione.pewien sposób wyróżnione.




Częściej wykorzystywane funkcje powinny być Częściej wykorzystywane funkcje powinny być dostępne bezpośrednio poprzez przyciski narzędziowe.dostępne bezpośrednio poprzez przyciski narzędziowe.

Przyciski narzędziowe powinny mieć obrazek kojarzący Przyciski narzędziowe powinny mieć obrazek kojarzący się z wykonywaną funkcją oraz nazwę funkcji. Jeśli się z wykonywaną funkcją oraz nazwę funkcji. Jeśli nazwy funkcji na przyciskach nie mogą być pokazane, nazwy funkcji na przyciskach nie mogą być pokazane, to powinny być pokazywane przy najechaniu myszą na to powinny być pokazywane przy najechaniu myszą na przycisk.przycisk.

Przyciski powinny być logicznie pogrupowane na Przyciski powinny być logicznie pogrupowane na paskach narzędziowych.paskach narzędziowych.

W przypadku aplikacji realizującej liczne funkcje W przypadku aplikacji realizującej liczne funkcje wskazane jest, aby umożliwiała ona konfigurację wskazane jest, aby umożliwiała ona konfigurację pasków narzędziowych, w tym umieszczanie na pasków narzędziowych, w tym umieszczanie na paskach przycisków wiodących do wszystkich funkcji paskach przycisków wiodących do wszystkich funkcji aplikacji, również tych rzadziej wykorzystywanych.aplikacji, również tych rzadziej wykorzystywanych.




Wskazane jest, aby bardziej złożona aplikacja Wskazane jest, aby bardziej złożona aplikacja prezentowała swoje możliwości za pomocą prezentowała swoje możliwości za pomocą podpowiedzi. Jeśli podpowiedzi te zajmują istotnie podpowiedzi. Jeśli podpowiedzi te zajmują istotnie dużo miejsca na ekranie, to aplikacja powinna dużo miejsca na ekranie, to aplikacja powinna umożliwić wyłączenie podpowiedzi i włączenie ich umożliwić wyłączenie podpowiedzi i włączenie ich ponownie na żądanie.ponownie na żądanie.

Aplikacja powinna umożliwiać szybki dostęp do funkcji Aplikacja powinna umożliwiać szybki dostęp do funkcji za pomocą skrótów klawiszowych. W przypadku za pomocą skrótów klawiszowych. W przypadku bardziej złożonej aplikacji wskazane jest zapewnienie bardziej złożonej aplikacji wskazane jest zapewnienie możliwości definiowania własnych skrótów możliwości definiowania własnych skrótów klawiszowych.klawiszowych.

Aplikacja powinna mieć system pomocy ekranowej Aplikacja powinna mieć system pomocy ekranowej wyjaśniającej podstawowe mechanizmy zastosowane w wyjaśniającej podstawowe mechanizmy zastosowane w aplikacji i wyjaśniającej sposób wykorzystania tych aplikacji i wyjaśniającej sposób wykorzystania tych mechanizmów.mechanizmów.



SpójnośćSpójność Interfejs użytkownika powinien być spójny Interfejs użytkownika powinien być spójny

dla zapewnienia przewidywalności dla zapewnienia przewidywalności podejmowanych działań przez użytkownika.podejmowanych działań przez użytkownika.

Wszystkie formularze i raporty w aplikacji Wszystkie formularze i raporty w aplikacji powinny być zaprojektowane w jednolity powinny być zaprojektowane w jednolity sposób, tzn. z użyciem jednolitego aparatu sposób, tzn. z użyciem jednolitego aparatu pojęciowego (terminologii) i z zastosowaniem pojęciowego (terminologii) i z zastosowaniem jednolitej formy (takiego samego układu, jednolitej formy (takiego samego układu, czcionek i kolorów) oraz sposobu nawigacji.czcionek i kolorów) oraz sposobu nawigacji.

Interfejs użytkownika aplikacji powinien być Interfejs użytkownika aplikacji powinien być spójny z innymi aplikacjami z tej samej spójny z innymi aplikacjami z tej samej dziedziny zastosowania wykorzystywanymi w dziedziny zastosowania wykorzystywanymi w określonym systemie operacyjnym.określonym systemie operacyjnym.



Minimalizacja wysiłkuMinimalizacja wysiłku Interfejs użytkownika powinien ułatwiać Interfejs użytkownika powinien ułatwiać

użytkownikowi wykorzystanie funkcji aplikacji użytkownikowi wykorzystanie funkcji aplikacji tak, aby wysiłek użytkownika była jak tak, aby wysiłek użytkownika była jak najmniejszy.najmniejszy.

Zaleca się, aby ilość kliknięć myszą wiodących Zaleca się, aby ilość kliknięć myszą wiodących poprzez menu lub przyciski narzędziowe do poprzez menu lub przyciski narzędziowe do każdej funkcji nie przekraczała trzech.każdej funkcji nie przekraczała trzech.

W przypadku funkcji wielokrotnie W przypadku funkcji wielokrotnie wykorzystywanych zaleca się zastosowanie wykorzystywanych zaleca się zastosowanie mechanizmu powtarzania funkcji lub mechanizmu powtarzania funkcji lub grupowania przedmiotów działania funkcji.grupowania przedmiotów działania funkcji.

W przypadku bardziej złożonych aplikacji zaleca W przypadku bardziej złożonych aplikacji zaleca się zastosowanie mechanizmu umożliwiającego się zastosowanie mechanizmu umożliwiającego łączenie wielu różnych funkcji w jedną.łączenie wielu różnych funkcji w jedną.



Proces projektowania Proces projektowania interfejsu użytkownikainterfejsu użytkownika

Opracowanie scenariuszy użycia

Projektowaniestrukturyinterfejsu

Projektowaniestandardówinterfejsu

Prototypowanieprojektuinterfejsu

Ocenainterfejsu



Scenariusz użyciaScenariusz użycia Scenariusz użycia jest opisem Scenariusz użycia jest opisem

podstawowych kroków, które musi podstawowych kroków, które musi przejść użytkownik dla osiągnięcia przejść użytkownik dla osiągnięcia określonego celu.określonego celu.

Podstawa do opracowania: model Podstawa do opracowania: model przypadków użycia, diagramy sekwencji przypadków użycia, diagramy sekwencji (interakcji).(interakcji).

Nie rozpatruje się wszystkich możliwych Nie rozpatruje się wszystkich możliwych scenariuszy użycia, lecz dwa lub trzy scenariuszy użycia, lecz dwa lub trzy najczęściej realizowane.najczęściej realizowane.

Sposób prezentacji: opis tekstowySposób prezentacji: opis tekstowy



Scenariusz użycia Scenariusz użycia 1.Klient przeglądający 1.Klient przeglądający

ofertęofertę1.1. Klient przegląda ofertę szukając interesujących Klient przegląda ofertę szukając interesujących

go towarów w określonej kategoriigo towarów w określonej kategorii2.2. Klient przegląda podstawowe informacje dla Klient przegląda podstawowe informacje dla

kilku towarów. Porównuje informacje między kilku towarów. Porównuje informacje między sobą łącznie z ofertą cenową.sobą łącznie z ofertą cenową.

3.3. Klient umieszcza wybrany towar (towary) w Klient umieszcza wybrany towar (towary) w koszyku i dalej przegląda ofertę.koszyku i dalej przegląda ofertę.

4.4. Przed złożeniem zamówienia klient przegląda Przed złożeniem zamówienia klient przegląda koszyk dla zorientowania się, czy łączna kwota koszyk dla zorientowania się, czy łączna kwota do zapłaty jest do zaakceptowania. Ewentualnie do zapłaty jest do zaakceptowania. Ewentualnie klient usuwa pewne towary z koszyka.klient usuwa pewne towary z koszyka.

5.5. Klient składa zamówienie wybierając formę Klient składa zamówienie wybierając formę płatności.płatności.



Scenariusz użyciaScenariusz użycia2. Klient szukający 2. Klient szukający określonego towaruokreślonego towaru

1.1. Klient szuka określonego towaru po Klient szuka określonego towaru po nazwie lub typie.nazwie lub typie.

2.2. Klient oczekuje podania ceny i Klient oczekuje podania ceny i terminu dostawy.terminu dostawy.

3.3. W przypadku niezadowolenia klient W przypadku niezadowolenia klient oczekuje innej oferty w tym samym oczekuje innej oferty w tym samym typie.typie.

4.4. Klient składa zamówienie lub Klient składa zamówienie lub przechodzi do innej witryny.przechodzi do innej witryny.



Struktura interfejsuStruktura interfejsu

Struktura interfejsu określa Struktura interfejsu określa podstawowe komponenty interfejsu i podstawowe komponenty interfejsu i sposób ich współdziałania dla sposób ich współdziałania dla dostarczenia określonej dostarczenia określonej funkcjonalności dla użytkowników.funkcjonalności dla użytkowników.

Sposób prezentacji: Window Sposób prezentacji: Window Navigation Diagram (WND)Navigation Diagram (WND)



Window Navigation Window Navigation Diagram (WND)Diagram (WND)

« window»Main Menu

« window»Menu A

« window»Menu B

« form»Form A

« form»Form B

« form»Form C

« report»Report A



Standardy interfejsu Standardy interfejsu (1)(1)

Standardy interfejsu są do podstawowe Standardy interfejsu są do podstawowe elementy projektowe, które są wspólne elementy projektowe, które są wspólne dla wielu ekranów, formularzy i dla wielu ekranów, formularzy i raportów w systemie. raportów w systemie.

Tworzy się repozytorium elementów, Tworzy się repozytorium elementów, które będą wykorzystywane przy które będą wykorzystywane przy prototypowaniu i projektowaniu prototypowaniu i projektowaniu interfejsuinterfejsu

Ustala się nazwy elementów, ich Ustala się nazwy elementów, ich znaczenie i formę (nazwę prezentowaną znaczenie i formę (nazwę prezentowaną dla użytkownika, ikonę)dla użytkownika, ikonę)



Standardy interfejsu Standardy interfejsu (2)(2)

Metafory interfejsu (np. koszyk na zakupy)Metafory interfejsu (np. koszyk na zakupy) Obiekty interfejsowe - klasy głównych Obiekty interfejsowe - klasy głównych

komponentów interfejsu (np. Formularz komponentów interfejsu (np. Formularz zamówienia)zamówienia)

Akcje interfejsowe - działania wiodące Akcje interfejsowe - działania wiodące użytkownika przez interfejs (np. Zamówienie-użytkownika przez interfejs (np. Zamówienie-nowe, Zamówienie-zmiana, Zamówienie-nowe, Zamówienie-zmiana, Zamówienie-anuluj)anuluj)

Ikony interfejsowe (zgodność ze standardami, Ikony interfejsowe (zgodność ze standardami, czytelność, zrozumiałość)czytelność, zrozumiałość)

Szablony interfejsowe - wygląd głównych Szablony interfejsowe - wygląd głównych okien, formularzy, raportówokien, formularzy, raportów



Prototypowanie Prototypowanie interfejsuinterfejsu

StoryboardStoryboard Prototypowanie HTMLPrototypowanie HTML Prototypowanie w języku docelowymPrototypowanie w języku docelowym



StoryboardStoryboardDane klienta

Dane klienta

Imię Nazwisko

Adres

Miejscowość Kod poczt.00-000

Ulica Nr domu Nr lokalu

Znajdź klientaZnajdź klienta

Imię Nazwisko

Adres

Miejscowość Kod poczt.00-000

Ulica Nr domu Nr lokalu

Dane klientaDane klienta

ImięAdam

NazwiskoAbacki

Adres

MiejscowośćNieznane

Kod poczt.12-345

UlicaZapole

Nr domu13A

Nr lokalu13

Lista klientówLista klientów

Abacki AdamBabacki BartoszCabacki Czesław

Menu klientaMenu klienta

Dodaj klientaZnajdź klientaLista klientów

DodajKlienta

ZnajdźKlienta

KlientZnaleziony PoprawDaneKlienta

ListaKlientów

PodajDaneKlienta

ListaKlientów

ListaKlientów

ZnajdźKlienta

ZnajdźKlienta

DodajKlienta



Prototypowanie wPrototypowanie w HTMLHTML

interaktywneinteraktywne szybkie w szybkie w

wykonaniuwykonaniu nie odpowiada nie odpowiada

obrazowi obrazowi docelowemudocelowemu

języku docelowymjęzyku docelowym interaktywneinteraktywne wolniejszewolniejsze odpowiada odpowiada

obrazowi obrazowi docelowemudocelowemu



Ocena interfejsuOcena interfejsu

ocena heurystycznaocena heurystyczna ocena zgodności z zasadamiocena zgodności z zasadami min. 3 ekspertówmin. 3 ekspertów

przegląd interfejsu z użytkownikiemprzegląd interfejsu z użytkownikiem ocena interaktywna u użytkownikaocena interaktywna u użytkownika formalne testowanie użytecznościformalne testowanie użyteczności



LiteraturaLiteratura Dennis A., Wixom B.H., Tegarden D., Dennis A., Wixom B.H., Tegarden D., Systems Systems

Analysis & Design. An Object-Oriented Analysis & Design. An Object-Oriented Approach with UMLApproach with UML, John Wiley and Sons, , John Wiley and Sons, USA, 2002USA, 2002

Rolf Hennicker, Nora Koch: Rolf Hennicker, Nora Koch: Modeling the Modeling the User Interface of Web Applications with UMLUser Interface of Web Applications with UML, , http:// www.pst.informatik.uni-http:// www.pst.informatik.uni-muenchen.de /personen/kochn/pUML2001-muenchen.de /personen/kochn/pUML2001-Hen-Koch.pdfHen-Koch.pdf

Coad P., Yourdon E.: Coad P., Yourdon E.: Projektowanie Projektowanie obiektoweobiektowe, Oficyna wydawnicza Read Me, , Oficyna wydawnicza Read Me, Warszawa 1994Warszawa 1994

Documents

Projektowanie interfejsu użytkownika (1)