Przedmiot: Komunikacja człowiek - komputer Dwiczenie: 2 Temat dwiczenia: Projektowanie funkcjonalne serwisów internetowych

Transkrypt

1 1 Komunikacja człowiek - komputer Przedmiot: Komunikacja człowiek - komputer Dwiczenie: 2 Temat dwiczenia: Projektowanie funkcjonalne serwisów internetowych dr Artur Bartoszewski Spis treści TEORIA... 1 Proces projektowania serwisu... 1 Projekt funkcjonalny serwisu... 2 Przykład makiety... 3 Projekt graficzny... 5 DO WYKONANIA... 7 Dane do projektu... 7 Wymagania... 8 TEORIA Trudno wyobrazid sobie rozpoczęcie budowy domu bez projektu rozrysowanego przez architekta. Dzięki niemu inwestor może zwizualizowad sobie powstający budynek i skonfrontowad go z oczekiwaniami, a wykonawca wybudowad całośd dokładnie według wskazao. Podobne zadanie pełni projekt funkcjonalny, który jest tworzony jest jako zarys dla powstającego serwisu internetowego. Proces projektowania serwisu 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).

2 2 Komunikacja człowiek - komputer Wynikami projektowania dostarczanymi klientowi są: 1. projekt funkcjonalny, 2. projekt graficzny wykonany na podstawie projektu funkcjonalnego. Projekt funkcjonalny serwisu Makiety są najbardziej wymowną częścią projektu funkcjonalnego, przedstawiając proponowany dla niego interfejs. Makiety 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. Makiety mogą następnie posłużyd do wstępnych testów użyteczności tworzonego serwisu. Ilośd i forma przygotowywanych makiet 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, sposób nawigacji, dodatkowe funkcjonalności, założenia komunikacji marketingowej. I. Struktura treści serwisu Przykład struktura zaprezentowana w postaci grafu. II. Makieta serwisu Rzeczywiste makiety serwisów internetowych nie są dostępne ze stanowią tajemnicę handlową (żadna firma nie będzie prezentowad swoich nieudanych pomysłów, czy tez koncepcji które byd może kiedyś zrealizuje). Większośd dostępnych w literaturze makiet jest produktem inżynierii wstecznej.

3 3 Komunikacja człowiek - komputer Przykład: Uproszczona wersja makiety strony głównej serwisu (odtworzona na podstawie aktualnej wersji strony)

4 4 Komunikacja człowiek - komputer III. Charakterystyka elementów makiety 1 : 1. Logo firmy / obszar nagłówkowy a. cel: b. budowa: c. informacje: Narzędzia wyszukiwania a. cel: wyszukiwarka produktów; główna (100% skuteczna) metoda nawigacji; b. budowa: 3 okna wyszukiwania; mechanizm zaawansowany c. informacje: mechanizm zaawansowany; oferuje różne strategie wyszukiwania (w osobnych oknach, bez konieczności zapoznawania się z opcjami menu) 3. Nawigacja główna / Najpopularniejsze działy z możliwością zaprezentowania pełnej oferty a. cel: szybka nawigacja; zaprezentowanie oferty; b. budowa: odnośniki testowe; c. informacje: prosta budowa odnośników jednoznacznie kojarząca się z nawigacją główną; kolejnośd odnośników wynika z hierarchii ważności; 4. Nawigacja główna / kategorie niezwiązane z produktami; nastawione na klienta lub usługi a. cel: wybór rodzaju klienta (biznesowy itp.); logowanie klienta; kontakt b. budowa: odnośniki tekstowe c. informacje: w 3 grupach znajdują się {Komputronik Biznes; Strona Korporacyjna; Dystrybucja} {Nowości; promocje; cennik: Regulamin; Konfigurator} {Kontakty; Firma; 1 To tylko szkic charakterystyki pokazujący jak powinna ona wyglądad. Opis tworzonej strony powinien byd na tyle dokładny by osoba która go czyta i ogląda makietę mogła w miarę jasno wyobrazid sobie stronę.

5 5 Komunikacja człowiek - komputer Praca}; wyodrębniono opcje dla zarejestrowanych użytkowników logowanie; Ulubione} 5. Przykłady produktów reprezentujące wybrane działy /nie wszystkie a. cel: zilustrowanie oferty sklepu; promocja wybranych produktów; b. budowa: typowa c. informacje: przejście bezpośrednio do produktu; nie jest to system nawigacyjny; 6. Reklama animowana / wybrane produkty z oferty 7. Baner reklamowy będący jednocześnie częścią nawigacji głównej /animowane / gotowe zestawy; ulotki reklamowe; promocja wybranej marki/ 8. Reklama animowana / wybrane produkty z oferty 9. Nowości w ofercie / odnośniki testowe, bez opisów/ 10. Najczęściej kupowane / odnośniki tekstowe (rozszerzony opis) zilustrowane grafiką (miniaturki zdjęd) 11. Reklama animowana / wybrane produkty z oferty 12. Promowane produkty /zdjęcie, nazwa + cena/ 13. Promowane marki /odnośniki graficzne/ 14. Propozycja alternatywnych kanałów dystrybucji informacji /RSS; telefon komórkowy itp./ 15. Reklama animowana 16. Informacja o kanałach płatności /akceptowane karty/ 17. Nawigacja główna /miejsca spoza kategorii/ Projekt graficzny Projekt graficzny wykonywany może byd na różnych poziomach szczegółowości. Minimum: makieta uzupełniona o tekst i dostępne elementy graficzne (projekt poglądowy) Maksimum: pełna działająca strona WWW W naszym przykładzie zamiast projektu graficznego wygład gotowej strony (z oczywistych względów)

