Podstawy prototypowania interfejsu

Zanim przejdziemy do samego prototypowania interfejsu, chciałabym podkreślić i przypomnieć, że projektowanie doświadczeń użytkownika (UX) wymaga głębokiego zrozumienia potrzeb użytkowników i specyfiki grupy docelowej, do której kierujemy swój produkt/ofertę.

Zanim zaczniesz prototypować interfejs

Przed wykonaniem jakichkolwiek prac koncepcyjnych dotyczących interfejsu, musimy być w stanie odpowiedzieć na następujące pytania (które najczęściej są częścią modelu biznesowego):

1. Jaką potrzebę rozwiązujemy?
2. Kto jest odbiorcą naszego rozwiązania?
3. Jakie cele ma realizować strona, aplikacja mobilna czy produkt oferowany klientowi?

Dopiero po uzyskaniu odpowiedzi na powyższe pytania, możemy zabrać się za przygotowywanie prostej makiety interfejsu lub bardziej zaawansowanego interaktywnego prototypu.

Prototypowanie interfejsu to proces, w którym wypracowuje się pierwszy projekt interfejsu, aby w możliwie najprostszy sposób zweryfikować zgodność naszej koncepcji z wymaganiami lub potrzebami klienta (bez konieczności programowania w pełni działającego produktu).

Co można prototypować?

Prototypować można produkt, który dopiero powstanie, a także nowe elementy już istniejącego produktu (aby poprawić użyteczność lub dodać nową funkcjonalność). Przy wytwarzaniu produktów cyfrowych najczęściej prototypuje się:

1. Strony internetowe
2. Aplikacje internetowe
3. Aplikacje mobilne

Szkicując na kartce czy tworząc makietę interfejsu w programie, wypracowujemy architekturę informacji, tworzymy doświadczenia użytkownika (UX) z produktem, dobieramy odpowiednie elementy interfejsu, aby sprawić by produkt był przystępny w obsłudze dla naszych klientów. W trakcie prototypowania przygotowujemy również treści (opisy, nagłówki, hasła promocyjne, komunikaty).

Czym się różni makieta od prototypu? Prototyp jest wiernym odzwierciedleniem docelowego projektu, zawiera treści, interakcje i animacje. Prototypy przypominają więc niemalże gotowy produkt.

Tutaj znajdziesz 20 najpopularniejszych narzędzi do tworzenia makiet.

Przykładowa makieta aplikacji mobilnej. Źródło: www.invision.com

Kiedy przydaje się prototypowanie?

W tym miejscu chciałabym podzielić się z Tobą moimi osobistymi doświadczeniami z prototypowaniem.

