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

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ŝytkownikau. uŝytkownika. Zagadnienia. Zawartość. projektu interfejsu

GUI - projektowanie interfejsów

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

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

Oficyna Wydawnicza UNIMEX ebook z zabezpieczeniami DRM

Projektowanie logiki aplikacji

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

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

Analiza i projektowanie aplikacji Java

Projektowanie architektury systemu. Jarosław Kuchta Projektowanie Aplikacji Internetowych

Projektowanie bazy danych. Jarosław Kuchta Projektowanie Aplikacji Internetowych

GUI - projektowanie interfejsów

Inżynieria oprogramowania Jarosław Kuchta. Modelowanie interakcji

Projektowanie interakcji. Jarosław Kuchta

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

Projektowanie Graficznych Interfejsów Użytkownika Robert Szmurło

Kompleksowe tworzenie aplikacji klasy Desktop z wykorzystaniem SWT i

Instrukcja użytkownika Systemu Elektronicznej Faktury

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

Tworzenie prezentacji w MS PowerPoint

Pokaz slajdów na stronie internetowej

Obliczanie opłaty elektronicznej za przejazd wybraną trasą (krok po kroku)

W prawym górnym rogu widoczna jest nazwa zalogowanego użytkownika.

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

Instrukcja. Rejestracji i aktywacji konta w systemie so-open.pl DOTACJE NA INNOWACJE; SOFTWARE OPERATIONS SP. Z O. O.

Analiza i projektowanie oprogramowania. Analiza i projektowanie oprogramowania 1/32

Podręcznik użytkownika Obieg dokumentów

Jarosław Kuchta Projektowanie Aplikacji Internetowych. Projektowanie warstwy danych

Czcionki bezszeryfowe

BAZY DANYCH Formularze i raporty

Cechy systemu X Window: otwartość niezależność od producentów i od sprzętu, dostępny kod źródłowy; architektura klient-serwer;

LabelLogic PRZEWODNIK UŻYTKOWNIKA. Spis treści. Label Choices. Data Library. Print Centre.

MINI PRZEWODNIK - Pierwsze kroki w systemie po wdrożeniu nowej bankowości elektronicznej BOŚBank24 iboss

Robert Szmurło. Projektowanie Graficznych Interfejsów Użytkownika

MS Access formularze

Zasady tworzenia podstron

1. INFORMACJE O DOKUMENCIE 2. WPROWADZENIE

Język UML w modelowaniu systemów informatycznych

2.5 Dzielenie się wiedzą

System Informatyczny CELAB. Terminy, alarmy

Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0

Data wydania: Projekt współfinansowany przez Unię Europejską ze środków Europejskiego Funduszu Społecznego

Z Małej Szkoły w Wielki Świat

Korporacja Kurierska

Część 3 - Konfiguracja

PekaoBIZNES 24 Szybki START. Przewodnik dla Użytkowników z dostępem podstawowym

Dokumentacja użytkownika systemu

raporty-online podręcznik użytkownika

Instrukcja użytkownika Platforma Walutowa

Oferta szkoleniowa Yosi.pl 2012/2013

Co nowego w wersji 3.10 programu Kancelaris

Nowe notowania epromak Professional

Wnioski i dyspozycje elektroniczne. Instrukcja użytkownika systemu bankowości internetowej dla firm. BOŚBank24 iboss

Spis treści Panel kontrolny - parametry Wybór jednostek Kontrolka czasu Kontrolka wyboru zestawienia danych...

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

WORDPRESS INSTRUKCJA OBSŁUGI

Projektowanie Graficznych Interfejsów Użytkownika Robert Szmurło

Podręcznik użytkownika Wprowadzający aplikacji Wykaz2

Komputery I (2) Panel sterowania:

Pracownia internetowa w każdej szkole (edycja Jesień 2007)

JLR EPC. Szybki start. Spis treści. Polish Version 2.0. Przewodnik krok po kroku Przewodnik po ekranach

I. Interfejs użytkownika.

Nabór Bursy/CKU. Do korzystania ze strony elektronicznej rekrutacji zalecamy następujące wersje przeglądarek internetowych:

Do korzystania ze strony elektronicznej rekrutacji zalecamy następujące wersje przeglądarek internetowych:

Dodanie nowej formy do projektu polega na:

