Praktyczne wykorzystanie prototypów w projektowaniu portali. Case study projektu serwisu Ministerstwa Finansów. Autor: Piotr Zając

1. Interaktywne rozwiązania
e-marketing e-biznes e-konsulting e-gov

2. Praktyczne wykorzystanie
prototypów w projektowaniu
portali
case study projektu serwisu
Ministerstwa Finansów
www.mf.gov.pl

3. Praktyczne wykorzystanie prototypów w projektowaniu portali
Plan prezentacji
1. Klient i zlecenie – problem, cele, zasoby
2. Prototypy – rodzaje i charakterystyka
3. Proces realizacji projektu – od ogółu do szczegółu
4. Metody i narzędzia użyte przy realizacji projektu
5. Krótka prezentacja wyników prac nad projektem
6. Podsumowanie: wnioski
7. Pytania do prowadzącego
www.ideo.pl

4. Praktyczne wykorzystanie prototypów w projektowaniu portali
Klient i zlecenie – problem, cele, zasoby
Klient: Ministerstwo Finansów
Problem: - Wykonawca wymaga dostarczenia specyfikacji portali przed jego
wykonaniem;
- Są pomysły, jednak brak zasobów i wiedzy by stworzyć projekt we
własnych zakresie;
- potrzeba wykorzystania świeżego spojrzenia na problemy i koncepcje,
wprowadzenie nowych rozwiązań;
Cele: Zadanie strategiczne:
- zaprojektowanie nowej wersji strony Ministerstwa Finansów (mf.gov.pl).
Zadanie operacyjne:
- zwiększenie przejrzystości, użyteczności i funkcjonalności strony dla jej
użytkowników (user experience);
- zaprojektowanie struktury strony i architektury informacji w taki sposób, by
pogodzić informacje między dwa niezależne serwisy (serwis MF oraz
serwis informacyjny przygotowywany przez MF)
www.ideo.pl

5. Praktyczne wykorzystanie prototypów w projektowaniu portali
Klient i zlecenie – problem, cele, zasoby
Zasoby: Po stronie Ministerstwa:
- 12 osobowy, wielowydziałowy zespół po stronie Ministerstwa
- osoby decyzyjne w składzie zespołu
- jasno sprecyzowany końcowy efekt jaki MF chce uzyskać
- przygotowane wstępne koncepcje, analizy grupy docelowej,
wstępny projekt „witryny proklienckiej”
- zdefiniowany, nieprzekraczalny budżet na projekt doradczy
Po stronie agencji:
- 3 osobowy zespół
- wiedza, doświadczenie, zaangażowanie
www.ideo.pl

6. Praktyczne wykorzystanie prototypów w projektowaniu portali
Prototypy – ich rodzaje i charakterystyka
Definicje: Prototyp - jest to modelowa konstrukcja; wizualne odwzorowanie interfejsu;
wykorzystywany do zaprezentowania struktury / układu elementów, architektury
informacji, funkcjonalności a także samego zachowania produktu. Podstawowa
zaleta to możliwość szybkiej modyfikacji (stosunkowo tanim kosztem).
Jest narzędziem wykorzystywanym w testowaniu użyteczności z
użytkownikami, jak również do prezentacji koncepcji projektowanego produktu
klientowi.
Makiety to rysunki / schematy interfejsu i funkcjonalności produktu. Prototypy
to makiety interaktywne, na których można wykonać pewną interakcję z
produktem. Makietom i prototypom najczęściej towarzyszy dokument opisowy -
specyfikacja funkcjonalna.
www.ideo.pl

7. Praktyczne wykorzystanie prototypów w projektowaniu portali
Prototypy – ich rodzaje i charakterystyka
- Elektroniczne
- Papierowe
- HI-FI - Statyczne
- LO-FI - Interaktywne
www.ideo.pl

8. Praktyczne wykorzystanie prototypów w projektowaniu portali
Papierowe nie oznacza nieinteraktywne… 
http://www.youtube.com/watch?v=GrV2SZuRPv0
www.ideo.pl

9. Praktyczne wykorzystanie prototypów w projektowaniu portali
Proces realizacji projektu – od ogółu do szczegółu
ETAP 1 ETAP 2 ETAP 3 ETAP 4
Projektowanie
Analiza serwisu, Projektowanie
Analiza sytuacji, prototypów
benchmarking, struktury serwisu i
otoczenia,
rekomendacje,
serwisów
materiałów oraz architektury i opracowywanie
strategia informacji
potrzeb Klienta. specyfikacji
komunikacji
funkcjonalnej
www.ideo.pl

