Podstawy

prototypowania

Natalia Bienias

@nbienias

Co to jest prototypowanie?

WSTĘP DO KURSU

Tworzenie wstępnych modeli produktów. W procesie projektowym to z reguły projekty wizualne (często bardzo uproszczone), wzbogacone o interakcje.

Na jakim etapie projektu tworzy się prototypy?

WSTĘP DO KURSU

Im wcześniej, tym lepiej. Pod warunkiem, że wiemy, co w tych prototypach chcemy zawrzeć. Wczesny etap projektu pozwoli zaoszczędzić dużo czasu i zweryfikować wstępne założenia.

Różne rodzaje prototypów

WSTĘP DO KURSU

Nie tylko projektanci stron wykorzystują prototypy w codziennej pracy.
Są powszechne wśród projektantów wzornictwa i osób zajmujących się projektowaniem usług.

Rodzaje
prototypów

Jaki rodzaj prototypu wybrać?

RODZAJE PROTOTYPÓW

Wybór rodzaju prototypu powinien być podyktowany potrzebami projektu. Czasami najlepiej sprawdzą się dopracowane, interaktywne prototypy, a czasami tworzenie ich będzie stratą czasu.

?

zasoby

cele

czas

Papierowe
czy komputerowe?
 

Papierowe czy komputerowe?

RODZAJE PROTOTYPÓW

To jedna z pierwszych decyzji do podjęcia. Ma bowiem duży wpływ nie tylko na czas realizacji projektu, ale również współpracę z resztą zespołu.

Papierowe

RODZAJE PROTOTYPÓW

Zastosowanie:

Na wczesnym etapie tworzenia koncepcji produktu, gdy testujemy różne warianty rozwiązań.

Świetne na sesje brainstormingowe i warsztaty partycypacyjne.

Papierowe

RODZAJE PROTOTYPÓW

Zalety:

• nie wymagają znajomości narzędzi
• każdy może je tworzyć
• krótki czas realizacji
• partycypacja zespołu
  w procesie tworzenia
• małe przywiązanie

Papierowe

RODZAJE PROTOTYPÓW

Wady:

• mogą być czasochłonne
• czasami ciężkie do zrozumienia (testy)
• problem z pokazaniem zaawansowanych interakcji
• problem z dokumentacją
  i zbieraniem feedbacku

Papierowe

RODZAJE PROTOTYPÓW

Narzędzia:

• papiery różnych formatów
• gotowe szablony
• markery, flamastry
• karteczki (sticky notes)
• zakreślacze

Papierowe

RODZAJE PROTOTYPÓW

Dobre praktyki:

• długopis lub mazak
• określ cel prototypu
• kolory zostaw do wyróżnień
• wybrane warianty fotografuj

Cyfrowe

RODZAJE PROTOTYPÓW

Zastosowanie:

Prototypy cyfrowe są świetnym narzędziem do testów
z użytkownikami. Pomogą zweryfikować założenia zespołu, zanim poświęci się zasoby
na wdrożenie.

Cyfrowe

RODZAJE PROTOTYPÓW

Zalety:

• świetnie sprawdzają się
  na testach z użytkownikami
• łatwo udają prawdziwy produkt
• mogą pokazywać zaawansowane interakcje
  i prace interfejsu

Cyfrowe

RODZAJE PROTOTYPÓW

Wady:

• wymagają znajomości narzędzi 
• z reguły bardziej czasochłonne niż papierowe
• ryzyko skupienia się na wizualnych aspektach

Cyfrowe

RODZAJE PROTOTYPÓW

Narzędzia:

• Adobe (XD, PS, AI)
• Axure
• Sketch
• InVision, Marvel
• Figma
• UXPin
• ProtoPie
• i cała masa innych...

Cyfrowe

RODZAJE PROTOTYPÓW

Dobre praktyki:

• zacznij od celu
• prototyp nie musi być idealny
• porządek w pliku
• prototyp to tylko jeden
  z etapów

Lo-fi czy hi-fi

low fidelity vs high fidelity

O co chodzi?

RODZAJE PROTOTYPÓW | LO-FI VS HI-FI

Tworząc prototyp musimy się zastanowić, jak istotne jest oddanie drobniejszych detali. Czy skupiamy się na działaniu poszczególnych elementów interfejsu?
A może bardziej zależy nam na przetestowaniu kilku procesów?

Jaka jest różnica?

RODZAJE PROTOTYPÓW | HI-FI VS LO-FI

Prototypy hi-fi:

• bardziej rozbudowane
• często kolor, zdjęcia
• interaktywne
• udają produkt

Prototypy lo-fi:

• uproszczone
• mogą być papierowe
• część elementów może być niejasna

