UX: Cyfrowe narzędzia i dobre praktyki

0:00Okej. To powiedzmy sobie jeszcze o narzędziach, które służą do

0:04tworzenia prototypów cyfrowych. Tych jest naprawdę całkiem sporo

0:08na rynku. Pojawiają się nowe i jest coraz większa

0:12konkurencja, więc programy dbają o to, firmy, które produkują te

0:16programy dbają o to, żeby faktycznie serwować nam, użytkownikom

0:21tych programów nowe funkcje i nowe możliwości. Całkiem

0:26niedawno Adobe wypuścił program XD, który służy do projektowania

0:31interfejsów, ma wbudowane również bardzo proste interakcje, więc możemy stworzyć

0:35taki prototyp, możemy wyświetlić go sobie na telefonie i zobaczyć jak

0:39pod wpływem jakiegoś gestu będzie działał ten ekran; czy będzie coś się pojawiało, czy będzie

0:43przechodził na kolejny. Jest klasyk,

0:47czyli Axure. To jest program, który jest chyba jednym z najstarszych programów

0:51do prototypowania na rynku. W tej chwili weszła już wersja

0:55beta, która jest trochę odświeżoną wersją

1:00interfejsu, zoptymalizowaną, ale wciąż jest to niesamowita kobyła,

1:04która potrafi wspomóc nasze działania w

1:08bardzo rozbudowane interfejsy. Tam zawsze to jest gruba logika. Możemy

1:13tworzyć walidacje, możemy tworzyć pola, do których użytkownicy mogą wpisywać dowolne

1:18dane. Więc operacje, interakcje w Axure są naprawdę

1:22czymś, co wyróżnia go na tle konkurencji. Jest Sketch,

1:28który jest narzędziem służącym do tworzenia interfejsów użytkownika, ale

1:33również pozwala na tworzenie prostych interakcji, przejść między ekranami. I to

1:37w naszych prototypach cyfrowych czasami w zupełności wystarczy. Czasami nie będziemy potrzebować

1:41tej grubej logiki, czasami trzeba będzie pokazać użytkownikowi, że po prostu po kliknięciu

1:45w jakiś przycisk może przejść dalej. Więc jeżeli mamy

1:49takie proste prototypy do stworzenia, możemy wykorzystać również

1:53takie narzędzie jak InVision albo Marvel, które po prostu pracują

1:58na płaskim obrazku, zaznaczamy jakieś obszary i zaznaczamy,

2:03że są to linki, które pozwalają nam przejść dalej. Nie musimy wtedy tworzyć

2:07właśnie rozbudowanych interakcji, jakiejś logiki, po prostu

2:11zaznaczamy element, linkujemy go z kolejną stronę i właściwie już mamy

2:15gotowy prototyp interaktywny. Jest cała masa tych narzędzi z pogranicza tworzenia interfejsów

2:22i prototypowania, więc zanim zdecydujemy się na konkretne

2:26rozwiązanie, zanim zdecydujemy się na konkretny program, porozmawiajmy z resztą zespołu, zastanówmy

2:31się w jaki sposób będziemy prezentować to rozwiązanie później użytkownikowi,

2:36jak jesteśmy w stanie wyeksportować te pliki, żeby ten

2:40użytkownik mógł sobie je przetestować na przykład na swoim urządzeniu albo

2:45na jakimś naszym, czy możemy przekazać w jakiś sposób, w

2:49jakiś prosty sposób te prototypy dalej, czy one łączą się

2:53z wtyczkami, czy z innymi programami, z których korzystają

2:57inni członkowie zespołu. Warto też pamiętać o dobrych praktykach. Jeżeli

3:02wybieramy prototypy cyfrowe, to przede wszystkim tak jak w przypadku prototypu

3:08papierowego zaczynamy od celu. To znaczy my nigdy nie tworzymy prototypu

3:12dla samego tworzenia prototypu. To nie chodzi o to, żeby robić sztukę dla sztuki, tylko

3:16ten prototyp faktycznie jest nam do czegoś potrzebny i wtedy go tworzymy. Jeżeli wiemy,

3:20że czeka nas cała masa testów, nie chcemy poświęcać czasu po wdrożeniu, żeby

