Wireframe

Wireframe low-fidelity vs. wireframe high-fidelity

Wireframe low-fidelity na danym etapie tworzone jest w skali szarości, najczęściej na białej kartce papieru. Rysunki są wykonywane za pomocą podstawowych figur geometrycznych – prostokątów, kwadratów, kół – oraz symboli zastępczych.

Pozbawione jest kolorów, ikon, zdjęć, tekstu (nawet w formie standardowego „lorem ipsum”). Wysoka wierność i dokładność projektu nie są ani szczególnie przydatne, ani wskazane.

Wireframing polega na tworzeniu ogólnego układu elementów struktury strony w interfejsie użytkownika (tekstu, grafiki, wideo, menu, buttonów). 

Wireframe pozwala także przewidywać flow użytkownika, czyli planować ścieżki, jakich będą używać userzy. I co najważniejsze, już na tak wczesnym etapie prac, mamy możliwość poprawiania doświadczeń i użyteczności.

Wireframe high-fidelity jest o wiele bardziej złożony, szczegółowy, dopracowany w detalach i zbliżony do wyglądu produktu finalnego. Realistyczna kolorystyka projektu wizualnego, ile miejsca należy przeznaczyć na tekst, sprecyzowane stosunki odległości między elementami w interfejsie użytkownika pozwalają ocenić także warstwę estetyczną.

Jej adekwatność do treści strony, produktu, branży. Także jej komplementarność względem Design Systemu (jeśli organizacja taki posiada). 

O ile modele low-fiedelity są tworzone na początkowym etapie prac, o tyle modele high-fidelity są prezentowane na bardzo zaawansowanym etapie, poprzedzającym kodowanie.

Na podstawie makiet i za ich pomocą możliwe jest przeprowadzanie testów na użytkownikach, zbieranie o wiele bardziej wartościowych informacji zwrotnych na temat produktu.

Wireframing - etap przygotowawczy

Choć Wireframes sprawiają wrażenie stworzonych „na szybko”, to ich przygotowanie poprzedzone musi być analizą briefu, oczekiwań.

Wyczerpujące wytyczne funkcjonalne, dotyczące architektury informacji, typu interfejsu i ścieżki nawigacji pozwalają nadać rangę poszczególnym elementom produktu.

Określić ich rolę, funkcję, ważność w strukturze całej strony internetowej, aplikacji webowej.

Zaplanowanie ich sposobu działania, umiejscowienia (np. home page, podstrony) pozwoli także znacząco przyspieszyć i zracjonalizować prace projektowe i programistyczne.

Architektura informacji Wireframes

Największą zaletą Wireframes jest możliwość udoskonalenia architektury informacji, której znaczenie rośnie wraz z wielkością i złożonością projektu.

Projektowanie architektury informacji jest czasochłonne. Błędy popełnione w fazie koncepcyjnej najczęściej generują wysokie koszty poprawy w dalszych etapach prac produktu cyfrowego, dlatego tak ważne jest ich uniknięcie.

Planowanie architektury informacji wymaga przemyślenia sposobu prezentacji treści, tak, by ich zawartość i kontekst umiejscowienia, jak najlepiej służyły dostępności i jednoznaczności.

Wireframe pozwala także zaprojektować możliwe do wykonania akcje oraz ocenić poziom klarowności struktury produktu cyfrowego.

Jakie są zalety Wireframe UX?

Przygotowanie wireframes pozwala oszacować i zaplanować:

• czas wykonania projektu
• koszt
• iteracje (cyklicznie powtarzane korekty projektu)
• zmniejszyć liczbę błędów i poprawek.

Wireframe, prototyp, makiety UX strony internetowej, aplikacji traktować należy jako ważny element dokumentacji i są potrzebne dla dobrej organizacji pracy. Wireframe jest również dobrym rozwiązaniem dla klienta, który poszukuje wykonawcy i chce dowiedzieć się, ile kosztuje strona internetowa.

Powszechność wykorzystania wireframe (bez względu na wielkość projektu) wynika z jej licznych zalet, gdy chcemy wdrażać produkt na rynek.

To proste narzędzie pozwala:

• dokumentować pomysły, warianty, wersje
• wizualizować strukturę
• testować użyteczność
• zbierać opinie – feedback kliencki, zespołu projektowego, użytkowników
• testować kluczowe założenia projektowe (biznesowe i funkcjonalne)
• uporządkować przestrzennie informacje, funkcje, narzędzia
• wybrać najlepszy sposób prezentacji różnych typów informacji
• przewidywanie przyszłych miejsc interakcji 
• wyłapać błędy koncepcyjne
• testować i porównywać rozwiązania typowe, standardowe i odbiegające od przyzwyczajeń i oczekiwań userów
• symulować ścieżki i flow
• komunikować (wewnątrz i na zewnątrz) pomysły, idee, rozwiązania.

Jak zrobić makietę? Projektowanie UX Wireframe

Tworzenie modelu szkieletowego produktu cyfrowego poprzedzić powinno zrozumienie potrzeb biznesowych klienta oraz potrzeb docelowych użytkowników.

Przyszła strona internetowa, aplikacja powinna być w pełni wypadkową tych dwóch oczekiwań.

Dzięki uproszczonej formie i skupieniu uwagi na “mechanice” narzędzia możemy dostrzec jak szybko, jak skutecznie klient i user będą w stanie osiągnąć swoje cele w rzeczywistości.

Możemy dostrzec potencjał produktu w jego najbardziej oczywistej, kluczowej warstwie - użyteczności.  

Jeśli koncepty nie są zrozumiałe “od razu”, w sposób oczywisty, oznacza to najczęściej, że został źle zaprojektowane i należy je przeprojektować, aby uzyskać lepsze efekty.

Na marginesie dodajmy, że koncepcje (np. makieta strony internetowej) mogą być lepsze, gorsze, dobre, złe, ale nie mogą być niezrozumiałe.

Tym bardziej że stosunkowa łatwość i szybkość stworzenia Wireframe daje możliwość mnożenia pomysłów, konfrontowania różnych rozwiązań z oczekiwaniami interesariuszy. 

Czasem przedstawienie pomysłów w formie wireframes, które wydawały się klientowi dobre,  udowodniało, że dane funkcjonalności należy zaprojektować inaczej, aby nie wprowadzać chaosu w całej architekturze informacji.

Reasumując statyczny wireframe do szybki i tani sposób na przetestowanie konceptu interfejsu. Jeśli wszyscy członkowie projektu zgadzają się, że tak zaprojektowany interfejs produktu cyfrowego wspiera potrzeby biznesowe i jest użyteczny dla użytkownika, to dopiero wtedy można przejść do następnego kroku w procesie projektowania oprogramowania.