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

Podobne dokumenty
Projektowanie interfejsu użytkownika (1) Jarosław Kuchta Projektowanie Aplikacji Internetowych

Inżynieria Oprogramowania Jarosław Kuchta. Projektowanie interfejsu użytkownika (zasady ogólne)

Projektowanie interfejsu użytkownika. Jarosław Kuchta Projektowanie Aplikacji Internetowych

Projektowanie interakcji. Jarosław Kuchta

Projektowanie logiki aplikacji

Jarosław Kuchta Projektowanie Aplikacji Internetowych. Projektowanie IU wejście/wyjście

Inżynieria oprogramowania Jarosław Kuchta. Modelowanie interakcji

Diagramy stanów i aktywności. Jarosław Kuchta Dokumentacja i Jakość Oprogramowania

Diagramy interakcji. Jarosław Kuchta Dokumentacja i Jakość Oprogramowania

Projektowanie interfejsu uŝytkownikau. uŝytkownika. Zagadnienia. Zawartość. projektu interfejsu

Modelowanie aktywności. Jarosław Kuchta Programowanie Współbieżne

Analiza i projektowanie aplikacji Java

Podręcznik Użytkownika LSI WRPO

Projektowanie architektury systemu rozproszonego. Jarosław Kuchta Projektowanie Aplikacji Internetowych

Instrukcja instalacji oprogramowania Flow!Works na komputerze z systemem Windows 7

Projektowanie architektury systemu. Jarosław Kuchta Projektowanie Aplikacji Internetowych

ABC 2002/XP PL EXCEL. Autor: Edward C. Willett, Steve Cummings. Rozdział 1. Podstawy pracy z programem (9) Uruchamianie programu (9)

1. Przypisy, indeks i spisy.

Jarosław Kuchta Projektowanie Aplikacji Internetowych. Projektowanie warstwy danych

5.4. Efekty specjalne

Spis treści 1. Wstęp Logowanie Główny interfejs aplikacji Ogólny opis interfejsu Poruszanie się po mapie...

1. Wstęp Niniejszy dokument jest instrukcją użytkownika dla aplikacji internetowej DM TrackMan.

6.4. Efekty specjalne

Informatyka Arkusz kalkulacyjny Excel 2010 dla WINDOWS cz. 1

Uniwersytet Jagielloński Interfejsy graficzne. Wykład 6. Style interfejsu. Barbara Strug

AKADEMIA GÓRNICZO-HUTNICZA IM. STANISŁAWA STASZICA W KRAKOWIE. QuIDE Quantum IDE PODRĘCZNIK UŻYTKOWNIKA

Informatyka Arkusz kalkulacyjny Excel 2010 dla WINDOWS cz. 1

Modelowanie przypadków użycia. Jarosław Kuchta Projektowanie Aplikacji Internetowych

Co nowego w wersji 3.10 programu Kancelaris

Wyniki operacji w programie

Spis treści. 1 Moduł Mapy 2

Formularze w programie Word

TomTom Przewodnik informacyjny

Dokumentacja eksploatacyjna systemu SOVAT dla użytkownika zewnętrznego (pracownik jednostki)

Edytor tekstu MS Office Word

Ćwiczenia nr 2. Edycja tekstu (Microsoft Word)

Oprogramowanie powiększające obraz na ekranie, zmniejszające zmęczenie wzroku. Podręcznik Szybkiego Startu

Instrukcja obsługi aplikacji

Dane słowa oraz wyrażenia są tłumaczone przy pomocy polecenia Przetwarzanie > Tłumaczenie

Elektroniczny Urząd Podawczy

AutoCAD 1. Otwieranie aplikacji AutoCAD AutoCAD 1

Tworzenie prezentacji w MS PowerPoint

Nr: 15. Tytuł: Kancelaris w systemie Windows 8 i Windows 8.1. Data modyfikacji:

1. Wymagania techniczne Uruchomienie aplikacji Zasady pracy z aplikacją Interfejs aplikacji formularza elektronicznego...

1. Skopiować naswój komputer: (tymczasowy adres)

Obszar Logistyka/Zamówienia Publiczne

Twoje potrzeby. Nasze rozwiązania.

Instrukcja instalacji i obsługi systemu AR4vision (wersja 1.0.0)

System Informatyczny CELAB. Terminy, alarmy

Projektowanie struktury danych

BAZY DANYCH MAKRA I PRZYCISKI. Microsoft Access. Adrian Horzyk. Akademia Górniczo-Hutnicza

Korzystanie z aplikacji P-touch Transfer Manager

windows XP n a j l e p s z e t r i k i

