UX: Papier narzędzia i dobre praktyki

0:00Chciałabym wspomnieć jeszcze chwilę o narzędziach, z jakich możemy korzystać, budując

0:04takie papierowe prototypy. Wspominałam oczywiście o tym, że zwykła kartka

0:08papieru i ołówek w zupełności nam wystarczą, ale jeżeli chcemy

0:12bardziej przyłożyć się do tworzenia takich prototypów papierowych,

0:16to oczywiście możemy wykorzystać gotowe szablony, które możemy sobie

0:20wydrukować, na których mamy nadrukowane na przykład konkretne urządzenia:

0:25smartfona, tablet, smartwatcha. I wtedy

0:00w

0:30takim rozmiarze, na takim obrazku możemy po prostu rozrysowywać

0:34sobie kolejne ekrany i nie musimy wyrysowywać kolejnych ramek, nie musimy tam pilnować

0:38tych rozdzielczości jeżeli chcemy dokładnie sprawdzić czy nam się to wszystko pomieści. W

0:42ięc takie szablony one są dostępne w internecie za

0:46darmo. Jeżeli poszukacie, to z całą pewnością znajdziecie takie,

0:50które będą wam potrzebne. Zachęcam was też do tego, żeby tworzyć

0:54własne szablony. Jeżeli będziecie pracować dużo z prototypami, to sami zobaczycie

0:58czego potrzebujecie najwięcej; czy chodzi o to, żeby mieć jak największą przestrzeń do rysowania i

1:02jakiś grid albo kropki, które pozwolą

1:07wam rozrysowywać w miarę równo te elementy bez użycia linijki

1:11albo jakichś szablonów do rysowania elementów, czy

1:15może potrzebujecie jednak sporo miejsca na notatki i wtedy dobrze by było

1:19podzielić sobie tęstronę na miejsce na notatki i miejsce na rysowanie. Więc

1:23tutaj wszystko będzie zależało od tego jak wy pracujecie, jak wam się najlepiej pracuje i

1:27dostosowywać te swoje szablony do właśnie

1:32do waszej pracy. Więc sprawdźcie to sobie, przetestujcie i na

1:37pewno po jakimś czasie dojdziecie do wniosku, że albo będzie wygodniej wam się pracowało na

1:41zwykłej, białej kartce, albo na takim wydrukowanym szablonie, albo okaże się, że kartka,

1:45która będzie zadrukowana w kropki też będzie całkiem niezła. Oprócz

1:50zwykłych kartek przy takich prototypach papierowych przydają się również sticky notes, te

1:55wszystkie naklejane, przyklejane karteczki, bo czasami jest

1:59tak, że chcemy pokazać pewne stany, pewne wysuwane okna, ale

2:04nie chce nam się rysować od nowa tego samego ekranu, żeby pokazać, że na nim

2:08właśnie coś tam się pojawia czy wyświetla. I wtedy możemy potraktować

2:12taką kartkę, takiego sticky notesa jako właśnie wysunięte okienko, które można nakleić i odkleić z papierowego prototypu.Możemyteż

2:20zakrywać tymipapierowymi karteczkami jakieś błędy albo elementy, których w tej chwili

2:27nie chcemy pokazywać na prototypie boone mogą odsłonić się po jakimś czasie. Mogą też być świetnym wyróżnieniem: jeżeli mamy bardzo duży rozrysowany ekran na większej kartce, a chcemy z

2:38aznaczyć jakiś konkretny element naszego prototypu, jakieś

2:42okienko albo jakiś box czy cokolwiek co

2:46sobie tam wymyślimy, to właśnie naklejenie takiej karteczki, również zarysowanej,

2:50może być dobrym pomysłem. I pisadła na koniec. Czym tak naprawdę rysować

2:55i pisać? Wspominałam o zwykłym ołówku i długopisie. One się świetnie sprawdzają, ale

2:59bardzo zachęcam was do tego, żeby na wczesnych etapach kiedy rozrysowujecie koncepcje,

3:03kiedy zastanawiacie się jak to wszystko powinno działać, jak to powinno funkcjonować, j

3:08aki powinien być w ogóle proces, żeby nie bawić się w długopis i nie bawić

3:12się w cienkopisy, tylko zdecydować się na gruby marker, na coś,

3:16co sprawi, że nie będziecie mogli dokładnie rysować poszczególnych

3:20komponentów. Bo na tym początkowym etapie będzie chodziło o to, żeby

3:24skupić się na funkcji, a nie na tym jak to wygląda. I w momencie kiedy macie narzędzie,

3:28które nie pozwala wam dokładnie, z pełnym oddaniem detali

3:32rozrysowywać kolejnych kontrolek, to sprawi, że siłą rzeczy będziecie musieli skupić się na

3:37tym jak to działa, a nie wygląda właśnie. Oprócz

3:41czarnych flamastrów, mazaków, markerów, cienkopisów warto mieć

3:45przy sobie również coś kolorowego. To może być kolorowy flamaster, to może

3:49być jakiś zakreślacz. Bo w momencie kiedy będziemy projektować ten papierowy

3:54prototyp zdarza się, że będziemy chcieli zaznaczyć pewne elementy. To mogą być jakieś c

3:58all to action, to mogą być jakieś linki, podkreślenia, coś,

4:02co w przyszłości prawdopodobnie również będzie wyróżnione kolorem, również będzie

4:06musiało rzucać się jakoś specjalnie w oczy. I wtedy, stosując taki jeden akcent

4:11kolorystyczny w naszym projekcie mamy pewność, że faktycznie ten konkretny element

4:15zostanie wyróżniony. Bardzo odradzam stosowanie kolorów w

