{"id":3287,"date":"2019-07-12T09:02:31","date_gmt":"2019-07-12T07:02:31","guid":{"rendered":"https:\/\/wp-test.itcraft.pl\/pl\/?p=3276"},"modified":"2020-12-09T11:54:13","modified_gmt":"2020-12-09T10:54:13","slug":"jak-zaczac-ux-design-user-flow-oraz-interaktywny-prototyp","status":"publish","type":"post","link":"https:\/\/itcraftapps.com\/pl\/blog\/jak-zaczac-ux-design-user-flow-oraz-interaktywny-prototyp\/","title":{"rendered":"Jak zacz\u0105\u0107 UX design &#8211; User Flow oraz Interaktywny Prototyp"},"content":{"rendered":"\n<script type=\"application\/ld+json\">\n    {\n      \"@context\": \"http:\/\/schema.org\",\n      \"@type\": \"Blog\",\n      \"name\": \"itCraftapps.com - Mobile App Development Blog\",\n      \"url\": \"https:\/\/itcraftapps.com\/pl\/blog\"\n    }\n  <\/script>\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"http:\/\/schema.org\",\n  \"@type\": \"Article\",\n  \"mainEntityOfPage\": {\n  \"@type\": \"WebPage\",\n  \"@id\": \"https:\/\/itcraftapps.com\/pl\/blog\/jak-zaczac-ux-design-user-flow-oraz-interaktywny-prototyp\/\"\n  },\n  \"headline\": \"User Flow oraz Interaktywny Prototyp\",\n \n    \"image\": [\n{\n\t\n  \"@type\": \"ImageObject\", \n  \"contentUrl\": \"placeholder-post.png\",  \"url\":\"https:\/\/wp-test.itcraft.pl\/wp-content\/uploads\/2019\/04\/placeholder-post.png\",\n  \"description\": \"Jak zacz\u0105\u0107 UX design \u2013 User Flow oraz Interaktywny Prototyp\",\n  \"name\": \"User Flow oraz Interaktywny Prototyp\"\n\n}\n  \n  ],\n  \n  \"datePublished\": \"2020-07-12\",\n  \"dateModified\": \"2020-03-06\",\n  \"author\": {\n  \"@type\": \"Person\",\n  \"name\": \"Paulina Chmielewska\",\n  \"jobTitle\": \"Marketing Manager\",\n  \"description\": \"Marketing Manager at itCraft\"\n\n  },\n  \"publisher\": {\n  \"@type\": \"Organization\",\n  \"name\": \"itCraftapps.com\",\n  \"logo\": {\n  \"@type\": \"ImageObject\",\n  \"url\": \"https:\/\/wp-test.itcraft.pl\/wp-content\/uploads\/2019\/04\/placeholder-post.png\"\n  },\n  \"description\": \"itCraftapps.com - Mobile App Development\"\n}}\n<\/script>\n\n\n\n<p><a href=\"https:\/\/itcraftapps.com\/pl\/uslugi\/ux-research\/\">UX Design<\/a> to niezwykle z\u0142o\u017cony proces. Aby projektowanie stron internetowych oraz aplikacji przynosi\u0142o oczekiwane rezultaty nale\u017cy wzi\u0105\u0107 pod uwag\u0119 szereg czynnik\u00f3w, nie tylko sam wygl\u0105d. R\u00f3wnie wa\u017cne s\u0105 odczucia u\u017cytkownika, kt\u00f3ry poprzez intuicyjny spos\u00f3b dzia\u0142ania danego produktu z \u0142atwo\u015bci\u0105 osi\u0105gnie zamierzony cel. Istnieje wiele sposob\u00f3w, kt\u00f3re pomagaj\u0105 w stworzeniu idealnego i przydatnego dla klient\u00f3w rozwi\u0105zania. Poni\u017cszy artyku\u0142 skupi si\u0119 na dw\u00f3ch, kt\u00f3re wizualizuj\u0105 \u015bcie\u017ck\u0119 jak\u0105 musi przej\u015b\u0107 u\u017cytkownik aby wykona\u0107 zadania w zaprojektowanym produkcie.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Spis tre\u015bci<\/h2>\n\n\n\n<ol class=\"wp-block-list\"><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/jak-zaczac-ux-design-user-flow-oraz-interaktywny-prototyp\/#1\">Co to jest USER FLOW?<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/jak-zaczac-ux-design-user-flow-oraz-interaktywny-prototyp\/#2\">Czym s\u0105 Interaktywne Prototypy?<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/jak-zaczac-ux-design-user-flow-oraz-interaktywny-prototyp\/#3\">Podstawowe narz\u0119dzia<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/jak-zaczac-ux-design-user-flow-oraz-interaktywny-prototyp\/#4\">Dlaczego warto po\u015bwi\u0119ca\u0107 czas na USER FLOW i PROTOTYPOWANIE?<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/jak-zaczac-ux-design-user-flow-oraz-interaktywny-prototyp\/#5\">Proces tworzenia<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/jak-zaczac-ux-design-user-flow-oraz-interaktywny-prototyp\/#6\">Links<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/jak-zaczac-ux-design-user-flow-oraz-interaktywny-prototyp\/#7\">Gestures &amp; Transistions<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/jak-zaczac-ux-design-user-flow-oraz-interaktywny-prototyp\/#8\">Podgl\u0105d<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/jak-zaczac-ux-design-user-flow-oraz-interaktywny-prototyp\/#9\">Podsumowanie<\/a><\/span><\/li><\/ol>\n\n\n\n<br \/>\n\n\n\n<p>Spr\u00f3bujmy odpowiedzie\u0107 na nast\u0119puj\u0105ce pytania: Jakie s\u0105 r\u00f3\u017cnice pomi\u0119dzy User flow a Interaktywnym prototypem? Jaki jest ich cel? W jaki spos\u00f3b mog\u0105 si\u0119 wzajemnie uzupe\u0142nia\u0107? Od kt\u00f3rego powinni\u015bmy zacz\u0105\u0107 rozpoczynaj\u0105c nasz proces projektowy?&nbsp;<br \/><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1\">Co to jest USER FLOW?<\/h2>\n\n\n\n<p>User Flow to swego rodzaju mapa, kt\u00f3ra tworzy i wizualizuje ca\u0142\u0105 \u015bcie\u017ck\u0119, jak\u0105 musi przej\u015b\u0107 u\u017cytkownik, aby wykona\u0107 odpowiednie zadanie. Pro\u015bciej ujmuj\u0105c, przenosi ona u\u017cytkownika z punktu wej\u015bcia poprzez szereg krok\u00f3w w kierunku ostatecznego dzia\u0142ania jakim mo\u017ce by\u0107 na przyk\u0142ad zakup produktu. Z ca\u0142\u0105 pewno\u015bci\u0105 mo\u017cna powiedzie\u0107, \u017ce jest to podstawa procesu projektowania. Zrozumienie potrzeb u\u017cytkownik\u00f3w jest niezb\u0119dne do zbudowania produktu, kt\u00f3ry te potrzeby b\u0119dzie w \u0142atwy spos\u00f3b spe\u0142nia\u0142.&nbsp;<br \/><\/p>\n\n\n\n<p><strong>Tworz\u0105c User Flow zawsze nale\u017cy odpowiedzie\u0107 sobie na pytania:&nbsp;<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Co u\u017cytkownik pr\u00f3buje osi\u0105gn\u0105\u0107?<\/li><li>Co jest wa\u017cne dla u\u017cytkownika i jakie czynniki sprawiaj\u0105, \u017ce nie zrezygnuje on z kontynuowania dzia\u0142ania?<\/li><li>Jakie dodatkowe informacje b\u0119d\u0105 potrzebne u\u017cytkownikowi, aby dane zadanie uko\u0144czy\u0107?<\/li><li>Czy wyst\u0119puj\u0105 (je\u015bli tak to jakie) bariery na drodze u\u017cytkownika?<\/li><\/ul>\n\n\n\n<p>Odpowiedzi na te pytania b\u0119d\u0105 zawiera\u0142y wskaz\u00f3wki jakie tre\u015bci i linki nawigacyjne powinny zawiera\u0107 poszczeg\u00f3lne podstrony. Je\u015bli podstawowym celem u\u017cytkownika jest przegl\u0105danie du\u017cej ilo\u015bci r\u00f3\u017cnych produkt\u00f3w, Twoja strona lub ekran b\u0119dzie przedstawi\u0107 zupe\u0142nie inny design oraz funkcjonalno\u015b\u0107 ni\u017c w przypadku, gdy g\u0142\u00f3wnym celem jest zakup wybranego produktu i przej\u015bcie dalej.&nbsp;<\/p>\n\n\n\n<p>\tUser Flow mo\u017ce przybiera\u0107 r\u00f3\u017cne formy w zale\u017cno\u015bci od witryny czy aplikacji, kt\u00f3r\u0105 projektujesz. Jako przyk\u0142ad, typowy User Flow strony e-commerce mo\u017ce wygl\u0105da\u0107 nast\u0119puj\u0105co:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>U\u017cytkownik zaczyna swoj\u0105 podr\u00f3\u017c na stronie g\u0142\u00f3wnej,&nbsp;<\/li><li>Na stronie g\u0142\u00f3wnej u\u017cytkownik klika ikon\u0119 kategorii,&nbsp;<\/li><li>Na stronie kategorii klika produkt,&nbsp;<\/li><li>Na stronie produktu u\u017cytkownik dodaje przedmiot do koszyka,&nbsp;<\/li><li>Na stronie koszyka klika ikon\u0119 przej\u015bcia do kasy,&nbsp;<\/li><li>Na stronie kasy dokonuje zap\u0142aty za produkt, podaje dane do wysy\u0142ki itd..&nbsp;<\/li><\/ul>\n\n\n\n<p>Jest to oczywi\u015bcie bardzo uproszczona wersja \u015bcie\u017cki u\u017cytkownika. W rzeczywisto\u015bci, u\u017cytkownik mo\u017ce wr\u00f3ci\u0107 do wyboru kategorii, mo\u017ce doda\u0107 do koszyka kilka produkt\u00f3w, mo\u017ce tak\u017ce u\u017cy\u0107 nawigacji do wyszukiwania produkt\u00f3w, albo mo\u017ce po prostu zrezygnowa\u0107 z zakupu. Z racji tego, \u017ce istnieje tak wiele r\u00f3\u017cnych \u015bcie\u017cek, kt\u00f3re u\u017cytkownicy mog\u0105 przyj\u0105\u0107, User Flow s\u0105 cz\u0119sto modelowane jako \u201cschematy przep\u0142ywowe\u201d z w\u0119z\u0142ami dla ka\u017cdej z g\u0142\u00f3wnych \u015bcie\u017cek nawigacyjnych.&nbsp;<br \/><\/p>\n\n\n\n<p>Celem tak dok\u0142adnej analizy User Flow jest zidentyfikowanie obszar\u00f3w, w kt\u00f3rych mo\u017cna usprawni\u0107 wspomniany przep\u0142yw u\u017cytkownik\u00f3w. Je\u015bli po przeprowadzeniu analizy na naszej stronie e-commerce zauwa\u017cymy, \u017ce znaczna cz\u0119\u015b\u0107 klient\u00f3w rezygnuje z dzia\u0142ania na etapie koszyka i nie dokonuje zakupu, warto zastanowi\u0107 si\u0119 dlaczego tak si\u0119 dzieje. Identyfikuj\u0105c porzucenie koszyka zaczynamy tworzy\u0107 hipotezy oraz wprowadzamy usprawniaj\u0105ce ten proces dzia\u0142ania. Warto tak\u017ce wprowadzi\u0107 w tym momencie testowanie pomys\u0142\u00f3w, aby okre\u015bli\u0107, kt\u00f3re zmiany b\u0119d\u0105 mia\u0142y pozytywny wp\u0142yw na Twoje User Flow.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2\">Czym s\u0105 Interaktywne Prototypy?&nbsp;<\/h2>\n\n\n\n<p>Aby wyja\u015bni\u0107 zagadnienie prototyp\u00f3w musimy najpierw przyjrze\u0107 si\u0119 tematowi tzw. <em>wireframes.<\/em> To w\u0142a\u015bnie za ich pomoc\u0105 zaczynamy tworzy\u0107 User Flow, aby ustali\u0107 podstawow\u0105 struktur\u0119 strony przed dodaniem wizualnego projektu i zawarto\u015bci, uwzgl\u0119dniaj\u0105c oczywi\u015bcie potrzeby u\u017cytkownik\u00f3w i mo\u017cliwe \u015bcie\u017cki wyboru. Wireframing to wi\u0119c nic innego jak spos\u00f3b na zaprojektowanie serwisu internetowego czy aplikacji na poziomie strukturalnym, nie martwi\u0105c si\u0119 zbytnio finalnym wygl\u0105dem produktu. Mo\u017cemy tego dokona\u0107 w \u0142atwy spos\u00f3b poprzez szkic na papierze lub bezpo\u015brednio za pomoc\u0105 programu (np. Sketch, Adobe XD, Proto.io itd.).<\/p>\n\n\n\n<p>Kiedy wi\u0119c stworzymy nasz User Flow i przygotujemy makiety w wybranym programie, mo\u017cemy zaj\u0105\u0107 si\u0119 kolejnym etapem projektowania jakim jest tworzenie interaktywnego prototypu. W tym momencie zaczynamy dodawa\u0107 faktyczn\u0105 zawarto\u015b\u0107 jak\u0105 b\u0119dzie posiada\u0142 nasz finalny produkt. W odr\u00f3\u017cnieniu od wireframes\u2019\u00f3w prototypy s\u0105 zazwyczaj wysokiej jako\u015bci (high-fidelity), co pozwala u\u017cytkownikowi na faktyczne testowanie interfejsu i interakcji zachodz\u0105cych za pomoc\u0105 produktu. Testy przeprowadzone na prototypie ju\u017c we wczesnym etapie projektowania umo\u017cliwiaj\u0105 dokonania oszcz\u0119dno\u015bci w czasie i nak\u0142adzie pracy.<\/p>\n\n\n\n<p>Jaka jest wi\u0119c r\u00f3\u017cnica pomi\u0119dzy tymi dwoma etapami projektowania? Ot\u00f3\u017c wireframes to nasza baza, prosty szkic tego, co budujemy. Natomiast interaktywny prototyp to bardziej rozbudowana wersja naszego produktu, zawieraj\u0105ca kluczowe elementy, a klikni\u0119cie poszczeg\u00f3lnych przycisk\u00f3w powinno zapewni\u0107 osi\u0105gni\u0119cie zamierzonego celu. Prototypy pozwalaj\u0105 na zweryfikowanie czy user flow i wireframe\u2019y maj\u0105 sens dlatego cz\u0119sto dokonuje si\u0119 na nich wielu poprawek.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3\">Podstawowe narz\u0119dzia<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">SKETCH&nbsp;<\/h3>\n\n\n\n<p>To edytor grafiki wektorowej dla systemu MacOS, kt\u00f3ry s\u0142u\u017cy do projektowania ekran\u00f3w i produkt\u00f3w cyfrowych. Jest znany jako prostsze narz\u0119dzie do tworzenia projekt\u00f3w i prototypowania ni\u017c Adobe Photoshop.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">INVISION&nbsp;<\/h3>\n\n\n\n<p>Pozwala przes\u0142a\u0107 pliki projektu, kt\u00f3re w\u0142a\u015bnie utworzy\u0142e\u015b w Sketch lub Photoshop i doda\u0107 animacje, gesty i przej\u015bcia, aby przekszta\u0142ci\u0107 ekrany statyczne w klikalne, interaktywne prototypy. Umo\u017cliwia tak\u017ce uproszczenie procesu opiniowania, sk\u0142aniaj\u0105c klient\u00f3w lub cz\u0142onk\u00f3w Twojego zespo\u0142u do bezpo\u015bredniego komentowania projekt\u00f3w.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CRAFT&nbsp;<\/h3>\n\n\n\n<p>Wtyczka do programu Sketch i Photoshop znacznie u\u0142atwiaj\u0105ca proces projektowania. Jest swego rodzaju pomostem \u0142\u0105cz\u0105cym program graficzny, a narz\u0119dzie InVision. Pozwala na ustawienie interakcji pomi\u0119dzy poszczeg\u00f3lnymi ekranami naszego produktu oraz umo\u017cliwia bezpo\u015bredni export artboard\u2019\u00f3w z programu graficznego do InVision.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4\">Dlaczego warto po\u015bwi\u0119ca\u0107 czas na USER FLOW i PROTOTYPOWANIE?<\/h2>\n\n\n\n<p>Wiemy ju\u017c, \u017ce wireframe\u2019y oraz prototypy pozwalaj\u0105 ustali\u0107, czy nasze user flow jest prawid\u0142owe i sensowne. Cz\u0119sto okazuje si\u0119, \u017ce brakuje makiet, lub dany etap wykonywania zada\u0144 przez u\u017cytkownika stwarza jakie\u015b bariery. Wprowadzamy wtedy poprawki, lecz to normalne na tak wczesnym etapie projektowania. Co za tym idzie &#8211; oszcz\u0119dzamy sobie czasu i unikamy naprawiania wi\u0119kszych b\u0142\u0119d\u00f3w w ko\u0144cowych fazach realizacji projektu.&nbsp;<\/p>\n\n\n\n<p>Wiadomo tak\u017ce, \u017ce prototypy pozwalaj\u0105 na przeprowadzanie bezpo\u015brednich test\u00f3w z u\u017cytkownikami czy klientami, co daje nam mo\u017cliwo\u015b\u0107 unikni\u0119cia generacji dodatkowych koszt\u00f3w. Prototypowanie wspomaga tak\u017ce prac\u0119 deweloper\u00f3w. W momencie kiedy dostaj\u0105&nbsp; klikalne ekrany jest im znacznie \u0142atwiej zrozumie\u0107 sens dzia\u0142ania i istot\u0119 produktu, a co za tym idzie usprawniamy wsp\u00f3ln\u0105 prac\u0119 nad projektem.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5\">Proces tworzenia<\/h2>\n\n\n\n<p>Aby rozpocz\u0105\u0107 proces prototypowania musimy przenie\u015b\u0107 nasze rozrysowane wireframes\u2019y do programu Sketch. Oczywi\u015bcie tworzymy tzw. artboardy, na kt\u00f3rych przygotowujemy makiety. Praca na artboard\u2019ach to podstawa, bez kt\u00f3rej nie utworzymy link\u00f3w czy hotspot\u00f3w.&nbsp;<\/p>\n\n\n\n<p>Przyjmijmy, \u017ce posiadamy ju\u017c pi\u0119knie zaprojektowane ekrany w Sketchu. Jeste\u015bmy wi\u0119c gotowi na po\u0142\u0105czenie pierwszego prototypu. Kiedy\u015b u\u017cytkownicy musieli synchronizowa\u0107 si\u0119 z InVision i poprzez przegl\u0105dark\u0119 przechodzili w tryb budowania. Obecnie, dzi\u0119ki wtyczce Craft mo\u017cemy prototypowa\u0107 bezpo\u015brednio w programie Sketch. Po synchronizacji gotowego wyniku z InVision mo\u017cemy testowa\u0107 oraz udost\u0119pnia\u0107 innym nasz projekt.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6\">Links<\/h2>\n\n\n\n<p>Zaczynamy od dodawania \u0142\u0105cze\u0144, czy te\u017c przej\u015b\u0107 mi\u0119dzy ekranami\/podstronami okre\u015blanych jako \u201clinks\u201d. Link po\u0142\u0105czy warstw\u0119 (layer) naszego artboard\u2019u na kt\u00f3rej mamy wykona\u0107 dzia\u0142anie, np. klikni\u0119cie, z warstw\u0105 do kt\u00f3rej chcemy przej\u015b\u0107, czyli do naszego celu (target). Co wa\u017cne, wewn\u0105trz artboard\u2019u mo\u017cemy doda\u0107 \u0142\u0105cze z dowolnej warstwy, do dowolnego, kolejnego artboard\u2019u. Po ustanowieniu po\u0142\u0105czenia mo\u017cemy u\u017cy\u0107 kilku specjalnych, animowanych w\u0142a\u015bciwo\u015bci prototypowania jakimi s\u0105 przej\u015bcia (transitions) i gesty (gesture).&nbsp;<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/www.dropbox.com\/s\/lrzz8wpi3q21xm2\/Link.mov?dl=0\" target=\"_blank\">Adding<\/a> \/ <a href=\"https:\/\/www.dropbox.com\/s\/1go62fusv89nmv9\/Link-result.mov?dl=0\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\">Preview<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"7\">Gestures &amp; Transistions<\/h2>\n\n\n\n<p>Na ekranie pojawi si\u0119 okno dialogowe, w kt\u00f3rym decydujemy jaki rodzaj gestu uruchamia link i jakie przej\u015bcie chcemy wykorzysta\u0107 do animacji prze\u0142\u0105czenia od ekranu pocz\u0105tkowego do obszaru ko\u0144cowego. Zar\u00f3wno projekty na wersj\u0119 mobiln\u0105 jak i na web\/desktop posiadaj\u0105 swoje odmienne w\u0142a\u015bciwo\u015bci do wyboru. Dla przyk\u0142adu, je\u015bli projektujemy prototyp wersji desktopowej to jako gest wybierzemy klikni\u0119cie, a nie tap lub double tap. Poni\u017csze filmiki opieraj\u0105 si\u0119 na przyk\u0142adzie aplikacji mobilnej.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Gesture : <a rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/www.dropbox.com\/s\/78s9c9yhz5qdse1\/Gesture.mov?dl=0\" target=\"_blank\">Adding<\/a> \/ <a href=\"https:\/\/www.dropbox.com\/s\/wqj4iccd7sr1iy5\/Gesture-preview.mov?dl=0\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\">Preview<\/a><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Transitions: <a href=\"https:\/\/www.dropbox.com\/s\/sughuxh57gw8t1e\/Transition.mov?dl=0\">Adding 1<\/a> \/ <a href=\"https:\/\/www.dropbox.com\/s\/60yzl5bun7ti497\/Transition-explanation.mov?dl=0\">Adding 2<\/a>&nbsp;&nbsp;&nbsp;<\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li>Instant&nbsp; <a rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/www.dropbox.com\/s\/l04do7xhcc02cwi\/Transition-Instant.mov?dl=0\" target=\"_blank\">Preview<\/a><\/li><li>Dissolve <a rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/www.dropbox.com\/s\/kjomr4x5zf2p713\/Transition-Dissolve.mov?dl=0\" target=\"_blank\">Preview<\/a><\/li><li>Push Right <a rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/www.dropbox.com\/s\/46ntc9q9qm1fmvk\/Transition-Push-Right.mov?dl=0\" target=\"_blank\">Preview<\/a><\/li><li>Push Left <a rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/www.dropbox.com\/s\/rr4qa8ecetdraxv\/Transition-Push-Left.mov?dl=0\" target=\"_blank\">Preview<\/a><\/li><li>Slide Right <a rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/www.dropbox.com\/s\/zm9xifcxjdghxi6\/Transition-Slide-Right.mov?dl=0\" target=\"_blank\">Preview<\/a><\/li><li>Slide Left <a rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/www.dropbox.com\/s\/favnrj1dzxvxv9k\/Transition-Slide-Left.mov?dl=0\" target=\"_blank\">Preview<\/a><\/li><li>Slide Up <a rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/www.dropbox.com\/s\/jvyb1ecqlqub0ky\/Transition-Slide-Up.mov?dl=0\" target=\"_blank\">Preview<\/a><\/li><li>Slide Down <a rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/www.dropbox.com\/s\/jh69q3n63j8mob5\/Transition-Slide-Down.mov?dl=0\" target=\"_blank\">Preview<\/a><\/li><li>Flip Right <a rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/www.dropbox.com\/s\/ju988hpgekxikiq\/Transition-Flip-Right.mov?dl=0\" target=\"_blank\">Preview<\/a><\/li><li>Flip Left <a rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/www.dropbox.com\/s\/e5kbclkl0jp5htb\/Transition-Flip-Left.mov?dl=0\" target=\"_blank\">Preview<\/a><\/li><li>Flow <a rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/www.dropbox.com\/s\/v4vjack7nu1v1uu\/Transition-Flow.mov?dl=0\" target=\"_blank\">Preview<\/a><\/li><li>Pop <a rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/www.dropbox.com\/s\/pm5rx796h4m2s39\/Transition-Pop.mov?dl=0\" target=\"_blank\">Preview<\/a><\/li><li>Slide Dissolve <a href=\"https:\/\/www.dropbox.com\/s\/2go8pgedtygex4v\/Transition-Slide-Dissolve.mov?dl=0\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\">Preview<\/a><\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"8\">Podgl\u0105d<\/h2>\n\n\n\n<p>Kiedy nasz prototyp b\u0119dzie gotowy, mo\u017cemy sprawdzi\u0107, czy aby na pewno User Flow ma sens a przej\u015bcia dzia\u0142aj\u0105 prawid\u0142owo. Mo\u017cemy dokona\u0107 przegl\u0105du prototypu bezpo\u015brednio w programie Sketch, na Sketch Cloud, gdzie mamy mo\u017cliwo\u015b\u0107 udost\u0119pnienia prototyp\u00f3w klientom i wsp\u00f3\u0142pracownikom, lub na urz\u0105dzeniach z systemem <a href=\"https:\/\/itcraftapps.com\/pl\/zatrudnij-najlepszych-programistow-ios-do-swojego-projektu\/\">iOS<\/a>.<\/p>\n\n\n\n<p>Kolejn\u0105 mo\u017cliwo\u015bci\u0105 jest synchronizacja projektu z InVision. Mo\u017cemy wtedy otworzy\u0107 nasz prototyp bezpo\u015brednio w karcie przegl\u0105darki internetowej i w ten spos\u00f3b dokonywa\u0107 r\u00f3\u017cnych interakcji, takich jak przegl\u0105danie, sprawdzanie, komentowanie a nawet udost\u0119pnianie.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"9\">Podsumowanie<\/h2>\n\n\n\n<p>User flow, jako bardzo istotn\u0105 cz\u0119\u015bci\u0105 UX. Opisuje kroki, kt\u00f3re podejmuj\u0105 u\u017cytkownicy, aby uzyska\u0107 dost\u0119p do funkcji, lub by wykona\u0107 zadanie w aplikacji. Bez znaczenia czy budujemy prosty czy niezwykle rozbudowany projekt &#8211; ka\u017cde klikni\u0119cie czy przesuni\u0119cie jest elementem User Flow i powinno mie\u0107 sens.&nbsp;<\/p>\n\n\n\n<p>U\u017cytkownicy powinni by\u0107 w stanie prawid\u0142owo zinterpretowa\u0107 nasz\u0105 aplikacj\u0119 ju\u017c za pierwszym podej\u015bciem, bez zb\u0119dnego i czasoch\u0142onnego zastanawiania si\u0119 nad jej dzia\u0142aniem. Tworzenie User Flow pozytywnie rzutuje na sam etap kreowania projektu znacznie go usprawniaj\u0105c. Jest idealnym narz\u0119dziem na doskonalenie pracy w zespole. Dobra komunikacja z programistami i innymi cz\u0142onkami teamu jest kluczem do tworzenia inspiruj\u0105cych projekt\u00f3w. Zawsze mo\u017cemy tak\u017ce powr\u00f3ci\u0107 do dokumentacji powsta\u0142ej przy budowaniu User Flow, aby przypomnie\u0107 sobie dlaczego podj\u0119li\u015bmy pewne decyzje. Komunikacja z klientem r\u00f3wnie\u017c staje si\u0119 \u0142atwiejsza poprzez wsp\u00f3lne omawianie i testowanie funkcji.&nbsp;<br \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8222;image&#8221;: [ { &#8222;@type&#8221;: &#8222;ImageObject&#8221;, &#8222;contentUrl&#8221;: &#8222;placeholder-post.png&#8221;, &#8222;url&#8221;:&#8221;https:\/\/wp-test.itcraft.pl\/wp-content\/uploads\/2019\/04\/placeholder-post.png&#8221;, &#8222;description&#8221;: &#8222;Jak zacz\u0105\u0107 UX design \u2013 User Flow oraz Interaktywny Prototyp&#8221;, &#8222;name&#8221;: &#8222;User Flow oraz Interaktywny Prototyp&#8221; } ], &#8222;datePublished&#8221;: &#8222;2020-07-12&#8221;, &#8222;dateModified&#8221;: &#8222;2020-03-06&#8221;, &#8222;author&#8221;: { &#8222;@type&#8221;: &#8222;Person&#8221;, &#8222;name&#8221;: &#8222;Paulina Chmielewska&#8221;, &#8222;jobTitle&#8221;: &#8222;Marketing Manager&#8221;, &#8222;description&#8221;: &#8222;Marketing Manager at itCraft&#8221; }, &#8222;publisher&#8221;: { &#8222;@type&#8221;: &#8222;Organization&#8221;, &#8222;name&#8221;: &#8222;itCraftapps.com&#8221;, &#8222;logo&#8221;: {&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[5,15],"tags":[],"class_list":{"0":"post-3287","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-news","7":"category-tworzenie-aplikacji"},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Jak zacz\u0105\u0107 UX design - User Flow oraz Interaktywny Prototyp - itCraft blog<\/title>\n<meta name=\"description\" content=\"Dowiedz si\u0119, jak User Flow i Prototypowanie usprawniaj\u0105 projektowanie UX. Wizualizuj \u015bcie\u017ck\u0119 u\u017cytkownika i testuj pomys\u0142y przed wdro\u017ceniem.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itcraftapps.com\/pl\/blog\/jak-zaczac-ux-design-user-flow-oraz-interaktywny-prototyp\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Jak zacz\u0105\u0107 UX design - User Flow oraz Interaktywny Prototyp - itCraft blog\" \/>\n<meta property=\"og:description\" content=\"Dowiedz si\u0119, jak User Flow i Prototypowanie usprawniaj\u0105 projektowanie UX. Wizualizuj \u015bcie\u017ck\u0119 u\u017cytkownika i testuj pomys\u0142y przed wdro\u017ceniem.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itcraftapps.com\/pl\/blog\/jak-zaczac-ux-design-user-flow-oraz-interaktywny-prototyp\/\" \/>\n<meta property=\"og:site_name\" content=\"Aplikacje mobilne i webowe dla firm | itCraft\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-12T07:02:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-09T10:54:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2023\/01\/Main_social_1200x630px.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"root\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Jak zacz\u0105\u0107 UX design - User Flow oraz Interaktywny Prototyp - itCraft blog","description":"Dowiedz si\u0119, jak User Flow i Prototypowanie usprawniaj\u0105 projektowanie UX. Wizualizuj \u015bcie\u017ck\u0119 u\u017cytkownika i testuj pomys\u0142y przed wdro\u017ceniem.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itcraftapps.com\/pl\/blog\/jak-zaczac-ux-design-user-flow-oraz-interaktywny-prototyp\/","og_locale":"pl_PL","og_type":"article","og_title":"Jak zacz\u0105\u0107 UX design - User Flow oraz Interaktywny Prototyp - itCraft blog","og_description":"Dowiedz si\u0119, jak User Flow i Prototypowanie usprawniaj\u0105 projektowanie UX. Wizualizuj \u015bcie\u017ck\u0119 u\u017cytkownika i testuj pomys\u0142y przed wdro\u017ceniem.","og_url":"https:\/\/itcraftapps.com\/pl\/blog\/jak-zaczac-ux-design-user-flow-oraz-interaktywny-prototyp\/","og_site_name":"Aplikacje mobilne i webowe dla firm | itCraft","article_published_time":"2019-07-12T07:02:31+00:00","article_modified_time":"2020-12-09T10:54:13+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2023\/01\/Main_social_1200x630px.png","type":"image\/png"}],"author":"root","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/itcraftapps.com\/pl\/blog\/jak-zaczac-ux-design-user-flow-oraz-interaktywny-prototyp\/","url":"https:\/\/itcraftapps.com\/pl\/blog\/jak-zaczac-ux-design-user-flow-oraz-interaktywny-prototyp\/","name":"Jak zacz\u0105\u0107 UX design - User Flow oraz Interaktywny Prototyp - itCraft blog","isPartOf":{"@id":"https:\/\/itcraftapps.com\/pl\/#website"},"datePublished":"2019-07-12T07:02:31+00:00","dateModified":"2020-12-09T10:54:13+00:00","author":{"@id":"https:\/\/itcraftapps.com\/pl\/#\/schema\/person\/7f005eebbb23587ebb5e67da80d14679"},"description":"Dowiedz si\u0119, jak User Flow i Prototypowanie usprawniaj\u0105 projektowanie UX. Wizualizuj \u015bcie\u017ck\u0119 u\u017cytkownika i testuj pomys\u0142y przed wdro\u017ceniem.","breadcrumb":{"@id":"https:\/\/itcraftapps.com\/pl\/blog\/jak-zaczac-ux-design-user-flow-oraz-interaktywny-prototyp\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itcraftapps.com\/pl\/blog\/jak-zaczac-ux-design-user-flow-oraz-interaktywny-prototyp\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/itcraftapps.com\/pl\/blog\/jak-zaczac-ux-design-user-flow-oraz-interaktywny-prototyp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/itcraftapps.com\/pl\/"},{"@type":"ListItem","position":2,"name":"Jak zacz\u0105\u0107 UX design &#8211; User Flow oraz Interaktywny Prototyp"}]},{"@type":"WebSite","@id":"https:\/\/itcraftapps.com\/pl\/#website","url":"https:\/\/itcraftapps.com\/pl\/","name":"Aplikacje mobilne i webowe dla firm | itCraft","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itcraftapps.com\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Person","@id":"https:\/\/itcraftapps.com\/pl\/#\/schema\/person\/7f005eebbb23587ebb5e67da80d14679","name":"root","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/itcraftapps.com\/pl\/#\/schema\/person\/image\/","url":"https:\/\/itcraftapps.com\/pl\/wp-content\/litespeed\/avatar\/5\/c28d2298456f70316440c99aa0dc214f.jpg?ver=1775043934","contentUrl":"https:\/\/itcraftapps.com\/pl\/wp-content\/litespeed\/avatar\/5\/c28d2298456f70316440c99aa0dc214f.jpg?ver=1775043934","caption":"root"},"url":"https:\/\/itcraftapps.com\/pl\/blog\/author\/root\/"}]}},"_links":{"self":[{"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/posts\/3287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/comments?post=3287"}],"version-history":[{"count":0,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/posts\/3287\/revisions"}],"wp:attachment":[{"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/media?parent=3287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/categories?post=3287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/tags?post=3287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}