Prototypowanie aplikacji Lo-Fi oraz Hi-Fi. Różnice i zastosowanie
Z artykułu dowiesz się jakie korzyści płyną z wykorzystywania prototypów, a także jakie są różnice pomiędzy Lo-Fi oraz Hi-Fi
Prototypowanie aplikacji Lo-Fi (Low-fidelity )
Prototypowanie UX aplikacji mobilnych, webowych czy desktopowych o niskim odzwierciedleniu szczegółów (Lo-Fi Prototyping) to szybki i łatwy sposób na przełożenie koncepcji projektowych. Pierwszą i najważniejszą rolą prototypów Low-Fidelity jest sprawdzanie i testowanie funkcjonalności, a nie wyglądu produktu.
Zastosowanie prototypów Low-fidelity
| Projekt wizualny | Kluczowym jest przedstawienie wyłącznie elementów wizualnych produktu końcowego, które mają znaczenie w danym kontekście np. kształty elementów, podstawowa hierarchia wizualna itp. Może to być ekran logowania, który zawiera nieopisane pole oraz przycisk, ponieważ na tym etapie nie wiemy czy logowanie będzie odbywało się za pomocą double opt in, single opt, czy będzie wykorzystywany adres mailowy czy byc może wyłącznie numer telefonu. Dużo zależy także od poziomu zdefiniowania zakresu projektu na tym etapie. Im wiecej szczegółów znamy, tym więcej możemy zaprezentować, jednak bez skupiania się na detalach. Projektujemy ogólną architekturę, stąd pixel-perfekt na tym etapie nie ma żadnego znaczenia, jednak całość powinna być schludna i przyjemna w odbiorze. |
| Treść | uwzględnione są tylko kluczowe elementy treści, np. nagłówek, labelka, jednak staramy się unikać Lorem Ipsum. |
| Interaktywność: prototyp aplikacji mobilnej lub strony internetowej | W zależności czy prototyp będzie przesyłany w formie np. interaktywnego linka czy wykorzystywany podczas wywiadu z użytkownikiem, jego interaktywność może się różnić. Staramy się jednak pokryć wszystkie połączenia prototypu, aby wyciągnąć jak najwięcej z wywiadu z użytkownikiem, tym smamym nie wpuszczając go w ślepą uliczkę. Podczas prototypu Low-Fidelity nie będzie on musiał zawierać np. wpisywania danych do pola, walidacji oraz innej logiki. |
Korzyści prototypowanie aplikacji Low-fidelity
- Zaangażowanie wszystkich interesariuszy w proces projektowy. Każdy może szkicować (nawet ci, którzy twierdzą, że nie mogą), a to oznacza, że każdy może budować papierowe prototypy.
- Pozwala na testowanie we wczesnym etapie projektu. Wczesne testowanie prototypów pozwala zespołom produktowym znaleźć problemy z szerokim spektrum widzenia (big picture) – takie jak niejasna architektura informacji – zanim staną się zbyt trudne do rozwiązania.
- Szybkie eksperymentowanie. Różne elementy interfejsu użytkownika można rysować, wycinać, kopiować w celu wykonania dodatków, a następnie montować na nowej kartce papieru. Dzięki prostym prototypom można również naśladować złożone interakcje.
Szukasz rozwiązań w zakresie projektowania prototypów Lo-Fi lub Hi-Fi? Zobacz naszą ofertę
Prototypowanie aplikacji High Fidelity
Prototypowanie aplikacji Hi-Fi (High-fidelity), działają w sposób zbliżony do właściwego produktu. Zespoły zwykle tworzą prototypy o wysokiej wierności, gdy dobrze rozumieją, co zamierzają zbudować, i muszą albo przetestować to na prawdziwych użytkownikach, albo uzyskać ostateczną akceptację projektu od interesariuszy.
Zastosowanie prototypów High Fidelity:
- Projekt wizualny: Realistyczny i szczegółowy projekt – wszystkie elementy interfejsu, odstępy i grafika wyglądają jak prawdziwa aplikacja lub strona internetowa.
- Treść: Projektanci używają treści rzeczywistych lub podobnych do rzeczywistych. Prototyp zawiera większość lub całość treści, które pojawią się w ostatecznym projekcie.
- Interaktywność: prototypy są bardzo realistyczne pod względem interakcji.
Korzyści prototypów High Fidelity:
- Szybka informacja zwrotna. Prototypowanie aplikacji Hi-Fi często wyglądają jak prawdziwe produkty dla użytkowników. Oznacza to, że podczas sesji testowania użyteczności uczestnicy testu będą częściej zachowywać się naturalnie – tak jakby wchodzili w interakcję z rzeczywistym produktem.
- Testowalność określonych elementów interfejsu użytkownika lub interakcji. Dzięki interaktywności hi-fi można testować elementy graficzne, takie jak afordancja lub określone interakcje, takie jak animowane przejścia i mikrointerakcje.
- Łatwiejsze „obrazowanie ideii”. Ten typ prototypu nadaje się również do prezentacji interesariuszom. Daje klientom i potencjalnym inwestorom jasny obraz tego, jak produkt powinien działać. Doskonały prototyp o wysokiej wierności wzbudza entuzjazm w projektowaniu w sposób, w jaki nie może tego zrobić prototypowy system lo-fi.
Jakich narzędzi użyć do prototypowania?
| Narzędzie | Opis | Zalety | Wady |
|---|---|---|---|
| Figma | Figma umożliwia prototypowanie aplikacji mobilnych oraz internetowych zarówno w niskim, jak i wysokim odwzorowaniu z pewnymi ograniczeniami. Oferuje środowisko projektowe umożliwiające współpracę w czasie rzeczywistym oraz historię i wersjonowanie. | 1. Łatwe w użyciu dla początkujących; 2. Zapewnia płynne przejście od prototypowania w niskim do wysokim odwzorowaniu; 3. Posiada wiele wtyczek i integracji. | 1. Może być zbyt proste dla zaawansowanych użytkowników; 2. Może działać wolno przy pracy z dużymi plikami. |
| Sketch | Sketch to narzędzie do projektowania tylko na komputery Mac, które umożliwia projektowanie prototypów w wysokim odwzorowaniu. Oferuje szereg funkcji, takich jak edycja wektorowa i projektowanie pikseli. | 1. Posiada dużą społeczność użytkowników, z wieloma wtyczkami i integracjami; 2. Umożliwia łatwą współpracę z programistami; 3. Oferuje wiele funkcji do tworzenia szczegółowych projektów. | 1. Ograniczenie dostępności tylko do komputerów Mac; 2. Może być trudne do nauczenia się dla początkujących. |
| Adobe XD | Adobe XD to narzędzie do projektowania na różnych platformach, które umożliwia projektowanie prototypów zarówno w niskim, jak i wysokim odwzorowaniu. Oferuje szereg funkcji, takich jak edycja wektorowa i projektowanie responsywne. | 1. Posiada dużą społeczność użytkowników, z wieloma wtyczkami i integracjami; 2. Oferuje płynną integrację z innymi produktami Adobe; 3. Umożliwia łatwą współpracę z programistami. | 1. Może działać wolno przy pracy z dużymi plikami; 2. Może być zbyt skomplikowane dla początkujących. |
| InVision Studio | InVision Studio to narzędzie do projektowania na różnych platformach, które umożliwia tworzenie prototypów zarówno w niskim, jak i wysokim odwzorowaniu. Oferuje szereg funkcji, takich jak projektowanie wektorowe i projektowanie ruchu. | 1. Oferuje łatwe w użyciu interfejs, który jest odpowiedni dla początkujących; 2. Zapewnia szereg funkcji do tworzenia szczegółowych projektów; 3. Umożliwia łatwą współpracę z programistami. | 1. Zbyt duże ograniczenia dla dużych projektów, 2. Ograniczenia w interakcjach, 2. Może działać wolno przy pracy z dużymi plikami. |
| Axure RP | Axure RP to narzędzie do projektowania na komputerze, które umożliwia projektowanie prototypów w wysokim odwzorowaniu. Oferuje szereg funkcji, takich jak logika warunkowa i dynamiczne dane. | 1. Oferuje wiele funkcji do tworzenia skomplikowanych projektów; 2. Umożliwia łatwą współpracę z programistami; 3. Zapewnia wiele opcji do prototypowania interakcji. | 1. Może być trudne do nauczenia się dla początkujących; 2. Może być zbyt skomplikowane dla prostych projektów. |
| Marvel | Marvel to narzędzie do projektowania w chmurze, które umożliwia tworzenie prototypów zarówno w niskim, jak i wysokim odwzorowaniu. Oferuje szereg funkcji, takich jak projektowanie wektorowe i współpraca w czasie rzeczywistym. | 1. Oferuje łatwe w użyciu interfejs, który jest odpowiedni dla początkujących; 2. Zapewnia szereg funkcji do tworzenia szczegółowych projektów; 3. Umożliwia łatwą współpracę z programistami. | |
| Balsamiq | Balsamiq umożliwia projektowanie prototypów w niskim odwzorowaniu. Oferuje szereg funkcji, takich jak drag&drop elementów z gotowej biblioteki komponentów. | 1. Oferuje łatwe w użyciu interfejs, który jest odpowiedni dla początkujących; 2. Zapewnia wiele gotowych komponentów do szybkiego prototypowania; 3. Umożliwia łatwą współpracę z programistami. | 1. Ograniczone funkcje do tworzenia prototypów w wysokim odwzorowaniu; 2. Może być zbyt proste dla skomplikowanych projektów. |
Źródło:The Blog Adobe
Zobacz także: Dlaczego Userflow jest ważnym krokiem projektowania Strategii User Experience
Chcesz stworzyć prototyp dla swojego produktu? Zobacz naszą ofertę Product Design & UX/UI