Prototypowanie serwisów internetowych pozwala dopracować ich interfejs jeszcze przed rozpoczęciem wdrażania programistycznego, a w rezultacie zmniejszyć koszt tworzenia. Prezentacja pokazuje założenia i metody prototypowania WWW.

1. Prototypowanie serwisów WWW czyli „zmieńmy jeszcze parę szczegółów” Wojtek Chojnacki

2. Agenda Dlaczego warto prototypować Rodzaje prototypów Zakres i wierność Narzędzia do tworzenia interaktywnych prototypów 29 V 2009 Asymetria: Prototypowanie serwisów WWW

3. Trzy złe pomysły na rozpoczęcie budowy serwisu „ Rozplanujmy mapę serwisu” „ Zróbmy projekt graficzny kilku stron” „ Cały serwis łatwo będzie zbudować na ich podstawie” 29 V 2009 Asymetria: Prototypowanie serwisów WWW

4. Na czym się kończy… 29 V 2009 Zbliżamy się do celu, ale to jeszcze nie to Oby tym razem zaakceptowali… Niezłe, ale czuję nieodpartą pokusę zgłoszenia jeszcze kilku uwag Muszę zobaczyć jeszcze dwie wersje w innych kolorach! Asymetria: Prototypowanie serwisów WWW

5. Bez prototypu: Projekt zatrzymuje się na długo na etapie decyzji polityczno-wizualnych Czas i zasoby poświęcone są na osiągnięcie efektu wizualnego a nie na realizację zadań przez serwisu Interesariusze projektu osiągają jego wspólną wizję dopiero po rozpoczęciu implementacji 29 V 2009 Asymetria: Prototypowanie serwisów WWW

6. Przed stworzeniem prototypu 29 V 2009 Asymetria: Prototypowanie serwisów WWW Filozofia serwisu – po co istnieje serwis, komu ma służyć? Cele serwisu z punktu widzenia twórcy Potrzeby użytkowników realizowane przez serwis Metody realizacji powyższych Scenariusze użycia

7. Scenariusze użycia - przykład 29 V 2009 Asymetria: Prototypowanie serwisów WWW http://www.jjg.net/ia/visvocab/ Edycja profilu przez użytkownika 1.A Użytkownik loguje się wpisując błędne hasło 2.A Serwis wyświetla ponownie stronę logowania z komunikatem o błędzie -> 1A 1.B Użytkownik loguje się wpisując poprawne hasło 2.B Serwis wyświetla stronę profilu użytkownika Użytkownik wpisuje nowe wartości wybranych cech w profilu 4.A Użytkownik zapisuje aktualny stan cech profilu przyciskiem akceptacji 4.B Użytkownik porzuca zapis przyciskiem anulowania 5. Użytkownik wraca na stronę logowania

8. Rodzaje prototypów (1/4): papierowe Zalety: + Tworzone szybko, bez pomocy komputera + Szybkie zmiany na małą skalę + Możliwa praca grupowa Wady Trudne w ogarnięciu Mało szczegółowe Mało dosłowne 29 V 2009 Drukowane / rysowane / układane z magnesów http://www.sitepoint.com/kits/usability1/ Asymetria: Prototypowanie serwisów WWW

9. Przedstawiają treść i funkcje, nie ich rozmieszczenie na stronie Wady: Omijają kwestie interfejsu Niedoskonałe w komunikacji Rodzaje prototypów (2/4): koncepcyjne 29 V 2009 Zalety : + Pozwalają skupić się na treści + Nie ingerują w prace grafika + Dobre jako narzędzie wspomagające Asymetria: Prototypowanie serwisów WWW

10. Rodzaje prototypów (3/4): wizualne-statyczne Wady: Kłopotliwe przy wprowadzaniu zmian Konieczność dodatkowego opisu interakcji 29 V 2009 Schematyczne szkielety stron w plikach graficznych Zalety : + Pozwalają dostosować ilość treści do stron + Dobrze komunikują treść i sposób przedstawienia + Stanowią precyzyjne wytyczne dla grafika Asymetria: Prototypowanie serwisów WWW

11. Rodzaje prototypów (4/4): prototypy HTML/Visio Wady: wymagają dokładności i precyzji w tworzeniu 29 V 2009 Schematyczne szkielety stron w postaci umożliwiającej interakcję Zalety : + wszystkie zalety statycznych makiet + umożliwiają łatwe przetestowanie ścieżek użycia + najlepiej komunikują obraz serwisu + proste wprowadzanie zmian na dużą skalę Asymetria: Prototypowanie serwisów WWW

