Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Projektowanie interfejsu użytkownika (1) Jarosław Kuchta Dokumentacja i Jakość Oprogramowania.

Podobne prezentacje


Prezentacja na temat: "Projektowanie interfejsu użytkownika (1) Jarosław Kuchta Dokumentacja i Jakość Oprogramowania."— Zapis prezentacji:

1 Projektowanie interfejsu użytkownika (1) Jarosław Kuchta Dokumentacja i Jakość Oprogramowania

2 2/27Projektowanie interfejsu użytkownika (1) Charakterystyki użytkowników Nazwa użytkownika Nazwa użytkownika Cel korzystania z systemu Cel korzystania z systemu Klasyfikacja Klasyfikacja przynależność organizacyjna przynależność organizacyjna doświadczenie i umiejętności doświadczenie i umiejętności uprawnienia decyzyjne uprawnienia decyzyjne Dodatkowe cechy Dodatkowe cechy wiek wiek poziom wykształcenia poziom wykształcenia zastrzeżenia zastrzeżenia Krytyczne czynniki powodzenia Krytyczne czynniki powodzenia potrzeby i możliwości potrzeby i możliwości preferencje i uprzedzenia preferencje i uprzedzenia Scenariusze zadań Scenariusze zadań

3 Dokumentacja i Jakość Oprogramowania 3/27Projektowanie interfejsu użytkownika (1) Podstawowe zasady projektowania interfejsu użytkownika Wygląd – i nterfejs powinien być podzielony na różne obszary przeznaczone do różnych celów. Wygląd – i nterfejs powinien być podzielony na różne obszary przeznaczone do różnych celów. Uświadamianie zawartości – i nterfejs powinien uświadamiać użytkownika, w którym miejscu się znajduje i co oznaczają prezentowane informacje. Uświadamianie zawartości – i nterfejs powinien uświadamiać użytkownika, w którym miejscu się znajduje i co oznaczają prezentowane informacje. Estetyka – interfejs powinien zapewniać równowagę pomiędzy ilością prezentowanej informacji a jej atrakcyjnością wizualną. Estetyka – interfejs powinien zapewniać równowagę pomiędzy ilością prezentowanej informacji a jej atrakcyjnością wizualną. Doświadczenie użytkownika – interfejs powinien uwzględniać zarówno łatwość nauki dla początkujących jak i łatwość użycia dla doświadczonych użytkowników. Doświadczenie użytkownika – interfejs powinien uwzględniać zarówno łatwość nauki dla początkujących jak i łatwość użycia dla doświadczonych użytkowników. Spójność – interfejs powinien być spójny dla ułatwienia użytkownikowi przewidywania skutków podejmowanych przez niego działań. Spójność – interfejs powinien być spójny dla ułatwienia użytkownikowi przewidywania skutków podejmowanych przez niego działań. Minimalizacja wysiłku – interfejs powinien ułatwiać działania użytkownika, tak by ilość kroków wiodących do osiągnięcia celu była jak najmniejsza. Minimalizacja wysiłku – interfejs powinien ułatwiać działania użytkownika, tak by ilość kroków wiodących do osiągnięcia celu była jak najmniejsza.

4 Dokumentacja i Jakość Oprogramowania 4/27Projektowanie interfejsu użytkownika (1) Podział interfejsu na obszary Obszar nawigacji przeglądarki Obszar nawigacji strony Obszar statusu przeglądarki Obszar nawigacji strony Obszar nawigacji strony Obszar informacyjny strony

5 Dokumentacja i Jakość Oprogramowania 5/27Projektowanie interfejsu użytkownika (1) Zasady podziału Każdy obszar powinien mieć jasno wytyczone granice. Każdy obszar powinien mieć jasno wytyczone granice. Każdy obszar powinien mieć jasno określone przeznaczenie. Każdy obszar powinien mieć jasno określone przeznaczenie. Każdy obszar powinien zawierać tylko te informacje, które są potrzebne do realizacji określonego przeznaczenia. Każdy obszar powinien zawierać tylko te informacje, które są potrzebne do realizacji określonego przeznaczenia. Obszary informacyjne powinny być uszeregowane w kolejności przetwarzania tej informacji przez użytkownika (z góry w dół, od lewej do prawej). Obszary informacyjne powinny być uszeregowane w kolejności przetwarzania tej informacji przez użytkownika (z góry w dół, od lewej do prawej).

