Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

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

Podobne prezentacje


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

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

2 2/27Projektowanie interfejsu użytkownika (2) Projektowanie nawigacji - podstawowe zasady Zapobieganie błędom Zapobieganie błędom odpowiednie oznaczanie komend i akcji odpowiednie oznaczanie komend i akcji ograniczanie wyboru ograniczanie wyboru nie udostępnianie komend, które nie mogą być wydane nie udostępnianie komend, które nie mogą być wydane żądanie potwierdzenia przed wykonaniem operacji, które nie mogą być cofnięte żądanie potwierdzenia przed wykonaniem operacji, które nie mogą być cofnięte Ułatwienie odtworzenia stanu po błędzie Ułatwienie odtworzenia stanu po błędzie Komenda undo/redo - ile poziomów Komenda undo/redo - ile poziomów Użycie jednolitego porządku gramatycznego Użycie jednolitego porządku gramatycznego porządek obiekt-akcja porządek obiekt-akcja porządek akcja-obiekt porządek akcja-obiekt

3 Dokumentacja i Jakość Oprogramowania 3/27Projektowanie interfejsu użytkownika (2) Projektowanie nawigacji - rodzaje sterowania Język komend (np. DOS, SQL) Język komend (np. DOS, SQL) duża elastyczność duża elastyczność konieczność nauczenia się składni konieczność nauczenia się składni duża podatność na błędy duża podatność na błędy odmiana - język naturalny (np. asystent MS Office) odmiana - język naturalny (np. asystent MS Office) Menu Menu raczej szerokie i płytkie niż wąskie i głębokie raczej szerokie i płytkie niż wąskie i głębokie psychologiczne ograniczenie liczby komend (do 8) psychologiczne ograniczenie liczby komend (do 8) skróty klawiszowe skróty klawiszowe grupowanie wg elementów (Plik, Tabela, Okno) i akcji interfejsowych (Edycja, Wstaw, Format) grupowanie wg elementów (Plik, Tabela, Okno) i akcji interfejsowych (Edycja, Wstaw, Format) Bezpośrednia manipulacja Bezpośrednia manipulacja nie wszyskie operacje są intuicyjne nie wszyskie operacje są intuicyjne różne odmiany operacji przez klawisze kontrolne różne odmiany operacji przez klawisze kontrolne

4 Dokumentacja i Jakość Oprogramowania 4/27Projektowanie interfejsu użytkownika (2) Typy menu Pasek menu (menu bar) - menu główne Pasek menu (menu bar) - menu główne Menu opuszczane (drop-down menu) Menu opuszczane (drop-down menu) Menu wyskakujące (pop-up menu) - menu lokalne Menu wyskakujące (pop-up menu) - menu lokalne Menu zakładkowe (tab menu) Menu zakładkowe (tab menu) Przyciski (push buttons) Przyciski (push buttons) Pasek przycisków (tool bar) Pasek przycisków (tool bar) Mapa interaktywna (image map) Mapa interaktywna (image map)

5 Dokumentacja i Jakość Oprogramowania 5/27Projektowanie interfejsu użytkownika (2) Pasek menu (menu bar) Główne menu aplikacji - lista komend na górze ekranu, zawsze pokazywana, Główne menu aplikacji - lista komend na górze ekranu, zawsze pokazywana, Zalecana taka sama organizacja jak w innych aplikacjach dla tego samego systemu operacyjnego Zalecana taka sama organizacja jak w innych aplikacjach dla tego samego systemu operacyjnego Elementy menu - zawsze jedno słowo Elementy menu - zawsze jedno słowo Elementy menu prowadzą zawsze do menu opuszczanych, nigdy nie wykonują operacji Elementy menu prowadzą zawsze do menu opuszczanych, nigdy nie wykonują operacji

6 Dokumentacja i Jakość Oprogramowania 6/27Projektowanie interfejsu użytkownika (2) Menu opuszczane (drop-down menu) Stosowane jako menu drugiego poziomu pod menu głównym lub z menu lokalnego - lista komend umieszczonych jedna pod drugą Stosowane jako menu drugiego poziomu pod menu głównym lub z menu lokalnego - lista komend umieszczonych jedna pod drugą Elementy menu mają nazwy często składające się z 2, 3 słów Elementy menu mają nazwy często składające się z 2, 3 słów Grupować logicznie po kilka komend na liście Grupować logicznie po kilka komend na liście Elementy menu prowadzą do innych menu, do dialogów lub do wykonania komendy Elementy menu prowadzą do innych menu, do dialogów lub do wykonania komendy

7 Dokumentacja i Jakość Oprogramowania 7/27Projektowanie interfejsu użytkownika (2) Menu wyskakujące (pop-up menu) Menu lokalne, pojawia się po kliknięciu myszą, zależy od miejsca kliknięcia, znika po wyborze Menu lokalne, pojawia się po kliknięciu myszą, zależy od miejsca kliknięcia, znika po wyborze Raczej dla doświadczonych użytkowników Raczej dla doświadczonych użytkowników Duplikuje komendy z menu głównego Duplikuje komendy z menu głównego Zawiera tylko komendy odnoszące się do wybranego elementu na ekranie Zawiera tylko komendy odnoszące się do wybranego elementu na ekranie

8 Dokumentacja i Jakość Oprogramowania 8/27Projektowanie interfejsu użytkownika (2) Menu zakładkowe (tab menu) Stosowane w układzie wielostronicowym, przełącza całą zawartość okna lub ramki Stosowane w układzie wielostronicowym, przełącza całą zawartość okna lub ramki Elementy menu muszą być krótkie tak, by wszystkie zakładki zmieściły się w jednym wierszu (maks. 2 wiersze) Elementy menu muszą być krótkie tak, by wszystkie zakładki zmieściły się w jednym wierszu (maks. 2 wiersze)

9 Dokumentacja i Jakość Oprogramowania 9/27Projektowanie interfejsu użytkownika (2) Przyciski (push buttons) Grupa do kilku przycisków umieszczonych w uporządkowany sposób (w jednym rzędzie lub jednej kolumnie), stosowana w oknach dialogowych Grupa do kilku przycisków umieszczonych w uporządkowany sposób (w jednym rzędzie lub jednej kolumnie), stosowana w oknach dialogowych Krótkie nazwy elementów menu Krótkie nazwy elementów menu Stosuje się dodatkowe ikony ułatwiające lokalizację i zrozumienie znaczenia przycisku Stosuje się dodatkowe ikony ułatwiające lokalizację i zrozumienie znaczenia przycisku Rzadko stosuje się same ikony Rzadko stosuje się same ikony Elementy menu wiodą do innego dialogu lub do wykonania operacji Elementy menu wiodą do innego dialogu lub do wykonania operacji

10 Dokumentacja i Jakość Oprogramowania 10/27Projektowanie interfejsu użytkownika (2) Pasek przycisków (tool bar) Grupa wielu małych przycisków tego samego kształtu umieszczonych jeden obok drugiego lub jeden nad drugim, cały czas widoczna na ekranie Grupa wielu małych przycisków tego samego kształtu umieszczonych jeden obok drugiego lub jeden nad drugim, cały czas widoczna na ekranie Elementy menu najczęściej oznaczane tylko ikoną - wówczas objaśnienie pojawia się przy najechaniu myszą. Elementy menu najczęściej oznaczane tylko ikoną - wówczas objaśnienie pojawia się przy najechaniu myszą. Stosować intuicyjnie zrozumiałe i łatwe do zapamiętania ikony. Stosować intuicyjnie zrozumiałe i łatwe do zapamiętania ikony. Grupować przyciski. Grupować przyciski. Przyciski wiodą do dialogów lub do wykonania operacji (często stosowane). Przyciski wiodą do dialogów lub do wykonania operacji (często stosowane).

11 Dokumentacja i Jakość Oprogramowania 11/27Projektowanie interfejsu użytkownika (2) Mapa interaktywna (image map) Obraz graficzny, którego pewne obszary są przypisane do komend lub innych menu. Obraz graficzny, którego pewne obszary są przypisane do komend lub innych menu. Stosować tylko wówczas, gdy obraz dodaje znaczenia dla menu Stosować tylko wówczas, gdy obraz dodaje znaczenia dla menu Obraz powinien pokazywać, które jego fragmenty są interaktywne Obraz powinien pokazywać, które jego fragmenty są interaktywne Stosować objaśnienia przy najechaniu myszą. Stosować objaśnienia przy najechaniu myszą.

12 Dokumentacja i Jakość Oprogramowania 12/27Projektowanie interfejsu użytkownika (2) Komunikaty Powinny być jasne, zwięzłe i kompletne (sprzeczne wymagania) Powinny być jasne, zwięzłe i kompletne (sprzeczne wymagania) Powinny być gramatycznie poprawne i wolne od żargonu i skrótów (tłumaczenia) Powinny być gramatycznie poprawne i wolne od żargonu i skrótów (tłumaczenia) Pytania powinny być pozytywne, a nie negatywne, np.: Pytania powinny być pozytywne, a nie negatywne, np.: "Czy na pewno nie chcesz kontynuować?" (tak/nie) "Czy na pewno nie chcesz kontynuować?" (tak/nie) "Czy na pewno chcesz przerwać operację?" (tak/nie) "Czy na pewno chcesz przerwać operację?" (tak/nie)

13 Dokumentacja i Jakość Oprogramowania 13/27Projektowanie interfejsu użytkownika (2) Rodzaje komunikatów Komunikaty błędów Komunikaty błędów Żądania potwierdzenia Żądania potwierdzenia Powiadomienia Powiadomienia Komunikaty o opóźnieniach Komunikaty o opóźnieniach Objaśnienia Objaśnienia Podpowiedzi Podpowiedzi Pomoc Pomoc

14 Dokumentacja i Jakość Oprogramowania 14/27Projektowanie interfejsu użytkownika (2) Komunikaty błędów Informują użytkownika o tym, że próbował wykonać nieprawidłową operację Informują użytkownika o tym, że próbował wykonać nieprawidłową operację Zawsze wyjaśniać powód wystąpienia błędu Zawsze wyjaśniać powód wystąpienia błędu Sugerować poprawny sposób postępowania Sugerować poprawny sposób postępowania

15 Dokumentacja i Jakość Oprogramowania 15/27Projektowanie interfejsu użytkownika (2) Żądania potwierdzenia Wyświetlane wówczas, gdy dalsze wykonywanie operacji wymaga potwierdzenia użytkownika (np. operacja nie może zostać cofnięta) Wyświetlane wówczas, gdy dalsze wykonywanie operacji wymaga potwierdzenia użytkownika (np. operacja nie może zostać cofnięta) Zawsze wyjaśniać powód komunikatu Zawsze wyjaśniać powód komunikatu Odpowiedzi OK/Cancel, gdy istnieje zalecany sposób postępowania Odpowiedzi OK/Cancel, gdy istnieje zalecany sposób postępowania Odpowiedzi Tak/Nie, gdy obie odpowiedzi są równoprawne Odpowiedzi Tak/Nie, gdy obie odpowiedzi są równoprawne Unikać mieszania Tak/Nie - OK/Cancel Unikać mieszania Tak/Nie - OK/Cancel

16 Dokumentacja i Jakość Oprogramowania 16/27Projektowanie interfejsu użytkownika (2) Powiadomienia Wyświetlane wówczas, gdy żądana operacja została zakończona Wyświetlane wówczas, gdy żądana operacja została zakończona Rzadko stosowane, raczej do długo trwających operacji Rzadko stosowane, raczej do długo trwających operacji Zalecana możliwość wyłączenia takiego komunikatu Zalecana możliwość wyłączenia takiego komunikatu

17 Dokumentacja i Jakość Oprogramowania 17/27Projektowanie interfejsu użytkownika (2) Komunikaty o opóźnieniach Wyświetlane wówczas, gdy żądana operacja jest długotrwała (więcej niż 7 sekund) Wyświetlane wówczas, gdy żądana operacja jest długotrwała (więcej niż 7 sekund) Najczęściej w formie ikony klepsydry (zmiana wskaźnika myszy) lub paska postępu Najczęściej w formie ikony klepsydry (zmiana wskaźnika myszy) lub paska postępu Wskazana możliwość przerwania długotrwałej operacji Wskazana możliwość przerwania długotrwałej operacji

18 Dokumentacja i Jakość Oprogramowania 18/27Projektowanie interfejsu użytkownika (2) Objaśnienia Krótkie komunikaty wyjaśniające działanie elemenu menu, pojawiające się przy najechaniu na dany element myszą Krótkie komunikaty wyjaśniające działanie elemenu menu, pojawiające się przy najechaniu na dany element myszą Muszą być krótkie (2-3 wyrazy), by użytkownik zdążył je przeczytać Muszą być krótkie (2-3 wyrazy), by użytkownik zdążył je przeczytać

