Zanim powstanie interfejs aplikacji, strony czy sklepu, niezbędne są pierwsze czytelne wizje graficzne projektu.
Najbardziej optymalną formą prac nad UI w pierwszych fazach są makiety UX. Integrują one zbiór pomysłów w jednej spójnej, zamkniętej wizji, o której można dyskutować. Dzięki podziałowi makiet na dwa rodzaje (low-fi – szkice, high-fi – precyzyjne makiety), precyzja i szczegółowość nie są od początku potrzebne do efektywnego poprowadzenia projektu. Wystarczy przyjąć perspektywę widoku z lotu ptaka.
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ń.
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ą 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.
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ć.