10. Praktyczne wykorzystanie prototypów w projektowaniu portali
Metody i narzędzia użyte przy projekcie
Badania użyteczności serwisów czy aplikacji internetowych
podzielić można na dwie zasadnicze grupy:
- badania użyteczności przy współudziale użytkowników z
grupy docelowej odbiorców produktu (oraz ekspertów
przeprowadzających badanie i analizujących otrzymane
wyniki)
- badania użyteczności w oparciu o audyt ekspercki.
Obydwie grupy zawierają w sobie szereg metod, technik i
narzędzi badawczych, które są wykorzystywane w trakcie
procesu badawczego.
www.ideo.pl

11. Praktyczne wykorzystanie prototypów w projektowaniu portali
Metody i narzędzia użyte przy projekcie
Etap 1 i 2: Analiza sytuacji, otoczenia, materiałów oraz potrzeb Klienta.
Analiza serwisu, benchmarking, rekomendacje, strategia komunikacji
Wywiad
Jedna z podstawowych metod używanych w procesie badań z
użytkownikami. W przypadku projektu dla MF metoda została użyta
w pierwszej kolejności do pogłębienia wiedzę o Kliencie, jego
preferencjach i oczekiwaniach.
Analiza jakościowa
Technika opiera się o ocenę ekspercką. Zespół ekspercki (co
najmniej 2 niezależnych audytorów) analizuje i ocenia strony przez
pryzmat zdefiniowanych przed badaniem obszarów, przykładowo:
odczucia estetyczne, układ elementów, funkcjonalności,
użyteczność, marketing i komunikacja, analiza wsparcia SEM.
Obszary dobierane są indywidualnie do każdej wykonywanej analizy.
Raport zawiera ocenę rozwiązań, opis pozytywnych i negatywnych
elementów oraz rekomendacje.
www.ideo.pl

12. Praktyczne wykorzystanie prototypów w projektowaniu portali
Metody i narzędzia użyte przy projekcie
Etap 1 i 2: Analiza sytuacji, otoczenia, materiałów oraz potrzeb Klienta.
Analiza serwisu, benchmarking, rekomendacje, strategia komunikacji
Analiza heurystyczna
Technika ta opiera się na ocenie zgodności danego projektu z
regułami użyteczności (tzw. heurystykami - najpopularniejsze to 10
heurystyk J. Nielsena). Zwykle służy do wykrywania problemów
związanych z nawigacją po serwisie.
Analiza danych
Metoda stosowana na końcu procesu badawczego. Polega na
usystematyzowaniu wyników oraz sformułowaniu wniosków i
zaleceń niezbędnych do napisania raportu z rekomendacjami.
Analizie poddawany jest cały zebrany materiał badawczy.
www.ideo.pl

13. Praktyczne wykorzystanie prototypów w projektowaniu portali
Metody i narzędzia użyte przy projekcie
Etap 1 i 2: Analiza sytuacji, otoczenia, materiałów oraz potrzeb Klienta.
Analiza serwisu, benchmarking, rekomendacje, strategia komunikacji
Wyniki: - Raport z analizy użyteczności obecnego serwisu
- Raport zawierający propozycje i rekomendacje rozwiązań
- Dokument strategiczny „Założenia globalne projektu MF BIP+” zawierający:
> Filozofię serwisu: cel, zadania, persony, itd.
> Opis najważniejszych założeń funkcjonalnych i graficznych dla serwisu
(rekomendacje i propozycje)
> Opis najważniejszych założeń funkcjonalnych dla systemu zarządzania treścią
(rekomendacje i propozycje) oraz work-flow
> Strategię komunikacji dla wszystkich witryn MF (polityka domenowa, wymiana
informacji między witrynami, itd.)
www.ideo.pl

14. Praktyczne wykorzystanie prototypów w projektowaniu portali
Metody i narzędzia użyte przy projekcie
Etap 3: Projektowanie struktury serwisu i architektury informacji
www.ideo.pl