6 6 Komunikacja człowiek - komputer

7 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śd 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ą byd opłacalne. Serwis powinien zawierad Elementy obowiązkowe: artykuły dotyczące sposobu, w jaki przeciętny użytkownik korzysta z Internetu /źródło prezentacje z wykładów/ informacje o celowości projektowania funkcjonalnego /źródło prezentacje z wykładów/ 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śd zaprenumerowania darmowego biuletynu owego reklama zewnętrzna: strona Politechniki Radomskiej; 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 8 Komunikacja człowiek - komputer Wymagania Projekt powinien zawierad 4 wymienione poniżej elementy (punkty od 1 do 3 na ocenę dobrą; na ocenę bardzo dobrą również punkt 4). 1. Koncepcja budowy witryny o Zawartośd: głębokośd odnośników (ilośd poziomów zagnieżdżenia stron), szacunkowa liczba stron wewnętrznych, główne rodzaje stron wewnętrznych itp. o Sposób wykonania: opis testowy, opcjonalnie graf, schemat organizacyjne itp; format - MS Word lub Open Office 2. Makietę strony głównej projektowanej witryny o Zawartośd: Makieta + legenda Charakterystyka elementów makiety (dokładniejsza niż w przykładzie powyżej) o Sposób wykonania: format - Corel Draw (wer. do X3) lub Inscape /makieta i legenda/ MS Office lub Open Office /charakterystyka/ 3. Dwie makiety stron wewnętrznych (w tym strona zawierająca przykładowy artykuł); o Zawartośd: Makieta + legenda Charakterystyka elementów makiety (uproszczona, ze wskazaniem elementów powtarzających się na wszystkich stronach wewnętrznych i elementów powtórzonych ze strony głównej) o Sposób wykonania: format - Corel Draw (wer. do X3) lub Inscape /makieta i legenda/ MS Office lub Open Office /charakterystyka/ 4. Projekt graficzny strony głównej - projekt poglądowy (makieta uzupełniona o tekst i dostępne elementy graficzne 2 ) format - Corel Draw (wer. do X3) lub Inscape /makieta i legenda/ Uwagi: Praca składad się może z kilku plików, aby umożliwid jej ocenę należy podpisad każdy z plików składowych. Plikiem głównym jest Koncepcja budowy witryny powinna więc zawierad wyszczególnienie wszystkich plików wchodzących w skład projektu. 2 Elementy takie jak ramki tabelki, zakładki czy też menu w postaci odnośników tekstowych łatwo przedstawid za pomocą Corela. Elementy standardowe (jak np. okienka wyszukiwarek) można uzyskad wykonując zrzut ekranu dowolnej strony WWW).