SlideShare una empresa de Scribd logo
1 de 24
Prototypowanie serwisów WWW czyli „zmieńmy jeszcze parę szczegółów” Wojtek Chojnacki
Agenda ,[object Object],[object Object],[object Object],[object Object],29 V 2009 Asymetria: Prototypowanie serwisów WWW
Trzy złe pomysły na rozpoczęcie budowy serwisu ,[object Object],[object Object],[object Object],29 V 2009 Asymetria: Prototypowanie serwisów WWW
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
Bez prototypu: ,[object Object],[object Object],[object Object],29 V 2009 Asymetria: Prototypowanie serwisów WWW
Przed stworzeniem prototypu 29 V 2009 Asymetria: Prototypowanie serwisów WWW ,[object Object],[object Object],[object Object],[object Object],[object Object]
Scenariusze użycia - przykład 29 V 2009 Asymetria: Prototypowanie serwisów WWW http://www.jjg.net/ia/visvocab/ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Rodzaje prototypów (1/4): papierowe ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],29 V 2009 Drukowane / rysowane / układane z magnesów http://www.sitepoint.com/kits/usability1/ Asymetria: Prototypowanie serwisów WWW
[object Object],[object Object],[object Object],[object Object],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
Rodzaje prototypów (3/4): wizualne-statyczne ,[object Object],[object Object],[object Object],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
Rodzaje prototypów (4/4): prototypy HTML/Visio ,[object Object],[object Object],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
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%
Zalety prototypów ,[object Object],[object Object],[object Object],[object Object],[object Object],29 V 2009 Asymetria: Prototypowanie serwisów WWW
Tworzenie prototypów:  zakres ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],29 V 2009 Asymetria: Prototypowanie serwisów WWW
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
Tworzenie prototypów: wierność ,[object Object],[object Object],[object Object],[object Object],29 V 2009 Asymetria: Prototypowanie serwisów WWW
Tworzenie prototypów: czytelność ,[object Object],[object Object],29 V 2009 Asymetria: Prototypowanie serwisów WWW
Testowanie z udziałem użytkowników:  prototypy statyczne ,[object Object],[object Object],[object Object],[object Object],29 V 2009 Asymetria: Prototypowanie serwisów WWW
Testowanie z udziałem użytkowników:  prototypy interaktywne ,[object Object],[object Object],[object Object],[object Object],29 V 2009 Asymetria: Prototypowanie serwisów WWW
Nowoczesne narzędzia do prototypowania ,[object Object],[object Object],[object Object],[object Object],[object Object],29 V 2009 Asymetria: Prototypowanie serwisów WWW
Narzędzia do prototypowania: potrzebne i przydatne funkcje ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],29 V 2009 Asymetria: Prototypowanie serwisów WWW 1 2 3 4 6 Axure RP www.axure.com
Prototypy jako fundament a nie projekt? ,[object Object],[object Object],29 V 2009 Asymetria: Prototypowanie serwisów WWW
Dobre pomysły na rozpoczęcie budowy serwisu ,[object Object],[object Object],[object Object],[object Object],29 V 2009 Asymetria: Prototypowanie serwisów WWW
Dziękuję za uwagę Wojtek Chojnacki [email_address] Asymetria: Prototypowanie serwisów WWW

Más contenido relacionado

Similar a Prototypowanie

Ux Upgerde_Symetria_Projektowanie responsywnych treści
Ux Upgerde_Symetria_Projektowanie responsywnych treściUx Upgerde_Symetria_Projektowanie responsywnych treści
Ux Upgerde_Symetria_Projektowanie responsywnych treści
Symetriapl
 
Silverlight z bliska i na wylot
Silverlight z bliska i na wylotSilverlight z bliska i na wylot
Silverlight z bliska i na wylot
Michal Zylinski
 
