Interakcja człowiek – komputer Interfejs www mgr inż. Marek Malinowski Zespół Matematyki i Fizyki Wydz. BMiP PW Płock
Interfejs WWW Wytyczne i zasady projektowania terminologia i rodzaje serwisów WWW specyfika interakcji z serwisami WWW ocena interfejsu WWW Metody realizacji metodyka projektowania serwisów WWW wybrane zagadnienia projektowania trendy i innowacje w rozwoju interfejsów WWW
Interfejs WWW Usługa www – w pigułce
Interfejs WWW Usługa www – w pigułce
Interfejs WWW Usługa www – w pigułce
Interfejs WWW Usługa www – w pigułce
Interfejs WWW Usługa www – w pigułce
Interfejs WWW Usługa www – w pigułce
Interfejs WWW Usługa www – w pigułce
Interfejs WWW Usługa www – w pigułce
Interfejs WWW Usługa www – w pigułce
Interfejs WWW Usługa www – w pigułce
Interfejs WWW Usługa www – w pigułce
Interfejs WWW Usługa www – w pigułce
Interfejs WWW Usługa www – w pigułce
Interfejs WWW Usługa www – w pigułce
Interfejs WWW Wytyczne i zasady projektowania - terminologia Strona WWW - element konstrukcyjny serwisu WWW i jako jednostka prezentacji treści (np. pojedynczy ekran) Aplikacja internetowa – odrębna usługa dostępna dla użytkownika poprzez przeglądarkę, niezależnie od technologii realizacji Serwis WWW – zbiór stron WWW oraz usług wbudowanych realizowanych przez aplikacje internetowe, ale postrzeganych przez użytkownika jako funkcje serwisu WWW
Interfejs WWW Wytyczne i zasady projektowania - terminologia Web 1.0 – serwisy i aplikacje tworzone wyłącznie przez dostawców treści, bez możliwości dodawania treści przez użytkowników Web 2.0 – serwisy i aplikacje, w których użytkownicy mają możliwość publikowania swoich treści, komentowania, opiniowania i rekomendowania rozwiązań Web 3.0 – serwisy i aplikacje, w których ma miejsce maszynowe przetwarzanie wiedzy i informacji pochodzących od użytkownika, co stwarza możliwość tworzenia rozwiązań automatycznie adaptujących zawartość i sposób interakcji do preferencji użytkownika
Interfejs WWW Wytyczne i zasady projektowania - specyfika Dwa poziomy interakcji podczas korzystania z serwisów WWW interfejs przeglądarki – interakcja użytkownika z interfejsem przeglądarki (sterowanie sposobem wyświetlania zawartości stron serwisu) właściwy interfejs WWW – interakcja z zawartością strony / serwisu / aplikacji Innowacyjne funkcje interfejsu WWW wyszukiwarka koszyk zakupów oznaczanie elementów aktywnych przyciski naprzód-wstecz
Interfejs WWW Wytyczne i zasady projektowania - specyfika Użytkownik nie czyta tekstu, jedynie skanuje go wzrokiem Użytkownik nie poszukuje najlepszego wyboru, zwykle wystarcza mu wariant zadawalający Użytkownika nie interesuje, jak coś działa, tylko jaką z tego może mieć korzyść Użytkownik jest niecierpliwy i od razu rezygnuje, jeżeli coś nie działa po jego myśli Użytkownik poszukuje przeżyć i zaskoczenia Użytkownik poszukuje wartościowych relacji
Interfejs WWW Wytyczne i zasady projektowania - specyfika 1. Użytkownik nie czyta tekstu, jedynie skanuje go wzrokiem Tekst jest skanowany w poszukiwaniu interesujących słów kluczowych (np. odnośników, nagłówków, wyróżnionych fragmentów tekstu) Wskazówki realizacyjne Tekst na stronie powinien być ograniczony do minimum oraz sformatowany w taki sposób, żeby ułatwić skanowanie – najlepiej przez wyróżnione słowa kluczowe, krótkie akapity z odpowiednimi odstępami
Interfejs WWW Wytyczne i zasady projektowania - specyfika 2. Użytkownik nie poszukuje najlepszego wyboru, zwykle wystarcza mu wariant zadawalający W myśl tzw. zasady ograniczonej racjonalności, użytkownik poszukując pierwszej „wystarczająco dobrej” opcji, świadomie rezygnuje z poszukiwania absolutnie najlepszego wariantu Wskazówki realizacyjne Należy podpowiadać rekomendowane rozwiązania, wprowadzić system sugestii i wzorowania się na postępowaniu innych użytkowników o podobnych upodobaniach
Interfejs WWW Wytyczne i zasady projektowania - specyfika 3. Użytkownika nie interesuje, jak coś działa, tylko jaką z tego może mieć korzyść Użytkownicy poszukują na stronie wskazówek (opisów, odnośników, ikon, wzorców), jak należy postępować, aby uzyskać pożądany efekt i zapamiętują sprawdzone metody postępowania, bez prób zrozumienia sposobu działania systemu Wskazówki realizacyjne Należy umożliwić wykonywanie pracy na wiele sposobów i dostarczać podpowiedzi umożliwiających znalezienie najbardziej efektywnego sposobu postępowania („na skróty”, „szybki dostęp”, „zakupy w trzech krokach”)
Interfejs WWW Wytyczne i zasady projektowania - specyfika 4. Użytkownik jest niecierpliwy i od razu rezygnuje, jeżeli coś nie działa po jego myśli Użytkownicy poszukują na stronie wskazówek (opisów, odnośników, ikon, wzorców), jak należy postępować, aby uzyskać pożądany efekt i zapamiętują sprawdzone metody postępowania, bez prób zrozumienia sposobu działania systemu Wskazówki realizacyjne Należy umożliwić wykonywanie pracy na wiele sposobów i dostarczać podpowiedzi umożliwiających znalezienie najbardziej efektywnego sposobu postępowania („na skróty”, „szybki dostęp”, „zakupy w trzech krokach”)
Interfejs WWW Metody realizacji Typy aktywności użytkownika dowiedzieć się coś kupić coś sprzedać rozerwać się komunikować się Ewolucja metod projektowania Uruchom serwis, a klienci sami przyjdą Reklamuj, że sprzedajesz w sieci, a klienci sami przyjdą Rozpoznaj potrzeby użytkownika i daj mu, czego pragnie Wyprzedzaj potrzeby użytkownika i dostarczaj unikalnych przeżyć
Interfejs WWW Metody -wybrane zagadnienia – układ strony Przykładowe wzory układu stron blokowy centralny dwukolumnowy asymetryczny z menu u góry ekranu dwukolumnowy asymetryczny z menu lewo- lub prawostronnym trójkolumnowy z menu u góry ekranu lub w panelu bocznym Układ strony powinien pozwalać wbudowanie typowych elementów Nagłówek z tytułem strony Nawigacja globalna i lokalna Pola na informację główną (statyczną i dynamiczną) Akcesoria administracyjne (mapę, kontakt, pomoc, itp.) Pole wyszukiwarki lokalnej Stopkę z datą aktualizacji Elementy graficzne, podpisy, okienka odtwarzania multimediów
Interfejs WWW Metody -wybrane zagadnienia – użycie grafiki Sposób wykorzystania grafiki: Należy zapewnić uzyskanie efektu równowagi i harmonii (zasada Gestalt) Należy minimalizować wielkość plików graficznych Kolor powinien podkreślać strukturę strony zgodnie z psychologicznymi zasadami oddziaływania barw Zadbać o odpowiedni dobór kompozycji i proporcji obrazu Unikać animacji i ruchomych elementów (poza serwisami o charakterze edukacyjnym i rozrywkowym)
Interfejs WWW Metody -wybrane zagadnienia – tekst i typografia Tekst i typografia – tekst powinien być Napisany według wskazówek stylistycznych, być krótki, (może być poprzedzony krótkim streszczeniem) Sformatowany pod kątem ograniczeń prezentacji ekranowej i percepcji użytkownika – podawany w mniejszych proporcjach, z odpowiednimi marginesami i odstępami oraz z wykorzystaniem znaków wypunktowania Zaopatrzony w linki do źródeł zewnętrznych (wewnątrz tekstu) Opatrzony odpowiednią grafiką, która uzupełnia przekaz tekstowy