6 Dokumentacja i Jakość Oprogramowania 6/27Projektowanie interfejsu użytkownika (1) Zasady uświadamiania zawartości (1) Wszystkie okna i raporty muszą mieć tytuły jednoznacznie identyfikujące ich zawartość. Wszystkie okna i raporty muszą mieć tytuły jednoznacznie identyfikujące ich zawartość. Menu musi pokazywać, w którym miejscu jest użytkownik (i jak się tu dostał). Menu musi pokazywać, w którym miejscu jest użytkownik (i jak się tu dostał). Przyciski powinny mieć napisy identyfikujące ich funkcje. Jeśli napisy te nie są pokazywane cały czas na ekranie, to powinny być pokazywane przy najechaniu na przycisk wskaźnikem myszy. Przyciski powinny mieć napisy identyfikujące ich funkcje. Jeśli napisy te nie są pokazywane cały czas na ekranie, to powinny być pokazywane przy najechaniu na przycisk wskaźnikem myszy. Przyciski odpowiedzi na oknach komunikatów powinny być łatwo interpretowane w kontekście treści komunikatu. Przyciski odpowiedzi na oknach komunikatów powinny być łatwo interpretowane w kontekście treści komunikatu.

7 Dokumentacja i Jakość Oprogramowania 7/27Projektowanie interfejsu użytkownika (1) Zasady uświadamiania zawartości (2) Forma informacji na sąsiadujących obszarach powinna być różna (np. tekst-grafika, różne czcionki). Rozróżnianie kolorem nie jest wystarczające. Forma informacji na sąsiadujących obszarach powinna być różna (np. tekst-grafika, różne czcionki). Rozróżnianie kolorem nie jest wystarczające. Jeśli informacje na sąsiadujących obszarach są podobne w formie, to muszą być oddzielone dodatkowym elementem (np. linią). Jeśli informacje na sąsiadujących obszarach są podobne w formie, to muszą być oddzielone dodatkowym elementem (np. linią). Każde pole edycji musi mieć etykietę jednoznacznie identyfikującą zawartość pola. Każde pole edycji musi mieć etykietę jednoznacznie identyfikującą zawartość pola. Pola edycji, których format wewnętrzny nie jest oczywisty (np. pola z datą), muszą mieć dodatkowe oznaczenie formatu wprowadzanych danych. Pola edycji, których format wewnętrzny nie jest oczywisty (np. pola z datą), muszą mieć dodatkowe oznaczenie formatu wprowadzanych danych. Raporty powinny mieć datę sporządzenia. Raporty powinny mieć datę sporządzenia.

8 Dokumentacja i Jakość Oprogramowania 8/27Projektowanie interfejsu użytkownika (1) Zasady estetyki (1) Interfejs użytkownika powinien być zarówno funkcjonalny jak i przyjemny dla oka. Interfejs użytkownika powinien być zarówno funkcjonalny jak i przyjemny dla oka. Ilość wolnego miejsca pomiędzy elementami interfejsu powinna być dostosowana do wymagań użytkownika (50% dla początkujących, 10% dla zaawansowanych). Ilość wolnego miejsca pomiędzy elementami interfejsu powinna być dostosowana do wymagań użytkownika (50% dla początkujących, 10% dla zaawansowanych). Należy unikać tworzenia formularzy lub raportów dużych, zawierających ponad 50 pól danych. Formularz lub raport powinien zawierać tylko informacje, które mogą być jednorazowo przetworzone przez człowieka. Należy unikać tworzenia formularzy lub raportów dużych, zawierających ponad 50 pól danych. Formularz lub raport powinien zawierać tylko informacje, które mogą być jednorazowo przetworzone przez człowieka.

9 Dokumentacja i Jakość Oprogramowania 9/27Projektowanie interfejsu użytkownika (1) Zasady estetyki (2) Tekst główny powinien być prezentowany czcionką punktową. Na formularzach powinna być używana czcionka bezszeryfowa, na raportach – czcionka szeryfowa. Tekst główny powinien być prezentowany czcionką punktową. Na formularzach powinna być używana czcionka bezszeryfowa, na raportach – czcionka szeryfowa. Należy unikać stosowania więcej niż dwóch różnych czcionek. Stanowczo trzeba unikać czcionek ozdobnych, lecz trudnych do czytania. Należy unikać stosowania więcej niż dwóch różnych czcionek. Stanowczo trzeba unikać czcionek ozdobnych, lecz trudnych do czytania. Stosowane kolory powinny być stonowane (kontrastowe zwracają uwagę, lecz są męczące dla oka). Stosowane kolory powinny być stonowane (kontrastowe zwracają uwagę, lecz są męczące dla oka). Kolor nie może być jedynym wyróżnikiem informacji. Interfejs użytkownika nie może ukrywać informacji przed osobami cierpiącymi na daltonizm. Kolor nie może być jedynym wyróżnikiem informacji. Interfejs użytkownika nie może ukrywać informacji przed osobami cierpiącymi na daltonizm.

10 Dokumentacja i Jakość Oprogramowania 10/27Projektowanie interfejsu użytkownika (1) Doświadczenie użytkownika (1) Interfejs użytkownika powinien być łatwy do nauczenia się posługiwania się nim przez początkujących użytkowników. Interfejs użytkownika powinien być łatwy do nauczenia się posługiwania się nim przez początkujących użytkowników. Interfejs użytkownika powinien ułatwiać i przyspieszać wykonywanie działań przez zaawansowanych użytkowników. Interfejs użytkownika powinien ułatwiać i przyspieszać wykonywanie działań przez zaawansowanych użytkowników. Menu powinno składać się nie więcej niż z trzech poziomów w przypadku menu głównego i nie więcej niż z dwóch poziomów w przypadku menu kontekstowych. Menu powinno składać się nie więcej niż z trzech poziomów w przypadku menu głównego i nie więcej niż z dwóch poziomów w przypadku menu kontekstowych. Menu powinno prezentować wszystkie dostępne funkcje aplikacji, tzn. nie powinno być takiej funkcji, do której nie można by się było dostać z menu. Menu powinno prezentować wszystkie dostępne funkcje aplikacji, tzn. nie powinno być takiej funkcji, do której nie można by się było dostać z menu. Menu na każdym poziomie powinno zawierać nie więcej niż kilka pozycji. W przypadku bardziej rozbudowanego menu wskazane jest, by pozycje menu były logicznie pogrupowane oraz by częściej używane funkcje były w pewien sposób wyróżnione. Menu na każdym poziomie powinno zawierać nie więcej niż kilka pozycji. W przypadku bardziej rozbudowanego menu wskazane jest, by pozycje menu były logicznie pogrupowane oraz by częściej używane funkcje były w pewien sposób wyróżnione.

11 Dokumentacja i Jakość Oprogramowania 11/27Projektowanie interfejsu użytkownika (1) Doświadczenie użytkownika (2) Częściej wykorzystywane funkcje powinny być dostępne bezpośrednio poprzez przyciski narzędziowe. Częściej wykorzystywane funkcje powinny być dostępne bezpośrednio poprzez przyciski narzędziowe. Przyciski narzędziowe powinny mieć obrazek kojarzący się z wykonywaną funkcją oraz nazwę funkcji. Jeśli nazwy funkcji na przyciskach nie mogą być pokazane, to powinny być pokazywane przy najechaniu myszą na przycisk. Przyciski narzędziowe powinny mieć obrazek kojarzący się z wykonywaną funkcją oraz nazwę funkcji. Jeśli nazwy funkcji na przyciskach nie mogą być pokazane, to powinny być pokazywane przy najechaniu myszą na przycisk. Przyciski powinny być logicznie pogrupowane na paskach narzędziowych. Przyciski powinny być logicznie pogrupowane na paskach narzędziowych. W przypadku aplikacji realizującej liczne funkcje wskazane jest, aby umożliwiała ona konfigurację pasków narzędziowych, w tym umieszczanie na paskach przycisków wiodących do wszystkich funkcji aplikacji, również tych rzadziej wykorzystywanych. W przypadku aplikacji realizującej liczne funkcje wskazane jest, aby umożliwiała ona konfigurację pasków narzędziowych, w tym umieszczanie na paskach przycisków wiodących do wszystkich funkcji aplikacji, również tych rzadziej wykorzystywanych.

