Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Prototypowanie

6,048 views

Published on

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.

Published in: Technology
  • Check the source ⇒ www.HelpWriting.net ⇐ This site is really helped me out gave me relief from headaches. Good luck!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Zgadzam się. JustProto.pl rządzi! :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Prototypowanie

  1. 1. Prototypowanie serwisów WWW czyli „zmieńmy jeszcze parę szczegółów” Wojtek Chojnacki
  2. 2. Agenda <ul><li>Dlaczego warto prototypować </li></ul><ul><li>Rodzaje prototypów </li></ul><ul><li>Zakres i wierność </li></ul><ul><li>Narzędzia do tworzenia interaktywnych prototypów </li></ul>29 V 2009 Asymetria: Prototypowanie serwisów WWW
  3. 3. Trzy złe pomysły na rozpoczęcie budowy serwisu <ul><li>„ Rozplanujmy mapę serwisu” </li></ul><ul><li>„ Zróbmy projekt graficzny kilku stron” </li></ul><ul><li>„ Cały serwis łatwo będzie zbudować na ich podstawie” </li></ul>29 V 2009 Asymetria: Prototypowanie serwisów WWW
  4. 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. 5. Bez prototypu: <ul><li>Projekt zatrzymuje się na długo na etapie decyzji polityczno-wizualnych </li></ul><ul><li>Czas i zasoby poświęcone są na osiągnięcie efektu wizualnego a nie na realizację zadań przez serwisu </li></ul><ul><li>Interesariusze projektu osiągają jego wspólną wizję dopiero po rozpoczęciu implementacji </li></ul>29 V 2009 Asymetria: Prototypowanie serwisów WWW
  6. 6. Przed stworzeniem prototypu 29 V 2009 Asymetria: Prototypowanie serwisów WWW <ul><li>Filozofia serwisu – po co istnieje serwis, komu ma służyć? </li></ul><ul><ul><li>Cele serwisu z punktu widzenia twórcy </li></ul></ul><ul><ul><li>Potrzeby użytkowników realizowane przez serwis </li></ul></ul><ul><ul><li>Metody realizacji powyższych </li></ul></ul><ul><li>Scenariusze użycia </li></ul>
  7. 7. Scenariusze użycia - przykład 29 V 2009 Asymetria: Prototypowanie serwisów WWW http://www.jjg.net/ia/visvocab/ <ul><li>Edycja profilu przez użytkownika </li></ul><ul><li>1.A Użytkownik loguje się wpisując błędne hasło </li></ul><ul><li>2.A Serwis wyświetla ponownie stronę logowania z komunikatem o błędzie -> 1A </li></ul><ul><li>1.B Użytkownik loguje się wpisując poprawne hasło </li></ul><ul><li>2.B Serwis wyświetla stronę profilu użytkownika </li></ul><ul><li>Użytkownik wpisuje nowe wartości wybranych cech w profilu </li></ul><ul><li>4.A Użytkownik zapisuje aktualny stan cech profilu przyciskiem akceptacji </li></ul><ul><li>4.B Użytkownik porzuca zapis przyciskiem anulowania </li></ul><ul><li>5. Użytkownik wraca na stronę logowania </li></ul>
  8. 8. Rodzaje prototypów (1/4): papierowe <ul><li>Zalety: </li></ul><ul><li>+ Tworzone szybko, bez pomocy komputera </li></ul><ul><li>+ Szybkie zmiany na małą skalę </li></ul><ul><li>+ Możliwa praca grupowa </li></ul><ul><li>Wady </li></ul><ul><li>Trudne w ogarnięciu </li></ul><ul><li>Mało szczegółowe </li></ul><ul><li>Mało dosłowne </li></ul>29 V 2009 Drukowane / rysowane / układane z magnesów http://www.sitepoint.com/kits/usability1/ Asymetria: Prototypowanie serwisów WWW
  9. 9. <ul><li>Przedstawiają treść i funkcje, nie ich rozmieszczenie na stronie </li></ul><ul><li>Wady: </li></ul><ul><li>Omijają kwestie interfejsu </li></ul><ul><li>Niedoskonałe w komunikacji </li></ul>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. 10. Rodzaje prototypów (3/4): wizualne-statyczne <ul><li>Wady: </li></ul><ul><li>Kłopotliwe przy wprowadzaniu zmian </li></ul><ul><li>Konieczność dodatkowego opisu interakcji </li></ul>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. 11. Rodzaje prototypów (4/4): prototypy HTML/Visio <ul><li>Wady: </li></ul><ul><li>wymagają dokładności i precyzji w tworzeniu </li></ul>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. 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. 13. Zalety prototypów <ul><li>Są namacalnym produktem </li></ul><ul><li>Łatwe w tworzeniu i modyfikacji </li></ul><ul><li>Koncentracja na treści, nie formie </li></ul><ul><li>W przeciwieństwie do opisów tekstowych wymagają realistycznego podejścia do interfejsów </li></ul><ul><li>Mogą zastępować tekstową dokumentację </li></ul>29 V 2009 Asymetria: Prototypowanie serwisów WWW
  14. 14. Tworzenie prototypów: zakres <ul><li>Warto stworzyć makiety: </li></ul><ul><li>Stron o skomplikowanej budowie </li></ul><ul><li>Stron zawierających interakcję (np. formularze) </li></ul><ul><li>Można pominąć: </li></ul><ul><li>Strony o strukturze graficzno-treściowej podobnej do już istniejących </li></ul><ul><li>Strony tekstowe (np. FAQ) </li></ul>29 V 2009 Asymetria: Prototypowanie serwisów WWW
  15. 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. 16. Tworzenie prototypów: wierność <ul><li>Wskazówki: </li></ul><ul><li>Przykładowe teksty/dane są lepsze niż „Lorem ipsum” </li></ul><ul><li>Użycie kolorów może rozpraszać uwagę odbiorcy </li></ul><ul><li>Warto przedstawić w szczegółach elementów, których kształtu jesteśmy pewni (np. logo, elementy formularza) </li></ul>29 V 2009 Asymetria: Prototypowanie serwisów WWW
  17. 17. Tworzenie prototypów: czytelność <ul><li>Obramowania pozwalają pokazać powiązania między elementami </li></ul><ul><li>Wielkość i kontrastowość czcionki może być narzędziem pokazywania hierarchii </li></ul>29 V 2009 Asymetria: Prototypowanie serwisów WWW
  18. 18. Testowanie z udziałem użytkowników: prototypy statyczne <ul><li>Możemy badać: </li></ul><ul><ul><li>element kliknięty dla wypełnienia zadania („Co klikniesz, żeby…”) </li></ul></ul><ul><ul><li>zrozumiałość istoty strony (np. przez zadanie pytania „Co można było zrobić na stronie, którą zobaczyłeś/aś?”) </li></ul></ul><ul><li>W obu badaniach przydatny jest eyetracking </li></ul>29 V 2009 Asymetria: Prototypowanie serwisów WWW
  19. 19. Testowanie z udziałem użytkowników: prototypy interaktywne <ul><li>Możemy badać: </li></ul><ul><ul><li>to, co w przypadku statycznych prototypów </li></ul></ul><ul><ul><li>scenariusze użycia </li></ul></ul><ul><li>We wszystkich badaniach przydatny jest eyetracking </li></ul>29 V 2009 Asymetria: Prototypowanie serwisów WWW
  20. 20. Nowoczesne narzędzia do prototypowania <ul><li>Axure RP </li></ul><ul><li>Dreamweaver, Fireworks </li></ul><ul><li>Microsoft Expression </li></ul><ul><li>iRise </li></ul><ul><li>DENIM </li></ul>29 V 2009 Asymetria: Prototypowanie serwisów WWW
  21. 21. Narzędzia do prototypowania: potrzebne i przydatne funkcje <ul><li>Elementy wstawiane na zasadzie „przeciągnij i upuść” </li></ul><ul><li>Proste pozycjonowanie elementów „co do piksela” </li></ul><ul><li>Eksport do HTML </li></ul><ul><li>Biblioteka zapisanych fragmentów stron (masters) </li></ul><ul><li>Powiązanie „ścieżek użycia” (use case flows) z makietami </li></ul><ul><li>Dodawanie notatek do makiet </li></ul>29 V 2009 Asymetria: Prototypowanie serwisów WWW 1 2 3 4 6 Axure RP www.axure.com
  22. 22. Prototypy jako fundament a nie projekt? <ul><li>Koncepcja pisania prototypów jako plików XHTML + CSS lub Ruby on Rails </li></ul><ul><li>Wymaga wiedzy programistycznej, ale pozwala wykorzystać prototyp przy tworzeniu finalnego produktu </li></ul>29 V 2009 Asymetria: Prototypowanie serwisów WWW
  23. 23. Dobre pomysły na rozpoczęcie budowy serwisu <ul><li>Określ filozofię serwisu </li></ul><ul><li>Pomyśl nad przypadkami użycia </li></ul><ul><li>Stwórz zarys prototypu i skonfrontuj go z klientem </li></ul><ul><li>Rozwijaj prototyp i konfrontuj go z filozofią </li></ul>29 V 2009 Asymetria: Prototypowanie serwisów WWW
  24. 24. Dziękuję za uwagę Wojtek Chojnacki [email_address] Asymetria: Prototypowanie serwisów WWW

×