Interakcja człowiek – komputer Interfejs www

Interakcja człowiek – komputerInterfejs 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 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

Interakcja człowiek – komputer Interfejs www