1. Pierwszy prototyp jaki przygotowałam w swojej karierze to strona internetowa dla agencji turystycznej. Projekt był ciężki, ponieważ klient nie posiadał doświadczenia w IT, a grafik klienta z zakresu projektowania doświadczeń użytkownika. Stawiając pierwsze kroki w branży, sam prototyp tworzyłam głównie bazując na stronach internetowych innych agencji oraz iteracyjnej pracy z klientem. Klient od początku był świadomy, że to co widzi, to jedynie interaktywny prototyp, a ostateczny projekt graficzny dopiero powstanie. Strona powstała i istnieje dotychczas. Pierwszy sukces!
2. Kolejny ważniejszy prototyp, który przygotowałam, powstawał w bólach z klientem obcojęzycznym (średnio mówiącym po polsku i angielsku, biegle po chińsku, którego ja niestety nie znam :-)). Projektowałam dla niego sklep internetowy z wbudowaną aplikacją do konfiguracji koszul szytych na miarę. W trakcie tego projektu samo prototypowanie i generowanie dokumentacji z projektu dzięki wykorzystaniu dedykowane narzędzia Axure szło bardzo sprawnie, jednak bariera komunikacyjna oraz duże wymagania klienta (nieproporcjonalne do budżetu przeznaczonego na projekt) sprawiły, że projekt został wstrzymany i strona nie powstała. To był projekt, przy którym nauczyłam się bardzo dużo, zarówno w temacie prototypowania, jak i samej współpracy z klientem. Makieta, która powstała była interaktywna oraz zaawansowana do tego stopnia, że klient nie był w stanie zrozumieć, że to tylko projekt, a nie działający produkt, który trzeba jeszcze zaprogramować.
3. Kolejne doświadczenia w makietowaniu, zdobywałam jako Product Owner w firmie AirHelp, gdzie nie miałam przypisanego dedykowanego Product Designera do mojego zespołu. Nad rozwojem strony internetowej miałam przyjemność współpracować z zagraniczną agencją. Aby przedstawić jej naszą koncepcję, propozycję wartości, główne funkcje oraz sekcje na stronie, przekazywałam jej zarówno wymagania w formie tekstowej, jak i makiety stron, które dla nas projektowali.
4. W SentiOne trafiłam do zespołu, który ma dedykowanego grafika/UX designer’a. Od tego momentu, jako Product Manager skupiam się raczej na biznesie oraz potrzebach użytkowników, aniżeli na samodzielnym tworzeniu makiet i prototypów ( szkice tworzę na kartce papieru). Makietowaniem i prototypowaniem zajmuje się designer, z którym często współpracuje projektując doświadczenia użytkowników.
5. Obecnie razem z projektantem przeprowadzamy również badania. Zdarzyło nam się przeprowadzać badania użyteczności z klientami także na prototypach. Dzięki temu mogliśmy zweryfikować użyteczność funkcji, jeszcze przed jej wdrożeniem.
   Proste makiety nierzadko tworzę również w sytuacji, gdy chcę przekazać pewną koncepcję do zespołu programistycznego, zaprezentować podczas spotkania lub dodać jako dodatkowy załącznik do zadania w Jirze. Dzięki temu łatwiej mi przekazać to co chcemy osiągnąć poprzez zmianę interfejsu.

Jeżeli chodzi o narzędzia, z których korzystam do prototypowania – od lat jest to kartka, biała tablica i program Axure.

Kto najczęściej przygotowuje makiety?

1. UX designer lub product designer – osoby specjalizujące się zarówno w kompleksowym ulepszaniem doświadczeń użytkowników z produktem, a także projektujące interfejsy oraz grafikę (UX&UI) w programach graficznych.
2. Product manager/product owner (szczególnie w sytuacji, gdy wewnętrznie nie ma dedykowanych ludzi do tworzenia UX/UI).
3. Programiści – zdarza się również, że programista tworzy prosty prototyp rozwiązania, kodując go w najprostszy możliwy sposób.
4. Zespoły marketingowe – marketingowcy również projektują strony oraz materiały graficzne. Bardzo często przed wykonaniem docelowego rozwiązania, przygotowują prototypy.

Jak nauczyć się prototypowania interfejsów

Przygotowałam dla Ciebie kilka linków, które wprowadzą Cię do świata prototypowania.

1. Jeżeli chcesz nauczyć się prototypowania i tworzenia makiet – zachęcam Cię do skorzystania z naszego polskiego UXPina – jest miły i przyjemny w użyciu, świetny na start i nie tylko.
2. https://www.youtube.com/watch?v=aOp97n6JhIg – krótkie video pokazujące jak wygląda tworzenie makiet w programie Invision,
3. https://www.udacity.com/course/rapid-prototyping–ud723 – darmowy kurs prototypowania przygotowany przez Google,
4. https://www.uxpin.com/studio/ebooks/guide-to-prototyping/ – ebook na temat prototypowanie, który opisuje najróżniejsze metody i techniki związanie z prototypowaniem, przygotowany przez UXPin.

Stworzyłam(-em) swój pierwszy prototyp interfejsu, i co dalej?

Makiety przekształcane są docelowo w projekty graficzne, lub buduje się je od samego początku w programach graficznych, które umożliwiają przygotowanie zarówno UX, jak i UI (tj. projektu graficznego).

Prototypy ułatwiają współpracę nie tylko z klientami, ale również w ramach wewnętrznego zespołu projektowego. Umożliwią testowanie hipotez, mogą służyć do przeprowadzania eksperymentów (np. walidacji biznesowej MVP).

Powodzenia!