Jak tworzyć makiety o wysokiej wierności: kompletny przewodnik

„Wireframing”, czyli tworzenie makiet produktów w celu zebrania opinii przed zainwestowaniem w pełną wersję, jest praktyką znacznie starszą, niż większość z nas zdaje sobie sprawę. Nawet w średniowieczu inżynierowie (jeśli tak ich wtedy nazywano) tworzyli prototypowe wersje narzędzi i przedmiotów, a następnie prezentowali je swoim władcom przed rozpoczęciem produkcji masowej.

Współczesny świat oprogramowania również naturalnie przyjął ten proces. Jednak w przeciwieństwie do budowania prototypowej wersji produktu, nowoczesne narzędzia do tworzenia makiet i prototypów pozwalają nam testować prototyp na jeszcze wcześniejszym etapie — gdy wciąż znajduje się on w fazie projektowania.

Dzisiejszy temat to najważniejsza część budowania prototypów oprogramowania — makieta o wysokiej wierności, która umożliwia interakcję i ożywia koncepcję.

Zrozumienie makiet o wysokiej wierności

Zanim wyjaśnię, czym są makiety o wysokiej wierności, chciałbym najpierw poruszyć kwestię samego pojęcia wierności makiety.

Wierność odnosi się do poziomu szczegółowości, który uwzględniasz podczas tworzenia makiety produktu. Mogą to być szczegóły wizualne, takie jak kolory komponentów interfejsu użytkownika reprezentujące identyfikację wizualną marki lub obrazy, które powinny znaleźć się na danym ekranie (np. zdjęcia produktów w wynikach wyszukiwania sklepu internetowego).

Oprócz aspektów wizualnych istnieje również wierność treści. Ma to miejsce wtedy, gdy używasz tekstu lub treści zastępczej (np. lorem ipsum) albo rzeczywistych treści (nazw i opisów produktów).

W zależności od poziomu wierności makiety możesz użyć elementów wizualnych w skali szarości o ogólnym wyglądzie i z treścią zastępczą (niska wierność) albo firmowej kolorystyki z elementami systemu projektowego oraz rzeczywistą treścią (wysoka wierność).

Tak wyglądają obok siebie.

Chociaż możesz sądzić, że makiety o wysokiej wierności są oczywistym wyborem przy porównaniu tych dwóch podejść, nie zawsze tak jest. Zaletą makiet o niskiej wierności jest szybkość, z jaką można je projektować, testować z użytkownikami i iteracyjnie udoskonalać.

Dlatego na bardzo wczesnych etapach projektowania zwykle tworzysz kilka iteracji makiety o niskiej wierności, zanim przejdziesz do stworzenia makiety o wysokiej wierności.

Zalety makiet o wysokiej wierności

Makiety o wysokiej wierności, choć ich przygotowanie zajmuje więcej czasu, są bardzo wartościową częścią projektu, ponieważ wiąże się z nimi wiele korzyści. Oto kilka z nich:

• Lepsza komunikacja: Ludzie są wzrokowcami i lepiej rozumieją projekt, gdy używasz odpowiednich kolorów, elementów i treści. Istnieje więc duża szansa, że ta sama osoba zaakceptuje makietę o niskiej wierności, ale znajdzie problemy i przekaże ci uwagi, gdy po raz pierwszy zobaczy wersję o wysokiej wierności.
• Lepsze testowanie użyteczności: Jakość opinii uzyskiwanych od użytkowników poprawi się, gdy pokażesz rzeczywistą treść w takiej formie, w jakiej pojawi się w finalnym projekcie. Strona wyników wyszukiwania w makiecie o niskiej wierności wygląda jak lista szarych pól. Nie możesz stwierdzić, czy elementy na tej stronie łatwo się przegląda, dopóki nie zobaczysz umieszczonych na niej rzeczywistych obrazów i tekstu.
• Prototypowanie: Prototypy, które można klikać, są fatalne, gdy tworzy się je na podstawie makiet o niskiej wierności. Prototypy o wysokiej wierności wyglądają jednak bardzo podobnie do finalnego projektu i są wystarczająco dobre, aby udostępnić je użytkownikom na wczesnym etapie.
• Komunikacja między zespołami inżynieryjnym i projektowym: Możesz udostępnić makiety o wysokiej wierności zespołowi programistycznemu, aby również uzyskać od niego wczesne opinie dotyczące wyzwań i obaw związanych z wdrożeniem. Zawierają one niezbędny poziom szczegółowości, aby programiści mogli zrozumieć, jak je zbudują i z jakimi problemami mogą się potencjalnie zmierzyć.

