UX & UI – użyteczne projektowanie aplikacji dedykowanej

UX i UI – te dwa skróty już od kilku lat przenikają się podczas mówienia o tworzeniu produktów cyfrowych, aczkolwiek zasadniczo się od siebie różnią. Czasami towarzyszą one całemu procesowi projektowemu, a czasami są tylko jego częścią.

Z naszego wpisu dowiesz się:

• Czym jest UX
• Jakie są założenia UCD
• Strategia tworzenia produktu
• Co to jest 4D?
• Co to jest UI?

W poniższym artykule pokazujemy, jakimi zasadami kierujemy się w naszej codziennej pracy oraz jak może przebiegać pełny proces tworzenia aplikacji dla Twojej firmy lub Twoich klientów: od budowania strategii wspólnie z interesariuszami produktu, przez badania, testowanie, wdrożenie oraz współpracę z zespołem developerskim.

Czym jest UX (User experience)

UX to całość doświadczeń użytkownika tworząca się w trakcie kontaktu z usługą lub produktem. Dokładniej ujmując, jest to jego reakcja emocjonalna, wpływająca na wewnętrzny stan i zachowanie. Jest ona zależna od użytkownika, produktu/usługi oraz kontekstu użycia, który tworzy się w każdym momencie interakcji, szczególnie w przypadku multikanałowości (czyli dystrybucji produktu/usługi w wielu kanałach, np. aplikacja na urządzenie mobilne i aplikacja internetowa).

Na dobrze zaprojektowany UX musi się złożyć kilka rzeczy. Jedną z najważniejszych, na której zależy projektantom, jest perswazja, czyli możliwość wpływania na postawę użytkownika poprzez odpowiednio ukierunkowany proces. Jeśli zbudujemy w użytkowniku przyjemne odczucia w stosunku do naszej usługi lub produktu, jesteśmy w stanie nawiązać z nim dobrą i trwałą relację. Jedną z ważnych wytycznych dla projektantów jest metodyka UCD (User Centered Design).

Założenia UCD

UCD uznaje, że głównym celem dobrego designu jest umożliwienie łatwego użycia systemu i jego dostosowanie do potrzeb różnych użytkowników w wielu kontekstach. UCD polega na dobraniu odpowiednich działań oraz metod z zakresu ergonomii i psychologii.

W efekcie prac zgodnych z metodyką UCD, powstaje strategia do projektowania doświadczeń użytkowników. Strategie mogą sięgać do badań etnograficznych, obserwacji użytkowników i eksperymentów. Te konkretne metody mają na celu ocenę emocjonalnych i poznawczych aspektów doświadczeń użytkownika. Są to głównie: zadowolenie, satysfakcja, zaangażowanie, czas spędzony na wybranej podstronie. Nie bez znaczenia są dla nas również popełniane błędy użytkownika końcowego na styku interakcji z produktem.

Główne cele UCD to:

• dogłębne zrozumienie użytkowników – ich zachowań, przyzwyczajeń i kontekstów użycia,
• zaangażowanie interesariuszy i użytkowników końcowych w projektowanie produktu/usługi oraz na etapie wdrożenia,
• regularna walidacja pomysłów i zaangażowanie użytkowników,
• iteracyjna realizacja procesu projektowego,
• odniesienie doświadczeń użytkownika do kontekstu projektu,
• stworzenie interdyscyplinarnego zespołu projektowego.

Szczególnym wyzwaniem są aplikacje używane na wielu kontynentach, przez użytkowników z różnych kultur. W tym przypadku należy bardzo dobrze poznać kontekst użycia oraz samych użytkowników: ich preferencje, ograniczenia czy style działania. Takie podejście pozwala na uniknięcie kosztownych poprawek związanych z nieodpowiednio zamodelowanymi procesami.

Strategia tworzenia produktu

W dobie interfejsów RWD (responsive web design), na każdym urządzeniu potrzeby i oczekiwania klienta mogą być zupełnie inne. Dlatego właśnie pierwszą zasadą jest „Voice of customer”: należy zawsze słuchać głosu klienta. Bardzo ważne jest, żeby już na tym etapie wypracować wspólną wizję i wybrać założenia, które faktycznie będą użyteczne.

