Podstawy User Experience – UX w pigułce


Czy spotkaliście się kiedyś ze stroną lub aplikacją tak nie intuicyjną, że próba sprawnego uzyskania potrzebnych informacji wymagała zdecydowanie za dużo czasu i energii? Bycie ofiarą chaotycznego interface’u z pewnością nie działa korzystnie na wykorzystywanie w pełni potencjału oferowanych opcji i rozwiązań.


Jak zadbać o to, aby tworzone produkty były przyjemne w odbiorze oraz obsłudze dla potencjalnych użytkowników? Czy da się testować strony internetowe, tak aby weryfikować ich odpowiednie ułożenie? Odpowiedź jest jedna – User Experience Design.


Co składa się na UX? Kim jest UX Designer oraz na czym dokładnie polega proces planowania użyteczności i wyglądu stron internetowych bądź aplikacji? Oto podstawy UX w pigułce, które pozwolą Wam odpowiedzieć na powyższe pytania.


Co to jest User Experience Design?


User Experience to inaczej zwane Projektowanie doświadczeń użytkownika. Jest to proces projektowania cyfrowych produktów (zazwyczaj stron internetowych lub aplikacji), które są użyteczne, łatwe w użyciu i przyjemne w interakcji. Podstawowym założeniem UX designerów jest poprawa wrażeń, jakie użytkownicy zyskują podczas interakcji ze stroną internetową oraz zapewnienie im jak najlepszych doświadczeń podczas jej używania.


Termin User Experience (UX) jest bardzo często mylony z User Interface (UI), i często utożsamiany tylko z wyglądem stron internetowych, jednak praca UX designera to proces, który koncentruje się na użytkowniku i w związku z tym składa się z wielu etapów (przeprowadzenia badań UX, testowania strony, projektowania struktury strony, empatyzacji, researchu, copywritingu, architekturze informacji i wiele innych!). Niestety dobrego UXu zazwyczaj się nie zauważa, widzimy przede wszystkim zły UX, gdy mamy negatywne doświadczenia z korzystania z danej strony internetowej.

The „UX is not UI” poster was created by Erik Flowers – http://www.helloerik.com/ux-is-not-ui


Ważne pojęcia związane z UX Experience


Skoro wiemy już czym jest UX, warto również wytłumaczyć kilka pojęć z nim związanych.
1. Product Design – czyli projektowanie produktu. Pojęcia tego używamy do mówienia o projektowaniu produktu, ale również projektowania aplikacji, strony itp.
2. Service Design – czyli projektowanie usługi. Bardzo prężnie rozwijająca się dziedzina. Usługi odgrywają coraz ważniejszą rolę w naszym otoczeniu – dlatego, aby odpowiednio funkcjonowały, ważne jest ich odpowiednie projektowanie.
3. Customer Experience – doświadczenia klienta. Nie chodzi tylko o doświadczenia klienta offline, ale również tych online. Ścieżka klienta online może stykać się z punktami w świecie offline. Poprzez interakcje z obsługą klienta, firmą kurierską, opakowaniem produktu i wieloma innymi elementami.
4. User Interface – czyli to jak wygląda interfejs, z którego korzystamy, np strona internetowa, czy aplikacja. UI designer często pracuje z UX designerem i zajmuje się tworzeniem warstwy wizualnej.
5. CRO – Conversion Rate Optimization. Czyli optymalizacja pod konwersje. Łączy w sobie również wiedzę o UXie, ale przede wszystkim skupia się na konwersjach na stronie.

Proces UX


Jak zatem wygląda proces projektowania UX?
Ogólnie rzecz biorąc, proces projektowania UX jest bardzo elastyczny – nie ma żadnych ścisłych zasad ani kolejności faz. W zasadzie każda firma układa swój własny proces. Bardzo powszechnia znanym jest Design Thinking i to właśnie ten chcę Wam przedstawić.

Schemat: Stanford Design Thinking Model


Czym jest Design Thinking?


Design Thinking to bardzo elastyczny proces tworzenia nowych produktów, usług czy właśnie stron internetowych skupiający się na poznaniu odbiorcy danego projektu, w przypadku UX – na użytkownikach, którzy będą korzystali z danej strony internetowej. Design Thinking koncentruje się na:
odbiorcach danego produktu – zrozumieniu ich potrzeb i bolączek,
znalezieniu nowych rozwiązań – poprzez kreatywne podejście,
– eksperymentowaniu – poprzez tworzenie prototypów oraz ich testowaniu.


Design Thinking opiera się on na 5-ciu etapach:


1. Empatyzacji – Czyli na zrozumieniu odbiorców danego produktu, lub usługi. Wykorzystuje się tutaj różne narzędzia: od wywiadu z użytkownikami, tworzeniu person, map empatii, customer journey czy nawet prowadzeniu service safari. Celem tego etapu jest odkrycie co kieruje daną grupą docelową, jej potrzeb, problemów, dlaczego dokonują takich a nie innych wyborów, co jest ich motywacją.

2. Definiowaniu problemów – Etap definiowania problemów polega na zebraniu wszystkich informacji uzyskanych na etapie empatyzacji oraz zdefiniowaniu problemu, na którym będziemy się skupiać w kolejnym etapie.

3. Generowanie pomysłów – Po zdefiniowaniu problemu użytkowników skupiamy się na wymyślaniu rozwiązań. Celem tego etapu jest wygenerowanie jak największej ilości rozwiązań. Podstawowym narzędziem wykorzystywanym na tym etapie jest brainstorming, ale istnieje również wiele innych metod, które wspomagają kreatywny proces.