12. Zadowolenie z narzędzi do prototypowania 29 V 2009 http://www.guuui.com/issues/01_03_02.php Asymetria: Prototypowanie serwisów WWW Jestem zupełnie zadowolony z tworzenia prototypów przy użyciu: Całkowicie się nie zgadzam Nie zgadzam się Brak zdania Zgadzam się Całkowicie się zgadzam graficznego/tekstowego edytora HTML (15 odp.) 6.7% 20.0% 6.7% 60.0% 6.7% narzędzia do tworzenia diagramów (13 odp.) 7.7% 76.9% 7.7% 0.0% 7.7% programów graficznych (10 odp.) 10.0% 20.0% 20.0% 50.0% 0.0%

13. Zalety prototypów Są namacalnym produktem Łatwe w tworzeniu i modyfikacji Koncentracja na treści, nie formie W przeciwieństwie do opisów tekstowych wymagają realistycznego podejścia do interfejsów Mogą zastępować tekstową dokumentację 29 V 2009 Asymetria: Prototypowanie serwisów WWW

14. Tworzenie prototypów: zakres Warto stworzyć makiety: Stron o skomplikowanej budowie Stron zawierających interakcję (np. formularze) Można pominąć: Strony o strukturze graficzno-treściowej podobnej do już istniejących Strony tekstowe (np. FAQ) 29 V 2009 Asymetria: Prototypowanie serwisów WWW

15. Tworzenie prototypów: zakres 29 V 2009 Stworzone przy użyciu NetObjects Fusion 10 Gotowe strony można stworzyć przez analogię do produktu 1 Asymetria: Prototypowanie serwisów WWW

16. Tworzenie prototypów: wierność Wskazówki: Przykładowe teksty/dane są lepsze niż „Lorem ipsum” Użycie kolorów może rozpraszać uwagę odbiorcy Warto przedstawić w szczegółach elementów, których kształtu jesteśmy pewni (np. logo, elementy formularza) 29 V 2009 Asymetria: Prototypowanie serwisów WWW

17. Tworzenie prototypów: czytelność Obramowania pozwalają pokazać powiązania między elementami Wielkość i kontrastowość czcionki może być narzędziem pokazywania hierarchii 29 V 2009 Asymetria: Prototypowanie serwisów WWW

18. Testowanie z udziałem użytkowników: prototypy statyczne Możemy badać: element kliknięty dla wypełnienia zadania („Co klikniesz, żeby…”) zrozumiałość istoty strony (np. przez zadanie pytania „Co można było zrobić na stronie, którą zobaczyłeś/aś?”) W obu badaniach przydatny jest eyetracking 29 V 2009 Asymetria: Prototypowanie serwisów WWW

19. Testowanie z udziałem użytkowników: prototypy interaktywne Możemy badać: to, co w przypadku statycznych prototypów scenariusze użycia We wszystkich badaniach przydatny jest eyetracking 29 V 2009 Asymetria: Prototypowanie serwisów WWW

20. Nowoczesne narzędzia do prototypowania Axure RP Dreamweaver, Fireworks Microsoft Expression iRise DENIM 29 V 2009 Asymetria: Prototypowanie serwisów WWW

21. Narzędzia do prototypowania: potrzebne i przydatne funkcje Elementy wstawiane na zasadzie „przeciągnij i upuść” Proste pozycjonowanie elementów „co do piksela” Eksport do HTML Biblioteka zapisanych fragmentów stron (masters) Powiązanie „ścieżek użycia” (use case flows) z makietami Dodawanie notatek do makiet 29 V 2009 Asymetria: Prototypowanie serwisów WWW 1 2 3 4 6 Axure RP www.axure.com

22. Prototypy jako fundament a nie projekt? Koncepcja pisania prototypów jako plików XHTML + CSS lub Ruby on Rails Wymaga wiedzy programistycznej, ale pozwala wykorzystać prototyp przy tworzeniu finalnego produktu 29 V 2009 Asymetria: Prototypowanie serwisów WWW

23. Dobre pomysły na rozpoczęcie budowy serwisu Określ filozofię serwisu Pomyśl nad przypadkami użycia Stwórz zarys prototypu i skonfrontuj go z klientem Rozwijaj prototyp i konfrontuj go z filozofią 29 V 2009 Asymetria: Prototypowanie serwisów WWW

24. Dziękuję za uwagę Wojtek Chojnacki [email_address] Asymetria: Prototypowanie serwisów WWW