Wreszcie makiety o wysokiej wierności mogą pokazać tobie i twoim projektantom końcowy wygląd oraz sposób działania produktu, umożliwiając znalezienie niespójności projektowych lub innych problemów wizualnych, które należy naprawić przed ponownym przetestowaniem interfejsu użytkownika.

Narzędzia i oprogramowanie do tworzenia makiet o wysokiej wierności

Chociaż technicznie możesz tworzyć makiety o niskiej wierności na kartce papieru lub tablicy, w przypadku makiety o wysokiej wierności nie masz wyboru i musisz sięgnąć po specjalistyczne narzędzie do projektowania produktów .

Przyjrzyjmy się więc kilku popularnym rozwiązaniom, spośród których możesz wybrać odpowiednie dla siebie, i poznajmy ich możliwości.

Figma

Figma jest liderem rynku cyfrowego projektowania produktów — wybiera ją ponad 40% wszystkich projektantów doświadczeń użytkownika do tworzenia prototypów, przepływów użytkownika i makiet.

Platforma: Internet, komputer stacjonarny (MacOS, Windows)

Gdzie sprawdza się najlepiej: współpraca w czasie rzeczywistym między projektantami, menedżerami i deweloperami, a także obsługa wielu platform.

Jeśli chodzi o funkcje, chciałbym wyróżnić w Figma następujące elementy:

Współpraca: Figma pozwala wielu członkom zespołu jednocześnie pracować nad tym samym plikiem. Możesz zobaczyć kursory wszystkich osób przeglądających lub edytujących plik projektu, dodawać komentarze, a także rozmawiać w czasie rzeczywistym za pomocą niewielkiego pola wiadomości otwierającego się obok kursora.

Obsługa systemu projektowego i komponentów: W Figma możesz tworzyć komponenty wielokrotnego użytku, w tym wiele ich stanów, a także definiować cały system projektowy za pomocą własnych wytycznych i komponentów.

Prototypowanie: Możesz przekształcać swoje projekty w klikalne prototypy, które użytkownicy mogą przeglądać, aby zrozumieć, jakie będą odczucia podczas korzystania z Twojego produktu. Choć nie jest to najbardziej zaawansowany system do prototypowania dostępny na rynku, nadal oferuje spore możliwości.

Sketch

Sketch był najczęściej wybieranym narzędziem do projektowania przed pojawieniem się Figma i jest popularną alternatywą dla Framera oraz innych popularnych narzędzi projektowych. Niektórzy przypuszczają, że wyłączność dla komputerów Mac była jednym z powodów, dla których to skądinąd świetne narzędzie straciło koronę.

Platformy: macOS

Gdzie sprawdza się najlepiej: Sketch można w dużym stopniu dostosować dzięki rozbudowanej obsłudze wtyczek, co czyni go świetnym wyborem w przypadku wyspecjalizowanych potrzeb projektowych.

Przyjrzyjmy się teraz najważniejszym funkcjom Sketch.

Edycja wektorów: W porównaniu z pozostałymi narzędziami Sketch ma prawdopodobnie najbardziej zaawansowane narzędzie do edycji wektorów na rynku, w tym obsługę operatorów logicznych i dopasowania do definiowania kształtów.

Podgląd w przeglądarce: Choć Sketch nie jest pełnoprawnym edytorem, oferuje aplikację internetową do przeglądania projektów, przekazywania zasobów deweloperom i testowania prototypów.

