Kiedy tworzymy coś nowego, co w kolejnym kroku ma być eksponowane szerszemu gronu, dobrą praktyką jest zaczynanie od szkicu, szczególnie w przypadku produktu cyfrowego. Taki szkic może pomóc rozwiązać wiele problemów jeszcze przed wysłaniem produktu w świat.
Jeśli tworzyłeś projekt lub pracowałeś nad produktem, prawdopodobnie słyszałeś terminy Wireframe, Mockup lub Prototyp. Można pomyśleć, że terminy te są do siebie podobne, występują jednak między nimi istotne różnice. W tym artykule porównam Wireframe’y z Mockupami i Prototypami — czym się różnią i po co je tworzymy.
W innym artykule na blogu porównywałem ‘Czym różni się Proof of Concept od Prototypu, od MVP‘ — Minimum Viable Product.
We wspomnianym artykule wyjaśniłem, że PoC, to coś, co występuje przed prototypem. Dlaczego więc w tym zestawieniu nie występuje Proof of Concept?
Zanim przejdziemy do szczegółowego porównania tych trzech terminów, przyjrzyjmy się ich podstawowym definicjom.
Wireframe — Wireframe to plan lub schemat, który pomaga zaprezentować strukturę Twojej aplikacji lub witryny odpowiednim interesariuszom. Próbujemy pokazać, jak będzie wyglądała architektura rozwiązania, jakie będzie miało flow. Chcemy zebrać wczesny feedback, zanim zaczniemy pracować nad przyszłą aplikacją. Ta wersja naszego szkicu nie będzie jednak zawierała jeszcze realnych funkcjonalności. Na etapie Wireframe’u nie możemy jeszcze korzystać z naszej aplikacji, ale możemy obejrzeć, jak ona będzie funkcjonowała w przyszłości.
Mockup — Makieta to wysokiej jakości render Twojego projektu, który pokazuje, jak będzie wyglądał gotowy produkt, pokazuje jego design. Na etapie Mockupu nadal nie możemy zaprezentować funkcjonalności docelowej. Zdarzają się jednak Mockupy klikalne, w których Designer, UX Designer jest w stanie zaprojektować na przykład jedną/dwie ścieżki. Kliknięcie przez użytkownika w jakiś przycisk spowoduje przeniesienie do innego Mockupu, czyli innego elementu naszej makiety. Nie jest to realna funkcjonalność, nie jest to jeszcze zakodowane, a dzieje się na etapie wizualizacji ekranów, designu.
Prototyp — Prototyp to wczesny model produktu, który koncentruje się na funkcjonalności i daje interesariuszom przedsmak ostatecznej wersji. Oczywiście te funkcjonalności są tutaj bardzo ograniczone. Prawdopodobnie jeszcze nie są zintegrowane z zewnętrznymi usługami, które w tej aplikacji też mogą występować.
Innymi słowy, każdy z nich służy do zupełnie innego celu. Wireframe’y przedstawiają projekt produktu o bardzo niskim poziomie detalu, Mockupy przedstawiają projekt produktu o wysokim poziomie detalu, pojawia się bardziej zaawansowana grafika, kolorystyka itp., a prototypy skupiają się na funkcjonalności produktu wraz z projektem UX. Ostatecznie jednak są to różne sposoby tworzenia wersji roboczej produktu końcowego — wyświetlanie różnych stron i ekranów.
W tym zestawieniu brak Proof of Concept, dlatego że PoC jest bardzo wysoko poziomowym potwierdzeniem biznesowym, że produkt/pomysł na produkt, ma szansę się udać i jest wykonalny. W dzisiejszym artykule piszę już o samej wizualizacji naszego pomysłu na produkt. W tym porównaniu chodzi o bardzo namacalne narzędzia i etapy powstawania produktu.
W jakim celu tworzymy Wireframe, Mockup i Prototyp?
Po co tworzymy Wireframe?
- żeby na bardzo wczesnym etapie zakomunikować, przedstawić strukturę naszego rozwiązania i najważniejsze aspekty naszego projektowanego produktu.
- aby na bardzo wczesnym etapie zaprezentować pomysł, tak aby możliwe było uzyskanie feedbacku od drugiej osoby.
- żeby odpowiednio narysować strategię rozwoju naszego produktu. Zanim rzucimy się w ten wir developmentu, rozwoju kolejnych funkcjonalności, dopracowywania designu, chcemy mieć pewność, że wszyscy członkowie zespołu, który ten produkt rozwijają, patrzą w tym samym kierunku. Chcemy się upewnić, że tak samo ten produkt rozumieją i zgadzają się co do jego ogólnego zakresu.
Po co tworzymy Mockup?
- aby stworzyć wizualizację produktu. Dopiero na tym etapie jesteśmy w stanie pokazać design, jak będzie on w przyszłości wyglądał.
- by zaprezentować produkt interesariuszom i zapewnić sobie inwestorów. Dużo łatwiej jest rozmawiać z osobą, która ma wyłożyć środki na rozwój produktu, kiedy może go rzeczywiście zobaczyć.
- żeby zrobić pierwszy krok w stronę developmentu właściwego produktu. Mockup to jest już narysowany design aplikacji, który możemy wykorzystać na dalszych etapach.
Po co tworzymy Prototyp?
- prototyp świetnie nadaje się do oddania działającej wersji produktu w ręce użytkowników i sprawdzenia, czy projekt nadaje się do użytku. Co działa, a co nie? Co się podoba, a co niekoniecznie?
- aby uzyskać walidację pomysłów: możemy wykorzystać projekty prototypów, aby podzielić się pomysłem na dowolnym etapie procesu projektowania. Pomoże dokładnie określić, co chcemy osiągnąć. Może te funkcjonalności, które uznawaliśmy za bazowe, nie w pełni takie są. Może z czegoś możemy zrezygnować, może użytkownicy nie zwrócili na coś uwagi. To jest taki moment weryfikacji, gdzie możemy poprawić nasz kierunek rozwoju.
- by zaangażować wszystkich członków zespołu. To jest ten etap, w którym już każdy może się wypowiedzieć na temat produktu. Każdy może wnieść coś swojego, każdy może zasugerować zmiany. To miejsce, gdzie wszyscy możemy spojrzeć na produkt ze swojej perspektywy i pomóc go udoskonalić.
Obejrzyj film:
