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

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

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

Bydgoskie Centrum Archiwizacji Cyfrowej sp. z o.o.

edycja szablonu za pomocą serwisu allegro.pl

Miejski System Zarządzania - Katowicka Infrastruktura Informacji Przestrzennej

Nawigacja po trasie wycieczki

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

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

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

Instrukcja użytkownika końcowego. Portalu Informacyjnego. ŁódźWiFi

Najważniejsze informacje dla klienta na temat Portalu Serwisowego D-Link Spis treści

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

Co to jest usability?

Zasady tworzenia podstron

Miejskie Wodociągi i Oczyszczalnia sp. z o.o. w Grudziądzu. ibok. Internetowe Biuro Obsługi Klienta. Instrukcja obsługi

INSTRUKCJA zakładania konta w Społecznoś ci CEO

Tworzenie strony internetowej krok po kroku

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:

Jak stworzyć własny blog w kreatorze Click Web?

INSTRUKCJA Panel administracyjny

ADMINISTRATOR SZKOŁY. Instrukcja użytkownika portalu

Pomoc. BIP strona portalu

Użyteczność polskich portali turystycznych Wakacje w Internecie - aneks

Poradnik korzystania z Bazy konkurencyjności dla niezalogowanego użytkownika systemu

Informacje o członkach WSRM na

Drogi Użytkowniku! tematycznego (lista haseł jest tożsama z

Spotkanie. Agenda spotkania: o sobie wstęp jak założyć Skype podstawy korzystania ze Skype. Pamiętaj, jeśli czegoś nie rozumiesz, pytaj od razu.

CEMEX Go. Katalog zamówień i produktów. Wersja 2.1

INSTRUKCJA PLATFORMA KLIENTA CBIDGP

Instrukcja użytkownika Internetowej Platformy Edukacyjnej UPRP

Instrukcja szyfrowania poczty do ESKOM. na przykładzie wykorzystania narzędzia MS Outlook

INSTRUKCJA zakładania konta w Społeczności CEO

INSTRUKCJA OBSŁUGI PROGRAMU IRF DLA BIURA RACHUNKOWEGO Program Rachmistrz/Rewizor. Strona0

Portal Licytacyjny Krajowej Rady Komorniczej Instrukcja obsługi dla użytkownika

Dokumentacja użytkownika systemu Dzieciaki Mazowsza

Nie wiesz co się dzieje w Twojej Gminie? Dowiedz się z Internetu

APLIKACJA SHAREPOINT

Facebook, Nasza klasa i inne. podstawowe informacje o serwisach społeczności internetowych. Cz. 2. Facebook

Krok 1. Znajdź produkt w sklepie korzystając z wyszukiwarki (Rys.1) Rys. 1. Wyszukiwanie produktu i dodawanie do koszyka

Instrukcja dla Szkolnego Administratora Systemu Antyplagiatowego Antyściąga.pl

Podręcznik Sprzedającego. Portal aukcyjny

Wszystkie prawa zastrzeżone. NOWY BIZNESLINK FAQ dla Klientów

Serwis jest dostępny w internecie pod adresem Rysunek 1: Strona startowa solidnego serwisu

ZUS PRZEZ INTERNET KROK PO KROKU OŚWIADCZENIE CZŁONKA OFE O PRZEKAZYWANIU SKŁADKI DO OFE

Konfiguracja konta pocztowego na szkolnym serwerze

ialadin Partner Podstawowe informacje dotyczące rejestracji zleceń

Moduł Notatki Systemu Obsługi Zamówień Publicznych UTP-Bydgoszcz Instrukcja postępowania do 1000 Euro

1. Rejestracja 2. Logowanie 3. Zgłaszanie nowego wniosku projektowego

INSTRUKCJA instalacji aplikacji elisty.pl

Skrócona instrukcja funkcji logowania

Lista najczęściej pojawiających się problemów

EBSCOhost Wyszukiwanie podstawowe dla Bibliotek akademickich

Pierwsza strona internetowa

Materiały szkoleniowe Moduł Mapa inwestora. Starostwo Powiatowe w Chełmie

INSTRUKCJA KORZYSTANIA Z DZIENNIKA ELAKTRONICZNEGO MOBIREG

Korespondencja seryjna

Możesz teraz dodatkowo, poza telefonem do naszego Centrum Obsługi Klienta, samodzielnie, za pomocą Internetu, zająć się następującymi sprawami:

58 Zjazd Naukowy PTChem. Zgłaszanie abstraktów

Serwis e-ppp - instrukcja użytkowania

Dokumentacja użytkownika E-działania - POLCHAR

APLIKACJA MOBILNA. My CITROËN PRZYJACIEL KIEROWCY

Nabór Przedszkola. Jak złożyć wniosek o przyjęcie dziecka do przedszkola?

Instrukcja użytkownika BIP

elektroniczna Platforma Usług Administracji Publicznej

Spis treści. 1. Wstęp 2. Rejestracja 3. Aktywacja 4. Logowanie 5. Zakończenie

Aplikacja kliencka na Tablety z systemem Android. Instrukcja instalacji

INSTRUKCJA Systemu Antyplagiatowego dla Szkół Antyściąga.pl dla Nauczyciela

Instrukcja Użytkownika Baza Członków PZW Formularz wprowadzania danych oraz informacja o płatnościach

DHL EXPRESS. 1 DHL IntraShip Przewodnik

Podręcznik użytkownika

INSTRUKCJA rejestracji do programu WF z Klasą (załoz enie bloga w III edycji)

Wybierz polecenie z menu: Narzędzia Listy i dokumenty

Odkryj. W tym krótkim poradniku można znaleźć informacje, które pomogą ci rozpocząć pracę z systemem REACH-IT i zapoznać się z nim

elektroniczna Platforma Usług Administracji Publicznej

Podręcznik użytkowania Platformy e-learning owej projektu

Podręcznik Kupującego. Portal aukcyjny

Jak stworzyć stronę WWW drużyny harcerskiej. dh Paweł Wnuk

WPROWADZENIE WYSZUKIWANIE OGŁOSZEŃ

Logowanie do aplikacji TETA Web. Instrukcja Użytkownika

PROCEDURA ZGŁASZANIA PRAC GEODEZYJNYCH PRZEZ INTERNET

Poradnik użytkownika systemu BibbyNet. Część I Konto użytkownika

Najczęściej zadawane pytania

Skrócona instrukcja. DriveConfigurator Konfigurator produktu firmy SEW-EURODRIVE

INSTRUKCJA OBSŁUGI SZKOLENIA

W pustym polu wpisz szukaną frazę niezaleganie i kliknij [Filtruj]. Lista usług zostanie

Instrukcja rejestracji do systemu ecrf.biztm

Przewodnik po systemie Antyplagiat dla Użytkownika Indywidualnego

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ

Serwis NaviExpert Biznes. Instrukcja obsługi

Wniosek o kontrolę prawidłowości wystawienia zaświadczenia lekarskiego przez internet (ZUS OL-2)

Jak prowadzić rozmowy wideo i głosowe z bliskimi osobami na przykładzie komunikatora Skype

Elektroniczny Urząd Podawczy

OPENMailing.pl - innowacja, efektywność, nieograniczone możliwości kampanii ingowych.

Korzystanie z poczty i Internetu

1. REJESTRACJA W INTERIM24.PL PANEL UŻYTKOWNIKA ZAWARTOŚĆ UZUPEŁNIENIE PROFILU... 9

Strona główna góra. Profesjonalny sklep internetowy

Instrukcja rejestracji w systemie System Wspierający Prowadzenie Prac Badawczo-Naukowych oraz Współdzielenie i Publikację Wyników Prac

INSTRUKCJA ROBIENIA ZAKUPÓW W SKLEPIE CZŁONKA EKOSPOŁECZNOŚCI

Transkrypt:

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

Tradycyjny proces wytwarzania oprogram. 2

Zalecenia projektowe / Wytyczne 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 (nie dają gwarancji optymalności, ale sprawdzają się w większości przypadków) zalecenia empiryczne (wynikające z bezpośrednich testów) Dla przykładu prześledzimy kilka zaleceń dotyczących projektowania serwisów internetowych. 3

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ć. 4

Zalecenia / Konstruktywne komunikaty 2/2 Dobry komunikat w Merlin.pl. Wiem co się stało, co muszę robić oraz gdzie powinienem szukać pomocy. 5

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ąć. 6

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. 7

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 8

9

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. 10

Zalecenia/Projektowanie nawigacji/jesteś tutaj. Działa na zasadzie jesteś tutaj na mapie. Stosowane najczęściej w menu. 1 2 3 11

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). 12

