Makieta UX – jak ją stworzyć

Makieta UX to istotny element procesu budowania strony internetowej czy aplikacji. Tworzenie makiet jest ważną umiejętnością dla UX designerów, ale przydać się może każdemu, kto chciałby w wizualny sposób przedstawić swój pomysł na layout.

Makieta UX – co to?

Makieta w UX to graficzna prezentacja układu elementów na ekranie strony czy aplikacji mobilnej. Przypomina finalny produkt, ale w wersji uproszczonej i pozbawionej szczegółów.

Makiety wykorzystuje się głównie do tego, aby przetestować założenia projektu i zderzyć różne pomysły z końcowymi użytkownikami zanim programiści zabiorą się za kodowanie (które jest najdroższym elementem procesu budowania cyfrowych produktów).

Celem makiety nie jest więc przedstawienie finalnego, dopracowanego designu. To dzieje się na samym końcu. Dlatego pierwsze wersje makiet warto stworzyć najszybciej jak to możliwe, korzystając nawet z tak prostych narzędzi, jak kartka papieru lub flipchart.

Rodzaje makiet UX

Wyróżniamy dwa główne typy makiet: LoFi (Low Fidelity) oraz HiFi (High Fidelity). Różnią się one poziomem szczegółowości. Oba rodzaje są przydatne, ale na różnych etapach budowania produktu.

Makieta LoFi

Makiety LoFi są zazwyczaj czarno-białe lub korzystają z różnych odcieni szarości. Wizualnie nie powalają, bo ich rolą jest zaprezentowanie rozmiaru i układu poszczególnych elementów, jak nawigacja, zdjęcia, tekst, linki, przyciski. Często brak tutaj szczegółów – makiety LoFi skupiają się na kluczowych częściach produktu.

Makieta HiFi

Makiety HiFi powstają w momencie, gdy podstawowe założenia produktu zostały już przetestowane i zaakceptowane. Teraz nadchodzi pora na dopracowanie szczegółów. W makietach LoFi pojawia się więc zwykle więcej elementów, grafiki i treść zaczynają przyjmować formę zbliżoną do finalnej. Smutną szarość zastępują kolory, ikony i piktogramy.

Paper prototyping

W tym miejscu chciałbym jeszcze wspomnieć o szkicowaniu makiety LoFi na papierze. Chociaż może się to wydawać ”nieprofesjonalne”, to jest to najszybszy sposób na naszkicowanie wielu różnych koncepcji i wybór tych o największym potencjale.

Pracując na kartce łatwiej się skupić na najważniejszych elementach i spojrzeć na produkt z lotu ptaka. Korzystanie z programów niesie za sobą pokusę dobierania ładnego kroju czcionki czy dłubania w ustawieniach siatki (grida).

Takie zabawy warto sobie zostawić na ciut dalszy etap, a na samym starcie po prostu wyciągnąć kartkę, narysować kilka elementów i szybko zderzyć to z innymi członkami zespołu, klientem lub najlepiej z końcowymi odbiorcami produktu.

Makiety UX – dlaczego warto z nich korzystać?

Budowanie produktów cyfrowych jest czasochłonne i drogie. Świat zna wiele przykładów stron i aplikacji, które kosztowały krocie, a finalnie okazało się, że kompletnie nie spełniają one potrzeb końcowych użytkowników, bo są nieintuicyjne.

Korzystanie z makiet od wczesnego etapu tworzenia produktu pozwala uniknąć takiej wtopy. Nie trzeba napisać ani jednej linijki kodu, aby zweryfikować, czy nawigacja lub układ strony będą zrozumiałe i wygodne dla odbiorców. Wystarczą do tego makiety połączone w klikalny prototyp.

Makiety są fantastyczne z punktu widzenia szybkości działania i reagowania na bieżąco na feedback. Zamiast tygodniami czekać na wymuskane grafiki bądź – o zgrozo – finalny produkt, można w relatywnie krótkim czasie stworzyć makiety i zderzyć pomysł z rynkiem.

Finalnie, dokładne makiety oraz architektura informacji sprawiają, że łatwiej jest wycenić koszt zakodowania produktu. Z kolei jeśli ten okaże się zbyt wysoki, to makiety można zmodyfikować (eliminując zbędne funkcjonalności czy ekrany) i ponownie przetestować z użytkownikami.

Narzędzia do makiet UX

Narzędzia potrzebne do tworzenia makiet podzieliłbym na dwie kategorie, z których pierwsza to spojrzenie z lotu ptaka na cały produkt, a druga to zejście na poziom konkretnych ekranów.

#1: Narzędzia do architektury informacji

Przed przejściem do projektowania “strony głównej” lub innych popularnych ekranów warto uchwycić jak mają się one do reszty produktu czy strony. Czyli rozrysować diagramy pokazujące strukturę ekranów oraz powiązania między nimi.

Przykłady narzędzi:

• Lucidchart
• Omnigraffle

Od biedy prostą architekturę informacji można nawet stworzyć w Power Poincie czy Google Drawings.

#2: Narzędzia do prototypowania

Na rynku nie brakuje ciekawych rozwiązań do prototypowania (tak też określa się tworzenie makiet). Przewaga nad papierem jest zdecydowana – można oczywiście tworzyć komponenty, kopiować je między ekranami, łączyć ekrany interakcjami, udostępniać link do makiet innym osobom i zbierać feedback w postaci komentarzy. To tak na wypadek, gdyby z poprzednich akapitów wybrzmiewało, że preferuję papierowe szkice ponad wszystko 🙂