Architektura serwisu gg.pl 2 przemek łącki (2)
Architektura serwisu gg.pl 2   przemek łącki (2)Architektura serwisu gg.pl 2   przemek łącki (2)
Architektura serwisu gg.pl 2 przemek łącki (2)
Cendoo
 

Similar a Prototypowanie (20)

[spodek 2.0] Tworzenie prototypów serwisów internetowych
[spodek 2.0] Tworzenie prototypów serwisów internetowych[spodek 2.0] Tworzenie prototypów serwisów internetowych
[spodek 2.0] Tworzenie prototypów serwisów internetowych
 
Girls in It - Front-end & Back-end. Jak zacząć
Girls in It - Front-end & Back-end. Jak zacząćGirls in It - Front-end & Back-end. Jak zacząć
Girls in It - Front-end & Back-end. Jak zacząć
 
Projektowanie stron www dla ngo i projektow eko - case study
Projektowanie stron www dla ngo i projektow eko - case studyProjektowanie stron www dla ngo i projektow eko - case study
Projektowanie stron www dla ngo i projektow eko - case study
 
Nie takie bloki straszne… czyli wstęp do Gutenberga
Nie takie bloki straszne… czyli wstęp do GutenbergaNie takie bloki straszne… czyli wstęp do Gutenberga
Nie takie bloki straszne… czyli wstęp do Gutenberga
 
WordCamp 2016 Najdłuższe wdrożenie świata
WordCamp 2016 Najdłuższe wdrożenie świataWordCamp 2016 Najdłuższe wdrożenie świata
WordCamp 2016 Najdłuższe wdrożenie świata
 
Samsung Labo UX/UI Workshop Szczecin
Samsung Labo UX/UI Workshop SzczecinSamsung Labo UX/UI Workshop Szczecin
Samsung Labo UX/UI Workshop Szczecin
 
Wydajny frontend 2023
Wydajny frontend 2023Wydajny frontend 2023
Wydajny frontend 2023
 
Konferencja e-commerce 2007 Funkcjonalnosc witryn internetowych i metody ich ...
Konferencja e-commerce 2007 Funkcjonalnosc witryn internetowych i metody ich ...Konferencja e-commerce 2007 Funkcjonalnosc witryn internetowych i metody ich ...
Konferencja e-commerce 2007 Funkcjonalnosc witryn internetowych i metody ich ...
 
Ux Upgerde_Symetria_Projektowanie responsywnych treści
Ux Upgerde_Symetria_Projektowanie responsywnych treściUx Upgerde_Symetria_Projektowanie responsywnych treści
Ux Upgerde_Symetria_Projektowanie responsywnych treści
 
Produkcja aplikacji internetowych
Produkcja aplikacji internetowychProdukcja aplikacji internetowych
Produkcja aplikacji internetowych
 
Projektowanie grafiki dla publicznych stron internetowych
Projektowanie grafiki dla publicznych stron internetowychProjektowanie grafiki dla publicznych stron internetowych
Projektowanie grafiki dla publicznych stron internetowych
 
Tworzenie stron w WordPress z Elementor
Tworzenie stron w WordPress z ElementorTworzenie stron w WordPress z Elementor
Tworzenie stron w WordPress z Elementor
 
Jak Progressive Web Apps rewolucjonizują User Experience
Jak Progressive Web Apps rewolucjonizują User ExperienceJak Progressive Web Apps rewolucjonizują User Experience
Jak Progressive Web Apps rewolucjonizują User Experience
 
Silverlight z bliska i na wylot
Silverlight z bliska i na wylotSilverlight z bliska i na wylot
Silverlight z bliska i na wylot
 
Web Usability
Web UsabilityWeb Usability
Web Usability
 
Projektowanie stron www trendy UI na 2017 r.
Projektowanie stron www trendy UI na 2017 r.Projektowanie stron www trendy UI na 2017 r.
Projektowanie stron www trendy UI na 2017 r.
 
