Jak stworzyć makietę UX HiFi?

Makieta naszej strony www, aplikacji czy produktu webowego jest bardzo istotnym elementem, a jego tworzenie jest podstawową umiejętnością każdego UX designera. Makieta czyli wstępnie działający model ma nam pomóc w ewaluacji naszych założeń, które mogą być błędne. Dlatego zanim przejdziemy do niesamowicie drogiego etapu jakim jest tworzenie przez naszych programistów gotowego produktu, powinniśmy go przetestować. Postanowiłem opisać jedną z dróg tworzenia makiety UX.

Dlaczego warto tworzyć makietę UX?

• Możemy bardzo szybko sprawdzić jak użytkownicy zareagują na nasz produkt
• Oszczędzamy czas i pieniądze programistów które były by potrzebne na modyfikowanie niesprawdzonego wcześniej produktu
• Oszczędzamy użytkownikom frustracji, którzy musieliby poznać potencjalnie nieintuicyjną filozofię działania
• Oszczędzamy czas całemu zespołowi dzięki dokładnemu zaplanowaniu naszego działającego produktu
• Tworząc makietę dużo łatwiej jest wycenić jej koszt oraz czasochłonność przez front-endowców oraz programistów
• Możemy szybko usunąć błędy które utrudniają kontakt z naszym produktem

Kiedy tworzymy makietę UX?

ASAP. Pierwszą makietą będą wstępne szkice, na flipcharcie czy w zeszycie zespołu projektowego. Ich celem będzie naszkicowanie wspólnej wizji produktu, który musi zostać poddany weryfikacji przez użytkowników. Dlatego dzban kawy plus dobry marker będzie idealny.

Z perspektywy procesu, interaktywna makieta, która będzie potrzebna do wstępnych testów, powstanie po etapie analitycznym. Stworzenie makiety poprzedzi cała biznesowa analiza projektu oraz użytkowników, w których skład wchodzą: analiza biznesowa projektu, ustalenie celu i mikro celów, analiza użytkowników docelowych, stworzenie modelu grup fokusowych, stworzenie person, zaplanowanie UI oraz testy funkcjonalne konkurencyjnych produktów. Im uwzględnimy więcej elementów poprzedzających stworzenie pierwszej makiety tym lepiej.

Jakie narzędzia będą nam potrzebne do stworzenia makiety UX?

Flipchart – na etapie biznesowym flipchart. Pomoże naszkicować wspólną wizję, oznaczyć cele i mikro cele w projekcie. Będzie on Twoim towarzyszem, który pozwoli Ci zrozumieć projekt oraz pozwoli na dojście do porozumienia względem całego zespołu, jak ma wyglądać proces oraz jak mają wyglądać najważniejsze ekrany.

Narzędzie do tworzenia diagramów – zanim przejdziemy do tworzenia makiety kluczowym będzie naszkicowanie schematu, drogi jaką użytkownik może pokonać w naszym produkcie. Do tego mogą wystarczyć takie programy jak power point, ja jednak używam lucidchart.com, bardzo przyjemny program, który w wersji bezpłatnej pozwala na naszkicowanie 60 kroków, czyli w zupełności wystarczy dla mniejszych projektów. W wersji płatnej możemy wspólnie z zespołem tworzyć taki schemat, co znacznie ułatwia pracę oraz pozwala na zaangażowanie wszystkich uczestników zespołu.

Narzędzie do tworzenia architektury informacji – do tego typu działania możesz wykorzystać wcześniejsze narzędzie lucidchart.com, celem będzie stworzenie prototypu poszczególnych ekranów i nałożenie ich na siatkę schematu drogi użytkownika. Ten etap może Ci bardzo ułatwić późniejsze tworzenie makiety już w docelowym programie i przyspieszyć jej czas. Ponadto warto wydrukować sobie taką drogę by mieć ją gdzieś obok. Bardzo często w trakcie pracy przychodzą nowe pomysły czy poprawki, które na żywo można sobie nanieść na diagram. Ja do tego kroku wykorzystuje PhotoShopa, jednakże lepiej wybrać narzędzie, które możliwa zespołowe tworzenie diagramu.

