Web Usability

2,024 views

Published on

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

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,024
On SlideShare
0
From Embeds
0
Number of Embeds
79
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web Usability

  1. 1. Interaktywne rozwiązaniae-marketing e-biznes e-konsulting e-gov
  2. 2. Praktyczne wykorzystanieprototypów w projektowaniu portali case study projektu serwisu Ministerstwa Finansów www.mf.gov.pl
  3. 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ącegowww.ideo.pl
  4. 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. 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żowaniewww.ideo.pl
  6. 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. 7. Praktyczne wykorzystanie prototypów w projektowaniu portali Prototypy – ich rodzaje i charakterystyka - Elektroniczne - Papierowe - HI-FI - Statyczne - LO-FI - Interaktywnewww.ideo.pl
  8. 8. Praktyczne wykorzystanie prototypów w projektowaniu portali Papierowe nie oznacza nieinteraktywne…  http://www.youtube.com/watch?v=GrV2SZuRPv0www.ideo.pl
  9. 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 funkcjonalnejwww.ideo.pl
  10. 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. 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. 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. 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. 14. Praktyczne wykorzystanie prototypów w projektowaniu portali Metody i narzędzia użyte przy projekcie Etap 3: Projektowanie struktury serwisu i architektury informacjiwww.ideo.pl
  15. 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. 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ówwww.ideo.pl
  17. 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ówwww.ideo.pl
  18. 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.htmwww.ideo.pl
  19. 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 funkcjonalnejwww.ideo.pl
  20. 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. 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ówwww.ideo.pl
  22. 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. 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.plwww.ideo.pl
  24. 24. Praktyczne wykorzystanie prototypów w projektowaniu portali Kilka informacji o projekcie - ciekawostkiwww.ideo.pl
  25. 25. Praktyczne wykorzystanie prototypów w projektowaniu portali Kilka informacji o projekcie - ciekawostkiwww.ideo.pl
  26. 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. 27. PYTANIA
  28. 28. Dziękuję za uwagę PIOTR ZAJĄC pz@ideo.pl, +48 500 067 396 www.ideo.pl
  29. 29. Zapraszamy do współpracyIdeo 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ąc35-234 Rzeszów 02-577 Warszawa Kierownik projektu, specjalista ds. e- marketinguBOK: +48 17 860 21 86 tel./fax: +48 22 244 17 77 tel: +48 17 860 21 86 wew. 66Fax: +48 17 860 21 86 wew. 16 e-mail: warszawa@ideo.pl gsm: +48 500 067 396www.ideo.pl e-mail: pz@ideo.pl

×