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

Za pomocą makiet można testować pomysły na interfejs i zawarte w nim rozwiązania z zakresu User Experience po obu stronach produktu — w czasie testów z użytkownikami oraz negocjacji z inwestorami.

Weryfikacja pomysłów na wczesnym etapie prac jest bardzo ważna, ponieważ krok dalej do makiet angażuje się programistów, a kodowanie to najdroższy etap tworzenia produktu. Makiety UX dają tym samym szansę na wczesną redukcję błędnych wdrożeń.

Jakie są rodzaje makiet?

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ą się 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.

Faza badawczo-koncepcyjna — ustawianie projektu na torach

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.

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.

Podsumowanie – 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ć.