Używamy plików "cookies" do analizy ruchu użytkowników oraz remarketingu. Szczegółowe informacje znajdują się w Polityce Prywatności.


know how
1/2/2022

Praktyczne wskazówki jak tworzyć makietę UX

Illustration of, laptop, notebook, person reading

Dlaczego tworzenie makiet UX ma tak duże znaczenie dla projektu? Aby to zrozumieć – należy dokładnie poznać system projektowania doświadczeń użytkowników. Zaczyna się on od audytu i badań, a kończy na wdrożeniu gotowego rozwiązania. Jednym z etapów jest wspomniane wcześniej tworzenie makiety UX. Czym jest dokładnie i jaką rolę odgrywa w całym procesie?

Czym jest makieta UX?

Makieta strony www jest często postrzegana jako pełnowymiarowy projekt lub też niedopracowana wersja witryny bądź aplikacji. Nie jest to jednak prawda. Po zakończeniu badań następuje etap stworzenia szablonu, wprowadzania modyfikacji i zmian. Wdrożenie jest ostatnim, kluczowym krokiem, do którego prowadzi długa droga. Jej przebieg i czas trwania zależny jest oczywiście od rodzaju projektu, nad którym pracuje zespół, stopnia jego zaawansowania i liczby zaangażowanych w niego osób.

Makieta, zwana inaczej prototypem, jest swego rodzaju narzędziem do procesu udoskonalania produktów. Na początku stanowi ona prosty szablon i szkielet, który ma przedstawiać elementarne założenia projektu. Na wstępnej makiecie nie są przedstawione doprecyzowane elementy graficzne – to nie estetyka odgrywa tu kluczową rolę, a najważniejsze funkcjonalności rozwiązania – przepływ zachowań użytkowników, architektura informacji i interakcje.

Pierwsze makiety UX stworzyć można nawet na zwykłej kartce. Jest to ogromne ułatwienie dla specjalistów UX i możliwość wyeliminowania problemów, które z całą pewnością trudniej byłoby rozwiązać na końcowym etapie działań. Zajęłoby to więcej czasu, nie wspominając o kosztach.

Kreowanie makiety UX szybko może przynieść pierwsze efekty. To także doskonałe narzędzie do prowadzenia współpracy z klientem. Umożliwia bieżącą weryfikację założeń projektowych oraz zaangażowanie odbiorcy na każdym etapie. Dzięki temu możliwa jest eliminacja zakłóceń komunikacyjnych i nieporozumień, które w końcowym momencie są niezwykle problematyczne.

Rodzaje makiet UX

Wyróżnia się dwa rodzaje makiet UX:

Makieta low-fi

Makieta lo-fi (ang. low fidelity) to produkt o niskiej rozdzielczości i szczegółowości. Zazwyczaj powstaje w początkowej fazie projektowania i stanowi obraz ekranu z oddalenia. Są to podstawowe, najważniejsze elementy, stanowiące punkt odniesienia dla zespołu produktowego. Tworzenie makiety lo-fi nie polega jednak tylko na narysowaniu layoutu na papierze.

Aby wypracować wstępny zarys – w tym celu wykorzystywane są programy do projektowania doświadczeń, które przyspieszają i ułatwiają pracę nad budową szkieletu strony. To umożliwia szybkie zaprezentowanie projektu reszcie zespołu i klientowi. Takich narzędzi dostępnych jest wiele – ważne, aby wybrać to, które usprawni komunikację między poszczególnymi specjalistami i odbiorcą.

Makieta high-fi

Kiedy klient zaakceptuje prototyp – można przejść do kolejnego kroku, czyli udoskonalania produktu. Polega to między innymi na nałożeniu na szablon warstwy graficznej oraz dopracowaniu kształtów, typografii, kolorów czy też animacji. Jest to prototyp makiety hi-fi (ang. high fidelity), czyli makiety wysokoszczegółowej. W tym momencie zespół pracuje nad walorami estetycznymi. Należy jednak pamiętać, że ta część ma ogromny wpływ na użyteczność. Pomoc grafika czy też własne preferencje mogą okazać się niewystarczające. Niezbędny może być udział projektanta interfejsów, który na tym polu może wykazać się doświadczeniem i wiedzą. Zaprojektuje on makietę hi-fi, biorąc pod uwagę wszystkie najważniejsze czynniki.

