Co to są makiety i makietowanie?

UX Designer

Kto to jest UX designer?

UX designer, czyli projektant doświadczeń użytkownika, to specjalista zajmujący się projektowaniem interakcji użytkowników z produktami cyfrowymi, takimi jak strony internetowe, aplikacje mobilne, oprogramowanie, i inne. Głównym celem UX designera jest zapewnienie, aby produkty te były intuicyjne, użyteczne i przyjemne w użyciu.

Stara się dobrze poznać potencjalnego odbiorcę usługi / produktu, zrozumieć jego/jej potrzeby, a następnie przygotować makietę kierowanej do niej strony internetowej czy też innego narzędzia lub komunikatu.

Zadania UX designera

Do głównych zadań ux designera/designerki należą:

1. Badania użytkowników (User Research): UX designer zbiera informacje o potrzebach, zachowaniach i problemach użytkowników poprzez wywiady, ankiety, testy użyteczności i obserwacje.

2. Tworzenie person (User Personas): Na podstawie zebranych danych tworzy fikcyjne postacie reprezentujące różne grupy użytkowników, aby lepiej zrozumieć ich potrzeby i cele.

3. Projektowanie interakcji (Interaction Design): UX designer opracowuje sposób, w jaki użytkownicy będą wchodzić w interakcję z produktem, tworząc ścieżki użytkownika, schematy nawigacji i interaktywne prototypy.

4. Projektowanie informacji (Information Architecture): Organizuje i strukturyzuje informacje w produkcie, aby były łatwo dostępne i zrozumiałe dla użytkowników.

5. Testowanie użyteczności (Usability Testing): Przeprowadza testy prototypów z użytkownikami, aby zidentyfikować problemy i wprowadzać odpowiednie poprawki.

6. Współpraca z innymi zespołami: UX designer ściśle współpracuje z projektantami interfejsów (UI designers), programistami, menedżerami produktu i innymi interesariuszami, aby zapewnić spójność i skuteczność projektów.

7. Tworzenie wireframów i prototypów: Przygotowuje szkielety (wireframes) i interaktywne prototypy, które pokazują podstawową strukturę i funkcje produktu.

Dzięki tym działaniom UX designer przyczynia się do tworzenia produktów, które są nie tylko estetycznie atrakcyjne, ale przede wszystkim funkcjonalne i dostosowane do potrzeb użytkowników.

Szukasz UX Designera? Napisz do nas!

Badanie potrzeb użytkowników

Metody, którymi to się robi to np. badania, research, custormer jurney, anailiza konkurencji, badania potrzeb użytkowników - np. wywiad. Efekty wywiadu konfrontujemy z celami firmy i tworzymy koncepcję.

Co to są badania potrzeb użytkowników?

Badania potrzeb użytkowników to proces zbierania i analizowania informacji o użytkownikach, aby lepiej zrozumieć ich potrzeby, oczekiwania, problemy i zachowania. Celem tych badań jest dostarczenie danych, które pomogą w projektowaniu produktów, usług lub systemów, które są bardziej użyteczne, intuicyjne i satysfakcjonujące dla użytkowników. Badania te są kluczowym elementem pracy UX designera. Oto kilka podstawowych metod wykorzystywanych w badaniach potrzeb użytkowników:

1. Wywiady (Interviews): Bezpośrednie rozmowy z użytkownikami, które pozwalają na głębsze zrozumienie ich potrzeb, problemów i doświadczeń. Wywiady mogą być prowadzone twarzą w twarz, przez telefon lub online.
2. Ankiety (Surveys): Kwestionariusze, które są rozsyłane do dużej liczby użytkowników w celu zebrania danych na temat ich preferencji, zachowań i opinii. Ankiety mogą być zamknięte (z wyborem odpowiedzi) lub otwarte (z możliwością wpisania własnej odpowiedzi).
3. Obserwacje (Observations): Bezpośrednie obserwowanie użytkowników w naturalnym środowisku, aby zrozumieć, jak korzystają z produktu lub usługi w rzeczywistych warunkach. Metoda ta pozwala na wykrycie problemów i zachowań, które użytkownicy mogą nie być świadomi.
4. Testy użyteczności (Usability Testing): Użytkownicy wykonują określone zadania z użyciem prototypu lub produktu, podczas gdy badacz obserwuje i analizuje ich interakcje. Celem jest identyfikacja problemów z użytecznością i ocena, jak łatwo użytkownicy mogą osiągnąć swoje cele.
5. Grupy fokusowe (Focus Groups): Dyskusje w małych grupach użytkowników, moderowane przez badacza. Pozwalają na zbieranie opinii i dyskusję na temat produktu, jego funkcji i użyteczności.
6. Dzienniki (Diaries): Użytkownicy prowadzą zapiski na temat swoich codziennych doświadczeń związanych z produktem lub usługą. Dzienniki mogą dostarczać szczegółowych informacji o długoterminowych interakcjach i problemach.
7. Analiza danych (Data Analysis): Analiza danych ilościowych z różnych źródeł, takich jak analityka webowa, logi systemowe, czy dane sprzedażowe. Pozwala to na identyfikację trendów i wzorców w zachowaniach użytkowników.
8. Mapowanie ścieżek użytkownika (User Journey Mapping): Wizualizacja kroków, które użytkownik podejmuje, aby osiągnąć określony cel. Pomaga to zrozumieć cały proces, zidentyfikować punkty styku oraz potencjalne problemy.

Badania potrzeb użytkowników dostarczają kluczowych informacji, które pomagają w tworzeniu lepszych, bardziej dopasowanych do użytkowników produktów i usług. Dzięki tym badaniom możliwe jest zrozumienie rzeczywistych wymagań i oczekiwań użytkowników, co pozwala na bardziej precyzyjne projektowanie i unikanie kosztownych błędów w późniejszych etapach rozwoju produktu.

Makieta

Makieta jest to rysunek (szkic) - będący uproszczoną wizualizacją projektowanego produktu / usługi (np. w szczególności strony www czy też aplikacji).
Makiety występują w wielu odmianach - np. makety Lo-Fi / Hi-Fi.

Makieta Lo-Fi

Makiety Lo-Fi to zwykle szkic na kartce papieru w odcieniach szarości, prezentujący rozmieszczenie elementów, w przybliżonych rozmiarach. Pomaga przedstawić koncepcję. Nie wystarcza do przeprowadzenia badań na użytkownikach.
Ich główną zaletą jest szybkość realizacji i niski koszt.
Najprostszą makietą Lo-Fi jest odręczny szkic na kartce papieru.

Makieta Mid-Fi

To makieta stworzona w programie, w odcieniach szarości, pokazująca realne rozmiary elementów. Często na realnych tekstach.

Makieta Hi-Fi

Makiety Hi-Fi to  makiety klikalne utworzone w profesjonalnej aplikacji do makietowania takiej jak UXpin czy też Axure. Stosuje się w nich realne zdjęcia (produktów, osób) i treści (np. hasła, opisy, teksty). Są zwykle kolorowe i interaktywne. Odzwierciedlają precyzyjnie pomysł na serwis / narzędzie. Interaktywność polega na możliwości nawigacji po podstronach serwisu, ale często też odzwierciedla proponowane animacje interfejsu użytkownika. Są pracochłonne i drogie, ale pomagają zwiększyć jakość końcowego efektu projektowania zupełnie nowych serwisów.

Cel makietowania

Celem makietowania jest lepsze przygotowanie się do projektowania - w szczególności projektowania graficznego. Przedstawienie makiety jako koncepcji pozwala oszczędzić pracy projektantowi graficznemu i przyspiesza produkcję serwisu.

Jaki jest cel makietowania?

Makietowanie (ang. wireframing) jest kluczowym etapem w procesie projektowania interfejsów użytkownika (UI) oraz doświadczeń użytkownika (UX). Głównym celem makietowania jest stworzenie wizualnego i funkcjonalnego szkicu, który przedstawia strukturę i układ elementów na stronie lub w aplikacji. Oto kilka szczegółowych celów makietowania:

1. Wizualizacja Struktury: Makiety pozwalają na przedstawienie ogólnego układu strony lub aplikacji, w tym rozmieszczenia nagłówków, przycisków, pól formularzy, obrazów i innych elementów. Umożliwia to zrozumienie, jak różne części interfejsu będą ze sobą współgrać.
2. Prototypowanie Interakcji: Dzięki makietom można zwizualizować, jak użytkownicy będą wchodzić w interakcje z produktem. Makiety interaktywne (klikalne prototypy) pozwalają na symulację rzeczywistych działań użytkowników, takich jak klikanie przycisków czy nawigowanie między stronami.
3. Komunikacja i Współpraca: Makiety są narzędziem komunikacji między projektantami, programistami, interesariuszami oraz użytkownikami. Ułatwiają zrozumienie wizji projektu, umożliwiając wszystkim zaangażowanym stronom zobaczenie i ocenę proponowanych rozwiązań.
4. Szybkie Iteracje: Tworzenie makiet pozwala na szybkie testowanie różnych pomysłów i koncepcji bez konieczności angażowania dużych zasobów. Dzięki temu można łatwo wprowadzać zmiany i poprawki na wczesnym etapie projektu.
5. Identyfikacja Problemów: Makiety pomagają w wykrywaniu potencjalnych problemów z użytecznością i logiką nawigacji, zanim zostaną one zakodowane. Pozwala to na wprowadzenie niezbędnych modyfikacji, zanim projekt przejdzie do fazy dewelopmentu.
6. Planowanie Treści: Poprzez makietowanie można zaplanować, gdzie i jak treści (tekst, obrazy, multimedia) będą prezentowane na stronie. Pomaga to w organizacji informacji w sposób logiczny i przyjazny dla użytkownika.
7. Osadzenie w Kontekście: Makiety umożliwiają przemyślenie i zaplanowanie, jak produkt będzie używany w rzeczywistych scenariuszach. Można uwzględnić różne scenariusze użytkownika i zrozumieć, jak interfejs będzie się zachowywał w różnych sytuacjach.
8. Dokumentacja: Makiety stanowią formę dokumentacji projektu, która może być używana w przyszłych fazach rozwoju lub podczas wprowadzania kolejnych wersji produktu.

Tworzenie makiet jest kluczowym krokiem w procesie projektowania, który pomaga zapewnić, że finalny produkt będzie nie tylko estetyczny, ale przede wszystkim funkcjonalny i dopasowany do potrzeb użytkowników.

Wybór metody makietowania

W przypadku stron www często wystarcza makieta Lo-Fi (szkic odręczny na kartce papieru). Co więcej często wykonuje ją samodzielnie klient i przedstawia jako załącznik do wymagań na etapie wyceny lub po podpisaniu umowy przed etapem projektowania.
Makiety Hi-Fi są niezbędne dla niestandardowych projektów - portali o unikalnych, nowych funkcjach. Pozwalają chociażby dogłębniej zastanowić się nad funkcjonalnością, przeprowadzić testy na użytkownikach, czego efektem jest ograniczenie kosztów i skrócenie czasu wdrożenia.

Programy do makietowania

Wieloletnim liderem rynku makietowania jest firma Axure. My w Krakweb wykorzystujemy produkt polskiej firmy UxPin, który pozwala na łatwe tworzenie makiet klikalnych i udostępnianie ich oraz pracę zespołową nad nimi - m.in. komentowanie, wersjonowanie projektu. 

Zalety i możliwości UXpin

Wśród innych możliwości Uxpin wymienić można:

• tworzenie makiet responsywnych - dostosowanych do różnorodnych urządzeń mobilnych
• przeprowadzanie testów na użytkownikach dzięki makietom klikalnym i komentowaniu
• współpracę z Photoshopem i innymi narzędziami
• pracę grupową w zespole projektowym