Architektura serwisu gg.pl 2 przemek łącki (2)
Architektura serwisu gg.pl 2   przemek łącki (2)Architektura serwisu gg.pl 2   przemek łącki (2)
Architektura serwisu gg.pl 2 przemek łącki (2)
 
Stop one page
Stop one pageStop one page
Stop one page
 
Responsive Web Design - co z tego wynikło?
Responsive Web Design - co z tego wynikło?Responsive Web Design - co z tego wynikło?
Responsive Web Design - co z tego wynikło?
 
4Developers 2023: frontendowe optymalizacje wydajności / Bartek Miś / Web Dev...
4Developers 2023: frontendowe optymalizacje wydajności / Bartek Miś / Web Dev...4Developers 2023: frontendowe optymalizacje wydajności / Bartek Miś / Web Dev...
4Developers 2023: frontendowe optymalizacje wydajności / Bartek Miś / Web Dev...
 

Más de Symetria

Różnice kulturowe w międzynarodowych badaniach użyteczności
Różnice kulturowe w międzynarodowych badaniach użytecznościRóżnice kulturowe w międzynarodowych badaniach użyteczności
Różnice kulturowe w międzynarodowych badaniach użyteczności
Symetria
 
Makiety uzytkownikow
Makiety uzytkownikowMakiety uzytkownikow
Makiety uzytkownikow
Symetria
 
Wstęp do analizy e-strategicznej
Wstęp do analizy e-strategicznejWstęp do analizy e-strategicznej
Wstęp do analizy e-strategicznej
Symetria
 
Dlaczego wyniki badan laboratoryjnych nie sa porownywalne
Dlaczego wyniki badan laboratoryjnych nie sa porownywalneDlaczego wyniki badan laboratoryjnych nie sa porownywalne
Dlaczego wyniki badan laboratoryjnych nie sa porownywalne
Symetria
 
Cognitive walkthrough blog
Cognitive walkthrough blogCognitive walkthrough blog
Cognitive walkthrough blog
Symetria
 
Skąd w badaniach użytkowników bierze się liczba 5
Skąd w badaniach użytkowników bierze się liczba 5Skąd w badaniach użytkowników bierze się liczba 5
Skąd w badaniach użytkowników bierze się liczba 5
Symetria
 
Międzynardowe badania usability stron www
Międzynardowe badania usability stron wwwMiędzynardowe badania usability stron www
Międzynardowe badania usability stron www
Symetria
 
Social commerce
Social commerceSocial commerce
Social commerce
Symetria
 
Widzieć bez patrzenia - płytkie przetwarzanie reklam
Widzieć bez patrzenia - płytkie przetwarzanie reklamWidzieć bez patrzenia - płytkie przetwarzanie reklam
Widzieć bez patrzenia - płytkie przetwarzanie reklam
Symetria
 
Insight – wejrzenie w świat konsumenta
Insight – wejrzenie w świat konsumentaInsight – wejrzenie w świat konsumenta
Insight – wejrzenie w świat konsumenta
Symetria
 
Efektywnościowe modele rozliczeniowe w internetowych kampaniach reklamowych
Efektywnościowe modele rozliczeniowe w internetowych kampaniach reklamowychEfektywnościowe modele rozliczeniowe w internetowych kampaniach reklamowych
Efektywnościowe modele rozliczeniowe w internetowych kampaniach reklamowych
Symetria
 

Más de Symetria (20)

Jak przekonać użytkowników do zmiany zachowania? Projektowanie perswazyjne
Jak przekonać użytkowników do zmiany zachowania? Projektowanie perswazyjneJak przekonać użytkowników do zmiany zachowania? Projektowanie perswazyjne
Jak przekonać użytkowników do zmiany zachowania? Projektowanie perswazyjne
 
Projektowanie pozytywnego UX aplikacji mobilnej
Projektowanie pozytywnego UX aplikacji mobilnejProjektowanie pozytywnego UX aplikacji mobilnej
Projektowanie pozytywnego UX aplikacji mobilnej
 