Choć grafik z całą pewnością ma zmysł estetyczny i potrafi dopasować do siebie poszczególne elementy – to projektant UX/UI wie dokładnie, czego potrzeba użytkownikom stron czy programów. Projektowanie graficzne to tylko część góry lodowej podczas tworzenia witryn internetowych. Tu należy wykazać się wiedzą na temat potrzeb użytkowników, rozumieć wszelkie procesy, które zachodzą na stronach i mają doprowadzić klienta do finalizacji działania.

Dlaczego warto korzystać z makiet UX?

Zastosowanie makiet UX może przynieść wiele korzyści. Jakich?

  • szybkie sprawdzenie reakcji użytkowników na produkt,
  • oszczędność pieniędzy oraz czasu pracy osób, które byłyby konieczne do modyfikacji niesprawdzonego produktu,
  • oszczędność czasu zespołu, związana z dokładnym zaplanowaniem rozwiązania,
  • szybsze usuwanie ewentualnych błędów,
  • łatwiejsza i sprawniejsza wycena kosztów oraz oszacowanie czasu pracy m.in. programistów.

Kiedy tworzymy makietę UX?

Tworzenie makiet UX warto rozpocząć jak najszybciej. Pierwszym elementem powinny być szkice wstępne na papierze. Ich celem jest stworzenie pierwowzoru produktu, który następnie będzie przetestowany przez użytkowników.

Makieta w wersji interaktywnej, niezbędnej do przeprowadzenia testów wstępnych, wykonana powinna być dopiero po etapie analizy biznesowej projektu, a także użytkowników. W skład tej ostatniej wchodzi ustanowienie celu, badanie użytkowników docelowych, stworzenie person, a także sprawdzenie produktów konkurencyjnych pod względem funkcjonalności. Im więcej elementów powstanie przed rozpoczęciem pracy nad makietą – tym dokładniejsza ona będzie.

Narzędzia przydatne do tworzenia makiet UX

Flipchart

Narzędzie to umożliwia stworzenie wizji, wyznaczenie celi głównych oraz pobocznych w przedsięwzięciu. To bardzo ważny element, który pozwala dokładnie zrozumieć projekt oraz ma ułatwić zespołowi dojście do konsensusu w sprawie procesów oraz najistotniejszych elementów rozwiązania.

Program do tworzenia diagramów

Przed przystąpieniem do tworzenia makiety należy stworzyć schemat drogi, którą użytkownik będzie pokonywał podczas używania produktu. Mogą do tego posłużyć najprostsze programy, takie jak np. Power Point, Miro lub też inny, dowolny – płatny lub darmowy, który pozwala naszkicować kolejne kroki działania.

Program do tworzenia architektury informacji

Do działań tego typu wykorzystać narzędzie z poprzedniego punktu – pomoże to stworzyć wstępną strukturę serwisu oraz schemat ścieżki użytkownika. Dzięki temu w kolejnych krokach będzie prościej i szybciej stworzyć docelową makietę w dedykowanym programie.

Program do prototypowania

Na rynku znajduje się wiele różnych narzędzi, płatnych i darmowych, które różnią się funkcjami i złożonością np. Figma, Axure RP, UXpin, Adobe XD. Warto przetestować kilka i poznać ich możliwości, a wówczas wybrać to, które najlepiej spełnia oczekiwania pracowników.

O czym należy pamiętać podczas tworzenia makiety?

Tworząc makietę UX warto mieć z tyłu głowy kilka aspektów, które mogą zdecydować o sukcesie przedsięwzięcia:

  • wyświetlanie wartości – należy określić, jakie treści oraz ile elementów konieczne są do umieszczenia na ekranach,
  • kolorystyka – makieta strony powinna być kolorystycznie spójna, dlatego dobrze jest przemyśleć tę kwestię. Im więcej barw – tym wcale nie lepiej. Należy więc wybrać zamkniętą skalę kolorów, która ułatwi identyfikację poszczególnych elementów,
  • nawigacja – proste menu, stopka, intuicyjne rozwiązania – tu należy spojrzeć na produkt oczami użytkownika i ułatwić mu poruszanie się po stronie,
  • odstępy między elementami – nie warto przesadzać z ilością grafik i treści. Odpowiednia przestrzeń między elementami wpływa na poprawę czytelności.

Szukasz pomocy przy projektowaniu UX i UI?  Skontaktuj się z nami! Wspólnie znajdziemy dla Ciebie optymalne rozwiązanie!

Udostępnij wpis:

Powiązana publikacja

Sprawdź publikację

polecane wpisy

Zróbmy
coś razem!

Dziękujemy! Wkrótce wrócimy do Ciebie z odpowiedzią
Oops! Something went wrong while submitting the form.
Nikodem krajewski speek into microfon on conference