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



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

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

STRONA GŁÓWNA SPIS TREŚCI. Zarządzanie zawartością stron... 2 Tworzenie nowej strony... 4 Zakładka... 4 Prawa kolumna... 9

Jak spersonalizować wygląd bloga?

Audyt SEO. Elementy oraz proces przygotowania audytu. strona

SZABLONY KOMUNIKATÓW SPIS TREŚCI

Konfiguracja historii plików

I. Zakładanie nowego konta użytkownika.

System Informatyczny CELAB. Przygotowanie programu do pracy - Ewidencja Czasu Pracy

Instalacja. Zawartość. Wyszukiwarka. Instalacja Konfiguracja Uruchomienie i praca z raportem Metody wyszukiwania...

Logowanie do systemu Faktura elektroniczna

Instrukcja obsługi platformy zakupowej e-osaa (klient podstawowy)

Wdrożenie modułu płatności eservice dla systemu Virtuemart 2.0.x

GEO-SYSTEM Sp. z o.o. GEO-RCiWN Rejestr Cen i Wartości Nieruchomości Podręcznik dla uŝytkowników modułu wyszukiwania danych Warszawa 2007

Strona główna góra

Posiadane punkty lojalnościowe można również wykorzystać na opłacenie kosztów przesyłki.

Kto tak naprawdę odwiedza Twoją stronę?

Systemy mikroprocesorowe - projekt

Kancelaris - Zmiany w wersji 2.50

Aktualizacja CSP do wersji v7.2. Sierpień 2014

BCS Manager Instrukcja Obsługi

Microsoft Management Console

Rozliczenia z NFZ. Ogólne założenia. Spis treści

Chmura obliczeniowa. do przechowywania plików online. Anna Walkowiak CEN Koszalin

Użytkowanie elektronicznego dziennika UONET PLUS.

PERSON Kraków

INSTRUKCJA TESTOWANIA USŁUG NA PLATFORMIE ELA-ENT

POMOC PSYCHOLOGICZNO-PEDAGOGICZNA Z OPERONEM. Vademecum doradztwa edukacyjno-zawodowego. Akademia

INFORMATOR TECHNICZNY WONDERWARE

W dobie postępującej digitalizacji zasobów oraz zwiększającej się liczby dostawców i wydawców

Poniżej instrukcja użytkowania platformy

Specyfikacja techniczna banerów Flash

System zarządzania bazą danych (SZBD) Proces przechodzenia od świata rzeczywistego do jego informacyjnej reprezentacji w komputerze nazywać będziemy

Instrukcja obsługi Zaplecza epk dla Pracowników Instytucji w zakresie administracji danymi instytucji

INSTRUKCJA Panel administracyjny

Szukaj miejsc i wydarzeń pozytywnie nakręconych!

E-commerce dofollow list

Zestaw skróconych instrukcji dotyczący najważniejszych operacji w programie Merkury Quattro.

Warsztat naukowca a problem formatu informacji bibliograficznej generowanej przez systemy informacyjne. Remigiusz Sapa IINiB UJ

Strategia rozwoju kariery zawodowej - Twój scenariusz (program nagrania).

Wtedy wystarczy wybrać właściwego Taga z listy.

emszmal 3: Automatyczne księgowanie przelewów w menedżerze sprzedaży BaseLinker (plugin dostępny w wersji ecommerce)

JADWIGA SKIMINA PUBLIKACJA NA TEMAT: NAUKA MS. WORD 2000 W KLASIE IV

INSTRUKCJA WebPTB 1.0

CitiDirect EB - Mobile

Co nowego w systemie Kancelaris 3.31 STD/3.41 PLUS

Program Google AdSense w Smaker.pl

Zintegrowane Systemy Zarządzania Biblioteką SOWA1 i SOWA2 SKONTRUM

Archiwum Prac Dyplomowych

Platforma zamówień personelu JOBMAN.pl

Pierwsze kroki. Krok 1. Uzupełnienie danych własnej firmy

Instrukcja programu PControl Powiadowmienia.

Wewnątrzszkolny system kształcenia PLAN WYNIKOWY

Ogólna charakterystyka kontraktów terminowych

REJESTRATOR RES800 INSTRUKCJA OBSŁUGI

Instrukcja instalacji oraz wykorzystania podpisu cyfrowego