Formularz MS Word. 1. Projektowanie formularza. 2. Formularze do wypełniania w programie Word

LK1: Wprowadzenie do MS Access Zakładanie bazy danych i tworzenie interfejsu użytkownika

Temat: Kopiowanie katalogów (folderów) i plików pomiędzy oknami

I. Interfejs użytkownika.

plansoft.org Zmiany w Plansoft.org Panel wyszukiwania PLANOWANIE ZAJĘĆ, REZERWOWANIE SAL I ZASOBÓW

Oficyna Wydawnicza UNIMEX ebook z zabezpieczeniami DRM

Dodawanie operacji dodatkowych w WAPRO Mag.

plansoft.org Zmiany w Plansoft.org Błyskawiczny eksport danych PLANOWANIE ZAJĘĆ, REZERWOWANIE SAL I ZASOBÓW

2017 Electronics For Imaging, Inc. Informacje zawarte w niniejszej publikacji podlegają postanowieniom opisanym w dokumencie Uwagi prawne dotyczącym

OMNITRACKER Wersja testowa. Szybki przewodnik instalacji

Temat: Organizacja skoroszytów i arkuszy

biegle i poprawnie posługuje się terminologią informatyczną,

Platforma e-learningowa

ERGODESIGN - Podręcznik użytkownika. Wersja 1.0 Warszawa 2010

Prezentacja multimedialna MS PowerPoint 2010 (podstawy)

Praca z widokami i nawigacja w pokazie

Budowa aplikacji z graficznym interfejsem użytkownika - GUI (Graphic User Interface)

5.2. Pierwsze kroki z bazami danych

Wstęp Sterowanie Utworzenie, wybór i kasowanie gracza. utworzenia nowego gracza Nowy gracz Nastawienie gracza

5. Wyświetli nam się spis treści oraz lista rozdziałów. Aby wejść w podgląd podręcznika, należy wybrać interesujący nas rozdział oraz kliknąć w napis

Munsol - dokument zmian. MUNSOL - Dokument zmian

System Informatyczny CELAB. Pożywkarnia

Platforma e-learningowa

Obszar Księga Główna. Harmonogramy księgowań. Instrukcja użytkownika

Podział na strony, sekcje i kolumny

Utworzenie aplikacji mobilnej Po uruchomieniu Visual Studio pokazuje się ekran powitalny. Po lewej stronie odnośniki do otworzenia lub stworzenia

ROZDZIAŁ 1: Instrukcja obsługi oprogramowania VMS

SYSTEM ZARZĄDZANIA RELACJAMI Z KLIENTEM CRM7

ELF. Instrukcja użytkownika. (System wspomagający wypełnianie wniosków elektronicznych)

Microsoft PowerPoint Poziom Zaawansowany PROGRAM SZKOLENIOWY. Plan szkolenia zawiera: Microsoft Excel Poziom Zaawansowany

W dowolnej przeglądarce internetowej należy wpisać poniższy adres:

Projektowanie warstwy danych

Voicer. SPIKON Aplikacja Voicer V100

Synchronizator plików (SSC) - dokumentacja

System egzaminów elektronicznych Instrukcja do Portalu Egzaminacyjnego i modułu task. Spis treści

Lista wprowadzonych zmian w systemie Vario v. 3.3 od wydania do wydania

Słowa kluczowe Sterowanie klawiaturą, klawiatura, klawisze funkcyjne, przesuwanie obiektów ekranowych, wydawanie poleceń za pomocą klawiatury

konspekt pojedynczy slajd sortowanie slajdów strona notatek 1. Widok normalny/konspekt 2. Widok sortowania slajdów 3.

etrader Pekao Podręcznik użytkownika Strumieniowanie Excel

Instrukcja obsługi programu MPJ6

Instalacja Czytnika Kart GemPc Twin 1.4 dla przeglądarek 32 bitowych dla systemów Windows XP/Vista/2000/7/8 32 bity i 64 bity Wersja 1.

RCP Grafiki zmiany w kontekście funkcjonowania nieobecności w grafiku pracy

Celem ćwiczenia jest zapoznanie się z podstawowymi funkcjami i pojęciami związanymi ze środowiskiem AutoCAD 2012 w polskiej wersji językowej.

INSTRUKCJA OBSŁUGI KREATORA SKŁADANIA WNIOSKÓW

Podstawy technologii cyfrowej i komputerów

Wstęp 7 Rozdział 1. OpenOffice.ux.pl Writer środowisko pracy 9

Transkrypt:

Jarosław Kuchta Projektowanie Aplikacji Internetowych Projektowanie IU -nawigacja

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Żą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

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

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

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

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

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

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

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

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

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

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

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

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