Dopasuj do potrzeb

RODZAJE PROTOTYPÓW | HI-FI VS LO-FI

Dobrze jest od samego początku wiedzieć, jakiego poziomu szczegółowości potrzebujemy. Zmiana prototypu lo-fi na hi-fi może być bardzo czasochłonna!

Interaktywne
czy statyczne?

Interaktywne czy statyczne?

RODZAJE PROTOTYPÓW

Kolejną decyzją do podjęcia jest wybór między prototypem interaktywnym,
a statycznym.

Interaktywne czy statyczne?

RODZAJE PROTOTYPÓW

Interaktywne

Użytkownik może w nich przechodzić między kolejnymi ekranami, wypełniać formularze, wywoływać jakieś akcje. 

Proste czy rozbudowane?

Proste czy rozbudowane?

RODZAJE PROTOTYPÓW

Możemy stworzyć prototyp składający się z kilkudziesięciu podstron, wielu stanów kontrolek, z aktywną, rozwijaną nawigacją.

A możemy stworzyć też trzy widoki
i na tej podstawie podjąć decyzje
lub przeprowadzić testy.

Co powinno być
w prototypach?

Trójkąty, kwadraty i...?

CO POWINNO BYĆ W PROTOTYPACH?

Projektanci, którzy pierwszy raz spotykają się z prototypami (zwłaszcza tymi lo-fi), mogą odnieść wrażenie, że na nich... niczego nie ma. I poza kwadratami i prostokątami, właściwie nic nie widać.

...i sporo założeń!

CO POWINNO BYĆ W PROTOTYPACH?

Tymczasem mogą być przełożeniem na projekt architektury informacji, prezentować wstępne pomysły na produkt, na rozłożenie elementów czy są po prostu wizualizacją procesu, który chcemy przetestować.

Warto omówić najpierw prototyp z jego twórcą, zanim przejdziemy do dalszych prac.

Zbieranie wymagań

CO POWINNO BYĆ W PROTOTYPACH?

Musimy wiedzieć co jest do zaprojektowania. Prototyp jest wynikową prac koncepcyjnych – nie sztuką dla sztuki.
 

Ma pomagać nam w pracy, a nie zabierać niepotrzebnie czas.

Analiza konkurencji

CO POWINNO BYĆ W PROTOTYPACH?

Oprócz wywiadu z interesariuszami, badań czy warsztatów, warto poświęcić czas na analizę konkurencji i poszukanie dobrych rozwiązań (benchmarków).

Plan prac

CO POWINNO BYĆ W PROTOTYPACH?

Zanim jeszcze przejdziemy do pierwszych szkiców, warto rozplanować zadania. Spisać harmonogram prac, listę widoków czy procesów, które musimy przedstawić w prototypach.

Architektura informacji

CO POWINNO BYĆ W PROTOTYPACH?

Prace projektowe zaczynam od rozrysowania struktury treści. Czasami budowanie całej struktury nie ma sensu (gdy chcemy szybko coś przetestować).

Warto jednak poświęcić architekturze więcej czasu i dobrze ją przygotować.

Moodboardy

CO POWINNO BYĆ W PROTOTYPACH?

Zbierając kolejne materiały możemy uporządkować je w formie jednego folderu lub pliku. Dzięki temu możemy wracać do inspiracji i dzielić się nimi
w ramach całego zespołu.

Metody generowania pomysłów

To od czego zacząć?

METODY GENEROWANIA POMYSŁÓW

Wiedząc co powinno być na stronie (architektura informacji) i znając zadania, czy też cele, które chce osiągnąć użytkownik, możemy przejść do przekładania tych informacji na interfejs.

Brainstorming

METODY GENEROWANIA POMYSŁÓW

Czas ćwiczenia:

10-15 minut

Potrzebne:

flipchart, tablica, mazaki

Design studio

METODY GENEROWANIA POMYSŁÓW

Czas ćwiczenia:

około 90 minut

Potrzebne:

kartki, mazaki

Szalone ósemki

METODY GENEROWANIA POMYSŁÓW

Czas ćwiczenia:

około 30-40 minut

Potrzebne:

kartki a4, mazaki

Co dalej
z prototypem?

Współpraca
z zespołem

CO DALEJ Z PROTOTYPEM?

Warto wybierać narzędzia, które ułatwiają komunikację w projekcie (np. pozwalają
na dodawanie komentarzy).

Niektóre z nich pozwalają również
na wspólną pracę online. 

Testowanie

prototypów

CO DALEJ Z PROTOTYPEM?

To, co przynosi nam największą wartość, to możliwość szybkiej weryfikacji, czy nasze projekty są użyteczne w oczach użytkowników.