15. Praktyczne wykorzystanie prototypów w projektowaniu portali
Metody i narzędzia użyte przy projekcie
Etap 3: Projektowanie struktury serwisu i architektury informacji
Metody Wywiad
badawcze: W przypadku tego etapu, metoda została użyta do
wykorzystania wiedzy Zespołu Klienta odnośnie
preferencji, potrzeb i wymogów prawnych związanych
z informacjami umieszczanymi w serwisie.
Informacje te były konfrontowane z wiedzą ekspercką,
rekomendacjami oraz wyznaczonymi w poprzednich
etapach celami.
Scenariusze użycia
Są to zestawy zdefiniowanych zadań, które
użytkownicy mają do wykonania podczas testów
użyteczności. Testy tego typu powinny uwzględniać
szereg typowych sytuacji, dla których dany serwis
istnieje.
W przypadku projektu były to testy wewnętrzne – bez
angażowania użytkowników. Służyły do oceny
tworzonej architektury pod kątem jasności nazw
poszczególnych elementów menu.
www.ideo.pl

16. Praktyczne wykorzystanie prototypów w projektowaniu portali
Metody i narzędzia użyte przy projekcie
Etap 3: Projektowanie struktury i architektury informacji serwisu
Narzędzia:
FreeMIND
Aplikacja do tworzenia map myśli.
Wykorzystana do:
- Stworzenia pełnej, klikalnej
struktury wszystkich serwisów
- Naniesienie opisów zawartości
poszczególnych elementów
struktury
- Naniesienie opisów
funkcjonalności i wykorzystanych
przez dany element szablonów
www.ideo.pl

17. Praktyczne wykorzystanie prototypów w projektowaniu portali
Metody i narzędzia użyte przy projekcie
Etap 3: Projektowanie struktury i architektury informacji serwisu
Wyniki: - Klikalna struktura wszystkich serwisów (9 niezależnych struktur)
- Struktura edytowalna w plikach .MM (format aplikacji FreeMIND)
- Klikalna struktura z opisem:
> Zawartości poszczególnych elementów struktury
> Przypisanie funkcjonalności i wykorzystanych przez dany element szablonów
www.ideo.pl

18. Praktyczne wykorzystanie prototypów w projektowaniu portali
Metody i narzędzia użyte przy projekcie
Etap 3: Projektowanie struktury i architektury informacji serwisu
A gdyby było więcej czasu…
Aplikacja Treejack
http://www.optimalworkshop.com/treejack.htm
www.ideo.pl

19. Praktyczne wykorzystanie prototypów w projektowaniu portali
Metody i narzędzia użyte przy projekcie
Etap 4: Projektowanie prototypów serwisów i opracowywanie specyfikacji
funkcjonalnej
www.ideo.pl

20. Praktyczne wykorzystanie prototypów w projektowaniu portali
Metody i narzędzia użyte przy projekcie
Etap 4: Projektowanie prototypów serwisów i opracowywanie specyfikacji
funkcjonalnej
Narzędzia: AXURE RP
Axure RP Pro jest doskonałym narzędziem służącym
do tworzenia wszelakiego rodzaju prototypów,
interfejsów użytkownika, diagramów przepływu
informacji, oraz automatycznie generowanych
specyfikacji aplikacji i witryn internetowych.
Przez nas wykorzystywany do prototypowania z uwagi
na szerokie możliwościami tworzenia
zaawansowanych interakcji oraz zautomatyzowane
generowanie specyfikacji funkcjonalnej na bazie
tworzonego prototypu.
Wykonano:
- Makiety klikalne serwisów
- Dokumentację funkcjonalną
www.ideo.pl

21. Praktyczne wykorzystanie prototypów w projektowaniu portali
Metody i narzędzia użyte przy projekcie
Etap 4: Projektowanie prototypów serwisów i opracowywanie specyfikacji
funkcjonalnej
Narzędzia:
DRAW – pakiet OpenOffice
Jest edytorem grafiki wektorowej pakietu
OpenOffice, możliwościami porównywalnym z
pierwszymi wersjami znanego programu
CorelDraw. Dzięki niemu użytkownik ma
możliwość szybkiej edycji i tworzenia zarówno
prostych i efektownie wyglądających grafik
dwu- jak i trójwymiarowych, w tym tekstów
artystycznych oraz schematów blokowych -
dając możliwość użycia ich w innych
składnikach pakietu lub eksportowania ich do
różnych formatów graficznych
Wykonano:
- Makiety statyczne serwisów
www.ideo.pl