3:24nie okazało się, że trochę naszej pracy poszło na marne, tworzymy szybko prototypy

3:28cyfrowe, sobie maskujemy te ścieżki, które

3:32chcielibyśmy, żeby użytkownik przeszedł i wyrzucamy to do testów. I

3:37nie zastanawiamy się za bardzo nad tym czy on jest najpiękniejszy na świecie, czy on jest

3:41idealny, bo on ma być tylko prototypem. Więc nie spinajmy się za bardzo

3:45nad stroną wizualną, nie bawmy się w kolory, zdecydujmy się na to, żeby

3:49robić prototyp tylko w czerni i bieli, w odcieniach szarości, bo to

3:53sprawi, że faktycznie użytkownicy nie będą zwracać uwagi na te najmniejsze detale, oni

3:57nie będą mówić o tym, że ten font to im się w ogóle nie podoba, a ten kolor

4:02to w sumie im się kojarzy z czymś złym i oni bardzo dużą uwagę będą zwracać wtedy

4:06na aspekty wizualne zamiast tego, o co tak naprawdę nam w tym prototypie

4:10chodzi, czyli funkcje i sposób w jaki to wszystko działa. No

4:14i oczywiście, to, co jest... to, co dotyczy tak naprawdę każdego programu, w

4:18którym będziemy pracować to porządek w pliku. Zdarzyło mi się pracować

4:22na jednym prototypie z czterema osobami. Czasami zdarza się pracować z większą ilością osób. Czasami

4:27jest tak, że ten prototyp kończę i przekazuję dalej, nad tym pracują kolejni

4:31projektanci albo przekazuję to wszystko do projektantów UI i oni już sobie

4:35z tym muszą radzić. Jeżeli nie nazwę odpowiednio

4:40wszystkich warstw, jeżeli nazwę artboardów czy stron, które

4:44są w danym programie (w przypadku Axura słynne panele dynamiczne),

4:48to może się okazać, że poprawienie

4:52czegokolwiek w takim prototypie, zmiana czy po prostu rozwijanie

4:57tego prototypu będą tak ciężkie dla tej osoby, która to przechwyci, że dużo łatwiej

5:01będzie zrobić taki prototyp od nowa. Więc dbajmy o to, że nawet jeżeli

5:05pracujemy w tej chwili sami na tych prototypach, to nauczmy się tego, żeby dbać o porząde,k

5:09żeby uczyć się tego porządkowania warstw i plików,

5:13bo może się okazać, że za pół roku będziemy musieli wrócić do tego prototypu i coś tam

5:17zmienić. I wtedy, uwierzcie mi, nie będziecie już pamiętać jak coś zrobiliście, jak

5:21stworzyliście jakiś panel dynamiczny, jak włączyliście jakieś interakcje. I

5:26takie nazywanie tych wszystkich warstw i elementów po prostu może

5:30wam pomóc. No i na koniec: prototyp to tylko

5:34jeden z etapów. Nie fiksujmy się za bardzo na tym, żeby to była najważniejsza,

5:39najistotniejsza rzecz w całym procesie, bo najważniejszą rzeczą w procesie

5:43jest ten końcowy produkt, który zostanie wypuszczony do użytkownika, który

5:47będzie zarabiał lub nie dla biznesu, dla którego projektujemy. Prototyp

5:51jest tylko jednym z narzędzi, które wykorzystujemy, więc nie tworzymy sztuki

5:56dla sztuki, nie cackamy się za bardzo, żeby to było najpiękniejsze i najwspanialsze. Jeżeli

6:00nie potrzebujemy robić tego prototypu cyfrowego czy prototypu papierowego

6:04na tym etapie, to po prostu go nie róbmy. Zastanówmy się jakie

6:09są zalety i wady każdego z rozwiązań. Dobrze przemyślmy z jakich narzędzi chcemy

6:13korzystać. I dopiero wtedy siadajmy do pracy. Dobra,

6:17to już wiemy czy korzystać z prototypów papierowych, czy cyfrowych,

6:21a teraz przejdziemy do kwestii związanych z poziomem przedstawienia

6:26detali w naszych prototypach, czyli będziemy mówić o prototypach low-fi i high-fi.