Podręcznik użytkownika Publikujący aplikacji Wykaz2

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

Projektowanie IU wejście/wyj. cie/wyjście. Projektowanie wejścia. podstawowe zasady (1) Przetwarzanie on-line

Munsol - dokument zmian. MUNSOL - Dokument zmian

Podręcznik użytkownika

Spis treści. 1. Logowanie. 2. Strona startowa. 3. Moje dane. 4. Towary. 5. Zamówienia. 6. Promocje

Doładowania telefonów

Formularze i raporty w MS Access

TRAVEL OFFICE MANAGEMENT SP. Z O.O. System TOM 24. Oferta na LCD. Opis modułu Oferty na LCD w nowej wersji systemu TOM 24 Data aktualizacji

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

CRM. moduł zarządzania relacjami z klientami. Poradnik dla użytkowników systemu FIRMA 1/1

Po najechaniu kursorem na nazwę kategorii pojawi się rozwijane menu:

Projektowanie warstwy danych

1. Logowanie się do panelu Adminitracyjnego

Instrukcja dla użytkownika korzystającego z Usługi Moje faktury

Dokumentacja modułu OpenCart

Spis treści. Warto zapamiętać...2. Podstawy...3

Planowanie zajęć równoległych i mieszanych

KONFIGURACJA PRZEGLĄDAREK. Poniższa konfiguracja dedykowana jest dla Bankowości Internetowej SGB

JPK w programie Ewa - fakturowanie i magazyn

Wspólne Zaawansowana tabela

e-wsparcie Barbara Muszko Aktualizacja Twojej witryny internetowej tak prosta, jak obsługa Worda

PRZEWODNIK PO SERWISIE BRe BROKERS Rozdział 6

Instrukcja. Zlecenia spedycyjne WWW

Baza wiedzy instrukcja

Instrukcja użytkownika systemu medycznego

OPIEKUN DORADCY: KONTO FIRMY - PIERWSZE KROKI

Instrukcja obsługi notowań koszykowych w M@klerPlus

INSTRUKCJA ADMINISTRATORA KLIENTA

1. INFORMACJE O DOKUMENCIE 2. WPROWADZENIE

OpenOfficePL. Zestaw szablonów magazynowych. Instrukcja obsługi

Podręcznik użytkownika programu. Ceremonia 3.1

Instrukcja uŝytkowania programu

Transkrypt:

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

Zagadnienia Podstawowe zasady projektowania interfejsu użytkownika Proces projektowania interfejsu użytkownika Projektowanie struktury interfejsu użytkownika Prototypowanie i ocena interfejsu użytkownika Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 2/32

Zawartość projektu interfejsu użytkownika Charakterystyka użytkowników Wyszczególnienie okien i projekt nawigacji między oknami Projekt wizualny okna głównego Projekt funkcjonalności interfejsu akcje użytkownika menu Scenariusze użycia Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 3/32

Klasyfikacja użytkowników Doświadczenie i umiejętności niskie średnie wysokie eksperckie Uprawnienia decyzyjne kierownik administrator zwykły użytkownik Przynależność organizacyjna członek personelu współpracownik klient Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 4/32

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

Składowe interfejsu użytkownika Mechanizm wejściowy (input) realizuje wprowadzanie danych przez użytkownika do systemu (np. formularze). Mechanizm wyjściowy (output) realizuje dostarczanie danych przez system dla użytkownika (np. raporty, strony Web). Mechanizm nawigacji realizuje sterowanie systemem przez użytkownika (np. menu, przyciski). Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 6/32

Podstawowe zasady projektowania interfejsu użytkownika Wygląd interfejs powinien być podzielony na różne obszary przeznaczone do różnych celów. Uświadamianie zawartości interfejs 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ą. 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ń. 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. Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 7/32

Podział interfejsu na obszary Obszar nawigacji przeglądarki bszar nawigacji strony Obszar nawigacji strony Obszar nawigacji strony Obszar informacyjny strony Obszar statusu przeglądarki Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 8/32

Proponowane obszary Nawigacja między sekcjami Obszar menu głównego Obszar przycisków sterujących Identyfikacja strony Nawigacja między stronami Nawigacja na stronie Treść główna Obszar statusu Nawigacja dodatkowa Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 9/32

