Jakie są poszczególne etapy projektowania UX i na czym polegają? Od czego rozpocząć proces projektowy i jakie znaczenie dla końcowego produktu mają Persony? Odpowiedź na te i inne pytania znajdziesz w poniższym artykule. Przeczytaj i dowiedz się jak wygląda proces User Centered Design.

Etapy projektowania UX – omówione zagadnienia:

  1. Projektowanie zorientowane na użytkownika – przypomnienie
  2. Etap pierwszy – empatyzacja
  3. Etap drugi – ustalenie koncepcji
  4. Etap trzeci – projektowanie
  5. Etap czwarty – testy użyteczności
  6. Podsumowanie

Projektowanie zorientowane na użytkownika – przypomnienie

Projektowanie zorientowane na użytkownika (czyli UCD – User-Centered Design) jest podejściem do projektowania, w którym w centrum procesu projektowego stawiany jest użytkownik. Badane są jego potrzeby, pragnienia, oczekiwania, problemy i bolączki. Metodologia User Centered design, jej zasady oraz płynące z jej zastosowania korzyści zostały bardziej szczegółowo przedstawione we wpisie Czym jest projektowanie zorientowane na użytkownika?

Etapy projektowania UX zasadniczo składają się z czterech faz, które są w cykliczny sposób powtarzane, aż do osiągnięcia optymalnej użyteczności i spełnienia wymagań użytkownika.

projektowanie zorientowane na użytkownika

Etap pierwszy – empatyzacja

Etapy projektowania UX rozpoczyna jest faza badawcza, która ma na celu empatyzację – czyli zrozumienie problemów, bolączek, zachowań, wymagań, potrzeb i pragnień naszego użytkownika. Etap ten rozpoczyna się od identyfikacji grupy docelowej użytkowników, a następnie jej obserwacji. Obserwacja taka powinna być przeprowadzana w ich naturalnym środowisku.

Na podstawie zebranych danych badacze / projektanci UX tworzą Persony lub Protopersony — czyli obraz „idealnego użytkownika”. Persona jest ważnym elementem w procesie User Centered Design, ponieważ przypomina o użytkowniku i jego potrzebach na każdym kolejnym etapie. Dzięki temu użytkownik pozostaje w centrum procesu projektowego.

Persony są oparte o wyniki badań — ankiety, wywiady pogłębione i desk research, kiedy Protopersony są wyobrażeniem projektantów na temat użytkownika — są podparte najlepszą posiadaną wiedzą na temat użytkowników. Protopersony będą więc mniej szczegółowe i dokładne, natomiast w sytuacji, gdy nie ma możliwości przeprowadzenia pogłębionych badań i stworzenia Person, Protopersony wydają się odpowiednim rozwiązaniem. Wszystko zależy oczywiście od firmy, projektu i produktu, a także budżetu, wielkości zespołu UX i czasu, jakim dysponują.

W oparciu o wyniki badań Projektanci UX na tym etapie mogą stworzyć także mapy empatii, historyjki użytkowników (user stories), przepływy użytkowników (user flow) czy customer journey map. Wszystkie te narzędzia pozwolą projektantom jeszcze lepiej wczuć się w użytkownika i zrozumieć jego potrzeby. Dobre poznanie jego motywacji, frustracji i pragnień oraz ustalenie np. jego ścieżki zakupu w przypadku e-commerce pozwala stworzyć na późniejszych etapach rozwiązanie odpowiadające potrzebom użytkowników.

Etap drugi – ustalenie koncepcji

Faza druga skupia się na ideacji opartej o wyniki badań i kanwy stworzone w poprzednim etapie. Podczas burzy mózgów zespołu projektowego generowane są liczne koncepcje, pomysły i rozwiązania, które są następnie weryfikowane.

