Makieta UX – co to i jak ją stworzyć?

Zanim powstanie interfejs aplikacji, strony czy sklepu, potrzebne są pierwsze, czytelne wizje graficzne projektu. Makieta UX to uproszczona wizualizacja interfejsu użytkownika, która przedstawia układ elementów, funkcje i sposób poruszania się po produkcie.

Makiety jest najlepszą formą pracy nad UI na wczesnym etapie. Pozwalają zebrać pomysły w jednej spójnej wizji, o której można dyskutować, testować ją i ulepszać. Dzięki rozróżnieniu na dwa rodzaje – low-fi (proste szkice) i high-fi (precyzyjne makiety) – nie trzeba od razu tworzyć szczegółowych projektów, by efektywnie poprowadzić prace. Na tym etapie wystarczy „widok z lotu ptaka”.

Makiety pomagają testować rozwiązania UX zarówno w kontakcie z użytkownikami, jak i w rozmowach z inwestorami. To narzędzie, które łączy cele biznesowe z potrzebami użytkowników.

Weryfikacja pomysłów na tym etapie jest szczególnie ważna, ponieważ kolejny krok – wdrożenie przez programistów – wiąże się już z dużym nakładem czasu i kosztów. Makiety UX dają więc szansę na wczesne wykrycie i wyeliminowanie błędów, zanim zostaną zapisane w kodzie.

Jakie są rodzaje makiet?

Makiety UX dzielą się zazwyczaj na dwa podstawowe typy. Różnią się one poziomem szczegółowości, przeznaczeniem oraz momentem, w którym są wykorzystywane w procesie projektowym. Poniżej krótka charakterystyka obu typów.

Low Fidelity, czyli dopracowywanie kluczowych elementów

Najprostszy rodzaj makiety, kieruje uwagę na wielkość, kształt i układ strategicznych elementów. Właściciel produktu będzie w stanie ocenić, czy przyjęte założenia spotykają się z jego celami biznesowymi.

High Fidelity, czyli wysoki poziom dokładności

Na bazie makiety Lo-Fi tworzona jest makieta Hi-Fi. Na tym etapie wszystkie makiety są bardziej precyzyjne i dokładne. Każdy komponent zostaje dokładnie przeanalizowany i zaprojektowany tak, jakby miał wyglądać i działać docelowo. Zespół projektowy może bardziej konkretnie dyskutować o kwestiach takich, jak budowanie narracji za pomocą UX writingu i projektowanie user flow na elementach nawigacyjnych. Wersję Hi-fi można również testować. Użytkownicy zobaczą wszystko, co pozwoli im na ocenę produktu. Dzięki temu można wcześniej wykryć i naprawić ewentualne błędy mniejszym kosztem, niż na etapie UI.

Jak zaprojektować makietę User Experience? 

Zachowanie kontroli nad projektem oznacza jego optymalizację od pierwszych kroków. Profesjonalne podejście do każdego kroku przekłada się na ułatwienie i uproszczenie kolejnych.

Celem jest ukształtowanie architektury informacji oraz jej podział na podstrony czy ekrany, a przy tym poznanie użytkowników, celów właściciela i konkurencyjnych produktów.

Badania UX, które mogą pomóc, to wywiady pogłębione, card sorting, ankiety i analiza konkurencji. Pomimo braku jakichkolwiek wstępnych szkiców, da się zbadać stosunek grupy docelowej do aplikacji lub stron o podobnych cechach i funkcjonalnościach. Poznać mocne i słabe strony rozwiązań stosowanych na rynku. Dzięki temu zespół projektowy zaczyna pracę nad nowym produktem z uwzględnieniem rozwiązania problemów, z którymi konkurencja sobie nie poradziła.

Zebranych informacji używa się do stworzenia wspomnianej architektury informacji. Projekt nowego produktu zamyka się w liczbie podstron / ekranów, dzięki czemu da się oszacować ilość czasu potrzebnego do zaprojektowania poszczególnych makiet.
Do stworzenia architektury można wykorzystać takie narzędzia, jak:

• Dyno Mapper – proste rozwiązanie do szybkiego generowania map w zespole i łatwego share’owania.
• Lucidchart – popularne wśród dużych graczy rynkowych, zapewnia sprawną pracę zespołową nad wykresami, diagramami i schematami blokowymi.
• OmniGraffle – zarezerwowane dla użytkowników Apple, oferujące funkcje automatyzacji i zwiększające precyzję projektowania.
• PowerMapper – dla użytkowników, którzy chcieliby z jednym narzędziem przejść od fazy tworzenia architektury informacji, do analizy i testów gotowej strony.
• Microsoft Visio – dedykowane do tworzenia schematów blokowych, przyspiesza pracę dzięki bibliotece setek tysięcy kształtów.
• Microsoft Excel – jego dużą zaletą jest powszechność, łatwość użycia i elastyczność – zmieści architekturę informacji nawet dużych produktów cyfrowych. Tworzenie opiera się na listach i grupowaniu informacji.