INTERAKTYWNA APLIKACJA MAPOWA MIASTA RYBNIKA INSTRUKCJA OBSŁUGI

WF-FaKir dla Windows

Instrukcja obsługi Norton Commander (NC) wersja 4.0. Autor: mgr inż. Tomasz Staniszewski

Zmiany w programie C GEO v. 6.5

CELAB. System Informatyczny. Punkt przyjęć krok po kroku LTC 1

Wymiana du ych plików instrukcja dla klientów Grontmij Polska Sp z o. o.

INSTRUKCJA DO INTERNETOWEGO ROZKŁADU JAZDY

Technologie internetowe Internet technologies Forma studiów: Stacjonarne Poziom kwalifikacji: I stopnia. Liczba godzin/tydzień: 2W, 2L

INSTRUKCJA KORZYSTANIA Z ELEKTRONICZNEJ ŚCIEŻKI WYKAZÓW

32. Metody badania użyteczności stron WWW

Szkolenie Szybki Start

OPIS PRZEDMIOTU ZAMÓWIENIA:

WordPad. Czyli mój pierwszy edytor tekstu

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

Marcin Werla

Bolączki międzynarodowego systemu - jak z tego korzystać?

Instalacja programu. Omówienie programu. Jesteś tu: Bossa.pl

Karta adaptacyjna GSM

Automatyczne spisy. Wojciech Myszka, Maciej Panek Październik 2014

Tomasz Greszata - Koszalin

Przeniesienie lekcji SITA z płyt CD na ipoda touch

Regulamin serwisu internetowego ramowka.fm

Konfiguracja programu Outlook 2007 do pracy z nowym serwerem poczty (Exchange)

System kontroli wersji SVN

Adapter USB do CB32. MDH-SYSTEM ul. Bajkowa 5, Lublin tel./fax lub kom e mail: info@mdh-system.pl

Zakłócenia. Podstawy projektowania A.Korcala

epuap Ogólna instrukcja organizacyjna kroków dla realizacji integracji

Promocja i identyfikacja wizualna projektów współfinansowanych ze środków Europejskiego Funduszu Społecznego

Symfonia Produkcja Instrukcja instalacji. Wersja 2013

ARKUSZ OCENY OKRESOWEJ DLA STANOWISK PRACOWNICZYCH

Stacjonarne Wszystkie Katedra Informatyki Stosowanej dr inż. Krzysztof Strzałkowski. Kierunkowy Nieobowiązkowy Polski Semestr piaty

3S TeleCloud - Aplikacje Instrukcja użytkowania usługi 3S KONTAKTY

OptiMore Importer Rejestru VAT. Instrukcja obsługi programu

1. Życie wśród komputerów

enova Workflow Obieg faktury kosztowej

Twój rodzaj CV. Jak wybrać odpowiedni rodzaj CV w zależności od doświadczenia i celu zawodowego?

SKRÓCONA INSTRUKCJA OBSŁUGI ELEKTRONICZNEGO BIURA OBSŁUGI UCZESTNIKA BADANIA BIEGŁOŚCI

Numer obszaru: 4 Technologie informacyjno-komunikacyjne w realizacji podstawy programowej

elektroniczna Platforma Usług Administracji Publicznej

Produkt finalny projektu Przedsiębiorcze szkoły jest dostępny na portalu projektu

Część 2 struktura e-paczki

Zaznaczając checkbox zapamiętaj program zapamięta twoje dane logowania. Wybierz cmentarz z dostępnych na rozwijalnej liście.

Informacje o omawianym programie. Założenia programu omawianego w przykładzie

Transkrypt:

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

Proces wytwarzania oprogramowania. Czyli trochę inżynierii oprogramowania ale z perspektywy tworzenia interfejsów użytkownika. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 2

Tradycyjny proces wytwarzania oprogram. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 3

Proces wytwarzania oprogramowania Projekt Ewaluacja Implementacja LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 4

Projekt Analiza zadań poznaj użytkownika - Co chce widzieć docelowy użytkownik? unikaj rzutowania własnych upodobań na użytkowników Mój prywatny samolot odrzutowy prezes programista projektant Korzystaj z zaleceń (wzorców GUI) projektowych (np.: skróty klawiszowe, spójność, zapobieganie błędom) Zapobiega się popełnianiu podstawowych błędów. programista działu handlowego Należy pamiętać o tym, że zalecenia mają charakter czysto heurystyczny i bywa, że są wzajemnie sprzeczne. Kompromis! LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 5