12 Dokumentacja i Jakość Oprogramowania 12/27Projektowanie interfejsu użytkownika (1) Doświadczenie użytkownika (3) Wskazane jest, aby bardziej złożona aplikacja prezentowała swoje możliwości za pomocą podpowiedzi. Jeśli podpowiedzi te zajmują istotnie dużo miejsca na ekranie, to aplikacja powinna umożliwić wyłączenie podpowiedzi i włączenie ich ponownie na żądanie. Wskazane jest, aby bardziej złożona aplikacja prezentowała swoje możliwości za pomocą podpowiedzi. Jeśli podpowiedzi te zajmują istotnie dużo miejsca na ekranie, to aplikacja powinna umożliwić wyłączenie podpowiedzi i włączenie ich ponownie na żądanie. Aplikacja powinna umożliwiać szybki dostęp do funkcji za pomocą skrótów klawiszowych. W przypadku bardziej złożonej aplikacji wskazane jest zapewnienie możliwości definiowania własnych skrótów klawiszowych. Aplikacja powinna umożliwiać szybki dostęp do funkcji za pomocą skrótów klawiszowych. W przypadku bardziej złożonej aplikacji wskazane jest zapewnienie możliwości definiowania własnych skrótów klawiszowych. Aplikacja powinna mieć system pomocy ekranowej wyjaśniającej podstawowe mechanizmy zastosowane w aplikacji i wyjaśniającej sposób wykorzystania tych mechanizmów. Aplikacja powinna mieć system pomocy ekranowej wyjaśniającej podstawowe mechanizmy zastosowane w aplikacji i wyjaśniającej sposób wykorzystania tych mechanizmów.

13 Dokumentacja i Jakość Oprogramowania 13/27Projektowanie interfejsu użytkownika (1) Spójność Interfejs użytkownika powinien być spójny dla zapewnienia przewidywalności podejmowanych działań przez użytkownika. Interfejs użytkownika powinien być spójny dla zapewnienia przewidywalności podejmowanych działań przez użytkownika. Wszystkie formularze i raporty w aplikacji powinny być zaprojektowane w jednolity sposób, tzn. z użyciem jednolitego aparatu pojęciowego (terminologii) i z zastosowaniem jednolitej formy (takiego samego układu, czcionek i kolorów) oraz sposobu nawigacji. Wszystkie formularze i raporty w aplikacji powinny być zaprojektowane w jednolity sposób, tzn. z użyciem jednolitego aparatu pojęciowego (terminologii) i z zastosowaniem jednolitej formy (takiego samego układu, czcionek i kolorów) oraz sposobu nawigacji. Interfejs użytkownika aplikacji powinien być spójny z innymi aplikacjami z tej samej dziedziny zastosowania wykorzystywanymi w określonym systemie operacyjnym. Interfejs użytkownika aplikacji powinien być spójny z innymi aplikacjami z tej samej dziedziny zastosowania wykorzystywanymi w określonym systemie operacyjnym.

14 Dokumentacja i Jakość Oprogramowania 14/27Projektowanie interfejsu użytkownika (1) Minimalizacja wysiłku Interfejs użytkownika powinien ułatwiać użytkownikowi wykorzystanie funkcji aplikacji tak, aby wysiłek użytkownika była jak najmniejszy. Interfejs użytkownika powinien ułatwiać użytkownikowi wykorzystanie funkcji aplikacji tak, aby wysiłek użytkownika była jak najmniejszy. Zaleca się, aby ilość kliknięć myszą wiodących poprzez menu lub przyciski narzędziowe do każdej funkcji nie przekraczała trzech. Zaleca się, aby ilość kliknięć myszą wiodących poprzez menu lub przyciski narzędziowe do każdej funkcji nie przekraczała trzech. W przypadku funkcji wielokrotnie wykorzystywanych zaleca się zastosowanie mechanizmu powtarzania funkcji lub grupowania przedmiotów działania funkcji. W przypadku funkcji wielokrotnie wykorzystywanych zaleca się zastosowanie mechanizmu powtarzania funkcji lub grupowania przedmiotów działania funkcji. W przypadku bardziej złożonych aplikacji zaleca się zastosowanie mechanizmu umożliwiającego łączenie wielu różnych funkcji w jedną. W przypadku bardziej złożonych aplikacji zaleca się zastosowanie mechanizmu umożliwiającego łączenie wielu różnych funkcji w jedną.

