Makieta, mockup czy wireframe to terminy, które bywają używane zamiennie, mimo że nie są synonimami. W projektowaniu można wyróżnić pewne etapy, bez których trudno, aby realizacja zakończyła się sukcesem. Wspomniane pojęcia dotyczą różnych części tego procesu. Co warto wiedzieć o wireframe? Jaką odgrywa rolę i co się dzieje na tym etapie?
Wireframe – definicja i cel
Wireframe, czyli model szkieletowy, jest zarysem struktury. To pewien schemat, dzięki któremu uzyskuje się obrys struktury, szkic interfejsu użytkownika witryny lub aplikacji. To etap, na którym przydziela się miejsce dla poszczególnych funkcji i przedstawia relację między poszczególnymi widokami, np. co się stanie, jeśli użytkownik naciśnie dany przycisk. Wireframe nie pokazuje, jak finalnie będzie wyglądać produkt, ale przedstawia interfejs konturowo. Przeważnie nie zawiera stylów ani kolorów – to nie moment na szukanie rozwiązań atrakcyjnych wizualnie. Więcej o wyglądzie wireframes powie Ci poniższa grafika.
Tworzenie projektów za pomocą wireframe polega na wykorzystywaniu elementów w skali szarości. Nie ma tekstu, wideo czy zdjęć. Są linie, pola i symbole zastępcze. Dzięki wireframe wizualizuje się pomysł i nadaje mu kształt. Jego plusem jest to, że nie wymaga wiele pracy. To projekt wizualny, konturowe przedstawienie układu interfejsu, a nie ostateczny wygląd produktu. Można go porównać do planu architektonicznego, na którym widzisz, jakie będzie rozmieszczenie pomieszczeń w budynku, gdzie będą znajdować się okna. Jeśli chodzi o główne cele tworzenia wireframe, to należą do nich:
- objaśnienie, jak będą wyświetlane poszczególne informacje w interfejsie użytkownika,
- mapowanie funkcji, dzięki czemu można wcześniej wykryć problemy i co za tym idzie – ponieść niższe koszty ewentualnych poprawek,
- ustalenie ograniczeń struktury i identyfikacja priorytetów,
- ustalenie, ile miejsca jest potrzebne na dany element, aby była zachowana estetyka projektu, i gdzie ma się znaleźć,
- oszczędność czasu i pieniędzy, gdyż lepiej nanosić zmiany na wczesnym etapie projektu niż edytować prototyp.
Wireframe, mockup, prototyp – różnice
Jak już wiesz, wireframe, mockup i prototyp nie oznaczają tego samego. Czym się różnią? Mockup to makieta strony internetowej, aplikacji czy produktu. Wykorzystuje się ją do wizualizacji tego, co chcesz udostępnić na rynku. Taka makieta pozwala klientowi ocenić, czy odpowiada mu propozycja wykonawcy. Natomiast prototyp produktu to coś więcej niż wireframes czy makieta strony WWW. To wierna prezentacja projektu, np. z animacjami i prawdziwymi danymi. Nie jest to już tylko szkic, ale wiele pokazujący efekt procesu projektowania, który przejdzie jeszcze przez kolejne fazy. Wkrótce kończy się ścieżka do uzyskania finalnego produktu.
| Wireframes | Mockup | Prototyp | |
| Co to jest? | szkic, model szkieletowy, zarys struktury | makieta, wizualna prezentacja produktu, pokazuje wygląd | symulacja gotowego produktu |
| Z czego się składa? | linie, pola i symbole zastępcze | prezentuje projekt bardziej obrazowo – jakiś styl, kolory, planowany krój pisma | oddaje ostateczny wygląd i funkcje |
| Czy jest klikalny? | nie | nie | tak |
| Zastosowanie | umożliwia mapowanie funkcji i wychwycenie problemów na wczesnym etapie | pomaga w podejmowaniu decyzji co do ostatecznego wyglądu projektu | umożliwia zaprojektowanie ostatecznego wyglądu i funkcji |
| Jak powstaje? | prezentuje się go na kartce lub ekranie | za pomocą narzędzi graficznych, takich jak Figma czy Sketch | w takich programach jak m.in. Axure RP, Invision czy UXPin |
Jeszcze więcej pokazuje poniższa grafika. Jak widzisz, prototyp to coś więcej niż uzyskuje się w ramach modelu szkieletowego (wireframe) oraz makiety. Prototypowanie powoduje, że unikniesz naprawiania błędów, kiedy projekt jest gotowy. Wykorzystasz do tego początkowy etap realizacji, szkic i makietę – tym samym koszty poprawek będą niższe niż w przypadku ich wprowadzania, kiedy projekt jest już zrealizowany.
Rodzaje wireframes
Modele szkieletowe są klasyfikowane pod względem jakości lub funkcji. Chodzi tutaj o ich zaawansowanie i szczegółowość. Wyróżniamy dwa główne rodzaje wireframes.
Wireframe low-fidelity
Są proste, można je szybko opracować. Przeważnie pokazują układ elementów na stronie. To tylko koncepcja danego projektu, która stanowi zamysł realizacji. Pozwala sprawdzić, czy wszystkie elementy znajdują się w odpowiednim miejscu. Jako wypełniacza treści często używa się lorem ipsum. Nie ma tutaj konkretnych informacji o wielkości czy wyglądzie poszczególnych elementów.
Wireframe high-fidelity
Czasami mówi się również o mid-fidelity, gdzie pojawiają się dodatkowo informacje o wielkości i proporcjach elementów. Stosuje się różne odcienie szarości. Najczęściej jednak wyróżnia się dwa rodzaje wireframes, z których drugi to high-fidelity, czyli bardziej szczegółowy. Zawiera informacje o kolorystyce i topografii. Często pojawiają się również dane o wymiarach czy działaniach, które wiążą się z danym elementem w projekcie. Tego typu wireframe nie powstaje jako szkic przygotowany na kartkach papieru, tylko w specjalistycznym oprogramowaniu.
Etapy projektowania wireframe
Budowanie wireframe UX powinno się składać z co najmniej kilku etapów. Twoim celem jest uzyskanie szkicu – trzymaj się prostoty. Sprawdź, o czym warto pamiętać:
1. Przeprowadź research
Zanim weźmiesz do ręki długopis i kartkę, musisz zrozumieć, kim są Twoi odbiorcy. Oznacza to przeprowadzenie analizy linii produktów podobnych do własnych, zagłębienie się w dominujące trendy UX, najlepsze praktyki oraz przegląd wewnętrznych wytycznych projektowych. Zanotuj wnioski i przejdź do kolejnego kroku.
2. Upewnij się, że masz zmapowany flow użytkownika
Musisz ustalić, ile ekranów będziesz tworzyć i jakiego oczekujesz flow użytkownika. Z którego kanału marketingowego będą pochodzić odbiorcy i gdzie mają trafić? Musisz trzymać się architektury informacji dostosowanej do oczekiwań odbiorców. Dzięki temu użytkownicy nie będą podirytowani, wyślą mniej wiadomości do obsługi klienta z pytaniem, jak zrobić coś bardzo prostego.
3. Zacznij szkicować
W kolejnym etapie budowania wireframe UX możesz zacząć szkic. Nakreślasz funkcje i formaty, a nie ilustrujesz w najdrobniejszych szczegółach. Nie myśl o estetyce czy o kolorach. Na tym etapie warto korzystać z grubego markera, gdyż dzięki temu nie utoniesz w szczegółach – skoncentrujesz się na określeniu funkcjonalnych bloków. Możesz też skorzystać z gotowych szablonów.
4. Używaj kształtów zamiast obrazów
Korzystaj z prostych kształtów. Jeśli zastąpisz je atrakcyjnymi obrazami, to mogą one odwracać uwagę od zadania, które masz do wykonania. Jeśli chcesz skorzystać z narzędzi, to weź pod uwagę następujące: Sketch, Moqups (dla początkujących), Figma (darmowa aplikacja do tworzenia szkieletów), Justinmind (do budowania interaktywnych makiet), Uizard (do tworzenia szkieletów wspomaganych przez AI).
Błędy przy tworzeniu wireframes – uważaj na nie!
Możesz ich popełnić wiele. Przede wszystkim skup się na zadaniu, które masz do wykonania. Nie zapominaj, co tworzysz i jakie ma to mieć zastosowanie. Do najczęstszych błędów należą:
- zbyt duża lub zbyt mała szczegółowość – musisz znaleźć równowagę. Zbyt wiele szczegółów rozprasza, a zbyt mało powoduje, że szkic jest niejasny,
- nietestowanie szkieletów – Twoje założenia powinny być zweryfikowane z prawdziwymi użytkownikami. Uzyskane spostrzeżenia pomogą Ci poprawić projekt,
- brak dokumentacji szkieletów – dodawaj jasne i zwięzłe adnotacje, unikaj mylących nazw. Dokumentowanie pomoże Ci w komunikowaniu decyzji projektowych,
- brak współpracy z zespołem – trzeba współdziałać, brać pod uwagę zdanie innych osób, które współtworzą projekt.
Nie warto się śpieszyć. Dobrym wyborem jest konsultowanie się, testowanie. To zwiększa szansę na realizację, która odniesie sukces.