19 Dokumentacja i Jakość Oprogramowania 19/27Projektowanie interfejsu użytkownika (2) Podpowiedzi Komunikaty wyświetlane przy stosowaniu języka komend, podpowiadające poprawne możliwości składniowe Komunikaty wyświetlane przy stosowaniu języka komend, podpowiadające poprawne możliwości składniowe Muszą być zgodne ze składnią języka komend Muszą być zgodne ze składnią języka komend Muszą pokazywać jedynie poprawne możliwości Muszą pokazywać jedynie poprawne możliwości Mogą zawierać jedynie kilka możliwości Mogą zawierać jedynie kilka możliwości

20 Dokumentacja i Jakość Oprogramowania 20/27Projektowanie interfejsu użytkownika (2) Pomoc Dodatkowa informacja wyjaśniajaca znaczenie poszczególnych komponentów systemu i sposób ich użycia Dodatkowa informacja wyjaśniajaca znaczenie poszczególnych komponentów systemu i sposób ich użycia Powinna być w każdym systemie Powinna być w każdym systemie Powinna być zorganizowana poprzez spis treści i indeks lub wyszukiwanie słów kluczowych Powinna być zorganizowana poprzez spis treści i indeks lub wyszukiwanie słów kluczowych Powinna być wrażliwa na kontekst wywołania Powinna być wrażliwa na kontekst wywołania

21 Dokumentacja i Jakość Oprogramowania 21/27Projektowanie interfejsu użytkownika (2) Przykłady komunikatów (1) OK Cancel Błąd w numerze telefonu Podaj poprawny numer telefonu. Numer telefonu jest błędny. Sugerowanie poprawnej akcji przed stwierdzeniem błędu może wprowadzać użytkownika w zakłopotanie

22 Dokumentacja i Jakość Oprogramowania 22/27Projektowanie interfejsu użytkownika (2) Przykłady komunikatów (2) OK Cancel Błąd w numerze telefonu Numer telefonu jest błędny. Podaj poprawny numer telefonu. Stwierdzenie błędu powinno poprzedzać sugerowanie poprawnej akcji

23 Dokumentacja i Jakość Oprogramowania 23/27Projektowanie interfejsu użytkownika (2) Przykłady komunikatów (3) OK Cancel Błąd w numerze telefonu Numer kierunkowy jest błędny. Podaj poprawny numer kierunkowy. Problem powinien zostać objaśniony tak szczegółowo, jak to jest tylko możliwe

24 Dokumentacja i Jakość Oprogramowania 24/27Projektowanie interfejsu użytkownika (2) Przykłady komunikatów (4) OK Cancel Błąd w numerze telefonu Nie rozpoznano numeru kierunkowego. Proszę podaj inny numer kierunkowy. Komunikat powinien być uprzejmy

25 Dokumentacja i Jakość Oprogramowania 25/27Projektowanie interfejsu użytkownika (2) Przykłady komunikatów (5) OK Cancel Błąd w numerze telefonu (1234) Nie rozpoznano numeru kierunkowego. Proszę podaj inny numer kierunkowy. Podanie numeru błędu ułatwia odnalezienie wyjaśnienia w pomocy

26 Dokumentacja i Jakość Oprogramowania 26/27Projektowanie interfejsu użytkownika (2) Dokumentacja projektu nawigacji Diagramy nawigacji okien (WND) Diagramy nawigacji okien (WND) Rzeczywiste przypadki użycia Rzeczywiste przypadki użycia Przypadki użycia definiowane w analizie są wystarczające dla zrozumienia wymaganej funkcjonalności Przypadki użycia definiowane w analizie są wystarczające dla zrozumienia wymaganej funkcjonalności Rzeczywiste przypadki użycia pokazują kroki, jakie użytkownik przechodzi w kontakcie z systemem Rzeczywiste przypadki użycia pokazują kroki, jakie użytkownik przechodzi w kontakcie z systemem Wymaganie - wszystkie zdarzenia muszą być opisane w terminologii interfejsu użytkownika. Wymaganie - wszystkie zdarzenia muszą być opisane w terminologii interfejsu użytkownika.

27 Dokumentacja i Jakość Oprogramowania 27/27Projektowanie interfejsu użytkownika (2) 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


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

Podobne prezentacje


Reklamy Google