4. Prototypowaniu – Na tym etapie tworzymy prototyp danego rozwiązania – zwykle zaczynamy od kartki papieru i długopisu i szkicujemy jak miałaby wyglądać strona czy aplikacja. Następnie przenosimy to do wersji digitalowej używając jeden z programów do tworzenia wireframe’ów takich jak Axure, UXpin czy Figma. Tworzymy prototyp, który następnie przedstawimy użytkownikom, aby poznać ich opinie.

5. Testowaniu – Istnieje wiele sposobów na testowanie strony internetowej, warto tutaj wymienić badania użyteczności z użytkownikami, wywiady pogłębione, audyt ekspercki, testy AB, eyetracking, treetesting czy nawet zwykłe ankiety. Dzięki temu jesteśmy w stanie uzyskać feedback od użytkowników, który pozwoli ulepszyć nasz prototyp, bądź produkt finalny.

Oczywiście proces ten można dostosować do swoich potrzeb. Każdy UX designer działa według swojej własnej roadmapy i swojego procesu projektowania. Jednak to właśnie Design Thinking stanowi często punkt wyjścia w projektowaniu UX.
Więcej o Design Thinking znajdziesz na stronie: https://designthinking.pl/co-to-jest-design-thinking/.


Wireframe, mockup, prototyp, makieta – czyli o co w tym wszystkim chodzi


Często w pracy UX designera przewijają się te terminy. Warto jednak od razu wyjaśnić co jest czym.

  • Wireframe – projektanci UX często rozpoczynają projektowanie strony czy aplikacji od kartki papieru i długopisu – to tak powstaje pierwszy wireframe – czyli informacje jakie elementy strony powinny się gdzie znaleźć – jest to tak zwany papierowy wireframe. Następnie jest on przenoszony do wersji digitalowej i tworzy się low fidelity wireframe – czyli bardzo prosty schemat strony/aplikacji, który zawiera informację, gdzie będzie znajdował się tekst, gdzie grafika, przycisk itp. Następnie we współpracy z copywriterem oraz UI designerem tworzy się high fidelity wireframe.
  • Mockup – czyli makieta – przedstawienie wizualne projektu strony internetowej używając do tego grafiki urządzenia, na którym ma być ona używana. Pozwala wyobrazić sobie jak będzie wyglądała dana strona np. na laptopie.
  • Prototyp – pozwala zrozumieć jak dana strona lub aplikacja działa. Prototyp symuluje finalny produkt, możemy zademonstrować działanie naszego produktu innym.

Źródło: medium.com https://medium.com/@appsexpert/understanding-the-basic-difference-between-wireframes-mockups-and-prototypes-8395bd7d3b19


Narzędzia przydatne dla UX Designerów

Wiemy już co nieco, o tym czym jest ten UX, jak wygląda proces projektowania UX designera, czym jest Design Thinking, jakie są badania UXowe, co to jest wireframe, warto również poznać narzędzia z jakich korzystają UX designerzy. Najbardziej popularne z nich to:

  • Sketch — jeden z najczęściej używanych przez projektantów UX program do tworzenia wireframe
  • Adobe XD – używany do prototypowania oraz projektowania interface’ów
  • Axure – używany do tworzenia wireframe
  • Figma – bardzo zyskujący na popularności program, umożliwiający wspólną pracę nad projektem
  • UXPin — oparty na przeglądarce, można w nim projektować i tworzyć prototypy
  • Invision – do tworzenia prototypów i wspólnego projektowania.

Również bardzo przydatne są programy typu Miro czy Mural – tak zwane wirtualne whiteboardy, dzięki którym łatwo można uporządkować informację, czy to podczas burzy mózgów, warsztatów czy pracy indywidualnej na projekcie. Posiadają również wiele przydatnych templatek. Można w nich tworzyć np persony, customer journey i wiele innych.


Podsumowanie

Pomimo tego, że projektowanie UX to często złożony i długotrwały proces należy uświadomić sobie, jak ważnym elementem jest rozumienie potrzeb użytkownika. Odpowiednie dopasowany układ strony lub aplikacji może stać się kluczowym czynnikiem wpływającym na zadowolenie użytkowników oraz wybór naszych produktów spośród ofert konkurencji.

Podobno dla wielu użytkowników o wiele łatwiejszym zadaniem jest rozpoznanie źle skonstruowanej strony internetowej niż zwrócenie uwagi na dobre i praktyczne rozwiązania UXowe. Warto zadbać o to, aby nieodpowiedni projekt nie wpływał negatywnie na zadowolenie klientów. Możliwość szybkiego i łatwego dostępu do informacji lub opcji jakie oferuje dana strona internetowa sprawi, że użytkownicy chętniej i częściej będa z niej korzystać, co bezpośrednio przekłada się na zyski, jakie można otrzymać.
Już teraz zauważyć można liczne programy i narzędzia wspomagające proces projektowania doświadczeń użytkownika. Z pewnością zagadnienia z obszaru UX będą coraz częściej dotykane i rozwijane, dzięki czemu wachlarz dostępnych rozwiązań będzie się nieustannie poszerzał.

Oliwia Paciorek

Jestem projektantką UX z doświadczeniem w projektowaniu oraz optymalizacji eCommerce oraz Landing Pages. Uwielbiam sposób, w jaki interakcje cyfrowe mogą łączyć i dostarczać ludziom pozytywne doświadczenia.

Wybrane dla Ciebie

Dołącz do FlowDigital i Wejdź na wyższy Level Swoich możliwości!

Bądź na bieżąco z najnowszymi trendami w świecie digital marketingu!

Dołącz do grona specjalistów!

Zapisz się do Newslettera i otrzymuj najnowsze wiadomości ze Świata Digital Marketingu!

Witamy w gronie specjalistów!

Dziękujemy za zapis! Sprawdź swoją skrzynkę pocztową i potwierdź zapis do newslettera, aby otrzymać dawkę cennej wiedzy.