15 Dokumentacja i Jakość Oprogramowania 15/27Projektowanie interfejsu użytkownika (1) Proces projektowania interfejsu użytkownika Opracowanie scenariuszy użycia Projektowanie struktury interfejsu Projektowanie standardów interfejsu Prototypowanie projektu interfejsu Ocena interfejsu

16 Dokumentacja i Jakość Oprogramowania 16/27Projektowanie interfejsu użytkownika (1) Scenariusz użycia Scenariusz użycia jest opisem podstawowych kroków, które musi przejść użytkownik dla osiągnięcia określonego celu. Scenariusz użycia jest opisem podstawowych kroków, które musi przejść użytkownik dla osiągnięcia określonego celu. Podstawa do opracowania: model przypadków użycia, diagramy sekwencji (interakcji). Podstawa do opracowania: model przypadków użycia, diagramy sekwencji (interakcji). Nie rozpatruje się wszystkich możliwych scenariuszy użycia, lecz dwa lub trzy najczęściej realizowane. Nie rozpatruje się wszystkich możliwych scenariuszy użycia, lecz dwa lub trzy najczęściej realizowane. Sposób prezentacji: opis tekstowy Sposób prezentacji: opis tekstowy

17 Dokumentacja i Jakość Oprogramowania 17/27Projektowanie interfejsu użytkownika (1) Scenariusz użycia 1.Klient przeglądający ofertę 1. Klient przegląda ofertę szukając interesujących go towarów w określonej kategorii 2. Klient przegląda podstawowe informacje dla kilku towarów. Porównuje informacje między sobą łącznie z ofertą cenową. 3. Klient umieszcza wybrany towar (towary) w koszyku i dalej przegląda ofertę. 4. Przed złożeniem zamówienia klient przegląda koszyk dla zorientowania się, czy łączna kwota do zapłaty jest do zaakceptowania. Ewentualnie klient usuwa pewne towary z koszyka. 5. Klient składa zamówienie wybierając formę płatności.

18 Dokumentacja i Jakość Oprogramowania 18/27Projektowanie interfejsu użytkownika (1) Scenariusz użycia 2. Klient szukający określonego towaru 1. Klient szuka określonego towaru po nazwie lub typie. 2. Klient oczekuje podania ceny i terminu dostawy. 3. W przypadku niezadowolenia klient oczekuje innej oferty w tym samym typie. 4. Klient składa zamówienie lub przechodzi do innej witryny.

19 Dokumentacja i Jakość Oprogramowania 19/27Projektowanie interfejsu użytkownika (1) Struktura interfejsu Struktura interfejsu określa podstawowe komponenty interfejsu i sposób ich współdziałania dla dostarczenia określonej funkcjonalności dla użytkowników. Struktura interfejsu określa podstawowe komponenty interfejsu i sposób ich współdziałania dla dostarczenia określonej funkcjonalności dla użytkowników. Sposób prezentacji: Window Navigation Diagram (WND) Sposób prezentacji: Window Navigation Diagram (WND)

20 Dokumentacja i Jakość Oprogramowania 20/27Projektowanie interfejsu użytkownika (1) Window Navigation Diagram (WND) « window» Main Menu « window» Menu A « window» Menu B « form» Form A « form» Form B « form» Form C « report» Report A

21 Dokumentacja i Jakość Oprogramowania 21/27Projektowanie interfejsu użytkownika (1) Standardy interfejsu (1) Standardy interfejsu są do podstawowe elementy projektowe, które są wspólne dla wielu ekranów, formularzy i raportów w systemie. Standardy interfejsu są do podstawowe elementy projektowe, które są wspólne dla wielu ekranów, formularzy i raportów w systemie. Tworzy się repozytorium elementów, które będą wykorzystywane przy prototypowaniu i projektowaniu interfejsu Tworzy się repozytorium elementów, które będą wykorzystywane przy prototypowaniu i projektowaniu interfejsu Ustala się nazwy elementów, ich znaczenie i formę (nazwę prezentowaną dla użytkownika, ikonę) Ustala się nazwy elementów, ich znaczenie i formę (nazwę prezentowaną dla użytkownika, ikonę)