Wszystko zaczyna się od dobrej makiety. Sprawdź, co możemy dla Ciebie zrobić.

Sprawdź szczegóły

Analogowy wstęp do prototypowania

Im szybciej powstanie pierwsza makieta, tym lepiej. Dobrym początkiem prac jest kartka i długopis lub markery, które błyskawicznie zobrazują kolejne pomysły w szerszym gronie. Umożliwią szybką konfrontację różnych układów z opiniami osób decyzyjnych (czasem także z reakcjami grupy docelowej) i wybór najbardziej obiecującej ścieżki projektowania.

Zaletą metody analogowej jest także szybkie mnożenie różnych wariantów projektu czy pomysłu. Bez tracenia czasu na wybór narzędzi graficznych, importy i eksporty czy walkę z pokusami nadmiernego dopracowywania projektu ulubionymi funkcjami oprogramowania.

Dopiero po fazie selekcji i przekładania architektury treści na wstępne elementy graficzne, można przenieść projekt do formy cyfrowej, która przyspieszy dalsze prace. Makiety można tworzyć w takich programach, jak:

• Balsamiq,
• UXPin,
• Axure,
• Sketch,
• Figma,
• Sketch.

Dobre narzędzie do makiet UX pozwala na tworzenie projektów odwzorowujących elementy graficzne i sposób interakcji użytkowników z produktem. Trzeba także zwrócić uwagę na opcję generowania czytelnej dla programistów specyfikacji.

Jak pracować nad makietą Lo-Fi?

Ważna część prototypowania to rozpoznanie stałych elementów interfejsu i adaptacja tego wzoru do różnych ekranów. Z użyciem narzędzi łatwo da się multiplikować ekrany i kopiować ich składowe. Dzięki temu w krótkim czasie może powstać wiele wersji projektu do testowania, które będą się różnić układem i poziomem szczegółowości.

Przy okazji narzędzia do tworzenia makiet pozwalają na aktualizowanie wielu ekranów po każdej drobnej zmianie. Dzięki kompleksowemu podejściu projekt zawsze jest zamknięty w konkretnych ramach i da się oszacować długość prac.

Makiety Hi-Fi, czyli krok przed kodowaniem

Warto pamiętać, że prototypowanie w fazie Lo-Fi ma doprowadzić tylko do akceptacji ogólnej wizji interfejsu i architektury informacji. Od wchodzenia w szczegóły jest faza Hi-Fi, czyli wypełniania zaakceptowanej wersji szczegółami i warstwą tekstową.

Pilnowanie granicy pomiędzy tymi dwiema fazami projektowania interfejsu redukuje ryzyko pracy na błędnych założeniach.
Makiety Hi-Fi to w istocie dopracowywanie Lo-Fi na podstawie badań UX, aż powstaje wersja gotowa do kodowania. Na tym etapie można organizować testy z użytkownikami.

Dlaczego warto stosować makiety UX?

Dzięki makietom Lo-fi oraz Hi-fi projektowanie interfejsu od początku zbudowane jest wokół UX, zamiast oraz razu UI. Tym samym prototypowanie prowadzi do optymalizacji kosztów, redukcji ryzyka i przyspieszenia procesu dochodzenia do pomysłu na produkt akceptowalnego tak samo przez właściciela, jak użytkowników.

Gdyby okazało się – na przykład na etapie testów z użytkownikami – że pewne funkcje nie będą wykorzystane albo układ jest niezrozumiały, cały wysiłek, czas i koszt ich kodowania poszedłby na marne, obniżając rentowność jeszcze przed wypuszczeniem aplikacji czy publikacją strony internetowej.

Makiety to zatem forma utrzymywania kontroli nad projektem w taki sposób, że każdy ruch, decyzja, nowa funkcja lub rezygnacja z innej – są przez cały czas rozumiane przez wszystkich członków zespołu, właściciela, inwestora i użytkownika. Jeszcze zanim powstanie pierwsza linijka kodu.

Dodatkowym atutem jest ułatwienie wyceny pracy programistów. Łatwiej rozmawiać o projekcie zamkniętym w formie graficznej, niż o zbiorze pomysłów, które każdy będzie interpretował w inny sposób. Dyskusje nad makietami pozwalają także podzielić kodowanie na etapy, przypisać do nich elementy interfejsu. Jeśli koszty nie mieszczą się w zakładanym budżecie, można ułożyć hierarchię testów z użytkownikami i finalnie przekonać się, z których elementów produktu można zrezygnować.