22. Praktyczne wykorzystanie prototypów w projektowaniu portali
Metody i narzędzia użyte przy projekcie
Etap 4: Projektowanie prototypów serwisów i opracowywanie specyfikacji
funkcjonalnej
Wyniki: - Klikalne makiety 9 niezależnych serwisów z odzwierciedleniem pełnej struktury
i podpięciem szablonów pod każdy element struktury:
> ok. 377 MB
> ok. 77 500 plików
- Specyfikacja funkcjonalna (315 stron)
www.ideo.pl

23. Praktyczne wykorzystanie prototypów w projektowaniu portali
Kilka informacji o projekcie - ciekawostki
Każdy z serwisów dostępny pod osobnym adresem:
- Ministerstwo Finansów: mf.gov.pl
- Administracja Podatkowa: ap.gov.pl lub
administracjapodatkowa.gov.pl
- Służba Celna: sluzbacelna.gov.pl lub sc.gov.pl
- Kontrola Skarbowa: ks.gov.pl lub kontrolaskarbowa.gov.pl
Adresy stron poszczególnych jednostek:
- Izba Celna: ic.gov.pl
- Urząd Celny: uc.gov.pl
- Izba Skarbowa: is.gov.pl
- Urząd Skarbowy: us.gov.pl
- Urząd Kontroli Skarbowej: uks.gov.pl
Każda z placówek danej jednostki będzie mieć adresy w formie:
- Urząd Skarbowy w Rzeszowie: rzeszow.us.gov.pl
- Izba Celna w Krośnie: krosno.ic.gov.pl
- Urząd Kontroli Skarbowej w Rzeszowie: rzeszow.uks.gov.pl
Jeżeli w Rzeszowie istnieją 2 oddziały Urzędu Celnego, to:
- rzeszow.uc.gov.pl - pod tym adresem będzie strona z mapą
linków do wszystkich jednostek Urzędu Celnego w mieście
Rzeszów
- adresy placówek: rzeszow1.uc.gov.pl, rzeszow2.uc.gov.pl
www.ideo.pl

24. Praktyczne wykorzystanie prototypów w projektowaniu portali
Kilka informacji o projekcie - ciekawostki
www.ideo.pl

25. Praktyczne wykorzystanie prototypów w projektowaniu portali
Kilka informacji o projekcie - ciekawostki
www.ideo.pl

26. Praktyczne wykorzystanie prototypów w projektowaniu portali
Podsumowanie - wnioski
- Uzyskanie optymalnego rozwiązania Witryny BIP+ zgodnego z założeniami biznesowymi
i wymaganiami technicznymi,
- Dopasowanie ilości witryn i zakresu ich informacji do potrzeb informacyjnych różnych
grup użytkowników,
- Pogodzenie interesów różnych grup wewnątrz Ministerstwa Finansów
- Wyeliminowanie - na etapie badań użyteczności i projektowania – większości
potencjalnych problemów jakie mogłyby wystąpić przy wdrożeniu
- Sformalizowanie wiedzy: zebranie, uporządkowanie i podsumowanie istniejącej wiedzy
na temat potrzeb i wymagań Ministerstwa dla Witryny BIP +,
- Zapewnienie kluczowych danych do dalszego procesu wdrożeniowego,
- Zwiększenie efektywności przebiegu procesu wdrożeniowego.
www.ideo.pl

27. PYTANIA

28. Dziękuję za uwagę
PIOTR ZAJĄC
pz@ideo.pl, +48 500 067 396
www.ideo.pl

29. Zapraszamy do współpracy
Ideo Sp. z o.o.
W sprawie konsultingu prosimy o kontakt z:
Siedziba firmy: Biuro handlowe:
ul. Nad Przyrwą 13 Al. Niepodległości124/2 Piotr Zając
35-234 Rzeszów 02-577 Warszawa Kierownik projektu, specjalista ds. e-
marketingu
BOK: +48 17 860 21 86 tel./fax: +48 22 244 17 77
tel: +48 17 860 21 86 wew. 66
Fax: +48 17 860 21 86 wew. 16 e-mail: warszawa@ideo.pl
gsm: +48 500 067 396
www.ideo.pl
e-mail: pz@ideo.pl