Przykład - stała nawigacja 13

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 14

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. 15

Szkieletowanie (wireframing) Wykorzystuj szkieletowanie (wireframing) Skoncentruj się na logicznym rozmieszczeniu, a nie na samej treści. Uwzględnij istotę poszczególnych elementów. Zachowaj zgodność z metaforą (np. kolejność czynności) 16

Top Ten Web Design Mistakes of 2005 Na podstawie Jakob Nielsen s Alertbox : 1. Zbyt małe lub nieskalowalne czcionki. Rozwiązanie: http://www.useit.com/alertbox/20020819.html 2. Niestandardowe linki. Rozwiązanie: http://www.useit.com/alertbox/20040510.html, http://www.useit.com/alertbox/20040503.html 3. Nie-intuicyjne interfejsy we Flash. Rozwiązanie: http://www.useit.com/alertbox/20021125.html 4. Treść nieprzystosowana do Internetu. Rozwiązanie: http://www.useit.com/papers/webwriting/ 5. Problemy z wyszukiwarką. Rozwiązanie: http://www.useit.com/alertbox/20050509.html 17

Top Ten Web Design Mistakes of 2005 6. Niekompatybilność z przeglądarkami. Rozwiązanie: http://www.w3c.org 7. Nadużywanie formularzy. Rozwiązanie: http://www.useit.com/alertbox/forms.html 8. Brak informacji kontaktowych i informacji o właścicielu serwisu. Rozwiązanie: http://www.useit.com/alertbox/20031027.html 9. Nieskalowalny layout serwisu. Rozwiązanie: http://www.useit.com/alertbox/20050711.html 10. Niepoprawne powiększanie obrazków i okienka pop-up. Rozwiązanie: http://www.useit.com/alertbox/20041206.html 18

Zadanie przeanalizuj - Wycieczka Znajdź negatywne elementy tego interfejsu. 19

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. 20

Zadanie Jesteś ekspertem Użyteczności. Przeanalizuj projekt strony i wymień elementy, które są niezgodne z zaleceniami projektowymi. Zaproponuj rozwiązanie. 21

22

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 23