Makieta UX - Twój model serwisu.

Z pewnością wszyscy słyszeli o tym, że o powodzeniu projektu informatycznego w dużej mierze decyduje nie tylko to, jakim zespołem IT dysponujemy, ale także jakość przepracowania tzw. preprodukcji, czyli poświęcenia czasu na skrupulatną analizę wymagań, zrozumienia oczekiwań i realnych potrzeb klienta oraz zaplanowania odpowiedniego harmonogramu. Jest jeszcze jeden punkt rozgrywający się na tym etapie, o którym akurat wszyscy zwykle pamiętają, ale niekoniecznie wiedzą o nim to, co najistotniejsze. O czym mowa? Oczywiście, o makietach i prototypach interfejsu.

Prototyp czy makieta to model serwisu, który planujemy uruchomić. Wbrew pozorom, nie zawsze należy utożsamiać ze sobą te dwa pojęcia, natomiast dla ułatwienia przekazu, w dalszej części artykułu będziemy posługiwać jedynym pojęciem, prototyp.

Dzięki prototypowi, możemy naśladować każdą interakcję i widok, a najważniejszą zaletą jest to, że symuluje on rzeczywisty i dokładny przyszły produkt, bez angażowania programistów. Głównym celem, jest umożliwienie projektantowi, klientowi i użytkownikowi, sprawdzenia poprawności i adekwatności rozwiązań projektowych. Jest to także idealny sposób, by sprawdzić, czy wszystkie decyzje projektowe są ze sobą spójne. Pomaga nam identyfikować i naprawiać problemy na wczesnym etapie projektu, gdy wprowadzanie zmian jest znacznie prostsze i tańsze.

Często proces prototypowania ujawnia nowe możliwości interakcji z produktem, pomaga w określeniu potrzeb i oczekiwań użytkowników oraz potwierdza najlepszy kierunek rozwoju. Dlatego też, opracowanie prototypu powinno być cykliczną czynnością, w ramach której, zespoły produktowe stale sprawdzają, testują na użytkownikach i dopracowują koncepcję produktu, dopóki nie spełni on celów biznesowych i potrzeb użytkowników.

Prototypowanie jest więc integralną częścią procesu projektowania z dwóch kluczowych powodów:

1. Wizualizacji - prototypy pomagają projektantom UX pokazać interesariuszom, jak końcowy produkt będzie wyglądał i działał.

2. Informacji zwrotnej - prototypy generują informacje zwrotne od członków zespołu, a także grup testowych użytkowników. Potencjalni klienci mogą wchodzić w interakcje z produktem zbliżonym do finalnego i wyróżniać obszary, które są mniej przyjazne dla użytkownika. Zespół projektowy może następnie powtórzyć projekt, zanim zespół produktowy wprowadzi produkt końcowy, oszczędzając firmie czas i pieniądze.

Cel prototypu natomiast może być różny, w zależności od potrzeb i etapu projektu. Należy jednak mieć świadomość, że funkcjonują dwa rodzaje prototypów – te o niskiej wierności (ang. low fidelity) oraz o wysokiej (ang. high fidelity).

Prototypy o niskiej wierności (przez nas zwane makietami) to przedstawienie interfejsu w najprostszej do przygotowania formie. Oznacza to zazwyczaj jedynie zaprezentowanie pozycji poszczególnych elementów i ich orientacyjnej wielkości. Dla wielu osób nieobeznanych z projektami IT może się wydawać, iż jest to prymitywna i niewykorzystywana forma, ale pozory mylą. Przez to, że czas przygotowania takiej makiety jest stosunkowo niedługi i szybko można zweryfikować zamiary z klientem lub potencjalnymi użytkownikami, makiety o niskiej wierności są bardzo często wykorzystywane w branży. Już na etapie ich omawiania często widać potencjalne problemy, w tym zbyt nieintuicyjny interfejs, który nie spodoba się użytkownikom. A weryfikacja tego faktu jest głównym celem prototypowania.

Przykłady prototypów niskiej wierności:

•   szkice - naszkicowane prototypy są często rysunkami o dowolnej formie, pisanymi długopisem czy ołówkiem, które odwzorowują wstępny pomysł Są najbardziej podstawową formą prototypu. Projektanci UX zazwyczaj wykorzystują szkice do generowania pomysłów i współpracy z zespołami produktowymi.

•   prototypy papierowe - zespoły projektowe używają ich również na najwcześniejszej fazie procesu projektowania, jednak struktura papierowych prototypów jest bardziej zdefiniowana niż struktura szkiców. Podczas gdy często rysujesz szkice odręcznie, papierowe prototypy zazwyczaj wymagają użycia szablonów i tektury w celu stworzenia bardziej szczegółowych makiet stron internetowych lub ekranów aplikacji. Możesz także połączyć je z karteczkami samoprzylepnymi lub innymi dodatkami. Podobnie jak w przypadku szkicowania, prototypowanie papieru jest często oparte na współpracy i stanowi dobry pierwszy krok przed przejściem do interaktywnego prototypu.

•   prototypy klikalne - przedstawiają elementy na stronach witryny internetowej lub ekranach aplikacji. Łączą różne ekrany za pośrednictwem punktów aktywnych.

