Jestem przekonany, że słyszałeś o korzyściach płynących z tworzenia makiet funkcjonalnych podczas kursów z zarządzania produktem albo od współpracowników czy znajomych z branży. Zakładam również, że próbowałeś już wprowadzić w swoim produkcie jakąś formę procesu tworzenia makiet funkcjonalnych.
Ale czy Twój proces działa dobrze? Czy sposób, w jaki obecnie tworzysz makiety funkcjonalne, pozwala Ci czerpać z nich maksimum korzyści? Cóż, tak naprawdę zależy to od stosowanego procesu.
Aby pomóc Ci zwiększyć skuteczność tworzenia makiet funkcjonalnych, podzielę się swoim doświadczeniem i opowiem Ci o procesie tworzenia makiet funkcjonalnych, który uważam za najlepszy z dostępnych.
Tworzenie makiet funkcjonalnych jest niezbędną częścią procesu projektowania UX
Makiety funkcjonalne to wysokopoziomowe wizualne reprezentacje Twojego produktu, których możesz użyć, aby zobrazować, jak produkt ma wyglądać i działać. Dzięki tym wizualizacjom możesz testować i iterować swój pomysł, zanim poprosisz inżynierów o rozpoczęcie prac i procesu tworzenia produktu — oszczędzając czas i pieniądze.
Bardzo podoba mi się definicja tworzenia makiet funkcjonalnych autorstwa ekspertów w dziedzinie doświadczeń użytkownika z NN/g, ponieważ pokazuje ona kluczową korzyść, jaką można z tego czerpać.
Szybka i opłacalna technika wczesnego identyfikowania głównych problemów z użytecznością za pomocą szkiców i papieru. Idealnie pasuje do procesów Agile i Lean.
Niezależnie od tego, którą metodę tworzenia makiet funkcjonalnych wybierzesz (rysowanie na papierze jest jak najbardziej w porządku!) ani z jakiego narzędzia do tworzenia makiet funkcjonalnych zdecydujesz się korzystać (w tym celu sprawdź naszą listę najlepszych narzędzi do tworzenia makiet funkcjonalnych), zalecam stosowanie się do tego procesu, który opracowałem po wypróbowaniu praktycznie każdego istniejącego procesu tworzenia makiet funkcjonalnych.
Krok 1: Upewnij się, że wystarczająco dobrze znasz swoich użytkowników
Świetny projekt zaczyna się od zespołu, który dobrze zna swoich użytkowników. W końcu kto potrzebuje Twojego projektu i produktu, który on obrazuje, jeśli produkt nie jest w stanie odpowiednio zaspokoić potrzeb osób, dla których został przeznaczony? Dlatego najważniejszym krokiem, który powinieneś podjąć przed rozpoczęciem tworzenia makiet funkcjonalnych, są badania użytkowników.
W rzeczywistości badania użytkowników powinny być kontynuowane przez cały cykl życia procesu tworzenia makiet funkcjonalnych (a także później), ale skupmy się na początkowej fazie, w której próbujesz zrozumieć potrzeby i codzienną rzeczywistość swoich przyszłych klientów.
Oto kilka ważnych działań, które zalecam wykonać podczas tej fazy:
Wywiady eksploracyjne: Chcesz wiedzieć, czego chcą Twoi użytkownicy? Może więc warto zapytać ich bezpośrednio? Możesz zacząć od przygotowania listy pytań, które pomogą użytkownikom opowiedzieć o problemach, z jakimi się mierzą, oraz rozwiązaniach, których używają do ich rozwiązywania.
Następnie możesz skontaktować się z potencjalnymi użytkownikami i zrekrutować ich za pośrednictwem mediów społecznościowych, wyspecjalizowanych platform, takich jak Userinterviews lub Respondent, albo nawet spotkać ich podczas targów branżowych.
Na koniec przeprowadzasz wywiad z użyciem rejestratora (aby móc przeanalizować go później) albo w obecności współpracownika, który siedzi obok Ciebie i robi notatki.
Uwaga: Najlepiej będzie, jeśli zrobisz jedno i drugie.
Ankiety: Podczas gdy wywiady są świetnym źródłem danych jakościowych, które pomagają odkryć przyczyny potrzeb i zachowań użytkowników, ankiety dostarczają połączenia danych jakościowych i ilościowych, umożliwiając potwierdzanie ustaleń z istotnością statystyczną.
Nie będę się tutaj zbytnio zagłębiał w szczegóły, ponieważ mamy cały przewodnik dotyczący pytań ankietowych, z którym możesz się zapoznać.
Badania terenowe: W tym przypadku obserwujesz swoich użytkowników w ich „naturalnym środowisku”. Oznacza to, że jesteś obecny wirtualnie lub fizycznie w środowisku, w którym docelowi użytkownicy doświadczają problemów, które chcesz rozwiązać.
Załóżmy na przykład, że tworzysz narzędzie, które ułatwi edytowanie filmów w mediach społecznościowych. Twoje badanie terenowe polegałoby na obserwowaniu procesu, w którym influencer z mediów społecznościowych nagrywa film na TikToku, edytuje go i przesyła na swój kanał.
Chociaż badania terenowe są stosunkowo trudne do zorganizowania (nie wszyscy użytkownicy będą czuć się komfortowo, gdy będziesz obserwować ich codzienne aktywności), zapewniają najbogatszy kontekst i najwięcej informacji na temat użytkowników.
Warsztaty odkrywania z interesariuszami: Tak, świetny projekt doświadczenia użytkownika opiera się na potrzebach użytkowników, ale nie zapominajmy również o kluczowych interesariuszach. Chociaż Twoi użytkownicy także są interesariuszami, będę używać tego określenia w odniesieniu do założycieli i kadry kierowniczej najwyższego szczebla, inwestorów, wszelkich organów prawnych lub regulacyjnych, z którymi musisz współpracować itd.
Czasami podejmujesz decyzje projektowe nie na podstawie potrzeb użytkowników, ale z uwzględnieniem:
- Twojej wizji i strategii: Użytkownicy Apple uwielbiają przewody i połączenia przewodowe, ale wizją Apple jest bezprzewodowość — dlatego firma wciąż usuwa kolejne porty. (Teraz już wiesz!)
- Twojego otoczenia prawnego: Ogromny wybór opcji dotyczących plików cookie nie jest najbardziej przyjaznym dla użytkownika interfejsem, ale może być czymś, co jesteś prawnie zobowiązany wyświetlać.
Istnieją również argumenty przemawiające za intuicją — mimo dobrej znajomości użytkowników możesz odwołać się do własnej intuicji, aby podjąć określoną decyzję projektową.
Mając jasność co do koncepcji i rodzajów badań, zobaczmy na przykładzie, jak będzie to wyglądać w rzeczywistości.
Have an account? Log In
Przykład 1: Tworzenie narzędzia do tworzenia makiet dla specjalisty UI
Wyobraź sobie, że odpowiadasz za stworzenie narzędzia do tworzenia makiet (czegoś podobnego do Balsamiq) i chcesz dokładnie wiedzieć, w jaki sposób będą z niego korzystać docelowi użytkownicy (w tym przypadku zespoły projektowe) oraz jakie problemy chcą dzięki niemu rozwiązać.
Aby się tego dowiedzieć, możemy przygotować kwestionariusz, który chcemy zadać użytkownikom podczas wywiadu. Oto, co możemy w nim uwzględnić:
Załóżmy teraz, że dowiadujemy się, iż opinie mają najczęściej formę komentarza dotyczącego konkretnego fragmentu makiety produktu, a menedżer produktu musi zatwierdzić projekt makiety. Są to dwa ustalenia, które bezpośrednio wpłyną na nasz projekt, ponieważ musimy zaprojektować przepływ pracy i interfejs użytkownika umożliwiające komentowanie makiety oraz jej zatwierdzanie.
Podsumowując, przeprowadzenie badań rozpoznawczych jest najważniejszą częścią procesu tworzenia makiet i nie zalecałbym ich pomijania. Teraz, mając wszystkie wnioski, przejdźmy do kolejnego etapu naszego procesu tworzenia makiet.
Krok 2: Tworzenie przepływów użytkownika
Zanim utworzysz poszczególne ekrany/strony i umieścisz na nich komponenty, takie jak formularze, karty, obrazy, przyciski itp., musisz zrozumieć sekwencję kroków, które — jak zakładasz — podejmą użytkownicy.
Sekwencje te są również znane jako przepływy użytkownika i przedstawiają wszystkie możliwe ścieżki, które użytkownicy mogą obrać, aby osiągnąć swoje cele. Cele te mogą być czymś zwyczajnym i „administracyjnym”, na przykład rejestracją lub zmianą hasła, albo mogą reprezentować kluczowe funkcje produktu (takie jak wyszukiwanie i strumieniowe odtwarzanie muzyki w Spotify).
Tak czy inaczej, tworzenie przepływów użytkownika jest ważne, ponieważ pomoże ci lepiej zwizualizować wszystkie ekrany/strony, które chcesz zaprojektować, a także treści, których potrzebujesz na każdym z nich.
Aby lepiej zrozumieć przepływy, pokażę ci jeden z nich przy użyciu narzędzia do tworzenia schematów przepływu Flowmapp.
Przykład 2: Wizualizacja przepływu użytkownika narzędzia do projektowania stron internetowych za pomocą Flowmapp
Załóżmy, że tworzysz narzędzie do projektowania stron internetowych z funkcją przeciągania i upuszczania, takie jak Webflow. Twoimi użytkownikami są projektanci stron internetowych korzystający z narzędzi niewymagających kodowania, a ty chcesz zobrazować kroki, które wykonają, aby dodać obraz tła do swojej strony internetowej.
Tak będzie wyglądać przepływ użytkownika dla tej funkcji w Flowmapp:
Jak widzimy, w przepływie użytkownika nacisk kładzie się bardziej na działania wykonywane przez użytkownika oraz sekwencję i zależności przyczynowe między nimi niż na strony i ich projekt.
W tym przykładzie chcemy, aby użytkownik mógł wybrać obraz z galerii lub przesłać/dodać go do galerii. Chcemy również, aby użytkownik mógł wyświetlić podgląd obrazu, zanim nasze narzędzie zastosuje go jako tło strony internetowej użytkownika.
Patrząc na ten przepływ, rozumiemy, że użytkownik pozostanie na tej samej stronie — w edytorze strony internetowej — i być może zobaczy kolejny ekran przedstawiający galerię obrazów w formie wyskakującego okna.
Do zaprojektowania pozostają więc strona i wyskakujące okno wraz z odpowiednimi elementami projektu i funkcjami.
Mając ogólny obraz kroków podejmowanych przez użytkowników w celu osiągnięcia celów w naszym produkcie, możemy wreszcie rozpocząć właściwy proces tworzenia makiet.
Krok 3: Rozpoczęcie od makiety o niskiej szczegółowości
Tak, tworzenie makiety jest trzecim krokiem tego procesu. Uwierz mi jednak, że wykonanie dwóch poprzednich etapów podniesie jakość twojej makiety na zupełnie nowy poziom i zdecydowanie warto poświęcić na nie czas.
Jeśli chodzi o sam wireframe, zalecam rozpoczęcie od wersji o niskiej wierności. Wireframe o niskiej wierności nie będzie zawierał żadnych szczegółowych informacji, takich jak właściwe kolory i rozmiary ani innych atrybutów projektu stron i ekranów. Nie będzie też zawierał rzeczywistych obrazów ani tekstu. Zamiast tego w obu przypadkach użyjesz elementów zastępczych.
Istnieje dobry powód, dla którego wireframe o niskiej wierności wygląda w ten sposób i dla którego warto od niego zacząć — wireframe’y o niskiej wierności można szybko tworzyć i edytować.
Istnieje duże prawdopodobieństwo, że przeoczyłeś coś bardzo ważnego w swoim projekcie. Podczas zbierania opinii na jego temat (omówimy to szczegółowo w kolejnym kroku) możesz zrozumieć, że wiele elementów i przepływów wymaga zmiany.
Gdybyś miał kompletny projekt, wprowadzenie tych zmian zajęłoby ci kilka dni. Jednak w przypadku wireframe’u o niskiej wierności możesz nanieść poprawki i przedstawić projekt do kolejnej rundy opinii w ciągu kilku godzin lub krócej.
Skoro poświęciliśmy tyle uwagi wireframe’om o niskiej wierności, przyjrzyjmy się temu, jak wyglądają, korzystając z popularnego narzędzia do tworzenia wireframe’ów — Balsamiq.
Przykład 3: Tworzenie wireframe’u strony internetowej
Zaletą narzędzi projektowych wyspecjalizowanych w tworzeniu wireframe’ów, zwłaszcza wireframe’ów o niskiej wierności, jest to, że nie musisz rysować każdego elementu od podstaw.
Zazwyczaj zawierają one różnorodne gotowe, podstawowe elementy interfejsu (np. obrazy, menu, okruszki nawigacyjne, przyciski itd.), a także funkcje przeciągania i upuszczania, dzięki którym projektowanie jest wyjątkowo szybkie. Oto przykład utworzony przeze mnie za pomocą Balsamiq.
Ze względu na charakter wireframe’ów o niskiej wierności zwykle są one utrzymane w skali szarości lub zawierają minimalną ilość kolorów i elementów wizualnych. Widać w nich przede wszystkim ogólny wygląd elementów interfejsu użytkownika w projekcie, a także ich rozmieszczenie i architekturę informacji.
Jeśli wireframe o niskiej wierności jest już gotowy, czas przedstawić go do pierwszej rundy oceny.
Krok 4: Wprowadzaj iteracje w projekcie o niskiej wierności wewnątrz zespołu
Zanim zainwestujesz czas i wysiłek w tworzenie finalnego projektu produktu, załóżmy rozsądnie, że wiele rzeczy zrobiliśmy źle lub zapomnieliśmy uwzględnić w projekcie, i zacznijmy pokazywać nasz wireframe o niskiej wierności współpracownikom oraz interesariuszom.
Oczywiście możesz pokazać ten projekt również użytkownikom. Jednak biorąc pod uwagę trudność w znalezieniu użytkowników, którzy chcieliby ocenić twój projekt lub przeprowadzić jego test użyteczności, zalecam wykorzystanie ich cennego czasu na sprawdzenie projektów o wyższej wierności, zamiast marnowania go na wskazywanie problemów, które twoi współpracownicy mogliby z łatwością znaleźć.
Zdecydowanie zalecam jednak zaangażowanie interesariuszy na tym etapie. Dwa najważniejsze powody to:
- Skrócenie „dystansu” między nimi a członkami zespołu tworzącymi produkt poprzez zaangażowanie ich już od wczesnych etapów.
- Rozwiązywanie problemów projektowych związanych z dopasowaniem do strategii na wczesnych etapach, aby zaoszczędzić czas w późniejszym okresie.
Gdy tylko zbierzesz opinie od współpracowników i interesariuszy, możesz poprawić wireframe o niskiej wierności na ich podstawie, zweryfikować z nimi wprowadzone poprawki i przejść do tworzenia właściwego projektu wizualnego produktu.
Krok 5: Przygotuj wireframe o wysokiej wierności i klikalny prototyp
Skoro dobrze rozumiesz już ogólny wygląd swojego projektu, możesz bezpiecznie zainwestować w stworzenie jego elementów wizualnych i doprowadzenie go do stanu, w którym będzie wyglądał możliwie najbardziej podobnie do tego, co zamierzasz zbudować.
Na tym etapie projektowania twój cyfrowy wireframe będzie zawierał:
- Projekt interfejsu użytkownika: w tym odpowiednie kolory, cienie, typografię i czcionki, marginesy itd.
- Treści wizualne: jeśli planujesz umieścić na swoich stronach obrazy, ilustracje, filmy lub inne elementy graficzne, właśnie teraz należy je dodać.
- Treść strony: chodzi o tekst znajdujący się w elementach interfejsu użytkownika, przyciskach, nagłówkach itd.
- Przykładową wersję treści: jeśli twój projekt obejmuje treści generowane przez użytkowników lub własne treści, należy dodać również ich przykładową wersję. (Na przykład projekt komentarza pod wpisem, który ma typowy rozmiar i treść komentarza, jaki zamieściliby rzeczywiści użytkownicy).
Oprócz tego, że wireframe o wysokiej wierności jest głównym materiałem przekazywanym zespołowi inżynieryjnemu, który zbuduje produkt na podstawie jego projektu, może również służyć jako świetne narzędzie do testów użyteczności z udziałem rzeczywistych użytkowników.
Do testu możesz wykorzystać sam wireframe o wysokiej wierności albo pójść o krok dalej, dodając do niego projekt interakcji i przekształcając go w klikalny prototyp.
Naprawdę łatwo pomylić terminy, o których tutaj mówiłem (makiety szkieletowe o wysokiej wierności, interaktywne prototypy itd.). Pozwólcie więc, że je wyjaśnię, a także pokażę kilka przykładów.
More Articles
Rozróżnianie rodzajów makiet szkieletowych: makiety wizualne a makiety szkieletowe o wysokiej wierności i klikalne prototypy
Te trzy pojęcia są do siebie bardzo podobne i niestety używa się ich zamiennie, co powoduje zamieszanie wśród osób, które dopiero poznają świat produktów i projektowania.
Oto, co oznacza każdy z tych terminów:
Makieta szkieletowa o wysokiej wierności: Wspomnieliśmy już o niej powyżej. Zamiast więc ponownie ją opisywać, pokażę, jak wygląda.
Ten przyciągający uwagę projekt dotyczy usługi, która umożliwia wynajęcie prywatnych szefów kuchni do przygotowywania wykwintnych dań. Jak widać, projekt zawiera wszystko — od końcowych obrazów po kolory i rozmieszczenie elementów. Widnieje na nim również fragment tekstu „lorem ipsum”, który reprezentuje opinię profesjonalnego szefa kuchni na stronie.
Makieta wizualna: W przeciwieństwie do swojego odpowiednika makieta wizualna nie obejmuje wyłącznie końcowego projektu, lecz pokazuje również otoczenie, w którym ten projekt się pojawia. Generatory makiet produktów mogą pomóc w tworzeniu takich wizualizacji kontekstowych. Jeśli na przykład projektujesz papier firmowy, makieta wizualna przedstawiałaby kartkę papieru na stole, z umieszczonym na niej projektem.
W przypadku aplikacji mobilnej makieta wizualna przedstawiałaby sylwetkę iPhone’a lub urządzenia z systemem Android, a Twój projekt byłby widoczny na ekranie.
Prototyp: Prototyp wygląda jak makieta szkieletowa o wysokiej wierności, ale oprócz końcowego wyglądu próbuje również odwzorować funkcjonalność produktu.
Dzięki klikalnym prototypom lub narzędziom do prototypowania 3D możesz dodać podstawową interaktywność, taką jak przewijanie, animacje, klikanie przycisków, poruszanie się po aplikacji itd.
Odwzorowując interaktywność produktu, prototypy pozwalają przetestować sposób działania funkcji, zanim je opracujesz.
Co więcej, możesz przeprowadzić testy z użytkownikami, udostępniając im prototypy o wysokiej wierności i obserwując, jak wchodzą w interakcję z produktem, rozwiązują swoje problemy lub próbują odnaleźć się w projekcie.
Tworzenie makiet szkieletowych to gra w testowanie i iterację
Iteracyjny charakter makiet szkieletowych pozwala zaoszczędzić mnóstwo wysiłku potrzebnego na poprawianie błędów. Co więcej, przechodząc przez taki proces tworzenia makiet szkieletowych, masz pewność, że użytkownicy otrzymają produkt, który najlepiej zaspokoi ich potrzeby.
Czy w Twojej firmie stosujecie inny proces tworzenia makiet szkieletowych? Chętnie się dowiem, więc zostaw komentarz poniżej i opowiedz nam, jak to robicie!
Mam nadzieję, że ten przewodnik Ci się spodobał i okazał się przydatny. Koniecznie zapoznaj się z innymi przewodnikami dotyczącymi zarządzania produktem, napisanymi przez najlepszych specjalistów w tej dziedzinie, takich jak:
- Różnica między wizją produktu a strategią produktu autorstwa Kerstin Exner.
- 3P produktu autorstwa Benoit des Ligneris.
- Dokumenty wymagań produktu autorstwa Sarah Tolle.
Na koniec możesz zapisać się do naszego newslettera, a my również będziemy wysyłać interesujące treści prosto do Twojej skrzynki odbiorczej.