Jeśli już posiadamy wstępny zestaw wymagań, warto je zwalidować podczas częstych rozmów („Voice of Business”). Pamiętaj również o ograniczeniach i wymaganiach, jakie czekają na zespół projektowy ze strony poszczególnych działów Twojej firmy (marketing, IT, komunikacja, HR, itd.). Nie bez znaczenia są także standardy i oczekiwania rynkowe („Voice of Market”).

4D – co to jest?

Jedną z popularnych metodyk prowadzenia projektu, która także pozwala zwrócić odpowiednią uwagę na UX, jest 4D. Prowadzi nas ona po kolei przez wszystkie ważne elementy rozwijania produktu/usługi, tj. określenie grupy docelowej, benchmark, zarządzanie projektem, UX, kontrola jakości. Niewątpliwą zaletą tego podejścia jest ciągłe doskonalenie i wpływ klienta na finalną jakość produktu przez cały okres wytwarzania oprogramowania.

Oczywiście należy pamiętać także o tzw. fazie utrzymania, w której produkt powinien być stale dopasowywany do rynku, dynamicznie zmieniając się tak, jak rosnące potrzeby użytkowników.

Discover – czyli określenie, co właściwie chcemy stworzyć

Na samym początku należy określić, jaki problem ma rozwiązywać nasza usługa. Warto zacząć od stworzenia „Business case”, który komunikuje potrzebę biznesową i argumenty za przeprowadzeniem projektu. Na tym etapie nie powinien on zawierać ważnych aspektów, które decydują o finalnym kształcie produktu.

Wartością dodaną są wywiady z interesariuszami projektu, jak również skuteczne zebranie informacji specjalistycznych z działów, dla których będzie projektowana nasza usługa. Takie podejście pozwoli nam zebrać sporą część materiału na wspólne warsztaty, na których stworzymy strategię produktu.

Wprowadzenie warsztatów we wczesnej fazie pozwala na stworzenie poczucia „właścicielstwa” projektu i zaangażowanie firmy zamawiającej produkt. Na początku warsztatów podsumowujemy wywiady i ustalamy priorytety dla celów biznesowych. Na tej podstawie możemy określić wstępne mierniki dla wcześniej zdefiniowanych celów.

Warto również przedstawić efekty researchu rynku i analizę rozwiązań, jakie istnieją u konkurencji. Jest to nieocenione źródło inspiracji do stworzenia „Value Proposition Canvas”, które świetnie sprawdzają się w całościowym spojrzeniu na model biznesowy. Na jednej kartce prezentujemy wszystkie najważniejsze aspekty biznesu, co tworzy szerszą perspektywę pomysłu na produkt. VPC pozwala łatwiej analizować, projektować, a przede wszystkim dobrać odpowiednie rozwiązanie do potrzeb klientów. Co ważne, robi to w usystematyzowany i wizualny sposób.

Naszym pierwszym wyzwaniem jest jasne określenie, jakie zadania wykonuje użytkownik końcowy (Customer jobs) i na jakim etapie mogą być one dla niego problematyczne (Pains). Będą to wszelkiego rodzaju negatywne emocje, ryzyka, nieprzewidziane sytuacje i koszty. W kolejnym etapie możemy określić pozytywne emocje i doświadczenia wypływające z wykonanych zadań (Gains). Zastanów się nad tym, co uszczęśliwia Twojego klienta, jakie rozwiązania mu się podobają, co sprawia, że jego życie jest lepsze. Na koniec spróbuj wybrać te najbardziej kluczowe, najważniejsze korzyści.

Gdy sprecyzujemy model użytkownika produktu, możemy przejść do zaproponowania rozwiązania. Warto na tym etapie stworzyć listę usług, które nasza propozycja wartości ma zawierać. Teraz możemy skupić się na tworzeniu korzyści, czyli wartości dodanych (Gain creators), jak również funkcjonalnościach, które łagodzą ból związany z wykonywaniem zadań oraz interakcją z produktem (Pain Relievers).