Prototypowanie: Możliwości prototypowania w Sketch są porównywalne z Figma. Możesz tutaj również łączyć obszary robocze w przepływ, sprawiać, że elementy będą klikalne, i robić znacznie więcej.

Adobe XD

To odpowiedź giganta branży oprogramowania kreatywnego, firmy Adobe, na ostrą konkurencję na rynku tworzenia makiet oraz projektowania UI/UX.

Platformy: macOS, Windows

Gdzie sprawdza się najlepiej: Adobe XD jest w pełni zintegrowany z pakietem Creative Cloud, dzięki czemu umożliwia płynne importowanie projektów i zasobów z innych narzędzi Adobe oraz z innych źródeł.

Po zapoznaniu się z możliwościami tego narzędzia warto wspomnieć jeszcze o następujących funkcjach:

Prototypowanie: Adobe XD wyróżnia się możliwością prototypowania mikrointerakcji, oprócz standardowego zestawu funkcji do prototypowania.

Animacje: Biorąc pod uwagę, że firma ta stworzyła After Effects, nie dziwi fakt, że Adobe XD oferuje bardziej zaawansowane możliwości animowania elementów interfejsu.

Współpraca: Choć nie jest tak zaawansowany jak Figma, Adobe XD pozwala kilku osobom jednocześnie edytować projekt.

Axure RP

Podczas gdy pozostałe narzędzia były ogólnymi narzędziami do projektowania UI/UX, które służyły również do tworzenia makiet i prototypów, to narzędzie koncentruje się konkretnie na tych ostatnich.

Platformy: macOS, Windows

Gdzie sprawdza się najlepiej: Jako wyspecjalizowane narzędzie Axure RP pozwala rozwijać prototypy za pomocą złożonych interakcji i ścieżek użytkownika.

Przyjrzyjmy się teraz funkcjom, które oferuje to narzędzie:

Zaawansowana logika: Zamiast prostego działania „kliknij, aby otworzyć następną tablicę”, Axure RP pozwala dodać do prototypów złożoną logikę. Oznacza to, że możesz otwierać menu i wybierać elementy, a projekt oraz treść będą dynamicznie zmieniać się w zależności od dokonanego wyboru lub innych podobnych działań.

Dokumentacja przekazania: Chociaż niemal wszystkie wymienione tutaj produkty oferują przekazanie projektu deweloperom, Axure RP jest jedyną opcją, w której można tworzyć bardzo szczegółową dokumentację opisującą projekt i jego logikę.

Diagramy przepływu: Oprócz projektowania makiety o wysokiej wierności możesz także używać Axure RP do tworzenia diagramów przepływu opisujących ścieżkę użytkownika i logikę biznesową stojącą za projektem.

Podsumowując, nie ma jednoznacznego zwycięzcy w kategorii „najlepsze narzędzie do tworzenia makiet o wysokiej wierności”. Wymienione tutaj narzędzia, podobnie jak te uwzględnione w naszym starannie wybranym zestawieniu narzędzi do projektowania UX, mają zarówno zalety, jak i wady. Ostatecznie wszystko zależy więc od preferencji i od tego, które aspekty są najważniejsze dla Ciebie i Twojego zespołu.

Najlepsze praktyki tworzenia makiet o wysokiej wierności

Gdy w procesie projektowym nadejdzie moment opracowania tego typu makiety, pamiętaj o tych wskazówkach, aby jak najlepiej wykorzystać makietę o wysokiej wierności.

Najlepsze praktyki procesu tworzenia makiet

