Jak zacząć UX design – User Flow oraz Interaktywny Prototyp

UX Design to niezwykle złożony proces. Aby projektowanie stron internetowych oraz aplikacji przynosiło oczekiwane rezultaty należy wziąć pod uwagę szereg czynników, nie tylko sam wygląd. Równie ważne są odczucia użytkownika, który poprzez intuicyjny sposób działania danego produktu z łatwością osiągnie zamierzony cel. Istnieje wiele sposobów, które pomagają w stworzeniu idealnego i przydatnego dla klientów rozwiązania. Poniższy artykuł skupi się na dwóch, które wizualizują ścieżkę jaką musi przejść użytkownik aby wykonać zadania w zaprojektowanym produkcie. 

Spis treści

1. Co to jest USER FLOW?
2. Czym są Interaktywne Prototypy?
3. Podstawowe narzędzia
4. Dlaczego warto poświęcać czas na USER FLOW i PROTOTYPOWANIE?
5. Proces tworzenia
6. Links
7. Gestures & Transistions
8. Podgląd
9. Podsumowanie

Spróbujmy odpowiedzieć na następujące pytania: Jakie są różnice pomiędzy User flow a Interaktywnym prototypem? Jaki jest ich cel? W jaki sposób mogą się wzajemnie uzupełniać? Od którego powinniśmy zacząć rozpoczynając nasz proces projektowy? 

Co to jest USER FLOW?

User Flow to swego rodzaju mapa, która tworzy i wizualizuje całą ścieżkę, jaką musi przejść użytkownik, aby wykonać odpowiednie zadanie. Prościej ujmując, przenosi ona użytkownika z punktu wejścia poprzez szereg kroków w kierunku ostatecznego działania jakim może być na przykład zakup produktu. Z całą pewnością można powiedzieć, że jest to podstawa procesu projektowania. Zrozumienie potrzeb użytkowników jest niezbędne do zbudowania produktu, który te potrzeby będzie w łatwy sposób spełniał. 

Tworząc User Flow zawsze należy odpowiedzieć sobie na pytania: 

• Co użytkownik próbuje osiągnąć?
• Co jest ważne dla użytkownika i jakie czynniki sprawiają, że nie zrezygnuje on z kontynuowania działania?
• Jakie dodatkowe informacje będą potrzebne użytkownikowi, aby dane zadanie ukończyć?
• Czy występują (jeśli tak to jakie) bariery na drodze użytkownika?

Odpowiedzi na te pytania będą zawierały wskazówki jakie treści i linki nawigacyjne powinny zawierać poszczególne podstrony. Jeśli podstawowym celem użytkownika jest przeglądanie dużej ilości różnych produktów, Twoja strona lub ekran będzie przedstawić zupełnie inny design oraz funkcjonalność niż w przypadku, gdy głównym celem jest zakup wybranego produktu i przejście dalej. 

User Flow może przybierać różne formy w zależności od witryny czy aplikacji, którą projektujesz. Jako przykład, typowy User Flow strony e-commerce może wyglądać następująco: 

• Użytkownik zaczyna swoją podróż na stronie głównej, 
• Na stronie głównej użytkownik klika ikonę kategorii, 
• Na stronie kategorii klika produkt, 
• Na stronie produktu użytkownik dodaje przedmiot do koszyka, 
• Na stronie koszyka klika ikonę przejścia do kasy, 
• Na stronie kasy dokonuje zapłaty za produkt, podaje dane do wysyłki itd.. 

Jest to oczywiście bardzo uproszczona wersja ścieżki użytkownika. W rzeczywistości, użytkownik może wrócić do wyboru kategorii, może dodać do koszyka kilka produktów, może także użyć nawigacji do wyszukiwania produktów, albo może po prostu zrezygnować z zakupu. Z racji tego, że istnieje tak wiele różnych ścieżek, które użytkownicy mogą przyjąć, User Flow są często modelowane jako “schematy przepływowe” z węzłami dla każdej z głównych ścieżek nawigacyjnych. 

Celem tak dokładnej analizy User Flow jest zidentyfikowanie obszarów, w których można usprawnić wspomniany przepływ użytkowników. Jeśli po przeprowadzeniu analizy na naszej stronie e-commerce zauważymy, że znaczna część klientów rezygnuje z działania na etapie koszyka i nie dokonuje zakupu, warto zastanowić się dlaczego tak się dzieje. Identyfikując porzucenie koszyka zaczynamy tworzyć hipotezy oraz wprowadzamy usprawniające ten proces działania. Warto także wprowadzić w tym momencie testowanie pomysłów, aby określić, które zmiany będą miały pozytywny wpływ na Twoje User Flow. 