Narzędzie do prototypowania – Na rynku mamy kilka bardzo interesujących rozwiązań. Najbardziej popularnym programem do prototypowania jest Axure absolutny lider, ja jednak jestem fanem polskiego rozwiązania UXPin, korzystam z niego namiętnie bo jest świetnym programem, a ponadto lubię wspierać rodaków.

Czas stworzyć pierwszą makietę

Specjalnie dla tego artykułu wymyśliłem aplikację, aby pokazać jak łatwo, sprawnie i szybko można stworzyć taką makietę, którą można dowolnie testować. Moja aplikacja mobilna to Music Mentalist. Jej zadaniem jest stworzenie playlisty piosenek, na podstawie gustu użytkownika. W apce trzeba będzie zaprojektować model weryfikacji gustu oraz cały player. Ten projekt nie jest zbyt wielki ani zaawansowany, jednak pokazuje możliwości oraz efekt, który można osiągnąć.

Rysujemy schemat architektury informacji

Odpalamy nasz program do tworzenia schematów i tworzymy (architekturę informacji) drogę. Zapiszcie wszystkie ekrany i kroki, które chcecie uzyskać (u mnie to bardzo uproszczony schemat). Dobrą praktyką jest pozostawanie sobie takiej drogi na >48h zanim zaczniemy projektować szczegóły ekranów. Bardzo często bywa tak, że czegoś zapomnimy. Warto po stworzeniu takiej drogi przesiąść się do aplikacji konkurencji, by zweryfikować czy nie zapomnieliśmy o jakimś kluczowym drobiazgu. Pamiętaj aby udostępnić go innym współpracownikom musicie stworzyć go wspólnie.

Diagram szczegółowy (Hi-Fi)

Ja do tego etapu wykorzystałem poczciwego Photoshopa. Ty wykorzystaj swojego Designera (Front-enda) by przygotował Ci elementy zgodne z UI. Makieta wygląda bardzo profesjonalnie, niekiedy można pomylić ją z gotowym produktem podczas testów, co jest bardzo dobrym efektem. Taki projekt można przekazać automatycznie do projektowania frontendu, co dodatkowo przyspiesza pracę i zmniejsza ilość roboty dla działu kreatywnego. Jednakże wcale nie musicie tego robić tak dokładnie, możecie pominąć ten krok i przejść do tworzenia kolejnych ekranów już w narzędziu do prototypownia Axure czy UXPin, które świetnie się do tego nadają. Umiejętność wykorzystania Photoshopa nie jest konieczna, ale dla zaawansowanego UX designera bardzo przydatna.

W Photoshopie tworzy się każdy ekran z osobna i zapisuję w osobnym pliku. Aby zaimportować projekty  od grafika do UXPin musicie zainstalować specjalną wtyczkę, to bardzo proste, znajdziecie szczegóły na stronie programu. Potem za pomocą przeciągnij upuść przerzucamy pliki do UXPin. Na początku miałem obawy o jakość, ale jak się okazuje import przebiega sprawnie i możemy przystąpić do tworzenia pięknej makiety.

Czas przystąpić do wykańczania makiety UX

Wcześniej przygotowałem sobie wszystkie ekrany w Photoshopie (Ty powinieneś dostać ich elementy lub gotowce od UI designera) więc w samym narzędziu do prototypowania nie zostało mi dużo pracy. To co najważniejsze to podpięcie konkretnych akcji. U mnie najtrudniejszym elementem był element usuwania artystów, w celu zbadania gustu muzycznego. Czyli przesunięcie palcem usuwa artystę. Po za tym wszystkie interakcje mamy już naszkicowane, trzeba ich logikę przenieść ze schematu do naszej aplikacji.

Efekt końcowy makiety Hi-Fi

Eksportowałem sobie makietę do HTML (byście mogli zobaczyć jej efekty poniżej) co ma swoje wady. Animacje takie jak przesuń palcem przestały działać. Dlatego warto robić testy funkcjonalne w narzędziu, z którego korzystacie. Każde obecnie narzędzie do prototypowania daje całkiem sporo możliwości do rejestrowania testów i warto po prostu robić to tam. Ja jednak zrobiłem to aby pokazać Wam jak wygląda moja makieta na żywo, zresztą zobaczcie sami i oceńcie poniżej:

Klikalna makieta: