Wireframe

Wireframe low-fidelity vs. wireframe high-fidelity

Wireframe low-fidelity 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 pożądane, ani wskazane.

Wireframing polega na tworzeniu ogólnego układu elementów (tekstu, grafiki, wideo, menu, buttonów). 

Wireframe pozwala także przewidywać, 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, tekst, sprecyzowane stosunki odległości między elementami 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.

Za ich pomocą możliwe jest przeprowadzanie testów na użytkownikach, zbieranie o wiele bardziej wartościowych informacji zwrotnych. 

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.

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, 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).

Wireframe, prototyp, makiety UX strony internetowej, aplikacji traktować należy jako ważny element dokumentacji i organizacji pracy.

Powszechność wykorzystania wireframe (bez względu na wielkość projektu) wynika z jej licznych zalet.

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
• 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ć 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.

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ły źle zaprezentowane na kartce papieru.

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.