Czym są Interaktywne Prototypy? 

Aby wyjaśnić zagadnienie prototypów musimy najpierw przyjrzeć się tematowi tzw. wireframes. To właśnie za ich pomocą zaczynamy tworzyć User Flow, aby ustalić podstawową strukturę strony przed dodaniem wizualnego projektu i zawartości, uwzględniając oczywiście potrzeby użytkowników i możliwe ścieżki wyboru. Wireframing to więc nic innego jak sposób na zaprojektowanie serwisu internetowego czy aplikacji na poziomie strukturalnym, nie martwiąc się zbytnio finalnym wyglądem produktu. Możemy tego dokonać w łatwy sposób poprzez szkic na papierze lub bezpośrednio za pomocą programu (np. Sketch, Adobe XD, Proto.io itd.).

Kiedy więc stworzymy nasz User Flow i przygotujemy makiety w wybranym programie, możemy zająć się kolejnym etapem projektowania jakim jest tworzenie interaktywnego prototypu. W tym momencie zaczynamy dodawać faktyczną zawartość jaką będzie posiadał nasz finalny produkt. W odróżnieniu od wireframes’ów prototypy są zazwyczaj wysokiej jakości (high-fidelity), co pozwala użytkownikowi na faktyczne testowanie interfejsu i interakcji zachodzących za pomocą produktu. Testy przeprowadzone na prototypie już we wczesnym etapie projektowania umożliwiają dokonania oszczędności w czasie i nakładzie pracy.

Jaka jest więc różnica pomiędzy tymi dwoma etapami projektowania? Otóż wireframes to nasza baza, prosty szkic tego, co budujemy. Natomiast interaktywny prototyp to bardziej rozbudowana wersja naszego produktu, zawierająca kluczowe elementy, a kliknięcie poszczególnych przycisków powinno zapewnić osiągnięcie zamierzonego celu. Prototypy pozwalają na zweryfikowanie czy user flow i wireframe’y mają sens dlatego często dokonuje się na nich wielu poprawek. 

Podstawowe narzędzia

SKETCH 

To edytor grafiki wektorowej dla systemu MacOS, który służy do projektowania ekranów i produktów cyfrowych. Jest znany jako prostsze narzędzie do tworzenia projektów i prototypowania niż Adobe Photoshop. 

INVISION 

Pozwala przesłać pliki projektu, które właśnie utworzyłeś w Sketch lub Photoshop i dodać animacje, gesty i przejścia, aby przekształcić ekrany statyczne w klikalne, interaktywne prototypy. Umożliwia także uproszczenie procesu opiniowania, skłaniając klientów lub członków Twojego zespołu do bezpośredniego komentowania projektów. 

CRAFT 

Wtyczka do programu Sketch i Photoshop znacznie ułatwiająca proces projektowania. Jest swego rodzaju pomostem łączącym program graficzny, a narzędzie InVision. Pozwala na ustawienie interakcji pomiędzy poszczególnymi ekranami naszego produktu oraz umożliwia bezpośredni export artboard’ów z programu graficznego do InVision.

Dlaczego warto poświęcać czas na USER FLOW i PROTOTYPOWANIE?

Wiemy już, że wireframe’y oraz prototypy pozwalają ustalić, czy nasze user flow jest prawidłowe i sensowne. Często okazuje się, że brakuje makiet, lub dany etap wykonywania zadań przez użytkownika stwarza jakieś bariery. Wprowadzamy wtedy poprawki, lecz to normalne na tak wczesnym etapie projektowania. Co za tym idzie – oszczędzamy sobie czasu i unikamy naprawiania większych błędów w końcowych fazach realizacji projektu. 

Wiadomo także, że prototypy pozwalają na przeprowadzanie bezpośrednich testów z użytkownikami czy klientami, co daje nam możliwość uniknięcia generacji dodatkowych kosztów. Prototypowanie wspomaga także pracę deweloperów. W momencie kiedy dostają  klikalne ekrany jest im znacznie łatwiej zrozumieć sens działania i istotę produktu, a co za tym idzie usprawniamy wspólną pracę nad projektem. 

