ProtoPie to narzędzie do budowania prototypów, które zachowują się jak prawdziwa aplikacja: przyjmują tekst, liczą, reagują na przechylenie telefonu i łączą kilka urządzeń. Wyjaśniamy, czym różni się od prototypu w Figmie, ile kosztuje i kiedy się opłaca.
Większość prototypów, które klient ogląda przed rozpoczęciem programowania, to połączone ze sobą ekrany. Stuknięcie w przycisk przenosi na kolejny obraz. To wystarcza, żeby ocenić układ i ścieżkę użytkownika. Nie wystarcza, gdy trzeba sprawdzić, jak aplikacja zareaguje na wpisany kod pocztowy, przesunięcie suwaka albo obrócenie telefonu. ProtoPie to narzędzie do budowania prototypów, które w takich sytuacjach zachowują się jak prawdziwa aplikacja. Poniżej wyjaśniamy, czym jest i kiedy warto go używać, a kiedy lepiej zostać przy prototypie w Figmie. Tej drugiej sytuacji jest więcej, niż sugerują materiały producenta.
Na co dzień projektujemy interfejsy w Figmie i w większości projektów to wystarcza. Dlatego patrzymy na ProtoPie jak na narzędzie do konkretnych zadań, a nie zamiennik tego, czego zespół już używa.
Prototyp, który ma logikę
Prototyp to wersja produktu, którą da się klikać, zanim powstanie choćby linijka kodu. Służy do pokazania pomysłu, zebrania uwag i testów z użytkownikami. Im bliżej mu do gotowej aplikacji, tym więcej da się z nim sprawdzić. Rośnie przy tym koszt przygotowania, a różnice między tymi dwoma podejściami dobrze opisuje porównanie prototypów lo-fi i hi-fi.
ProtoPie należy do narzędzi dla prototypów o wysokiej wierności. Rozwija go koreańska firma Studio XID, założona przez byłego projektanta interakcji z Google. Według serwisu KoreaTechDesk korzystają z niego projektanci m.in. w Google, Microsofcie i Nintendo. Działa na zasadzie wyzwalaczy i reakcji. Wyzwalacz to zdarzenie: stuknięcie, przeciągnięcie, wpisanie tekstu, dźwięk, zmiana położenia telefonu. Reakcja to to, co ma się wtedy stać: przesunięcie elementu, zmiana koloru, przejście do innego ekranu, obliczenie wartości. Łącząc je, projektant buduje zachowanie, które w innych narzędziach wymagałoby programisty.
W podstawowym prototypie z Figmy wszystko jest z góry narysowane. Jeśli użytkownik ma zobaczyć ekran z błędem, projektant musi ten ekran przygotować i połączyć z przyciskiem. ProtoPie pozwala zamiast tego opisać zasadę: gdy pole jest puste, pokaż komunikat.
Prawdziwe pola tekstowe i obliczenia
W prototypie w ProtoPie użytkownik wpisuje tekst z klawiatury telefonu, a prototyp może na niego zareagować. Zmienne przechowują wartości, na przykład liczbę produktów w koszyku, a formuły je przeliczają. Da się więc zbudować kalkulator raty, który po zmianie kwoty od razu pokazuje nową ratę, albo formularz, który sprawdza, czy hasło ma osiem znaków.
Figma od 2023 r. też ma zmienne i proste warunki w prototypach. Do wielu scenariuszy to wystarcza. ProtoPie idzie jednak dalej przy obsłudze tekstu, obliczeniach i łączeniu wielu warunków naraz.
Czujniki telefonu, dźwięk i animacje
Prototyp w ProtoPie może korzystać z czujników urządzenia: przechylenia, kompasu, mikrofonu, aparatu. Można w nim odtwarzać dźwięk i wideo oraz animacje Lottie, czyli lekkie animacje zapisane w formacie JSON, których programiści używają później w aplikacji. To ma znaczenie przy mikrointerakcjach, czyli drobnych reakcjach interfejsu na działanie użytkownika: animacji po dodaniu produktu do koszyka albo przeciągnięciu karty w bok. Na statycznym ekranie nie da się ich ocenić. Trzeba je poczuć pod palcem.
Kilka urządzeń w jednym prototypie
ProtoPie Connect łączy kilka prototypów, które wymieniają między sobą informacje. Stuknięcie na telefonie może zmienić to, co widać na tablecie albo na ekranie w samochodzie. Connect potrafi też odbierać sygnały z prawdziwego sprzętu, na przykład z płytki Arduino z przyciskiem czy czujnikiem. Tu leży nisza, w której ProtoPie jest trudny do zastąpienia. Producent mocno inwestuje w prototypowanie interfejsów samochodowych, gdzie ekran kierowcy, ekran pasażera i fizyczne przyciski muszą działać razem.
Projekt zwykle nie zaczyna się w ProtoPie. Ekrany powstają w Figmie, a potem wtyczka przenosi wybrane widoki do ProtoPie, gdzie projektant dodaje interakcje i logikę. Po zmianach w wyglądzie ekranów trzeba je zaimportować ponownie, więc najlepiej przenosić do ProtoPie dopiero ustabilizowany projekt. Gotowy prototyp testuje się w aplikacji ProtoPie Player na telefonie z Androidem lub iOS. To ważne przy projektowaniu aplikacji mobilnej, bo gesty, wielkość przycisków i szybkość animacji ocenia się inaczej na monitorze, a inaczej w dłoni. Prototyp można też udostępnić linkiem osobom, które nie mają konta. Ostatni etap to przekazanie projektu programistom. ProtoPie pozwala nagrać interakcję i udostępnić ją z parametrami animacji: czasem trwania i krzywą ruchu. Zmniejsza to liczbę pytań w rodzaju „jak szybko ma się to przesuwać”. Nie zastępuje jednak całego przekazania projektu między projektantami a programistami, bo kod aplikacji i tak powstaje od zera.
W płatnym planie Pro ProtoPie ma też serwer MCP, przez który asystenci AI mogą pracować na prototypach. To dość nowa funkcja i jej przydatność zależy od tego, jak zespół korzysta z AI na co dzień.
Kiedy warto używać ProtoPie, a kiedy wystarczy Figma
Figma wystarcza, gdy prototyp ma pokazać układ ekranów i ścieżkę użytkownika. Rejestracja, katalog czy panel klienta: w takich projektach klikany prototyp daje odpowiedź na większość pytań, a projektant nie musi pracować w dwóch narzędziach. Firmy, które dopiero wybierają narzędzie do projektowania, rzadko mają dziś inny wybór niż Figma, bo Sketch i Adobe XD przegrywają z nią w porównaniu narzędzi do projektowania interfejsu pod względem współpracy i rozwoju.
ProtoPie zaczyna się opłacać w kilku sytuacjach:
decyzja biznesowa zależy od interakcji, a nie od wyglądu, na przykład czy nowy sposób przewijania kalendarza jest dla użytkowników zrozumiały,
produkt ma formularze albo kalkulatory, których działanie trzeba przetestować z użytkownikami na prawdziwych danych,
aplikacja korzysta z czujników, dźwięku, gestów wielopalcowych lub steruje urządzeniem,
kilka ekranów lub urządzeń ma działać razem, jak w kiosku z aplikacją towarzyszącą albo systemie w samochodzie.
Jest też przypadek mniej oczywisty: prezentacja dla zarządu lub inwestorów. Prototyp, który reaguje jak aplikacja, przekonuje bardziej niż seria obrazków. Trzeba tylko uważać, żeby nie wywołał wrażenia, że produkt jest prawie gotowy. Prototyp to wciąż rysunek, tylko ruchomy.
Na rynku są też inne narzędzia do zaawansowanych prototypów. Jednym z nich jest Flinto do projektowania animacji i przejść, ale działa tylko na macOS i nie ma zmiennych ani łączenia wielu urządzeń. Do samych animacji wystarcza, do prototypów z danymi już nie.
Prototyp w ProtoPie w testach z użytkownikami
Największą wartość ProtoPie daje tam, gdzie prototyp trafia do prawdziwych ludzi. W testach z użytkownikami klikany prototyp ma jedną słabość: uczestnik szybko widzi, że może stuknąć tylko w jedno miejsce. Zaczyna szukać „właściwego” przycisku zamiast korzystać z aplikacji po swojemu. Prototyp z logiką tego problemu nie ma. Uczestnik wpisuje własny adres, pomyli się w numerze karty, wróci do poprzedniego kroku. Obserwujemy wtedy zachowanie bliższe temu, co zobaczymy po wdrożeniu. Dotyczy to zwłaszcza etapu product discovery, czyli sprawdzania pomysłu przed rozpoczęciem programowania.
Jeśli cała wartość nowej funkcji polega na tym, jak przyjemnie się z niej korzysta, lepiej to sprawdzić na prototypie za kilka dni pracy projektanta niż na MVP, czyli pierwszej wersji produktu, budowanym przez kilka tygodni.
Według cennika ProtoPie plan darmowy pozwala stworzyć dwa prototypy przez jedną osobę. Plan Basic kosztuje 25 USD miesięcznie za jedno stanowisko i obejmuje 20 prototypów bez znaku wodnego. Plan Pro to 47 USD miesięcznie za każdego edytora, z nielimitowaną liczbą prototypów i pracą zespołową, a przy płatności rocznej cena jest niższa. Enterprise, z integracjami sprzętowymi na zamówienie i własnym serwerem, wyceniany jest indywidualnie, od trzech stanowisk. Licencja to mniejsza część kosztu. Większa to czas projektanta. Prototyp jednej interakcji, na przykład nowego sposobu dodawania produktu do koszyka, to zwykle od kilku godzin do dwóch dni pracy. Pełna ścieżka z kilkunastoma ekranami, formularzami i warunkami to raczej od tygodnia do trzech. Prototyp łączący kilka urządzeń lub sprzęt może potrwać dłużej, zależnie od tego, ile sygnałów trzeba zasymulować.
Na czas wpływa też doświadczenie. Projektant, który zna Figmę, opanuje podstawy ProtoPie w kilka dni, ale na sprawne budowanie logiki ze zmiennymi i warunkami potrzebuje kilku tygodni praktyki. Jeśli ProtoPie ma być użyty w jednym projekcie, czasem taniej wychodzi zamówić prototyp u osoby, która już w nim pracuje.
Czego ProtoPie nie zrobi
ProtoPie nie generuje kodu aplikacji. Prototyp pokazuje, jak coś ma działać, ale programiści budują to od nowa w React Native, Swifcie czy Kotlinie. Tego się nie da obejść i nie warto tego obiecywać zarządowi jako oszczędności. Nie łączy się też w pełni z prawdziwymi danymi firmy. Można podpiąć zewnętrzne źródła przez Connect lub wtyczki, ale prototyp nie zastąpi wersji testowej aplikacji na prawdziwym backendzie. Do sprawdzenia wydajności, integracji czy zachowania przy słabym internecie potrzebny jest działający kod.
Wreszcie, każde dodatkowe narzędzie to kolejne miejsce, w którym projekt może się rozjechać. Gdy wygląd ekranu zmienia się w Figmie, prototyp w ProtoPie trzeba zaktualizować. W długim projekcie warto więc ustalić, które ekrany żyją w ProtoPie i kto odpowiada za ich aktualność.
Jeśli zastanawiasz się, czy w Twoim projekcie wystarczy klikany prototyp, czy potrzebne jest coś więcej, napisz do nas przez formularz kontaktowy Boring Owl.
FAQ
FAQ - Najczęściej zadawane pytania o ProtoPie
Tak, ProtoPie Studio, czyli program do tworzenia prototypów, jest dostępny zarówno na Windows, jak i na macOS. Oba wydania mają te same funkcje, a prototypy zapisane w chmurze można otwierać na każdym z systemów, więc w jednym zespole mogą pracować osoby z różnymi komputerami. Na tych samych systemach działa też wtyczka przenosząca ekrany z Figmy. Wybór systemu ma znaczenie głównie przy prototypach łączących wiele urządzeń lub sprzęt, bo tam warto sprawdzić wymagania konkretnych integracji przed rozpoczęciem pracy.
Projekt z Figmy przenosi się do ProtoPie za pomocą oficjalnej wtyczki dostępnej w społeczności Figmy. Projektant zaznacza ramki lub pojedyncze elementy, a wtyczka przesyła je do ProtoPie jako warstwy, do których można od razu dodawać interakcje. Import nie jest synchronizacją: gdy w Figmie zmieni się wygląd ekranu, trzeba go przenieść ponownie i sprawdzić, czy interakcje nadal działają. Dlatego najwygodniej robić to dopiero wtedy, gdy wygląd ekranów jest zaakceptowany, a w ProtoPie rozwijać przede wszystkim zachowanie, nie grafikę.
Tak, prototyp uruchamia się na telefonie w bezpłatnej aplikacji ProtoPie Player dostępnej na Androida i iOS. Wystarczy połączyć telefon z komputerem, na którym działa ProtoPie Studio, albo otworzyć prototyp zapisany w chmurze. Na telefonie działają wtedy gesty, klawiatura systemowa i czujniki, takie jak przechylenie czy mikrofon, czego nie da się sprawdzić w przeglądarce na komputerze. Testy na urządzeniu są szczególnie ważne przy aplikacjach mobilnych, bo wielkość przycisków i tempo animacji ocenia się zupełnie inaczej w dłoni niż na monitorze.
Tak, w ProtoPie da się budować prototypy stron i aplikacji webowych, nie tylko mobilnych. Projektant ustawia rozmiar ekranu komputera lub tabletu i dodaje interakcje takie same jak w prototypie mobilnym, na przykład obsługę myszy, klawiatury czy formularzy. Najczęściej ma to sens przy rozbudowanych panelach i aplikacjach SaaS, gdzie trzeba sprawdzić działanie filtrów, kalkulatorów lub wieloetapowych formularzy. Przy typowej stronie firmowej czy sklepie internetowym klikany prototyp w Figmie zwykle wystarcza i jest tańszy w przygotowaniu.
Tak, bo interakcje w ProtoPie buduje się z gotowych klocków, a nie pisze w kodzie: wybiera się zdarzenie, na przykład stuknięcie lub wpisanie tekstu, i przypisuje do niego reakcję. Podstawy opanuje w kilka dni projektant znający Figmę. Przy bardziej złożonych prototypach przydaje się myślenie zbliżone do programistycznego, bo zmienne, warunki i formuły działają podobnie jak w arkuszu kalkulacyjnym. Czas nauki zależy od rodzaju prototypów: proste animacje i przejścia to kwestia dni, prototypy z logiką i wieloma urządzeniami wymagają zwykle kilku tygodni praktyki.
Tak, w płatnych planach prototyp udostępnia się linkiem, który otwiera się w przeglądarce bez zakładania konta i bez instalowania czegokolwiek. Odbiorca może klikać, wpisywać tekst i przechodzić przez całą ścieżkę tak jak w aplikacji. W planie darmowym udostępnianie jest ograniczone, a prototypy mają znak wodny, więc do pracy z klientem potrzebny jest co najmniej plan Basic. Przy funkcjach korzystających z czujników telefonu lepiej poprosić odbiorcę o otwarcie prototypu w aplikacji ProtoPie Player, bo przeglądarka na komputerze nie odtworzy przechylenia czy gestów wielopalcowych.
W świecie tworzenia aplikacji, lo-fi i hi-fi to terminy definiujące dwa różne podejścia do prototypowania. Zarówno lo-fi, czyli prototypowanie niskiej wierności, jak i hi-fi - wysokiej wierności, mają swoje unikalne zastosowania i korzyści. W tym artykule przeanalizujemy różnice pomiędzy tymi dwiema metodami oraz dowiemy się, gdzie i kiedy mogą być najefektywniej wykorzystane.
Animacje to ważny element projektów graficznych, które pozwalają na przyciągnięcie uwagi użytkowników i uatrakcyjnienie interfejsu. Jednym z popularniejszych narzędzi do tworzenia animacji jest Lottie, które pozwala na stworzenie animacji w formacie JSON.
Bańka powiadomień, przyciski reakcji na posty, animacje ładowania - to wszystko są mikrointerakcje. Często niezauważalne, lecz mają ogromny wpływ na UX Design. W tym artykule zgłębimy ich definicję, znaczenie oraz sposoby praktycznego wdrożenia.
Design Handoff, czyli tworzenie mostów między projektantami a programistami - to proces, który ma na celu wygładzenie kolizji między twórczością a technologią. Pomysł stojący za nim to stworzenie efektywnego przepływu pracy, minimalizującego wieczne dyskusje, czy 'to można zrobić'. Pozwala to na lepszą komunikację, zrozumienie wzajemnych potrzeb i wymagań między tymi dwoma, często odmiennymi światami. Czy ten proces jest odpowiedzią na wszystkie problemy w relacjach pomiędzy projektantami a…
Figma, Sketch, Adobe XD to popularne narzędzia do projektowania interfejsu użytkownika (UI), które pozwalają na tworzenie i edycję interfejsów w aplikacjach i stronach internetowych. Każde z tych narzędzi oferuje różne funkcje i możliwości, dlatego ważne jest dobranie odpowiedniego narzędzia do potrzeb projektu.
Flinto, znane na całym świecie narzędzie do projektowania interaktywnych prototypów aplikacji. Umożliwia web developerom i projektantom aplikacji mobilnych tworzenie szczegółowych, płynnych i realistycznych prototypów zgodnych na wielu platformach. Jego wyjątkowa cecha to łatwość użytkowania i elastyczność, dzięki czemu tworzenie prototypów jest szybkie i efektywne. Biorąc pod uwagę dynamiczny rozwój rynku aplikacji mobilnych, Flinto stanowi cenne narzędzie dla twórców na każdym etapie…