Implementacja Prototypy niedrogie do odrzucenia implementacje, zgrubne: papier, flipchart, dokładne: html, Visual Basic, Delphi. Techniki tworzenia GUI (Graphical User Interface) model wejścia / wyjścia pakiety narzędziowe (ang. toolkits) programy do budowania interfejsu (UI builders) LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 6

Ewaluacja Testowanie prototypów Ocena eksperta - wiedza heurystyczna oparta na apriorycznym doświadczeniu Ocena przewidująca - testowanie za pomocą symulowanego użytkownika (kolega z zespołu?) Ocena empiryczna - analiza jak radzi sobie z prototypem rzeczywisty użytkownik - testy LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 7

Zalecenia projektowe Podczas projektowania należy korzystać ze standardowych zbiorów zaleceń projektowych. zalecenia ogólne zalecenia dotyczące dziedziny (np. metafory do których przyzwyczajeni są użytkownicy) zalecenia heurystyczne zalecenia empiryczne (wynikające z testów) Dla przykładu prześledzimy kilka zaleceń dotyczących projektowania serwisów internetowych. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 8

Zalecenia WUI Teraz przeanalizujemy kilka przykładów zaleceń projektowych, których przestrzeganie jest konieczne w procesie projektowania interfejsu użytkownika podczas tworzenia stron internetowych. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 9

WUI Web User Interface WUI (ms. WebForms) jest podzbiorem procesu tworzenia GUI. Systemy GUI oparte na formularzach (ms. WinForms) mają zazwyczaj określony podzbiór elementów graficznych (widgets, controls, formants). Strony internetowe (WUI) nie mają zazwyczaj żadnych ograniczeń dotyczących ich graficznej prezentacji poza ograniczeniami technicznymi. W rezultacie programy WinForms oparte na oknach wykazują tendencję do ujednolicania wyglądu różnych aplikacji. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 10

WUI W przeciwieństwie programy oparte na stronach internetowych bardzo często używają własnych standardów wyglądu i zachowania ( ang. look and feel ). Ze względu na brak ograniczeń strony internetowe są przez to bardzo indywidualne, doskonałe artystycznie, ale niestety bardzo niewygodne w użytkowaniu. Należy pamiętać, że tworzenie układów graficznych dużych serwisów internetowych wymaga długiego doświadczenia i zaawansowania w dziedzinie grafiki. Odpowiedni projekt wyglądu strony internetowej jest często krytycznym elementem wpływających na jej sukces. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 11

Typowy Układ Serwisu (Layout) LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 12