Marketingowa Mapa Skarbów - Symetria
Marketingowa Mapa Skarbów - SymetriaMarketingowa Mapa Skarbów - Symetria
Marketingowa Mapa Skarbów - Symetria
 
Krzysztof Kozak - UX Camp
Krzysztof Kozak - UX CampKrzysztof Kozak - UX Camp
Krzysztof Kozak - UX Camp
 
Różnice kulturowe w międzynarodowych badaniach użyteczności
Różnice kulturowe w międzynarodowych badaniach użytecznościRóżnice kulturowe w międzynarodowych badaniach użyteczności
Różnice kulturowe w międzynarodowych badaniach użyteczności
 
Makiety uzytkownikow
Makiety uzytkownikowMakiety uzytkownikow
Makiety uzytkownikow
 
Prototypowanie użytkowników czyli persony w projektowaniu interfejsów użytkow...
Prototypowanie użytkowników czyli persony w projektowaniu interfejsów użytkow...Prototypowanie użytkowników czyli persony w projektowaniu interfejsów użytkow...
Prototypowanie użytkowników czyli persony w projektowaniu interfejsów użytkow...
 
Wstęp do analizy e-strategicznej
Wstęp do analizy e-strategicznejWstęp do analizy e-strategicznej
Wstęp do analizy e-strategicznej
 
Militaria.pl - case study
Militaria.pl - case studyMilitaria.pl - case study
Militaria.pl - case study
 
Dlaczego wyniki badan laboratoryjnych nie sa porownywalne
Dlaczego wyniki badan laboratoryjnych nie sa porownywalneDlaczego wyniki badan laboratoryjnych nie sa porownywalne
Dlaczego wyniki badan laboratoryjnych nie sa porownywalne
 
Brand story
Brand storyBrand story
Brand story
 
Prywatność a internet
Prywatność a internet Prywatność a internet
Prywatność a internet
 
Cognitive walkthrough blog
Cognitive walkthrough blogCognitive walkthrough blog
Cognitive walkthrough blog
 
Skąd w badaniach użytkowników bierze się liczba 5
Skąd w badaniach użytkowników bierze się liczba 5Skąd w badaniach użytkowników bierze się liczba 5
Skąd w badaniach użytkowników bierze się liczba 5
 
Międzynardowe badania usability stron www
Międzynardowe badania usability stron wwwMiędzynardowe badania usability stron www
Międzynardowe badania usability stron www
 
Social commerce
Social commerceSocial commerce
Social commerce
 
Jak opisać błędy i rekomendacje w raporcie użyteczności?
Jak opisać błędy i rekomendacje w raporcie użyteczności?Jak opisać błędy i rekomendacje w raporcie użyteczności?
Jak opisać błędy i rekomendacje w raporcie użyteczności?
 
Widzieć bez patrzenia - płytkie przetwarzanie reklam
Widzieć bez patrzenia - płytkie przetwarzanie reklamWidzieć bez patrzenia - płytkie przetwarzanie reklam
Widzieć bez patrzenia - płytkie przetwarzanie reklam
 
Insight – wejrzenie w świat konsumenta
Insight – wejrzenie w świat konsumentaInsight – wejrzenie w świat konsumenta
Insight – wejrzenie w świat konsumenta
 
Efektywnościowe modele rozliczeniowe w internetowych kampaniach reklamowych
Efektywnościowe modele rozliczeniowe w internetowych kampaniach reklamowychEfektywnościowe modele rozliczeniowe w internetowych kampaniach reklamowych
Efektywnościowe modele rozliczeniowe w internetowych kampaniach reklamowych
 

Prototypowanie

  • 1. Prototypowanie serwisów WWW czyli „zmieńmy jeszcze parę szczegółów” Wojtek Chojnacki
  • 2.
  • 3.
  • 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.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 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.
  • 14.
  • 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.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24. Dziękuję za uwagę Wojtek Chojnacki [email_address] Asymetria: Prototypowanie serwisów WWW