W ten sposób zaprojektowana usługa pozwoli nam stworzyć scoring pomysłów. Finalnie warto wybrać tylko te funkcjonalności, które pozwolą wejść na rynek (wg podejścia MVP – minimal viable product), natomiast pozostałe pomysły pozostawić na fazę rozwoju produktu. Macierz wartości i kosztów pozwoli nam wybrać docelową, najbardziej optymalną wersję naszego produktu.

Kolejnym ważnym etapem jest przeprowadzenie badań. Ich celem jest znalezienie potrzeb, z istnienia których odbiorcy nie zdają sobie sprawy. Badania przybliżają nas do poznania i usprawnienia codziennych procesów użytkowników. Bardzo często trwają one przez cały okres tworzenia produktu, pozwalają na bieżąco walidować nasze pomysły.

W efekcie otrzymamy tzw. personę, która będzie między innymi zawierać odpowiedzi na poniższe pytania:

• Kim właściwie są nasi użytkownicy?
• Jaki jest profil naszej grupy docelowej?
• Co użytkownicy końcowi chcą osiągnąć dzięki naszemu produktowi?
• Jakie są ich potrzeby i oczekiwania?
• Jakie zadania muszą wykonać?
• Jakie są ich możliwości i ograniczenia?
• Co ich motywuje do wykonania działań?
• Jaki jest kontekst użycia?
• Jakie odczucia mają użytkownicy podczas wykonywania określonych zadań?
• Czy użytkownicy są otwarci na zmiany dot. interfejsu aplikacji czy nawet procesu swojej codziennej pracy?

Liczba oraz forma przeprowadzonych badań jest bardzo często uzależniona od wiedzy biznesowej, jaką posiadamy na danym etapie. We wczesnej fazie pozwalają odkryć, jakim problemem powinniśmy się zająć. Natomiast kiedy problem zostanie zdefiniowany warto ustalić, jakie rozwiązanie najlepiej na niego odpowie. Pomocne będą dla nas wywiady, analiza, obserwacja użytkowników przy obecnym produkcie.

Define – przeniesienie pomysłu na interfejs użytkownika

Solidnym fundamentem pod zaprojektowanie pierwszych makiet lo-fi (nisko-szczegółowych) jest współpraca z analitykami i konsultacje z częścią zespołu developerskiego. Analitycy bardzo często pomagają spojrzeć szeroko na biznes właściciela produktu, dysponują danymi na temat przypadków brzegowych (np. ile dokładnie może wystąpić wybranych sytuacji w procesie, jak długie mogą być wpisy w polach). Dzięki takim informacjom widzimy wielkość i skalowalność wizji produktu.

Ciekawym podejściem jest tworzenie krótkich warsztatów z analitykami, na których projektujemy user journey maps (ścieżki użytkownika). Warsztat zawsze kończy się podsumowaniem pełnego procesu przez osobę moderującą, natomiast pozostałe osoby stwierdzają, czy został on poprawnie zrozumiany i na bieżąco uzupełniają wiedzę prowadzącego. Warto wspomnieć, że taka wiedza jest również bezcenna dla zespołu developerskiego, odpowiedzialnego za modelowanie logiki biznesowej projektu.

Develop – opieka nad prototypem, wsparcie zespołu developerskiego i ulepszanie

Gdy prototyp zostanie oddany w ręce programistów, wtedy specjalista UX wciela się w rolę konsultanta. Na tym etapie rola UX Designera przenika się z rolą analityka. Dzięki temu zespół posiada większe wsparcie biznesowe i wiedzę dotyczącą procesów. Gdy jeden pełny proces zostanie zaimplementowany i upewnimy się, że wszystkie rozwiązania się sprawdzają, możemy przystąpić do projektowania designu systemu. Jest to zbiór reguł, wzorców, ograniczeń i zasad, zaimplementowanych w projekcie i kodzie. Te 4 atrybuty pełnią odrębne funkcje i zapewniają spójną kolejność, od przycisków do pojedynczych stron. Dobry design systemu zawiera w sobie zbiór komponentów, z których można budować kolejne moduły w projekcie. Często są to: przyciski, tabele, formy na większe ilości elementów, czy sposoby użycia siatki graficznej.