Osobiście od wielu lat jestem fanem polskiego UXPin i często z niego korzystam. Ostatnio coraz mocniej przekonuję się jednak do Figma, gdzie łatwiej jest stworzyć makiety HiFi. 

Poza tymi dwoma narzędziami popularne są też Axure, Invision, Marvel czy Sketch.

Makieta UX – jak ją stworzyć krok po kroku

No dobrze, jak się zabrać za tworzenie makiety? Spójrzmy na cały proces.

#1: UX Research 

Zanim jeszcze usiądziesz do pierwszych szkiców, pomyśl o przeprowadzeniu badań UX, które pomogą zadecydować o kształcie architektury informacji i zawartości konkretnych ekranów.

Metod badawczych w UX jest sporo i nie trzeba korzystać ze wszystkich. Część z nich jest w zasadzie dostępna tylko dla projektów, które już istnieją lub posiadasz na ich temat dane historyczne (a makiety mają być stworzone w ramach projektu przebudowy / redesignu).

W ramach badań UX można skorzystać między innymi z:

• Badań użyteczności
• Analiz ilościowych (np. w Google Analytics)
• Heatmap
• Nagrań sesji
• Wywiadów pogłębionych
• Badań ankietowych
• Analizy konkurencji

Zebrane w ten sposób dane i informacje sprawią, że tworzenie makiet pójdzie sprawniej. Zaproponowane w nich rozwiązania z pewnością będą trafniejsze, niż gdybyś podchodził do prototypowania “z marszu”.

#2: Architektura informacji

Wspominałem o tym już wcześniej, ale powtórzę jeszcze raz. Przed makietowaniem konkretnych ekranów koniecznie należy rozrysować całą strukturę aplikacji czy strony internetowej.

W ten sposób ułatwisz sobie pracę. Oszacujesz też, ile czasu będziesz potrzebować na stworzenie makiet wszystkich ekranów.

Zmapowanie procesów i architektury informacji to też fajne ćwiczenie, dzięki któremu prawdopodobnie wyeliminujesz niektóre z planowanych funkcjonalności czy podstron, bo zobaczysz, że wniosą relatywnie niewiele wartości w porównaniu do chaosu i dodatkowej pracy, którą generują.

#3: Papierowe szkice

Od tego warto zacząć. Kartka i długopis. Ewentualnie flipchart i marker. Na tym etapie nie ma co zbyt wiele rozmyślać i oceniać.

Jest to na tyle szybka i tania metoda prototypowania, że można się tutaj kreatywnie wyszaleć i wypróbować tyle pomysłów, ile się da. A te najlepsze zostawić i przenieść do kolejnego etapu.

#4: Makiety LoFi

Tutaj korzystamy już z narzędzi do prototypowania. Dzięki temu, że stworzyłeś wcześniej architekturę informacji oraz papierowe szkice, od razu wiesz, które elementy będą się przewijać przez wiele różnych ekranów. 

Możesz wtedy od razu stworzyć komponenty, które będziesz edytować w jednym miejscu, a aktualizacja nastąpi na wszystkich ekranach. Polecam takie systemowe podejście do makietowania. Teoretycznie szybsze wydaje się wskoczenie od razu do pierwszego ekranu i dopracowanie go w szczegółach. W praktyce jednak lepiej jest się dobrze zastanowić nad strukturą poszczególnych ekranów i tak ułożyć pracę, żeby działać efektywnie.

W makietowaniu preferuję podejście “od ogółu do szczegółu”. Zaczynam od umieszczenia dużych bloków na ekranie (jak nawigacja, galeria zdjęć, stopka, formularz, etc.), a dopiero później wypełniam je szczegółami.

Na etapie makiet LoFi najważniejsze jest przedstawienie kluczowych elementów, hierarchii wizualnej i ogólnego pomysłu na ekran. Dopiero gdy z testów wynika, że wyszło nam to całkiem nieźle, przechodzimy do dopieszczania makiety.

#5: Makiety HiFi

A dopieszczanie dzieje się na etapie makiet HiFi. Dobieramy kolory, ikony, piktogramy i zdjęcia. Warto też na tym etapie zadbać o UX copywriting, czyli finalne, intuicyjne teksty na przyciskach, linkach czy w nawigacji. Nie zaszkodzi też umieścić tutaj finalnych tekstów i zdjęć.

Pomiędzy makietami HiFi a finalnymi projektami graficznymi często zaciera się granica. Niektórzy dopracowują je na tyle, że można je śmiało przekazać front-endowi. Inni po testach makiet HiFi z użytkownikami przekazują je jeszcze do finalnego dopracowania do designera.

Generalnie jeśli styl strony / aplikacji jest już określony, czyli jest dobrana wcześniej paleta kolorów, krój fontu, styl ramek i przycisków czy ikony, to względnie łatwo jest sobie poradzić ze stworzeniem makiety HiFi, nawet jeśli nie jesteś UI Designerem. Natomiast w przypadku, gdy projekt jest budowany od zera, to bez wsparcia osoby ze świetnym skillem w designie się nie obędzie.

Puentując to cytatem z klasyka: “Jak Pan czuje”.

Zdjęcie autorstwa Maria Orlova z Pexels