W pierwszej kolejności tworzona jest matryca hipotez, na której znajdują się wszystkie wygenerowane pomysły i dokonuje się ich oceny przez pryzmat wymagań biznesowych. Pomaga to oszacować czy dane rozwiązanie przełoży się na konkretny wynik biznesowy, np. wzrost konwersji, spadek liczby porzuceń koszyka, wzrost liczby powracających użytkowników, wzrost czasu trwania sesji na stronie, wzrost liczby nowych użytkowników czy wzrost liczby udostępnień strony.

W kolejnym kroku hipotezy analizuje się pod kątem ich ważności dla użytkownika oraz trudności wdrożenia. Funkcjonalności stosunkowo ważne dla użytkownika i możliwe do realizacji pod kątem nakładów czasowych czy finansowych będą wdrażane w pierwszej iteracji. Funkcjonalności i rozwiązania nieco mniej ważne, czy trudniejsze do wdrożenia mogą zostać zaplanowane na późniejsze iteracje. Z kolei pomysły, które okażą się mało istotne z punktu widzenia użytkownika czy te ocenione jako wyjątkowo trudne do wdrożenia mogą zostać całkowicie wyeliminowane z puli hipotez. Wykres ten zwany jest Priorytetyzacją Moscow (moscow chart) i pozwala zidentyfikować rozwiązania najważniejsze dla użytkownika, ale także realne do wdrożenia przez deweloperów, w planowanym budżecie i terminie.

Etap trzeci – projektowanie

Trzeci etap dotyczy już projektowania — czyli przekładania wygenerowanych rozwiązań na makiety. Etap ten rozpoczyna się od stworzenia site mapy i rozplanowania architektury informacji. Polega to na zaplanowaniu, jak będzie wyglądał układ strony, co znajdzie się w menu głównym, jakie zakładki i funkcjonalności mają znaleźć się na każdej podstronie.

Po takim wstępnym rozplanowaniu projektanci mogą przejść do tworzenia pierwszych makiet LoFi. Są to makiety o niskiej szczegółowości, zazwyczaj w kolorach czerni, bieli i różnych odcieniach szarości. Ich rolą jest zaprezentowanie rozmiaru i układu poszczególnych elementów, takich jak nawigacja, zdjęcia, tekst, linki, przyciski. Często brak tutaj szczegółów, ponieważ makiety LoFi skupiają się na kluczowych częściach produktu.

Warto jednak już a tym etapie zadbać chociażby o content i nie stosować Lorem ipsum jako wypełniacza. Dobrze we współpracy z copywriterem, content writerem czy UX writerem stworzyć już pierwsze (przynajmniej poglądowe) treści, aby wiedzieć, jak poszczególne nagłówki będą prezentować się na stronie, czy ile miejsca zajmą np. opisy produktów.

Co do narzędzi wykorzystywanych do tworzenia makiet obecnie najpopularniejszym z nich jest Figma – edytor grafiki wektorowej i narzędzie do projektowania interfejsów i tworzenia prototypów. Figma jest już raczej standardem na rynku i korzysta z niej większośc firm (szczególnie w branży IT). Jest ona jednak narzędziem stosunkowo nowym. Wcześniej do tworzenia makiet wykorzystywano głównie Sketch oraz Adobe XD.

Etap czwarty – testy użyteczności

Etapy projektowania UX kończy w teorii faza polegająca na testach użyteczności z potencjalnymi użytkownikami. Projektanci sprawdzają w ten sposób czy zaproponowane przez nich rozwiązania spełniają oczekiwania użytkowników. Testy użyteczności przeprowadzane są w neutralnym, bezpiecznym otoczeniu. Aby się do niego odpowiednio przygotować, należy zapewnić odpowiednie miejsce, stworzyć scenariusz badania i zrekrutować uczestników.

Takie testy polegają na poproszeniu o użytkownika o zrobienie kilku czynności na prototypie. Zadania mogą w zależności od produktu dotyczyć np. dodania produktu do koszyka, zarejestrowania się na stronie, odnalezienia danego produktu na liście produktów czy znalezienia danych kontaktowych. Zadania powinny być proste i zrozumiałe a w trakcie ich rozwiązywania warto zadawać użytkownikowi dodatkowe pytania dotyczące tego, czy miał trudności ze znalezieniem czegoś, czy coś jest dla niego niejasne, nieintuicyjne.