Proces tworzenia

Aby rozpocząć proces prototypowania musimy przenieść nasze rozrysowane wireframes’y do programu Sketch. Oczywiście tworzymy tzw. artboardy, na których przygotowujemy makiety. Praca na artboard’ach to podstawa, bez której nie utworzymy linków czy hotspotów. 

Przyjmijmy, że posiadamy już pięknie zaprojektowane ekrany w Sketchu. Jesteśmy więc gotowi na połączenie pierwszego prototypu. Kiedyś użytkownicy musieli synchronizować się z InVision i poprzez przeglądarkę przechodzili w tryb budowania. Obecnie, dzięki wtyczce Craft możemy prototypować bezpośrednio w programie Sketch. Po synchronizacji gotowego wyniku z InVision możemy testować oraz udostępniać innym nasz projekt.  

Links

Zaczynamy od dodawania łączeń, czy też przejść między ekranami/podstronami określanych jako “links”. Link połączy warstwę (layer) naszego artboard’u na której mamy wykonać działanie, np. kliknięcie, z warstwą do której chcemy przejść, czyli do naszego celu (target). Co ważne, wewnątrz artboard’u możemy dodać łącze z dowolnej warstwy, do dowolnego, kolejnego artboard’u. Po ustanowieniu połączenia możemy użyć kilku specjalnych, animowanych właściwości prototypowania jakimi są przejścia (transitions) i gesty (gesture). 

Adding / Preview

Gestures & Transistions

Na ekranie pojawi się okno dialogowe, w którym decydujemy jaki rodzaj gestu uruchamia link i jakie przejście chcemy wykorzystać do animacji przełączenia od ekranu początkowego do obszaru końcowego. Zarówno projekty na wersję mobilną jak i na web/desktop posiadają swoje odmienne właściwości do wyboru. Dla przykładu, jeśli projektujemy prototyp wersji desktopowej to jako gest wybierzemy kliknięcie, a nie tap lub double tap. Poniższe filmiki opierają się na przykładzie aplikacji mobilnej.

Gesture : Adding / Preview

Transitions: Adding 1 / Adding 2   

1. Instant  Preview
2. Dissolve Preview
3. Push Right Preview
4. Push Left Preview
5. Slide Right Preview
6. Slide Left Preview
7. Slide Up Preview
8. Slide Down Preview
9. Flip Right Preview
10. Flip Left Preview
11. Flow Preview
12. Pop Preview
13. Slide Dissolve Preview

Podgląd

Kiedy nasz prototyp będzie gotowy, możemy sprawdzić, czy aby na pewno User Flow ma sens a przejścia działają prawidłowo. Możemy dokonać przeglądu prototypu bezpośrednio w programie Sketch, na Sketch Cloud, gdzie mamy możliwość udostępnienia prototypów klientom i współpracownikom, lub na urządzeniach z systemem iOS.

Kolejną możliwością jest synchronizacja projektu z InVision. Możemy wtedy otworzyć nasz prototyp bezpośrednio w karcie przeglądarki internetowej i w ten sposób dokonywać różnych interakcji, takich jak przeglądanie, sprawdzanie, komentowanie a nawet udostępnianie. 

Podsumowanie

User flow, jako bardzo istotną częścią UX. Opisuje kroki, które podejmują użytkownicy, aby uzyskać dostęp do funkcji, lub by wykonać zadanie w aplikacji. Bez znaczenia czy budujemy prosty czy niezwykle rozbudowany projekt – każde kliknięcie czy przesunięcie jest elementem User Flow i powinno mieć sens. 

Użytkownicy powinni być w stanie prawidłowo zinterpretować naszą aplikację już za pierwszym podejściem, bez zbędnego i czasochłonnego zastanawiania się nad jej działaniem. Tworzenie User Flow pozytywnie rzutuje na sam etap kreowania projektu znacznie go usprawniając. Jest idealnym narzędziem na doskonalenie pracy w zespole. Dobra komunikacja z programistami i innymi członkami teamu jest kluczem do tworzenia inspirujących projektów. Zawsze możemy także powrócić do dokumentacji powstałej przy budowaniu User Flow, aby przypomnieć sobie dlaczego podjęliśmy pewne decyzje. Komunikacja z klientem również staje się łatwiejsza poprzez wspólne omawianie i testowanie funkcji.