Dobrą praktyką jest połączenie zasad graficznych z instrukcjami dla programistów. Idealną sytuacją jest, gdy każdy komponent posiada próbkę wcześniej przygotowanego i przetestowanego kodu – taka praktyka pozwala szybciej i efektywniej implementować kolejne funkcjonalności. Istotne jest, żeby design systemu nie był statycznym przewodnikiem stylu, lecz cały czas był ulepszany wraz z dojrzewaniem produktu i zmianą potrzeb klienta.

Deploy – wdrożenie i mierzenie efektów

Mierzenie zaimplementowanego rozwiązania bardzo często odbywa się w oparciu o wcześniej założone cele produktu. Testy można wykonać w kilku formach:

• obserwacja, shadowing, badania dzienniczkowe,
• badania eksperckie,
• wywiady indywidualne,
• badania z użytkownikami (moderowane),
• badania zdalne (niemoderowane lub automatyczne),
• ankiety online zawierające zadania do wykonania.

Bardzo często polecamy testy wymagające bezpośredniego udziału użytkowników końcowych. Wspólne testy i obserwacja zachowania użytkownika na interfejsie pozwalają szybko wyciągnąć wnioski i wskazać słabe punkty styku (złe odczucia klienta przy interakcji z produktem). Zazwyczaj zaproponowane zmiany są wprowadzane ad-hoc do prototypu lub wersji testowej aplikacji, co pozwala na późniejsze przeprowadzenie testów A/B i upewnienie się, czy nasze docelowe rozwiązanie spełnia Twoje wymagania.

Gdy posiadamy już wersję produkcyjną, warto rozważyć podpięcie aplikacji typu cursor tracking. Pozwala ona generować raport interakcji użytkownika na stronie w postaci mapy ciepła. Raporty pozwalają odpowiedzieć na pytania, czy podejmujemy właściwe działania zmierzające ku poprawie skuteczności aplikacji, jak i realizacji odpowiednich celów biznesowych firmy.

Nie bez znaczenia jest również mierzenie ruchu w poszczególnych modułach przez Google Analytics. GA odpowiada nam na pytania biznesowe: który rodzaj klientów jest najcenniejszy, jak kształtuje się ruch na stronie oraz które kampanie marketingowe są najskuteczniejsze.

Co to jest UI?

Ze sporym zapasem wiedzy, uzbrojeni w dużą ilość notatek oraz szkiców, możemy przystąpić do tworzenia pierwszych makiet, czyli wstępnego zarysu UI (user interface). W zależności od skali projektu istnieją dwa etapy. Pierwszy z nich przewiduje najpierw stworzenie makiet lo-fi, na których oznaczone są tylko elementy podstawowe i niezbędne do interakcji. Patrzymy na taki projekt z dużym dystansem i chcemy widzieć to, co najważniejsze. Taką makietę można po prostu narysować na kartce. Jest to dobra forma uporządkowania wcześniej zebranych informacji.

Jeśli akceptujesz proces przedstawiony na makiecie lo-fi, nasz zespół przystępuje do zaprojektowania makiety „hi-fi”, która w dużej części przypomina ostateczny produkt. Wtedy coraz większy nacisk kładzie się na szczegóły wszystkich elementów, a nie na ogólny obraz. Na tym etapie zacieśnia się współpraca z frontend developerem, który może wstępnie określić, jak kosztowne w implementacji jest zaprojektowane rozwiązanie. Takie konsultacje często prowadzą do kolejnych usprawnień w procesie i uproszczenia interfejsu użytkownika, co finalnie pozwala całemu zespołowi zaoszczędzić sporo godzin, które mogłyby być stracone na implementację projektu o nierealnym budżecie. Wartością dodaną jest fakt, że na podstawie takich makiet zespół deweloperski jest w stanie szybciej i łatwiej wycenić ostateczny koszt oraz dokładną czasochłonność implementacji.

Autor wpisu: Sebastian Sztyper, Lead Frontend Developer w Kotrak