Należy jednak pamiętać, że pytania nie mogą być sugerujące (np. Jak bardzo podoba ci się ten przycisk? – sugerujemy tu, że przycisk użytkownikowi się podoba, a może wcale tak nie być) i powinny odnosić się raczej do funkcjonalności, a nie aspektów wizualnych strony — jest to w końcu czarno-biała makieta.

Podczas testów użyteczności nie można w żaden sposób oceniać użytkownika — sprawdzamy jego sposób poruszania się po stronie oraz to czy strona jest dla niego zrozumiała i intuicyjna. Dobrą praktyką jest rozpoczęcie testów od krótkiego wprowadzenia użytkownika w temat — można się przedstawić, opowiedzieć kilka zdań o projekcie i podziękować mu, że zgodził się na uczestnictwo w testach. Warto podkreślić, że jego rola w tym procesie jest dla nas bardzo ważna. Jeśli test będzie nagrywany lub będą w nim uczestniczyć inne osoby (obserwatorzy), również poinformujmy go o tym przed rozpoczęciem. W trakcie testu nie możemy naprowadzać użytkownika ani sugerować co powinien zrobić i gdzie kliknąć.

Po zakończonych testach użyteczności projektanci oglądają nagrania i przeglądają notatki, w oparciu o które tworzą raport z wynikami testów. Takie podsumowanie pozwala zidentyfikować problemy powtarzające się u uczestników testów i zaproponować wprowadzenie odpowiednich zmian w projekcie.

Podsumowanie

Mimo że w teorii etapy projektowania UX są cztery, to nie zawsze tak wygląda. Po pierwszych testach użyteczności może pojawić się potrzeba powrotu do etapu makietowania i wprowadzenia modyfikacji w architekturze informacji, funkcjonalnościach i elementach strony/aplikacji (etap 3). Być może trzeba będzie na nowo przemyśleć i udoskonalić koncepcję (etap 2) czy nawet powrócić do empatyzacji i przeprowadzić dodatkowe badania, pogłębić wiedzę w danej dziedzinie czy wiedzę o naszych użytkownikach (etap 1).

Etapy projektowania UX nie stanowią twardych reguł. Taki elastyczny model procesu projektowego pozwala na stałe ulepszanie funkcjonalności, działania i wyglądu produktu — tak, aby jak najlepiej odpowiadał na realne potrzeby użytkowników.

Jeśli podobają Ci się treści, które tworzymy, sprawdź również: Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.

Etapy projektowania UX | The ultimate UX Guide #9 klaudia brozyna avatar 1background

Autor: Klaudia Kowalczyk

Graficzka i UX designerka, która za pomocą projektów przekazuje to, co trudno ująć w słowach. Zwraca uwagę na najmniejsze detale – każdy użyty kolor, linia czy czcionka ma znaczenie. Klaudia pasjonuje się projektowaniem grafiki i stron internetowych.

Wprowadzenie do UX:

  1. Czym właściwie jest UX – a czym zdecydowanie NIE jest
  2. UX i UI – różnice i podobieństwa
  3. 7 czynników (dobrego) UX
  4. Co to znaczy UX Design? Definicje i przykłady
  5. Projektujesz UX? Zadbaj o te rzeczy!
  6. Kryteria użyteczności w UX – 10 zasad, które musisz znać
  7. 5 etapów projektowania UX
  8. Czym jest projektowanie zorientowane na użytkownika?
  9. Etapy projektowania zorientowanego na użytkownika
  10. Na czym polega Customer Experience?
  11. Jak ma sie User Experience do Customer Experience?
  12. Co to jest doświadczenie marki?
  13. Co oznacza Human-Computer Interaction (HCI)?
  14. Dlaczego UX jest ważne?
  15. Użyteczność vs funkcjonalność w UX
  16. Przykłady dobrego projektowania UX