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