Te prototypy są bardziej zaawansowanymi wersjami prototypów o niskiej wierności, a także najprostszymi wersjami interaktywnych prototypów. Niektóre aplikacje pomagają tworzyć prototypy od podstaw, podczas gdy inne umożliwiają przesyłanie wczesnych szkiców lub prototypów papierowych, tworząc cyfrową formę tych prototypów, dzięki czemu można testować i iterować projekty.

Prototypy o wysokiej wierności (zwane przez nas po prostu prototypami) już bardziej przypominają gotową aplikację czy serwis. Oprócz odpowiedniego ułożenia elementów, prezentują również kolorystykę, odpowiedni font, a nawet odpowiadające realiom zdjęcia. O ile poprzedni rodzaj szkicu może być przygotowywany samodzielnie przez osobę niezapoznaną z zaawansowanymi programami, tak w tym w przypadku nie obejdzie się bez projektanta UX czy nawet grafika. Oczywiście, prototypy również pozwalają zweryfikować jakość interfejsu i skonfrontować go z oczekiwaniami klienta oraz potrzebami użytkowników. Wadą jest, oczywiście, czas potrzebny na stworzenie takiej pracy, ale też jedna, bardzo zaskakująca rzecz – zdarza się, że klienci, widząc makietę o wysokiej wierności, zbyt mocno wierzą w to, że właściwa aplikacja już jest gotowa i będzie wyglądała identycznie, jak na projekcie. Niestety, w niektórych przypadkach, mimo ostrożności w kontakcie z odbiorcą, „zbyt rzetelny” prototyp może w konsekwencji wywołać rozczarowanie u klienta.

Przykłady prototypów o wysokiej wierności:

•   interaktywne prototypy - są bardziej zaawansowanymi wersjami prototypów klikalnych, które można tworzyć za pomocą aplikacji do prototypowania, która obsługuje interaktywność, ale tylko dla projektów wizualnych o średniej wierności. Interaktywne prototypy są zarówno klikalne, jak i responsywne, umożliwiając użytkownikom interakcję z nimi, są też bardziej estetyczne niż prototypy klikalne o niskiej wierności.

•   cyfrowe prototypy - jest najpopularniejszym rodzajem prototypu o wysokiej wierności, który jest opracowywany przy użyciu oprogramowania do prototypowania, które pozwala projektantom UX tworzyć estetycznie bogate, interaktywne, a nawet animowane prototypy produktu, który jest prawie gotowy do wdrożenia. Prototypy te mają realistyczny wygląd i umożliwiają dokładniejsze testowanie elementów interfejsu użytkownika.

•   kodowane prototypy - utworzenie kodowanego prototypu jest bardziej skomplikowane, ponieważ wymaga od projektanta UX umiejętności kodowania. Te prototypy są najbliższe ostatecznemu projektowi produktu i są najlepszą opcją do generowania opinii użytkowników, gdyż w pełni wykorzystują wszystkie możliwości Internetu.

Podczas przygotowywania prototypu (na jakimkolwiek poziomie szczegółowości) należy pamiętać o jednym aspekcie – treść umieszczania na grafice powinna w jak największym stopniu odpowiadać kontekstowi systemu i zawierać dane bliskie realnym. Przykładowo, prezentując ekran szczegółów produktu sklepu z odzieżą, zamiast losowego tekstu „lorem ipsum” warto wstawić nazwę w rodzaju „bluza z kapturem” i odpowiadający opis, który nie musi być zgodny z rzeczywistością, ale wydaje się sensowny. Takie zabiegi są ważne z dwóch powodów. Po pierwsze, w ten sposób jesteśmy w stanie lepiej zrozumieć rodzaj prezentowanych danych i być może zweryfikować nasze plany związane z wymaganiami czy architekturą. Po drugie (i co ważniejsze), przygotowując makiety z „rzeczywistymi” tekstami, możemy wywrzeć lepsze wrażenie na kliencie, który poczuje, że istotnie przyłożyliśmy się do zrozumienia jego świata, a do tego lepiej zweryfikuje przedstawianą mu grafikę (niektóre nietechniczne osoby mogą poczuć się zaskoczone, widząc kompletnie bezsensowne napisy). Nawet, jeśli popełnimy merytoryczny błąd, to sympatia wobec nas powinna tylko wzrosnąć.

Na koniec powiedzmy sobie dość oczywistą rzecz – odpowiedzmy na pytanie, dlaczego makiety są ważne. Ich głównym zadaniem jest zweryfikowanie naszego wyobrażenia systemu i skonfrontowanie go z oczekiwania klientami przy maksymalnym zaoszczędzeniu czasu, pieniędzy i nerwów. Dużo łatwiej jest zmodyfikować (a nawet przygotować od nowa) prototyp niż już gotowy interfejs w aplikacji. Pamiętajmy, że to nie my będziemy użytkownikami systemu, tylko nasi klienci i skojarzone z nimi osoby – to oni będą „żyć” z przygotowanym przez nas interfejsem. Dlatego tak ważne są dyskusje o prototypach i zyskanie akceptacji ze strony inwestora projektu i jego klientów.