1 Komunikacja człowiek - komputer Przedmiot: Komunikacja człowiek - komputer Ćwiczenie: 2 Temat ćwiczenia: Projektowanie funkcjonalne serwisów internetowych v.2.0 dr Artur Bartoszewski Spis treści TEORIA... 1 Proces projektowania serwisu... 1 Projekt funkcjonalny serwisu... 2 DO WYKONANIA... 7 Dane do projektu... 7 Wymagania... 8 TEORIA Proces projektowania serwisu Trudno wyobrazić sobie rozpoczęcie budowy domu bez projektu rozrysowanego przez architekta. Dzięki niemu inwestor może zwizualizować sobie powstający budynek i skonfrontować go z oczekiwaniami, a wykonawca wybudować całość dokładnie według wskazań. Podobne zadanie pełni projekt funkcjonalny, który jest tworzony jest jako zarys dla powstającego serwisu internetowego. 1. Określenie wymagań, 2. Opracowanie scenariuszy działań użytkownika, 3. Określenie koncepcji, zawartości i struktury serwisu. 4. Zdefiniowanie mapy serwisu i nawigacji w serwisie 5. Zdefiniowanie układu strony, 6. Budowa i testy prototypów, 7. Projektowanie i implementacja serwisu (ewaluacja i poprawki), 8. Uruchomienie i utrzymanie serwisu. Ważną częścią projektowania jest interakcja z klientem (lub kierownictwem, jeżeli projektujemy dla własnej firmy). Pomijając wstępne rozmowy można streścić ją w 4 punktach:
2 Komunikacja człowiek - komputer 1. Tworzony jest projekt funkcjonalny w oparciu o wytyczne klienta. 2. Projekt funkcjonalny jest przedstawiany klientowi i udoskonalane w drodze konsultacji. 3. Następują testy użyteczności prototypu (makiet). 4. Po akceptacji przygotowywana jest właściwa oprawa graficzna dla witryny (na podstawie makiet oraz opisu serwisu). Wynikami projektowania dostarczanymi klientowi są: 1. prototyp strony, 2. makieta strony. Projekt funkcjonalny serwisu Prototypy są najbardziej wymowną częścią projektu funkcjonalnego, przedstawiając proponowany dla niego interfejs. Prototypy nie uwzględniają kolorystyki, stylu, ani finalnych tekstów do zamieszczenia w serwisie. Skupiają się za to na przedstawieniu elementów stron oraz wskazują na cel ich istnienia i sposób ich funkcjonowania. Prototypy mogą następnie posłużyć do wstępnych testów użyteczności tworzonego serwisu. Ilość i forma przygotowywanych prototypów stron zależy od wielkości i złożoności serwisu. Uzupełnienie projektu funkcjonalnego stanowi dokument opisowy przedstawiający m.in. zaplanowane dla serwisu: strukturę treści, mapę serwisu strukturę nawigacji, dodatkowe funkcjonalności, I. Struktura treści serwisu Struktura treści przedstawiana jest często jako mapa myśli. Poniżej przykład struktury treści strony hipotetycznej organizacji użytku publicznego (fundacje lub stowarzyszenia).
3 Komunikacja człowiek - komputer Powyższy graf przedstawia to, co na stronie chcemy zamieścić. Nie można go jednak traktować jako mapy strony zawiera zbyt dużo drobnych pozycji. Nawigacja po tak skonstruowanej stronie byłaby trudna. II. Mapa serwisu Treści należy pogrupować zastanówmy się jakie treści można zamieścić na jednej stronie np. spotkania i Wiadomości oraz ogłoszenia organizacyjne to właściwie jedna pozycja - aktualności. A aktualności najlepiej zamieścić na stronie głównej. Wyjaśnienie: Diagram zawiera trzy poziomy (tworzenie stron o głębszej strukturze jest zawsze ryzykowne można to robić, ale trzeba dobrze przemyśleć) III. Menu Linią przerywaną zaznaczono pojedynczą podstronę która zawiera kilka wyróżnionych elementów. Struktura serwisu jest stosunkowo prosta. Zauważmy też, że poszczególne gałęzie grafu mają różną głębokość. Z tych powodów najlepszym rozwiązaniem będzie menu rozwijane. W pełnej wersji strony jako menu boczne, w wersji dla mniejszych rozdzielczości jako menu poziome.
4 Komunikacja człowiek - komputer IV. Prototypy Prototyp serwisu pokazuje rozmieszczenie eleatów oraz ich rozmiar. prototypów może być wiele w przypadku stron, które mają wersję mobilną przynajmniej dwa. prototyp strony głównej /aktualności Do prototypu dołączyć należy opisy funkcji i budowy poszczególnych elementów. Np.: 2.... 3. Informacja o misji a. funkcja: skrótowe przekazanie najważniejszych informacji o fundacji. Zachęcenie odwiedzającego do zapoznania się z dokładniejszymi informacjami b. budowa: krótki tekst, pisany drobną czcionką z widocznym linkiem czytaj dalej 4. Grafika instytucji unijnych a. funkcja: podkreślenie uczestnictwa z w projektach unijnych b. budowa: graficzne logo UE oraz logo programu Kapitał Ludzki 5....
5 Komunikacja człowiek - komputer Prototyp wersji mobilnej. V. Makieta serwisu Makieta jest rozwiniętą, zawierającą grafikę wersją prototypu. Granica pomiędzy makietą a projektem grafiki jest płynna ogólnie mówiąc makieta to szkic grafiki strony często jest toporny i brakuje w nim wielu elementów (np. obrazków i zdjęć) ale daje pojęcie o wyglądzie strony i może posłużyć do testów.
6 Komunikacja człowiek - komputer
7 Komunikacja człowiek - komputer DO WYKONANIA Dane do projektu O firmie: Firma {tu wstaw własną nazwę} zajmuje sie doradztwem w kwestii funkcjonalności serwisów WWW. Wykonuje ekspertyzy i testy funkcjonalności stron. Cel witryny: Reklama oferowanych usług Wyjaśnienie potencjalnym klientom, czym jest funkcjonalność stron WWW, Wskazanie korzyści dla firmy jakie płyn poprawy funkcjonalności serwisu WWW. Grupa docelowa: I. Osoby szukające fachowej konsultacji firmy zewnętrznej naszym celem jest przekonanie tego rodzaju klienta o fachowości i profesjonalizmie firmy i zaprezentowanie zakresu usług. II. Osoby uczestniczące w tworzeniu serwisu WWW firmy (informatyk; specjalista ds. marketingu, prezes itp.) nie zainteresowane naszymi usługami, lecz szukające w Internecie przydatnych informacji (związanych z funkcjonalnością i projektowaniem stron). Naszym celem jest dostarczenie takich informacji potencjalnym klientom, wyjaśnienie im czym jest projektowanie funkcjonalne, jakie przynosi korzyści i zasugerowanie, że usługi firmy zewnętrznej (czyli nasze) mogą być opłacalne. Serwis powinien zawierać Elementy obowiązkowe: artykuły dotyczące sposobu, w jaki przeciętny użytkownik korzysta z Internetu [seria artykułów] informacje o celowości projektowania funkcjonalnego [reklama wewnętrzna] informacje o działalności handlowej firmy [reklama wewnętrzna] przeprowadzanie pełnych testów funkcjonalności stron WWW przygotowywanie ekspertyz funkcjonalności dla projektów stron i gotowych witryn doradztwo telefoniczne dodatkowo: możliwość zaprenumerowania darmowego biuletynu e-mailowego informacje o współpracy strona UTH Radom; moja strona z materiałami z wykładów przedmiotu odnośniki do książek dotyczących funkcjonaliści stron WWW (autorzy: Jakob Nielsen; Steve Krug) Elementy opcjonalnie: wg inwencji własnej
8 Komunikacja człowiek - komputer Wymagania Projekt powinien zawierać trzy wymienione poniżej elementy. Punkty 1 i 2 to minimum do zaliczenia, ale wyższa ocenę należy przygotować także makietę(punkt 3). 1. Koncepcja budowy witryny o Zawartość: Struktura treści serwisu mapę serwisu strukturę nawigacji, opis dodatkowych funkcjonalności, 2. Prototypy głównych rodzajów stron serwisu[w wersji dla urządzeń desktop i mobilnej] o Zawartość: Prototyp Charakterystyka elementów prototypu (dokładniejsza niż w przykładzie powyżej) 3. Makiety strony głównej [w wersji dla urządzeń desktop i mobilnej] Proponowane narzędzia: Corel Draw Programy do rysowania diagramów i map myśli (MS Visio, XMind itp.). Format pracy: PDF Uwagi: Praca wykonana będzie zapewne za pomocą kilku programów. Wynik ma być przedstawiony w postaci pojedynczego pliku PDF zawierającego informacje o autorach, spis treści ( oraz samą treść).