Jarosław Kuchta Projektowanie Aplikacji Internetowych. Projektowanie IU -nawigacja

Transkrypt

1 Jarosław Kuchta Projektowanie Aplikacji Internetowych Projektowanie IU -nawigacja

2 Zagadnienia Wyjaśnienie pojęć Podstawowe zasady projektowania nawigacji Rodzaje sterowania Różne rodzaje menu (zasady użycia) Komunikaty (rodzaje i zasady projektowania) Przykłady komunikatów o błędach Dokumentowanie projektu nawigacji Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 2/29

3 Wyjaśnienie pojęć Akcja - działanie użytkownika inicjujące wykonanie określonej operacji Komenda - polecenie wykonania operacji Menu - służy do wyboru akcji, przełączania widoku (stron, okien) Dialog - okno służące do wprowadzania dodatkowych danych potrzebnych do wykonania operacji Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 3/29

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

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

6 Typy menu Pasek menu (menu bar) - menu główne Menu opuszczane (drop-down menu) Menu wyskakujące (pop-up menu) - menu lokalne Menu zakładkowe (tab menu) Przyciski (push buttons) Pasek przycisków (tool bar) Mapa interaktywna (image map) Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 6/29

7 Pasek menu (menu bar) 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 Elementy menu - zawsze jedno słowo Elementy menu prowadzą zawsze do menu opuszczanych, nigdy nie wykonują operacji Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 7/29

8 Menu opuszczane (drop-down menu) 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 Grupować logicznie po kilka komend na liście Elementy menu prowadzą do innych menu, do dialogów lub do wykonania komendy Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 8/29

9 Menu wyskakujące (pop-up menu) Menu lokalne, pojawia się po kliknięciu myszą, zależy od miejsca kliknięcia, znika po wyborze Raczej dla doświadczonych użytkowników Duplikuje komendy z menu głównego Zawiera tylko komendy odnoszące się do wybranego elementu na ekranie Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 9/29

10 Menu zakładkowe (tab menu) 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) Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 10/29

11 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 Krótkie nazwy elementów menu Stosuje się dodatkowe ikony ułatwiające lokalizację i zrozumienie znaczenia przycisku Rzadko stosuje się same ikony Elementy menu wiodą do innego dialogu lub do wykonania operacji Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 11/29

12 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 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. Grupować przyciski. Przyciski wiodą do dialogów lub do wykonania operacji (często stosowane). Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 12/29

13 Mapa interaktywna (image map) Obraz graficzny, którego pewne obszary są przypisane do komend lub innych menu. Stosować tylko wówczas, gdy obraz dodaje znaczenia dla menu Obraz powinien pokazywać, które jego fragmenty są interaktywne Stosować objaśnienia przy najechaniu myszą. Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 13/29

14 Komunikaty Powinny być jasne, zwięzłe i kompletne (sprzeczne wymagania) Powinny być gramatycznie poprawne i wolne od żargonu i skrótów (tłumaczenia) Pytania powinny być pozytywne, a nie negatywne, np.: "Czy na pewno nie chcesz kontynuować?" (tak/nie) "Czy na pewno chcesz przerwać operację?" (tak/nie) Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 14/29

15 Rodzaje komunikatów Komunikaty błędów Żądania potwierdzenia Powiadomienia Komunikaty o opóźnieniach Objaśnienia Podpowiedzi Pomoc Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 15/29

16 Komunikaty błędów Informują użytkownika o tym, że próbował wykonać nieprawidłową operację Zawsze wyjaśniać powód wystąpienia błędu Sugerować poprawny sposób postępowania Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 16/29

17 Żądania potwierdzenia 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 Odpowiedzi OK/Cancel, gdy istnieje zalecany sposób postępowania Odpowiedzi Tak/Nie, gdy obie odpowiedzi są równoprawne Unikać mieszania Tak/Nie - OK/Cancel Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 17/29

18 Powiadomienia Wyświetlane wówczas, gdy żądana operacja została zakończona Rzadko stosowane, raczej do długo trwających operacji Zalecana możliwość wyłączenia takiego komunikatu Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 18/29

19 Komunikaty o opóźnieniach 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 Wskazana możliwość przerwania dlugotrwałej operacji Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 19/29

20 Objaśnienia 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ć Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 20/29

21 Podpowiedzi 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ą pokazywać jedynie poprawne możliwości Mogą zawierać jedynie kilka możliwości Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 21/29

22 Pomoc Dodatkowa informacja wyjaśniajaca znaczenie poszczególnych komponentów systemu i sposób ich użycia Powinna być w każdym systemie Powinna być zorganizowana poprzez spis treści i indeks lub wyszukiwanie słów kluczowych Powinna być wrażliwa na kontekst wywołania Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 22/29

23 Przykłady komunikatów (1) Błąd w numerze telefonu Numer telefonu jest błędny. Podaj poprawny numer telefonu.. OK Cancel Nie wiadomo, co ma reprezentować przycisk "Cancel" Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 23/28

24 Przykłady komunikatów (2) Błąd w numerze telefonu Numer telefonu jest błędny. Podaj poprawny numer telefonu. OK Komunikat nie powinien być tak kategoryczny Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 24/28

25 Przykłady komunikatów (3) Błąd w numerze telefonu Nie rozpoznano numeru kierunkowego. Podaj poprawny numer kierunkowy. OK Problem powinien zostać objaśniony tak szczegółowo, jak to jest tylko możliwe Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 25/28

26 Przykłady komunikatów (4) Błąd w numerze telefonu Nie rozpoznano numeru kierunkowego. Proszę podaj inny numer kierunkowy. OK Komunikat powinien być uprzejmy Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 26/28

27 Przykłady komunikatów (5) Błąd w numerze telefonu (1234) Nie rozpoznano numeru kierunkowego. Proszę podaj inny numer kierunkowy. OK Podanie numeru błędu ułatwia odnalezienie wyjaśnienia w pomocy Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 27/28

28 Dokumentacja projektu nawigacji Diagramy nawigacji okien (WND) Rzeczywiste przypadki użycia 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 Wymaganie - wszystkie zdarzenia muszą być opisane w terminologii interfejsu użytkownika. Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 28/29

29 Literatura Dennis A., Wixom B.H., Tegarden D., Systems Analysis & Design. An Object-Oriented Approach with UML, John Wiley and Sons, USA, 2002 Projektowanie Aplikacji Internetowych Projektowanie IU - nawigacja 29/29