Zasady podziału Każdy obszar powinien mieć jasno wytyczone granice. 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. Obszary informacyjne powinny być uszeregowane w kolejności przetwarzania tej informacji przez użytkownika (z góry w dół, od lewej do prawej). Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 10/32

Uszeregowanie pionowe Dane klienta Imię Nazwisko Adres Miejscowość Kod poczt. 00-000 Ulica Nr domu Nr lokalu Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 11/32

Uszeregowanie poziome Dane klienta Imię Nazwisko Adres Miejscowość Kod poczt. 00-000 Ulica Nr domu Nr lokalu Układ poziomy ułatwia zastosowanie różnych języków! Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 12/32

Zasady uświadamiania zawartości (1) 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ł). 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źnikiem myszy. Przyciski odpowiedzi na oknach komunikatów powinny być łatwo interpretowane w kontekście treści komunikatu. Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 13/32

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. Jeśli informacje na sąsiadujących obszarach są podobne w formie, to muszą być oddzielone dodatkowym elementem (np. linią). Każe 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. Raporty powinny mieć datę sporządzenia. Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 14/32

Zasady estetyki (1) 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). 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. Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 15/32

Zasady estetyki (2) Tekst główny powinien być prezentowany czcionką 8-10 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. 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. Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 16/32

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 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 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. Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 17/32

Doświadczenie użytkownika (2) 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 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ącyc do wszystkich funkcji aplikacji, również tych rzadziej wykorzystywanych. Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 18/32

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. 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. Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 19/32

Spójność 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. Interfejs użytkownika aplikacji powinien być spójny z innymi aplikacjami z tej samej dziedziny zastosowania wykorzystywanymi w określonym systemie operacyjnym. Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 20/32

Minimalizacja wysiłku 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. 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ą. Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 21/32

Proces projektowania interfejsu użytkownika Opracowanie scenariuszy użycia Ocena interfejsu Projektowanie struktury interfejsu Prototypowanie projektu interfejsu Projektowanie standardów interfejsu Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 22/32

Scenariusz użycia 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). Nie rozpatruje się wszystkich możliwych scenariuszy użycia, lecz dwa lub trzy najczęściej realizowane. Sposób prezentacji: opis tekstowy Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 23/32

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. Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 24/32

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. Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 25/32

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. Sposób prezentacji: Window Navigation Diagram (WND) Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 26/32

Projekt nawigacji «window» Main Menu «window» Menu A zdarzenie / akcja «window» Menu B «form» Form A «form» Form B «form» Form C «report» Report A Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 27/32

Prototypowanie interfejsu Storyboard Prototypowanie HTML Prototypowanie w języku docelowym Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 28/32

Storyboard Dane klienta Menu klienta Dodaj klienta Znajdź klienta Lista klientów DodajKlienta ZnajdźKlienta Imię Adres Miejscowość Nazwisko Kod poczt. 00-000 DodajKlienta Ulica Nr domu Nr lokalu ListaKlientów Znajdź klienta Imię Nazwisko Adres Miejscowość Kod poczt. 00-000 KlientZnaleziony PoprawDaneKlienta ZnajdźKlienta Ulica Nr domu Nr lokalu Lista klientów Dane klienta Abacki Adam Babacki Bartosz Cabacki Czesław PodajDaneKlienta ListaKlientów ZnajdźKlienta ListaKlientów Imię Adam Adres Miejscowość Nieznane Ulica Zapole Nazwisko Abacki Kod poczt. 12-345 Nr domu 13A Nr lokalu 13 Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 29/32

Prototypowanie w HTML interaktywne szybkie w wykonaniu nie odpowiada obrazowi docelowemu języku docelowym interaktywne wolniejsze odpowiada obrazowi docelowemu Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 30/32

Ocena interfejsu ocena heurystyczna ocena zgodności z zasadami min. 3 ekspertów przegląd interfejsu z użytkownikiem ocena interaktywna u użytkownika formalne testowanie użyteczności Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 31/32

Literatura 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, http:// www.pst.informatik.uni-muenchen.de /personen/kochn/puml2001-hen-koch.pdf Coad P., Yourdon E.: Projektowanie obiektowe, Oficyna wydawnicza Read Me, Warszawa 1994 Projektowanie Aplikacji Internetowych Projektowanie interfejsu użytkownika 32/32