Overlap Studio Wiedza UX Czym są tak naprawdę makiety UX i jak je tworzyć?

Czym są tak naprawdę makiety UX i jak je tworzyć?

5
minut
Share

Aby lepiej poznać znaczenie tworzenia makiet UX, niezbędnym jest na początku zrozumienie, czym tak właściwie jest makieta. Najprościej mówiąc-makieta UX to wizualna reprezentacja elementów na ekranie produktu, np. strony www lub aplikacji, prezentująca ich rozmieszczenie, wielkość i zależności między nimi.

Rozróżniamy 2 podstawowe typy makiet UX:

Lo-fi -(makieta UX o niskim poziomie szczegółowości)-powstaje najczęściej w początkowej fazie projektowania. Prezentuje spojrzenie na ekran z dużego oddalenia, obejmując jedynie podstawowe i kluczowe elementy danego ekranu, zwykle służy jako punkt kontrolny dla zespołu produktu i klienta. Najczęściej powstaje na kartce.

Hi-fi -(makieta UX o wysokim poziomie szczegółowości)-powstaje zazwyczaj w oparciu o wcześniej stworzone makiety lo-fi i jest bardzo zbliżona do wersji końcowej produktu. Podczas tworzenia makiety hi-fi znacznie większy nacisk kładziony jest już na szczegóły poszczególnych elementów. 

Tworzenie użytecznych makiet UX powinno być poprzedzone fazą badawczo-koncepcyjną.

Zacznijmy od etapu poprzedzającego tworzenie makiety, czyli zbudowania koncepcji produktu. Przeprowadzenie badania UX (“Czym są badania UX i kiedy warto je przeprowadzić?“), pomoże nam dowiedzieć się więcej o grupie docelowej, dla której tworzymy produkt. Pomoże nam to poznać  oczekiwania i sposób, w jaki użytkownicy będą korzystać z naszego produktu. Pominięcie tego kroku może skutkować pojawieniem się poważnych błędów, których skutkiem może być zupełne minięcie się z potrzebami użytkowników.

Dobrym punktem wyjścia do zbudowania koncepcji produktu jest analiza konkurencyjnych rozwiązań.

W oparciu o zebrane informacje tworzona jest architektura informacji oraz tzw. flow produktu (diagram przedstawiający zależności między poszczególnymi ekranami), będący bazą do rozpoczęcia prac nad makietami produktu.

Paper prototyping pozwala na szybką walidację danego pomysłu

Często stosowaną techniką, pozwalającą szybko zwalidować jakiś pomysł, jest tzw. paper-prototyping, czyli tworzenie reprezentacji projektu na kartce papieru, o niskim stopniu złożoności.

Paper prototyping pozwala na weryfikację, czy wszystkie ścieżki użytkowników są obsłużone (czy wzięliśmy pod uwagę wszystkie możliwe interakcje użytkownika z produktem i nie ma żadnych ślepych uliczek). Jest również bardzo dobrą bazą do dalszej pracy nad makietami, poprzez ich rozbudowywanie na kolejnych krokach.

Makieta UX a paper prototyping

Dlaczego tworzenie makiet UX jest ważne?

Często zadawanym pytaniem jest – “Po co tak właściwie są makiety UX, skoro cały proces tworzenia będziemy powtarzać przy tworzeniu designu? ”.Przede wszystkim, wytworzenie makiety zajmuje znacznie mniej czasu, niż przygotowanie całego wyglądu docelowego produktu. Kolejną, bardzo istotną kwestią z punktu widzenia UX Designera jest fakt, że cała jego uwaga skupiona jest na projektowaniu interakcji pomiędzy użytkownikiem a systemem, a nie na designie, a na tym etapie procesu projektowania jest to kluczowa materia. Po trzecie, co ważne z punktu widzenia UI Designera-od tej pory może w pełni się skupić na efektach wizualnych projektu. Nie musi więc tracić czasu na zastanawianie się nad elementami, które muszą znaleźć się na ostatecznym widoku.

Taki model pracy stwarza najbardziej efektywne warunki do osiągnięcia satysfakcji zarówno klienta, dla którego tworzymy projekt, jak i przede wszystkim-przyszłego użytkownika systemu. 

Anatomia makiety UX

Co powinieneś wziąć pod uwagę przy tworzeniu makiety?

sposób wyświetlania wartości-na tym etapie powinniśmy już wiedzieć, jakie treści i ile elementów rozmieścimy na każdym ekranie. 

ilość kolorów-dobra makieta jest spójna kolorystycznie.  O wiele lepszym rozwiązaniem będzie stworzenie szaro-białej makiety, niż dodanie kolejnych kolorów-pozwoli nam to na lepszą identyfikację przeznaczenia poszczególnych elementów na stronie.

elementy nawigacyjne

odstępy pomiędzy elementami-należy pamiętać, że pusta przestrzeń nie zawsze oznacza braki w projekcie. Wręcz przeciwnie-często jest odpowiedzialna za poprawienie zrozumienia i czytelności treści prezentowanych użytkownikowi. Warto także korzystać ze stałych elementów, dostępnych w programach do tworzenia makiet i nie szukać własnych ikon i obrazów – dzięki temu zachowamy czas i zachowamy spójność projektu.

Anatomia makiety UX

Jakie narzędzia są wykorzystywane do tworzenia makiet UX?

Stojąc przed wyborem najlepszego narzędzia do tworzenia makiety UX, warto rozpatrzyć kilka aspektów:

Odwzorowanie: Jak rozbudowane jest narzędzie w kontekście projektowania wizualnego i interakcji?

Spójność: Jakie funkcje zapewniają spójność projektu w pracy?

Współpraca: Czy możesz współpracować z interesariuszami lub innymi projektantami?

Przekazywanie deweloperom: W jaki sposób narzędzie generuje specyfikację dla programistów?

Obecnie najczęściej używanymi narzędziami do tworzenia makiet są: Sketch, Figma, Adobe UX, Axure. 

Wybór najlepszego narzędzia należy do Ciebie !

Zwiększamy skuteczność stron i aplikacji

  • wykrywamy błędy na stronach
    i w aplikacjach
  • usprawniamy procesy zakupowe
  • projektujemy intuicyjne rozwiązania
  • pomagamy poprawić wyniki
Dowiedz się więcej:
Audyt UX Audyt UX dla e-commerce Projektowanie UX + UI Konsultacje UX Badania UX
Dowiedz się jak możemy Ci pomóc
Skontaktuj się z nami

Dowiedz się, jak możemy Ci pomóc

Zostaw swoje dane lub napisz na office@overlap.studio, a nasz konsultant skontaktuje się z Tobą.

Dziękujemy! Otrzymaliśmy Twoją wiadomość i niebawem się odezwiemy!
Oops! Something went wrong while submitting the form.

Psst: Nikomu nie udostępnimy Twoich danych. Zresztą sprawdź naszą politykę prywatności.