4:19rysowaniu całego prototypu. To znaczy jeżeli zdecydujemy się na stworzenie

4:23pełnego prototypu tylko kolorowymi flamastrami, to jest ryzyko,

4:27że osoba, która potem spojrzy na taki prototyp, zupełnie się nie

4:31będzie mogła w nim odnaleźć. Kolory bardzo zwracają naszą uwagę. Jeżeli tych kolorów

4:35będzie bardzo dużo, to będzie ciężko ustalić pewien klucz kolorystyczny.

4:39Dlaczego coś jest fioletowe? Dlaczego coś jest żółte, a coś jest niebieskie?

4:43Z reguły stosuje się rozróżnienia czerwony-zielony kiedy chcemy pokazać

4:47jakiś błąd albo chcemy pokazać, że akcja się powiodła. I te dwa kolory

4:51w zupełności wam wystarczą. Czasami jest tak, że będziecie używać tylko jednego po

4:56prostu do jakichś wyróżnień, ale decydowanie się na pełną gamę kolorystyczną w papierowym prototypie

5:00może skończyć się źle. I tak naprawdę nasz

5:04użytkownik czy osoba, która będzie patrzyła później na ten prototyp dostanie oczopląsu, bo

5:08nie będzie wiedziała po prostu na co ma patrzeć i co jest najważniejsze. Także

5:13odradzam. Na koniec: dobre praktyki. O tym już wspomniałam,

5:19raczej długopis i mazak, najlepiej jakieś grube narzędzie, żeby nie skupiać

5:23się za bardzo, zwłaszcza na tym etapie początkowym, nad tym jak to

5:27dokładnie wygląda. Jeżeli później zdecydujemy się na opracowanie jakiegoś jednego krótkiego

5:31procesu i chcemy bardziej dopracować wygląd tego papierowego prototypu, to jasne,

5:36to mogą być cienkopisy. Ołówki niestety się rozmazują,

5:40więc trzeba zwrócić na to uwagę, że potem taki prototyp rozmazany

5:44nie będzie zbyt dobrze działał i trzeba będzie tam się bawić gumką i ścierać to wszystko. Raczej s

5:49taramy się używać takich narzędzi, które sprawiają, że nie da się ich wymazywać,

5:53bo dzięki temu nie będzie ryzyka, że będziemy siedzieć i przez piętnaście

5:57minut poprawiać kształt jakiegoś przycisku, bo chcemy, żeby był idealnie

6:01równy, a nam nie wychodzi i się bawimy tą gumką. Nie, po prostu rysujemy i przechodzimy

6:05dalej, nie zastanawiamy się nad tym czy to jest bardziej, czy mniej krzywe, bo to

6:09nie jest jeszcze ten etap. Co jest ważne, określmy na początku j

6:14aki jest cel prototypu, dlaczego w ogóle ten protokół papierowy powstaje i

6:18czy to jest faktycznie tak, że chcemy przetestować szybko jakieś koncepcje wewnętrznie,

6:22w naszym zespole projektowym - i to jest okej. Czy to jest trochę widzimisię

6:26i ktoś sobie wymyślił, że ten papierowy prototyp musi powstać, bo gdzieś

6:30w internetach widział, że teraz wszyscy robią papierowe prototypy i my też taki

6:34musimy zrobić. Jeżeli istnieje ryzyko, że ktoś decyduje się na

6:38to, że w waszym projekcie powstanie tylko i wyłącznie papierowy prototyp,

6:43to dobrze upewnić się czy faktycznie to zostało przemyślane, czy wszystkie "

6:47za" i "przeciw" zostały podane na tacy takiej osobie, bo może

6:51się okazać, że ta osoba, która zdecydowała, że w tym projekcie będziemy robić tylko prototyp

6:55papierowy, nie do końca jest świadoma tego, z czym to się wiąże, i że

6:59faktycznie w niektórych przypadkach możemy sobie trochę utrudnić pracę i sprawić,

7:03że ona będzie dużo dłuższa. Tak jak wspomniałam kolor zostawiamy do

7:07wyróżnień, nie robimy pełnego kolorowego prototypu. Raczej nie wklejamy tam zdjęć i ilustracji,

7:12bo będzie to po prostu ciężkie w odbiorze. I niestety, jeżeli będziemy używać dużo kolorów,

7:17one będą zawsze zabierać uwagę od tych elementów, które mogą

7:21się okazać dużo ważniejsze niż te, na które zdecydowaliście się, żeby

7:26używać kolory. No i wybrane warianty warto fotografować. To znaczy

7:30jeżeli mamy już fragmenty prototypu, które zostały zaakceptowane, jakieś

7:34elementy interfejsu z papierowego prototypu mają przejść

7:38dalej do projektu UI, to fotografujmy prototyp, fotografujmy

7:43tylko jego fragment, numerujmy, nazywajmy te pliki

7:47odpowiednio, komentujmy. Możemy to zrobić w formie prezentacji. Możemy

7:52to zrobić w formie po prostu jakiegoś jednego PDFa kilkustronicowego, z

7:56odpowiednią kolejnością tych elementów, które tam się powinny znaleźć. A

8:00le starajmy się w jakiś sposób udokumentować te materiały, żeby potem przekazać je

8:04dalej, żeby te kartki się nie pogubiły, żeby one się nie pomieszały. Dobrze jest je

8:08razem spinać, dobrze jest je trzymać w teczkach, bo dzięki temu po

8:13prostu będziemy mieć pewność, że faktycznie pracujemy nad tymi wariantami,

8:17nad którymi chcieliśmy pracować. Okej. Teraz przejdziemy do prototypów

8:21cyfrowych.