• Upewnij się, że persona użytkownika jest aktualna. Prawdopodobnie masz już wersję persony wykorzystaną do stworzenia pierwszej makiety o niskiej wierności. Ta persona będzie jednak najpewniej nieaktualna, ponieważ przeprowadziłeś już kilka iteracji testów z jej udziałem i odkryłeś wiele nowych aspektów jej osobowości oraz potrzeb.
• Przed rozpoczęciem pracy nad makietą o wysokiej wierności przeanalizuj wszystkie wcześniejsze opinie użytkowników. Możliwe, że wśród opinii uzyskanych od użytkowników oceniających wersję o niskiej wierności znalazły się uwagi, które uznałeś wtedy za nieistotne, ale które teraz okażą się bardzo ważne.
• Nie istnieje coś takiego jak „wersja finalna” makiety. Nie poświęcaj zbyt wiele uwagi drobnym szczegółom. Zamiast pracować nad szczegółową makietą przez tygodnie, wprowadź kilka zmian i przetestuj ją w praktyce. Im krótszy będzie cykl, w którym zespół dodaje pomysły projektowe, a użytkownicy je testują, tym szybciej makieta będzie gotowa, by stać się finalnym projektem.
• Wykorzystuj komponenty i szablony systemu projektowego. Nikt nie przyznaje nagród za rozpoczynanie od zera! Korzystanie z tych szablonów pozwala zaoszczędzić dużo czasu, a rezultat będzie wyglądał możliwie najbardziej zbliżenie do finalnego projektu.

Wskazówki dotyczące projektowania makiet

Oprócz powyższych porad dotyczących skutecznego prowadzenia procesu projektowego poniżej znajdziesz wskazówki odnoszące się do samego projektu.

• Zachowaj spójność projektu. Chociaż nadal jest to makieta, a nie finalny projekt, sugeruję zachowanie spójności wszystkich elementów, w tym kolorów, typografii i pustej przestrzeni. Dzięki temu osoby testujące projekt nie będą doświadczać niepotrzebnych problemów z użytecznością ani przekazywać Ci wyników obciążonych błędem.
• Zachowaj hierarchię wizualną. Technicznie powinna ona być już obecna także w wersji o niskiej wierności. Jeśli jednak jej tam nie ma, dodaj ją tutaj. Następnie możesz wykorzystać swoje makiety o wysokiej wierności do przetestowania skuteczności hierarchii wizualnej.
• Dodaj do projektu elementy dostępności. Makiety o wysokiej wierności są również świetnym narzędziem do testowania dostępności projektu. Upewnij się więc, że ustawisz odpowiednie poziomy kontrastu dla różnych nachodzących na siebie elementów, i pamiętaj także o innych aspektach dostępności.

Na koniec nie zapomnij zapewnić pomocy wizualnych użytkownikom testującym projekt. Jest to szczególnie istotne, gdy testujesz tylko część projektu produktu, a niektóre ekrany lub kroki są pominięte. Aby uniknąć dezorientowania użytkowników, pokaż notatki wyjaśniające, w którym miejscu ścieżki znajdują się w danym momencie i co powinni zrobić.

Zaawansowane techniki tworzenia makiet o wysokiej wierności

Opisane powyżej najlepsze praktyki pozwolą Ci uzyskać „wystarczająco dobrą” wersję makiety o wysokiej wierności. Jeśli jednak chcesz stworzyć coś wyjątkowego, rozważ zastosowanie tych zaawansowanych technik.

Interaktywne makiety

Niektóre popularne narzędzia do tworzenia makiet mają wbudowane funkcje prototypowania. Dlaczego więc z nich nie skorzystać i nie ożywić swojej makiety? Możesz sprawić, że elementy interfejsu będą klikalne, i pozwolić użytkownikom przechodzić z jednego ekranu do drugiego, naśladując ścieżkę, którą będą pokonywać w rzeczywistej aplikacji. Sugeruję dodanie animowanych przejść, które sprawią, że zmiana strony lub ekranu będzie bardziej widoczna dla użytkowników.

Możesz także dodać animacje i przejścia do różnych elementów aplikacji mobilnej lub projektu internetowego i sprawdzić, czy pomagają użytkownikom zauważyć określony element na ekranie lub wejść z nim w interakcję w zamierzony sposób.

Elementy projektu wizualnego

Aby makieta o wysokiej wierności odpowiednio przedstawiała Twój produkt i markę, możesz także rozważyć uwzględnienie następujących elementów:

• Typografia: Czcionki, odstępy i kolory tekstu określone w wytycznych projektowych.
• Elementy marki: Twoje logo, kolory marki i zasoby wizualne reprezentujące Twoją markę.
• Rzeczywista treść: Zamiast wpisywać lorem ipsum w miejscu, w którym w projekcie aplikacji e-commerce powinien znajdować się opis produktu, napisz rzeczywisty opis produktu.
• Rzeczywiste zasoby wizualne: Jeśli planujesz umieścić na ekranach ilustracje lub obrazy, dodaj je również.
• Gradienty i cienie: Dzięki nim makieta będzie wyglądać bardziej realistycznie, a Ty będziesz mógł dodać warstwę hierarchii wizualnej lub interakcji.

Uwaga: Jeśli chodzi o wyróżnianie interakcji za pomocą cieni, najlepszym rozwiązaniem jest system projektowy Material Design firmy Google. Wykorzystuje on cienie do pokazywania poziomu uniesienia i informowania użytkownika, czy na elemencie znajduje się kursor, czy został on kliknięty, czy też pozostaje nieaktywny.

Wskazówki dotyczące współpracy zespołowej

Zarówno prototypowanie, jak i tworzenie makiet nigdy nie są zadaniami dla jednej osoby. Możesz tworzyć je ze swoim zespołem projektowym, przeprowadzać burzę mózgów z menedżerem produktu lub omawiać je z interesariuszami.

Dlatego sugeruję wykonanie następujących działań, aby ułatwić współpracę i proces tworzenia projektów:

• Organizuj regularne sesje burzy mózgów. Zapraszaj menedżera produktu i innych projektantów. Być może warto zaprosić także inżyniera, ponieważ pomoże Ci wybrać projekt najlepiej uzasadniony pod względem technicznym. Kluczowe jest tutaj słowo „regularne” — spotkania mogą odbywać się raz w tygodniu, co 2 tygodnie lub rzadziej. Ważne jest jednak, aby zawsze je organizować, ponieważ pomagają opracowywać interesujące rozwiązania problemów projektowych.
• Przeprowadzaj regularne przeglądy projektów. Jeśli pracujesz w zespole, prześlij swój projekt do wzajemnej oceny i pozwól kilku osobom spojrzeć na niego świeżym okiem oraz znaleźć problemy, które mogły Ci umknąć. Ten proces znacząco podnosi jakość projektu i pomaga zachować jego spójność.
• Dokumentuj swoje przemyślenia i komentarze. Dodawaj do projektu adnotacje i komentarze, które wyjaśniają określone decyzje projektowe lub zapewniają współpracownikom odpowiedni kontekst.

Na koniec upewnij się, że wszystko, co tworzysz, jest zgodne ze strategią firmy i wizją produktu. Porozmawiaj na ten temat z zespołem produktowym i kadrą kierowniczą.

Testuj projekt tak, jakby był już gotowym produktem.

Prawdopodobnie najważniejszą korzyścią ze stosowania makiet o wysokiej wierności jest ich zdolność do przedstawiania produktu w formie możliwie najbardziej zbliżonej do wersji końcowej. Dzięki temu użytkownicy mogą przetestować wizualną reprezentację produktu bez konieczności budowania jego rzeczywistej wersji.

Dlatego zdecydowanie zachęcam Cię do przyjęcia procesu tworzenia makiet i wykorzystywania go do testowania projektu oraz hipotez w ramach procesu projektowego. Mam nadzieję, że przedstawiłem wystarczająco dużo informacji i przydatnych wskazówek, aby pomóc Ci w pełni wykorzystać jego możliwości.

Jeśli jednak chcesz dokładniej zgłębić ten temat, sugeruję przeczytanie kompletnego przewodnika po tworzeniu makiet. Oprócz tego możesz także zapisać się do naszego newslettera, aby otrzymywać więcej materiałów i przewodników dotyczących zarządzania produktem.