22 Dokumentacja i Jakość Oprogramowania 22/27Projektowanie interfejsu użytkownika (1) Standardy interfejsu (2) Metafory interfejsu (np. koszyk na zakupy) Metafory interfejsu (np. koszyk na zakupy) Obiekty interfejsowe - klasy głównych komponentów interfejsu (np. Formularz zamówienia) Obiekty interfejsowe - klasy głównych komponentów interfejsu (np. Formularz zamówienia) Akcje interfejsowe - działania wiodące użytkownika przez interfejs (np. Zamówienie-nowe, Zamówienie- zmiana, Zamówienie-anuluj) Akcje interfejsowe - działania wiodące użytkownika przez interfejs (np. Zamówienie-nowe, Zamówienie- zmiana, Zamówienie-anuluj) Ikony interfejsowe (zgodność ze standardami, czytelność, zrozumiałość) Ikony interfejsowe (zgodność ze standardami, czytelność, zrozumiałość) Szablony interfejsowe - wygląd głównych okien, formularzy, raportów Szablony interfejsowe - wygląd głównych okien, formularzy, raportów

23 Dokumentacja i Jakość Oprogramowania 23/27Projektowanie interfejsu użytkownika (1) Prototypowanie interfejsu Storyboard Storyboard Prototypowanie HTML Prototypowanie HTML Prototypowanie w języku docelowym Prototypowanie w języku docelowym

24 Dokumentacja i Jakość Oprogramowania 24/27Projektowanie interfejsu użytkownika (1) Storyboard Dane klienta ImięNazwisko Adres MiejscowośćKod poczt UlicaNr domuNr lokalu Znajdź klienta ImięNazwisko Adres MiejscowośćKod poczt UlicaNr domuNr lokalu Dane klienta Imię Adam Nazwisko Abacki Adres Miejscowość Nieznane Kod poczt Ulica Zapole Nr domu 13A Nr lokalu 13 Lista klientów Abacki Adam Babacki Bartosz Cabacki Czesław Menu klienta Dodaj klienta Znajdź klienta Lista klientów DodajKlienta ZnajdźKlienta KlientZnalezionyPoprawDaneKlienta ListaKlientów PodajDaneKlienta ListaKlientów ZnajdźKlienta DodajKlienta

25 Dokumentacja i Jakość Oprogramowania 25/27Projektowanie interfejsu użytkownika (1) Prototypowanie w HTML HTML interaktywne interaktywne szybkie w wykonaniu szybkie w wykonaniu nie odpowiada obrazowi docelowemu nie odpowiada obrazowi docelowemu języku docelowym interaktywne wolniejsze odpowiada obrazowi docelowemu

26 Dokumentacja i Jakość Oprogramowania 26/27Projektowanie interfejsu użytkownika (1) Ocena interfejsu ocena heurystyczna ocena heurystyczna ocena zgodności z zasadami ocena zgodności z zasadami min. 3 ekspertów min. 3 ekspertów przegląd interfejsu z użytkownikiem przegląd interfejsu z użytkownikiem ocena interaktywna u użytkownika ocena interaktywna u użytkownika formalne testowanie użyteczności formalne testowanie użyteczności

27 Dokumentacja i Jakość Oprogramowania 27/27Projektowanie interfejsu użytkownika (1) Literatura Dennis A., Wixom B.H., Tegarden D., Systems Analysis & Design. An Object-Oriented Approach with UML, John Wiley and Sons, USA, 2002 Dennis A., Wixom B.H., Tegarden D., Systems Analysis & Design. An Object-Oriented Approach with UML, John Wiley and Sons, USA, 2002 Rolf Hennicker, Nora Koch: Modeling the User Interface of Web Applications with UML, /personen/kochn/pUML2001-Hen-Koch.pdf Rolf Hennicker, Nora Koch: Modeling the User Interface of Web Applications with UML, /personen/kochn/pUML2001-Hen-Koch.pdf Coad P., Yourdon E.: Projektowanie obiektowe, Oficyna wydawnicza Read Me, Warszawa 1994 Coad P., Yourdon E.: Projektowanie obiektowe, Oficyna wydawnicza Read Me, Warszawa 1994


Pobierz ppt "Projektowanie interfejsu użytkownika (1) Jarosław Kuchta Dokumentacja i Jakość Oprogramowania."

Podobne prezentacje


Reklamy Google