Schemat Układu (Layout'u) LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 13

Zadanie przeanalizuj - Wycieczka Znajdź negatywne elementy tego interfejsu. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 14

Wycieczka: Przykładowa odpowiedź. Napis Obowiązkowe: zamienić na symbol * przy opisie dotyczącym pola. Pogrupować tematycznie elementy formularza. Należy użyć do tego ramek (np. Parametry wycieczki (dojazd,pobyt), Koszty, Informacje o zamawiającym). Obok pól edycyjnych wymagających odpowiedniego formatu wpisać przykład lub wymusić maskę (do drugiego trzeba zaimplementować w JavaScript). Listę wyboru (SELECT) zastąpić kilkoma checkboxami. (Trudne CTRL) Checkboxy powinny być po lewej stronie opisu tak jak w standardzie. Pola RADIOBUTTON najlepiej zamknąć w ramce. Dodać numery kroków w jakich człowiek powinien wprowadzać dane. Zaprezentować graficznie Podsumowanie cen posiłków w innej formie. Takiej, która nie będzie sugerowała użytkownikowi, że może coś w tym polu wpisać. Wyraźniejsze przyciski Wyślij i Anuluj Ilość osób: Liczba osób. Liczba osób zamienić na: Dorośli, Dzieci, Seniorzy, Niemowlęta. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 15

Zalecenia / Konstruktywne komunikaty 1/2 Komunikat "błąd pracy z systemem" brzmi dość enigmatycznie. Nie tłumaczy co si ę stało i co należy teraz zrobić. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 16

Zalecenia / Konstruktywne komunikaty 2/2 Dobry komunikat w Merlin.pl. Wiem co się stało, co muszę robić oraz gdzie powinienem szukać pomocy. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 17

Zalecenia / Efektywne linki Tekst odnośników i opcji w menu nie powinien być zbyt długi gdyż utrudnia to szybkie zrozumienie znaczenia. Dwa do czterech słów. Unikaj kliknij tutaj! Stosuj tytuły odnośników. Linki tekstowe trzymaj się konwencji. Podkreślenia Niebieski kolor (coraz częściej uważa się, że to nie jest konieczne) Oznaczenie już odwiedzonych. Nie otwieraj odnośników w nowym oknie. Wyraźnie zaznacz elementy, które można kliknąć. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 18

Zalecenia / Podstawy nawigacji Działając zazwyczaj czegoś szukasz. Zależnie od charakteru pytasz lub szukasz na własna rękę. W Internecie pytanie to zadawanie pytań wyszukiwarce. Szukanie na własna rękę to korzystanie z menu nawigacyjnego. Dwa typu użytkowników Nastawieni na wyszukiwanie od razu idą do wyszukiwarki Nastawieni na przeglądanie wola przeglądać strony LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 19

Zalecenia / Główne zadania nawigacji Nawigacja umożliwia odnajdywanie dokumentów w serwisie. Nawigacja informuje nas gdzie jesteśmy w strukturze serwisu (odpowiednie oznaczenie w menu). Nawigacja daje nam poczucie stabilności (element stały). Mówi o tym co w danym miejscu się znajduje (pojęcie menu). Mówi jak możemy z tego skorzystać. Buduje zaufanie do autorów serwisu. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 20

LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 21

Zalecenia / W sieci nawiguje się trudniej Brak pojęcia skali, nie wiesz jak duża jest witryna więc trudno określić ile może zająć jej przeszukanie. Nieintuicyjne określanie pozycji i kierunku, nie przystaje do świata realnego. Przeglądanie stron w Internecie z natury jest stanem pewnego zagubienia. J. Nielsen podaje, że aż 30% wszystkich kliknięć w Internecie to klikniecie przycisku Wstecz. To także kolejny argument by unikać ramek i nawigacji opartej na Flash te elementy mogą utrudniać nawigowanie za pomocą przycisku Wstecz. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 22

Zalecenia/Projektowanie/Stała nawigacja Zbiór elementów nawigacyjnych pojawiających się na wszystkich stronach serwisu. Są to najczęściej: Identyfikator strony. Łącze do strony startowej. Wyszukiwarka. Menu narzędziowe. Menu główne. Stała nawigacja może być zmieniona bądź nieobecna na stronie głównej oraz na stronach z formularzami (np. w systemach płatności). LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 23

Przykład - stała nawigacja LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 24

Zalecenia/Projektowanie nawigacji/jesteś tutaj. Działa na zasadzie jesteś tutaj na mapie. Stosowane najczęściej w menu. 1 2 3 LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 25

Zalecenia/Projektowanie/Punkty startowe Punkty startowe są elementami strony głównej, które prowadza w głąb struktury serwisu. Dzięki temu użytkownikom łatwiej odnaleźć najczęściej poszukiwane elementy serwisu. Punkty startowe pokazują też co na stronie można znaleźć i zrobić. Dzięki temu pozwalają na szybkie zapoznanie się z najważniejszymi elementami całego serwisu LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 26

Zalecenia/Projektowanie/Menu narzędziowe Zawiera od 3 do 7 elementów, które uznajemy za szczególnie przydatne. Zazwyczaj są to: Strona główna, Kontakt, Mapa serwisu. Często występują tutaj także łącza takie jak: Archiwum, Wyloguj się, Obsługa klienta, Forum dyskusyjne, Pliki do pobrania, FAQ, Pomoc, Jak zacząć? Wiadomości prasowe, Rejestracja, Wyszukiwarka, Koszyk, Zapisz się do nas, Adresy placówek, Twoje konto. LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 27

Interakcja Dziękuję za uwagę. Chcemy być coraz lepsi! Jeżeli coś cię zainteresowało napisz e-maila: robert@iem.pw.edu.pl Jeżeli coś cię bardzo znudziło napisz e-maila: robert@iem.pw.edu.pl Jeżeli zauważyłeś błąd napisz e-maila: robert@iem.pw.edu.pl LATO 2007 Projektowanie Graficznych Interfejsów Użytkownika 28