UX: Papier zalety i wady
w Praktyce
7 godz. 35 min · User Experience · UI, UX i Webdesign
Natalia BieniasHead of Design w Mobee DickCzego się nauczysz
- Narzędzia, które pomogą zbierać wymagania do projektu
- Organizacja i prowadzenie skutecznego spotkania
- Metody warsztatowe, które łatwo wprowadzić do codziennej pracy
- Tworzenie modeli architektury informacji, np. do strony www
- Różnice i zastosowania różnych modeli nawigacji na stronach
- Wybór najlepszego rodzaju prototypu do typu projektu
- I wiele, wiele więcej!
Cały kurs został podzielony na trzy główne części: zbieranie wymagań, architekturę informacji oraz prototypowanie. Czasami jako projektanci będziemy zajmować się w pracy każda z nich, a czasami będziemy odpowiedzialni za wszystkie. Niezależnie od tego, czym ostatecznie będziemy się zajmować, warto znać i rozumieć pozostałe etapy, aby sprawniej współpracować z innymi członkami zespołu projektowego.
Zbieranie wymagań, czyli praca z klientem
To, czego nie uczą z reguły podręczniki to praca z klientem i rozwijanie tak zwanych kompetencji miękkich. W części poświęconej zbieraniu wymagań poznasz metody i narzędzia, które pomogą Ci we współpracy z innymi ludźmi. Dowiesz się min. jak i po co stworzyć brief, jak zorganizować i poprowadzić spotkanie lub warsztat kreatywny, a także jak uporządkować sobie zdobyta wiedze, by wykorzystać ja dalej.
Architektura informacji, czyli porządkujemy treści
W pracy projektowej albo tworzymy struktury architektury informacji lub na takich strukturach, przygotowanych przez architektów informacji pracujemy. Niezależnie od tego, w która stronę pójdziemy, będziemy mieć do czynienia na co dzień z projektowaniem treści. W kursie dowiesz się w jaki sposób porządkujemy treści na stronach, jakie są popularne modele nawigacji i w jaki sposób weryfikować, czy stworzone przez nas modele są zrozumiale dla użytkowników.
Jak wybrać rodzaj prototypu?
Etap prototypowania jest jednym z najbardziej charakterystycznych, do tego stopnia, ze często myli się go z samym projektowaniem UX. Dowiesz się jak wygląda proces powstawania prototypu i jak dobrać najlepszy jego rodzaj do typu projektu, który realizujesz. Nie zawsze bowiem będą potrzebne prototypy o wysokim stopniu szczegółowości i dużej interaktywności!
Dlaczego wybrać właśnie ten kurs?
- Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcje ze zdobytej wiedzy!
- Wiedza, która otrzymujesz w tym kursie, to nie tylko sucha teoria, ale równiez wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał.
- Uczysz sie na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.
Dla kogo jest ten kurs?
Z tego kursu skorzystają przede wszystkim osoby, które zaczynają prace zawodowa w obszarze projektowania UX lub chcą się przebranżowić z innych specjalizacji. Jeżeli jesteś osoba zupełnie zielona w temacie projektowania User Experience, sięgnij w pierwszej kolejności po kurs Wprowadzenie do UX. Dzięki temu poznasz podstawowe pojęcia. Z tego kursu skorzystają przede wszystkim: projektanci, którzy chcą poznać inne podejście do wytwarzania produktów cyfrowych; osoby zainteresowane praca w obszarach UX, architektury informacji czy projektowania interfejsów; osoby, które planują przebranżowić się na stanowisko UX albo UI designera; graficy, którzy chcą rozwinąć swoje kompetencje w procesie projektowym.
Ale przejdźmy już teraz do konkretnych rozwiązań i zacznijmy od omówienia sobie
prototypów papierowych. Kiedy
najlepiej stosować prototypy papierowe? Tak, jak już trochę wspominałam, one
świetnie sprawdzają się na tym początkowym etapie kiedy zaczynamy dopiero prace
koncepcyjne, kiedy zastanawiamy się czy powinniśmy ułożyć proces w ten
czy jakiś inny sposób. One bardzo oszczędzają nasz czas na samym
początku, świetnie nadają się na sesje brainstormingowe, na jakieś
warsztaty kreatywne, kiedy musimy pracować z innymi ludźmi, którzy nie są
projektantami, którzy nie czują się swobodnie w tej całej kwestii wizualnych
aspektów czy technicznych aspektów. Kiedy rysujemy sobie coś szybko na papierze, kiedy rysujemy razem coś na papierze, może okazać się, że świetnie się wtedy dogadujemy i nie ineteresujemy się tymi wszystkimi obostrzeniami, które są dookoła, bo nimi będziemy interesować się zaraz. Ale najpierw trzeba ustalić pewne założenia, pewne koncepcje, rozgromić pewne pomysły. Więc te sesje brainstormingowe
, te warsztaty kreatywne to jest świetny moment, żeby wykorzystywać właśnie papierowe prototypy
w tym miejscu. Więc jeżeli mówimy o rozwiązaniach
takich dobrych, o zaletach prototypów
papierowych, to przede wszystkim będziemy mówili o tym, że one nie wymagają
od nas znajomości konkretnego narzędzia, bo tak naprawdę potrzebujemy tylko
kartki i papieru, jakiegoś notesu, kawałka jakiegokolwiek
materiału, na którym możemy rysować, to może być flipchart, to może być tablica, która
stoi gdzieś w pomieszczeniu, w którym właśnie pracujemy, i mazaka, ołówka, jakiegoś
długopisu, czegokolwiek czym możemy nabazgrać z kilka kresek i już
właściwie możemy takie prototypy tworzyć. Więc to naprawdę nie musi być
superspecjalistyczny sprzęt, nie musimy mieć superekstraumiejętności
obsługi tego sprzętu, bo to jest zwykła kartka i zwykły ołówek. W
związku z tym, że nie ma ograniczeń związanych z technologiami, narzędziami,
to tak naprawdę każdy może tworzyć prototypy papierowe i jasne
jest bardzo dużo osób, które będę mówiły, że "nie, ja nie potrafię rysować, ja
się do tego nie nadaję, ja nie umiem, weź ty narysuj, bo zajmujesz się projektowaniem, zajmujesz
się grafiką, to na pewno będziesz robić to lepiej". Natomiast
zachęcajmy ludzi, którzy na co dzień nie rysują do tego, żeby również bazgrolili
z nami na tym papierze, bo może się okazać, że to rysowanie sprawi,
że będą mieli trochę więcej pomysłów, będą mieli trochę więcej wniosków, a może
sami przekonają się do tego, że ich pomysły wcale nie są takie dobre i
najlepsze - i wolą przekazać pałeczkę projektantowi. Więc pracując
na prototypach papierowych tak naprawdę bardzo otwieramy się na grupę innych
osób, nieprojektantów, którzy mogą porysować razem z nami, przetestować wstępne koncepcje
i potem razem też pracować nad tym rozwojem
produktu i czuć większe zaangażowanie w procesie projektowym kiedy oni już się zaangażowali
na samym początku, kiedy coś tam nabazgroli na tej kartce i okazało się, że to coś,
co oni narysowali, potem przeszło do produktu. Oni są z tym produktem bardziej związani.
Oni są bardziej chętni do tego, żeby dalej z tym
produktem pracować i jakoś pomagać
też projektantom i innym członkom zespołu projektowego. To, co jest niewątpliwą
zaletą również prototypów papierowych to bardzo szybki czas realizacji takiego
prototypu. No bo wiecie, nie potrzebujemy oprogramowania, nie musimy się zastanawiać
jaki grid wybrać do tego projektu, jaka powinna być tam siatka, a jaki font, a jaki
kolor, a jakie ułożenie. Po prostu bierzemy kartkę, zaczynamy rysować i zaczynamy
coś tworzyć. I w miarę jak tworzymy, jak rysujemy, jak szkicujemy powstają
już pewne koncepcje, powstają założenia, powstaje ileś wersji. I dużo
łatwiej jest pracować na takim papierze, który można szybko wyrzucić, który
ewentualnie można zamazać i zacząć jeszcze raz, niż kiedy zaczynamy
zastanawiać się nad tymi wszystkimi niuansami, kiedy pracujemy już w specjalistycznym
programie, kiedy możemy pustawiać te wszystkie funkcje i aż prosi się, żeby to jakoś tak ładnie
poukładać, żeby to ładnie wyglądało. Więc czas jest tutaj kluczowym czynnikiem. Mówiąc
o tym, że każdy może tworzyć prototyp, wspominałam o partycypacji
reszty zespołu, nie tylko tego zespołu projektowego. To jest bardzo ważne, żeby angażować
jak najwięcej ludzi do wspólnej pracy, bo to sprawia, że
jesteśmy bardziej zaangażowani, że chcemy pracować nad tym produktem i faktycznie czujemy,
że tworzymy wszyscy ten jeden produkt, że to nie są osobne działy projektowe,
że to nie jest dział deweloperów, że to nie jest jakiś dział biznesu
i ci wszyscy inni ludzie, którzy są gdzieś tam dookoła tego produktu, podejmują pewne
decyzje, mają wpływ na to jak ten produkt wygląda, ale oni siedzą gdzieś za jakimiś
mailami, za jakimiś komputerami i na co dzień w ogóle ze sobą nie rozmawiamy. Dlatego
takie wspólne rysowanie, takie rysowanie partycypacyjne,
tworzenie partycypacyjne może sprawić, że ten produkt będzie
powstawał szybciej, że pewne decyzje będą powstawały szybciej i ostatecznie będzie
po prostu jakiś taki lepszy i mądrzejszy, bo wszyscy dojdą do wniosku, że
w sumie chcemy razem pracować nad tym produktem, zrozumiemy
jakie są problemy na każdym etapie, bo braliśmy udział już na etapie prototypowania,
bo wyszło tam, że faktycznie pewne rozwiązania w ogóle się nie sprawdzą,
bo widzieliśmy to kiedy rysowaliśmy to wszystko razem. Więc polecam
i zachęcam do tego, żeby zapraszać innych członków zespołu,
nie tylko zespołu projektowego do wspólnego tworzenia prototypu. I na
koniec coś na co może niewiele osób zwraca uwagę, ale jest to dosyć istotne w całym procesie projektowym:
kiedy rysujemy coś szybko na kartce, kiedy nie za bardzo zwracamy
uwagę na to jak to wygląda, a skupiamy się na tym jak to powinno działać, to
trochę mniej przywiązujemy się do tego, co na tym prototypie jest, jak
ten prototyp wygląda, bo poświęciliśmy bardzo mało czasu, bo robiliśmy kilka
wersji, iterowaliśmy, zmienialiśmy, wyrzucaliśmy i trochę lżej
jest nam wyrzucić te wszystkie kartki i szkice, pozbyć się ich i
zacząć coś od nowa, niż kiedy pracowaliśmy przez tydzień albo
dwa tygodnie nad prototypem, takim cyfrowym i nagle okazuje się, że
w sumie wszystko jest do wyrzucenia, i że musicie zacząć od nowa, i że
to do niczego się nie nadaje. Dużo łatwiej przyjmuje się krytykę kiedy
słyszymy tą krytykę na temat funkcji,
na temat tego jak coś działa, a nie tego jak coś wygląda. Myślę, że wielu projektantów,
wiele osób, które zajmują się tworzeniem produktów cyfrowych, projektowaniem
stron internetowych czy interfejsów aplikacji mobilnych,
jest w gruncie rzeczy osobami dosyć wrażliwymi i mamy
to do siebie, że przywiązujemy się do tych prac, które wytwarzamy, że trochę traktujemy
te nasze prace jak takie nasze dzieci. No i nie chcemy słuchać tego, że są
brzydkie, że są złe, i że trzeba je wyrzucić i zrobić od nowa. Wręcz
przeciwnie, raczej chcielibyśmy, żeby wszyscy je chwalili, więc w momencie kiedy pracujemy
na takich szybkich szkicach my też mamy trochę wymówkę do tego, że to nie musi być idealne, to
nie musi być piękne, to jest zrobione na szybko, żeby przetestować szybko jakieś warianty
i pomysły. Jeżeli to nie jest okej, to dobra, to zaczynamy
jeszcze raz, rysujemy jeszcze raz, zostawiamy to gdzieś z tyłu, po prostu wyrzucamy te
kartki. Więc to małe przywiązanie do prototypu papierowego, jest
w gruncie rzeczy dosyć istotne z punktu widzenia projektanta, osoby, która je tworzy. A
le oczywiście prototypy papierowe mają również swoje wady, o
których trzeba wspomnieć. I tak jak mówiłam o tym, że one
są bardzo szybkie w realizacji, można je bardzo szybko wytworzyć, to można
zrobić tak, że w sumie będą bardziej czasochłonne niż takie prototypy cyfrowe. I to wszystko
zależy od naszego podejścia, od tego jak bardzo skupimy się na warstwie wizualnej prototypu
papierowego i ile będziemy chcieli tych prototypów wytworzyć,
bo jeżeli będziemy chcieli zrobić takie małe dzieła sztuki, jeżeli
będziemy skupiać się na tym, żeby każdy przycisk na naszym papierowym prototypie
miał idealny cień, żeby tam było wszystko ładnie napisane, żeby
było równiutkie i rysowane od linijki, no to oczywistym będzie
to, że taki prototyp będzie bardzo czasochłonny. I odradzam
wam, szczerze mówiąc, oglądanie prototypów papierowych w popularnych
serwisach dla projektantów. Jeżeli zerkniecie na Instagrama, jeżeli zerkniecie na Behance i Dribble'a
, to faktycznie czasami można znaleźć tam zdjęcia bardzo pięknych,
bardzo ładnych, atrakcyjnych prototypów papierowych, które wyglądają
faktycznie jak odrysowywane linijką, gdzie
ludzie czasami korzystają z jakichś szablonów
do równego rysowania kółek albo równego odrysowywania przycisków. T
o jest dosyć głupie z punktu widzenia prototypowania, bo w prototypowaniu
chodzi o to, żeby oszczędzić czas, żeby nie napracować się za
bardzo, aby tworzyć niskim kosztem bardzo szybko efekt,
który będzie sprawiał, że będziemy zbliżać się do tego końcowego produktu. Więc
jeżeli zaczniemy za bardzo przywiązywać się do tego prototypu od strony
wizualnej, będziemy dbać o to, żeby było wszystko piękne i wycackane, to
oczywistym będzie to, że to zajmie nam zdecydowanie za dużo czasu,
więc zapominamy o pięknym szkicowaniu i dokładnym rysowaniu takiego
prototypu, bo to na tym etapie prawdopodobnie w ogóle nie będzie miało żadnego
znaczenia. I wtedy unikniemy tej sytuacji, że faktycznie ten papierowy
prototyp, który miał przyspieszyć naszą pracę, ostatecznie sprawia, że ta praca
jest dużo, dużo dłuższa. Jeżeli będziemy
myśleć o testowaniu naszych prototypów, jeżeli mamy do przetestowania pewne
koncepcje, które związane są z rozwiązaniami interfejsowymi, gdzie
trzeba będzie pokazać działanie jakiejś kontrolki albo co więcej wygląd t
ej kontrolki, interakcje z tą kontrolką, może okazać się, że prototyp papierowy
wtedy zupełnie nam się nie sprawdzi. Więc dobrze zastanowić się na etapie wyboru naszego
prototypu czy faktycznie tworzymy taki rodzaj produktu, takie rozwiązanie,
w którym ten papierowy prototyp nam zupełnie wystarczy. Bo
jeżeli pokażemy takie papierowe prototypy naszym użytkownikom
czy nawet naszym klientom, to może się okazać, że one nie są
takie proste do zrozumienia i tam trzeba dużo pokazywać, dużo opowiadać,
dużo wytłumaczyć zanim ta osoba, która patrzy na ten
prototyp papierowy zrozumie co tak naprawdę tam widzi. W prototypowaniu,
zwłaszcza tym papierowym, bardzo często używa się pewnych skrótowców, pewnych
kluczy wizualnych. Na przykład bardzo popularnym elementem jest przekreślony kwadrat,
który sugeruje nam jakiś place holder. To może być na przykład w
przyszłości zdjęcie, to może być ilustracja, to może być nawet jakiś gif czy
nagranie wideo. Natomiast, żeby nie rysować dokładnych
rysunków, żeby nie udawać, że tamte rysunki są faktycznie w tym kwadracie, rysujemy
zazwyczaj po prostu przekreślony kwadrat, żeby dać do zrozumienia, że tam prawdopodobnie będą
jakieś obrazy, będzie można w przyszłości zaplanować tą przestrzeń na stworzenie
jakiegoś slidera albo jakiejś galerii produktów. No i to nie
musi być wcale takie oczywiste dla wszystkich osób, które na ten prototyp patrzą. Projektanci
i osoby związane z projektowaniem stron internetowych i aplikacji, z reguły znają
to na przykład z programów graficznych albo programów, które służą do prototypowania. One
faktycznie używają również tego elementu przekreślonego kwadratu
czy prostokąta, żeby dać do zrozumienia, że tam w tym miejscu będzie można kiedyś
wkleić jakiś obraz i będzie można z tego obrazu sobie zbudować
jakiś widok. Natomiast osoby, które nie są związane z tym prototypowaniem
mogą tego wszystkiego się nie domyślać. O problemie
z pokazywaniem bardzo interaktywnych elementów, z rozbudowanymi
interakcjami,wspominałam już przy okazji mówienia o tym, że te prototypy
potrafią być w tym momencie bardzo czasochłonne. Jeżeli mamy decyzję do podjęcia,
jeżeli wiemy, że ten interfejs będzie się opierał właśnie na takich komponentach,
to trzeba raczej od razu zrezygnować z takich rozwiązań interaktywnych,
prototypów papierowych i przejść do tego cyfrowego prototypu, bo
możemy sobie na razie na papierze rozrysować makiety. One nie muszą być interaktywne,
one mogą być tylko przełożeniem jakiejś koncepcji. A potem spróbować
przełożyć te szkice na wersję cyfrową i tam dodać
interakcje. Ale jeżeli będziemy chcieli wycinać każdy element jakiejś
kontrolki, na przykład listy rozwijanej, i pokazywać użytkownikowi
na tym papierze jak to się zmienia, jak to się rozwija, n
o to po pierwsze marnujemy czas, po drugie ten użytkownik nie do końca
musi czuć, że to faktycznie tak działa i nie wyobraża sobie jak to mogłoby działać takim prawdziwym
produkcie. Więc może się okazać, że to po prostu będzie nietrafiony pomysł
i takie rozbudowane interakcje od razu róbmy w programach, które d
o tego służą. No i teraz jak mamy bardzo dużo papieru, mamy bardzo dużo wersji,
mamy dużo szkiców, no to fajnie by było w jakiś sposób zbierać dokumentację projektu,
wiedzieć co zostało zaakceptowane, gdzie pojawiły się jakieś komentarze, co
powinno zostać poprawione, a co nie. I dokumentowanie
tych wszystkich zmian, dokumentowanie procesu projektowego i dokumentowanie feedbacku,
w przypadku takich prototypów papierowych jest dosyć trudne. No bo jak
możemy przekazywać sobie uwagi na temat tego prototypu? Możemy oczywiście usiąść
w sali, pokazać wszystkie szkice i porozmawiać o tym jak to powinno wyglądać,
co tu się powinno zmienić. Te uwagi możemy zanotować na papierze,
możemy zanotować w jakimś programie do notatek, możemy też zrobić zdjęcie
takiego prototypu, przerzucić go do jakiegoś PDF-a i tam wtedy dodawać
te komentarze. Tych opcji na dodawanie komentarzy jest kilka, ale p
roblem pojawia się wtedy kiedy tych ekranów jest bardzo dużo, kiedy komentarzy jest bardzo dużo. No
i nagle okazuje się, że ciężko się w tym wszystkim połapać, ciężko wybrać te
opcje, które zostały ostatnio zaakceptowane, a które zostały odrzucone. Potem
przekazać te komentarze, te uwagi i szkice dalej, bo jeżeli będziemy
pracować z innymi projektantami UI, jeżeli my zajmujemy
się tylko wstępnymi prototypami, szkicami i rozwijaniem
jakiegoś pomysłu, jakiejś koncepcji, no to może się okazać, że dostanie
ten projektant później jakieś sto trzydzieści kartek zeskanowanych
albo sfotografowanych, albo taki stos papieru, który przekażemy dalej. I on musi na tym
pracować, więc komfort pracy w takim przypadku jest to dosyć utrudniony
i zdecydowanie tacy projektanci UI prawdopodobnie chcieliby dostać jakieś konkretniejsze
makiety cyfrowe. Więc tutaj też trzeba rozmawiać o tym w jaki sposób będziemy
przekazywać sobie informacje, w jaki sposób będziemy przekazywać feedback do tego prototypu
papierowego, żeby upewnić się, że faktycznie wybieramy właściwy rodzaj
prototypu, z którym będziemy chcieli dalej pracować.