Przewodnik po UX (User Experience): porady, kompendium wiedzy i dobre praktyki w projektowaniu cyfrowym

Pozytywne odczucia użytkownika strony, aplikacji czy narzędzia w chmurze to absolutna podstawa, gdy zależy nam na wysokich konwersjach. Odpowiednia konstrukcja elementów interfejsu, czytelność i estetyka oraz zadbanie o właściwą komunikację to tylko kilka z elementów wpływających na User Experience. 

Jak projektować, by nasi użytkownicy byli maksymalnie zadowoleni?

User Experience - definicja

User experience, czyli “doświadczenie użytkownika” to subiektywne odczucia, których doświadczamy, gdy obcujemy z danym produktem lub usługą, np. aplikacją lub stroną Internetową. 

W latach dziewięćdziesiątych Don Norman ujął User Experience w definicji: 

UX obejmuje wszystkie aspekty końcowej interakcji użytkownika z firmą, jej usługami i jej produktami.”

W praktyce UX to zadbanie o to, by wszystkie elementy strony, aplikacji czy oferty były spójne i łatwe do intuicyjnego zastosowania.

Customer Experience

W większości projektów komercyjnych użytkownik będzie jednocześnie klientem. Zadbanie o jego pozytywne doświadczenia na ścieżce zakupowej nazywamy właśnie customer experience. Termin jest dość szeroki, ale można powiedzieć, że to przeniesienie zasad UX na grunt sprzedaży.

To podejście charakterystyczne dla dużych, silnych marek, które w centrum swojego zainteresowania stawiają klienta i jego problemy.

Czym zajmuje się UX designer?

W przeświadczeniu wielu osób główną rolą UX Designera jest makietowanie rozwiązań, czyli tworzenie szkiców tego jak powinna wyglądać strona/aplikacja/produkt fizyczny. Jednak pod tym pojęciem kryje się dużo więcej.

Zadania UX designera:

  • analiza konkurencji,
  • analiza grupy docelowej,
  • strategia rozwoju produktu,
  • ukształtowanie treści,
  • makietowanie,
  • prototypowanie,
  • testy i iteracja rozwiązań,
  • planowanie fazy dewelopmentu,
  • koordynacja projektu z UI designerem,
  • koordynacja projektu z deweloperem,
  • śledzenie KPI,
  • analiza i iteracja wdrożonych rozwiązań.

UX designer zajmuje się nie tylko budową rozwiązania, ale także pełną jego analizą zarówno przed jak i po wdrożeniu. Jest to perspektywa bardziej biznesowa i techniczna.

UX a UI

User Interface, UI, to realizacja założeń UX w sposób atrakcyjny dla użytkownika. UI powoduje, że użytkownik do Ciebie przychodzi, a UX go zatrzymuje. 

Coś co wygląda pięknie, ale jest niefunkcjonalne to przykład wspaniałego UI i kiepskiego UX. Coś co jest funkcjonalne, ale brzydkie jest przykładem wspaniałego UX i kiepskiego UI.

W projektowaniu cyfrowym ważne jest zachowanie właściwych proporcji i balansu między jednym i drugim.

Czym jest UI?

Po wykonaniu prototypów i przetestowaniu ich z użytkownikami przychodzi czas, aby UI designer uczynił rozwiązanie miłym dla oka.

Termin User Interface (UI) oznacza wszystko, z czym użytkownik wchodzi w interakcję, aby używać cyfrowych produktów i usług. Do tego zaliczają się ekrany i ekrany dotykowe, klawiatury, dźwięki czy nawet światło.

Zadania UI designera:

UI designer zajmuje się doborem kolorystyki, typografią i interakcjami, które są zgodne z oczekiwaniami użytkowników. Do jego zadań należą również:

  • analiza grupy docelowej pod względem estetyki,
  • analiza designu konkurencji oraz innych rozwiązań,
  • branding i oprawa graficzna,
  • design system,
  • prototypowanie na makietach o wysokiej szczegółowości,
  • interaktywność i animacje,
  • adaptacja do wszystkich rozdzielczości ekranów,
  • implementacja z deweloperem,

Rola UI designera jest kluczowa w każdym cyfrowym interfejsie. Przekłada on tożsamość marki na wygląd produktów oraz buduje zaufanie i przywiązanie użytkownika.

UX a SEO

Czasy, gdy dla osiągnięcia sukcesu w wyszukiwarce wystarczyło zapełnić stronę Internetową słowami kluczowymi dawno minęły. Dziś Google uznaje, że wysoka użyteczność strony powinna mieć wpływ na jej pozycjonowanie. Nagradza więc wysokimi pozycjami przede wszystkim strony przyjazne użytkownikom i dostosowane do ich potrzeb oraz zapytań.

Liczą się nie tylko atrakcyjne treści, ale również sygnały od użytkowników: wskaźnik CTR czy współczynnik odrzuceń, a oba te wyniki zależne są właśnie od użyteczności strony. 

Najprościej rzecz ujmując, SEO ma naprowadzić użytkownika na stronę z treścią, której ten szuka, a UX musi go zatrzymać na dłużej, zachęcając do konwersji. Obie dziedziny powinny się również uzupełniać. O czym warto pamiętać na pograniczu User Experience i SEO?

  • Technika odwróconej piramidy – polega na umieszczeniu najważniejszej informacji na początku i rozwijaniu jej stopniowo (wraz z kolejnymi akapitami). To skuteczna strategia zarówno w SEO jak i Content Marketingu;
  • Słowa kluczowe na początku nagłówków i akapitów – to nie tylko duże ułatwienie dla SEO, ale również lepsza nawigacja dla użytkownika, który szybciej znajdzie interesującą go treść;
  • Pogrubienie najważniejszych części – to komunikat dla użytkownika i wyszukiwarki o tym, że konkretny fragment zasługuje na uwagę;
  • Użycie odnośników i alt tekstów grafik ze słowami kluczowymi – są ukłonem w stronę prawidłowego pozycjonowania i user experience osób z niepełnosprawnością (używających specjalnych czytników do poruszania się po stronie);
  • Korzystanie z list punktowanych i numerowanych – ułatwiają użytkownikowi przebrnięcie przez duże partie tekstu, dzięki czemu zostaje on dłużej na stronie;
  • Nie należy lekceważyć rozmiaru czcionki, interlinii i szerokości tekstu. Dwie pierwsze wartości powinny być duże, a szerokość tekstu relatywnie mała. Dobrze jest też zwrócić uwagę na pasek boczny (sidebar), który rozprasza w czytaniu. Lepiej jest z niego zrezygnować.

Zarówno SEO, jak i UX mają wiele, różnych małych celów, ale mają też jeden, główny cel: zwiększenie konwersji. 

Podsumowując:

SEO pozycjonuje, aby użytkownik trafił na stronę. Sensowny UX natomiast zatrzymuje go na niej.

SEO + UX = konwersja

To prosta matematyka. SEO i UX mogą działać osobno, ale tylko razem odniosą sukces w prawdziwym tego słowa znaczeniu.

Projektowanie z myślą o UX

To, co było uważane za estetyczne 10 lat temu, dziś już może odstraszać. Dobry, zgodny z aktualnymi trendami i zasadami UX i funkcjonalny projekt strony, sprawi, że użytkownik zostanie u ciebie na dłużej, a może nawet zostanie klientem.

Warto podkreślić, że nieestetyczna szata graficzna i słaby UX rzutuje nie tylko na wrażenia z używania strony, ale także na wizerunek całej marki. 

Użytkownik rzadko, kieruje się tym, co masz do powiedzenia. Zaufa tej stronie, która wygląda bardziej profesjonalnie. Dopiero potem zagłębi się w treści.

Jak więc dobrze projektować strony Internetowe, aplikacje i inne produkty cyfrowe?

Od szkicu do prototypu

Praca UX designera zaczyna się od przygotowania szkicu, który przedstawia ogólny zarys projektu. Stanowi punkt wyjścia do nakreślenia wyglądu i funkcjonalności aplikacji reszcie zespołu. 

Kolejnym etapem jest makieta projektu o niskiej szczegółowości, przygotowana cyfrowo, tzw. szkielet projektu (wireframe). 

Dopiero potem można zaprojektować mockup, czyli przystąpić do pracy nad finalnym wyglądem. To moment na skupienie się nie tylko na funkcjonalności, ale również na elementach graficznych i zgodności z identyfikacją wizualną. 

Ostatnim etapem procesu projektowego jest przygotowanie prototypu aplikacji.

Kim jest persona i jaki ma wpływ na projektowanie UX?

Persona to postać, która ma reprezentować Twojego modelowego klienta - przedstawiciela grupy docelowej. 

Tworzy się ją na podstawie danych demograficznych i psychograficznych. Podstawowe informacje o personie można uzyskać z analityki strony internetowej. Warto także poznać potrzeby klientów poprzez kontakt z nimi lub z handlowcami. Persona powinna zawierać takie elementy jak: zdjęcie, cytat, bio, cechy demograficzne (wiek, płeć, wykształcenie itp.), praca, zainteresowania, osobowość, motywacje i wartości, frustracje oraz potrzeby. 

Przy tworzeniu persony można wziąć pod uwagę inne elementy, np. marki, którymi persona się interesuje, czy technologie, z których korzysta.

Architektura informacji w projektowaniu UX

Użytkownik, który gubi się na stronie, szybko ją opuszcza. Na szczęście można tego uniknąć, świadomie projektując architekturę informacji. 

Architektura Informacji tworzy szkielet każdego projektu graficznego. To podstawa, do której dopiero potem dodaje się elementy wizualne i według niej tworzy nawigację. Składa się z 4 zasadniczych elementów: systemu organizacji (hierarchiczny, sekwencyjny lub matrix), systemu etykiet, nawigacji, systemu wyszukiwania. Dobrze zaprojektowana architektura umożliwia stworzenie ścieżki użytkownika, która szybko doprowadza go do celu. 

Struktura strony nie powinna być stworzona tylko z myślą o użytkowniku. Jest to jednocześnie rodzaj planu witryny dla wyszukiwarki i ma znaczenie w procesie pozycjonowania.

Co powinna zawierać każda podstrona serwisu?

Niezależnie od typu i przeznaczenia konkretnej podstrony, jest szereg elementów, które okażą się konieczne w każdym przypadku. 

To rzeczy związane z nawigacją i łatwym odnalezieniem się usera na stronie - jak chociażby logo serwisu, które umożliwi powrót na stronę główną.

Jak zaprojektować użyteczną wyszukiwarkę na stronie Internetowej?

Wyszukiwarka to ogromne ułatwienie dla użytkownika, ale tylko pod warunkiem, że działa poprawnie i jest intuicyjna. Nie bez znaczenia jest jej umiejscowienie na stronie – najlepiej, aby był to prawy, górny róg. Dodatkowo musi być oznaczona zrozumiałą dla wszystkich ikoną, czyli lupą. 

Dobrze, aby była umieszczona na każdej podstronie, dzięki czemu użytkownik nie będzie musiał się cofać i jej szukać. Jeśli to możliwe, zasugeruj użytkownikowi, co może wyszukiwać poprzez placeholder “Szukaj”. 

Postaraj się także o to, aby system wyłapywał błędy użytkownika, np. literówki, i rozumiał je. Zaoferuj też możliwość zaawansowanego wyszukiwania, jednak pamiętaj, żeby nie było ono cały czas na widoku.

UX na urządzeniach mobilnych

Google nie lubi stron niedostosowanych do urządzeń mobilnych, bo nie lubią ich użytkownicy urządzeń mobilnych - a Ci obecnie stanowią większość. Doszło więc do sytuacji, w której to strony mobilne są tymi ważniejszymi, częściej używanymi, odpowiadającymi za większość konwersji brandu.. 

Wszystko na stronie mobilnej powinno być więc intuicyjne, od rejestracji po design przycisków. Jeśli strona mobilna będzie źle rozplanowana, a user experience fatalne, odbije się to nie tylko na SEO, ale przede wszystkim na wizerunku i szybkim opuszczeniu strony przez usera.

Szybkie ładowanie

40 proc. użytkowników opuszcza stronę, która ładuje się zbyt wolno. 

Jak myślisz, ile czasu jej dają? 

3 sekundy.

To wyniki badań przeprowadzonych przez Akamai i jednocześnie sygnał dla Ciebie, że strona Internetowa może zostać porzucona, jeszcze nim użytkownik ją w ogóle zobaczy. 

Nikt nie lubi czekać na ładujące się grafiki i inne elementy. Wszyscy chcemy szybko dotrzeć do interesujących nas informacji lub dokonać zakupu i opuścić stronę. Jeśli twoja wolno się ładuje, to użytkownik znajdzie rozwiązanie swojego problemu gdzie indziej. Być może na szybszej i lepszej stronie, a być może tylko na szybszej. To bez znaczenia, jeśli twoja się nawet nie zdąży załadować.

Przyczyn wolnego ładowania może być wiele. Najczęściej problem leży jednak w dużych plikach z grafikami i słabym hostingu.

Reklamy na stronie a User Experience

Prawdopodobnie umieszczasz na swojej stronie reklamy, ale czy masz pewność, że nie przeszkadzają użytkownikowi? 

Warto mieć to na uwadze, ponieważ to właśnie one mogą sprawić, że użytkownik opuści stronę. Może nawet nie sprawdzić jej zawartości. 

Aby tak się nie stało, zwróć uwagę na to, jak i gdzie umieszczasz reklamy. Pamiętaj też, aby ich nie ukrywać – dzięki temu nie stracisz zaufania użytkowników. 

Nie używaj wielu popupów ani nie osadzaj reklam na autoplayu. Obie te funkcje mocno utrudniają korzystanie ze strony.

Nie musisz zwiększać irytacji użytkownika, atakując go pop-upami z informacją o rabacie, nowym produkcie czy newsletterze. Istnieje wiele mniej nachalnych form działań marketingowych online.

Skuteczne przyciski CTA (call to action) 

Przycisk call to action będzie skuteczny tylko jeśli został dobrze zaprojektowany i umieszczony w odpowiednim miejscu. Na jego działanie mają wpływ m.in. rozmiar, kształt oraz kolor. Najlepiej, aby wyróżniał się na stronie. 

Powinien znajdować się na ścieżce, po której porusza się wzrok użytkownika. Niezbędne jest także microcopy, czyli krótki tekst, który wyjaśni użytkownikowi, o co właściwie chodzi. Treść, chociaż krótka, musi być zachęcająca.

Filtrowanie i sortowanie produktów w sklepie Internetowym a UX

Filtrowanie polega na zmianie kolejności produktów, a sortowanie na zmianie ich liczby, zgodnie z kryteriami użytkownika. 

Aby obie te opcje były user friendly, należy pamiętać o kilku rzeczach. Przede wszystkim trzeba uwzględnić filtry dedykowane kategoriom (np. kategoria Obuwie podzielona na ‘sportowe’, ‘sandały’). Dodatkowo użytkownik powinien mieć możliwość wielokrotnego wyboru. Dobrze, aby widział także liczbę sztuk odpowiadającą kryteriom filtrowania oraz zaaplikowane filtry.

UX karty produktu w sklepie Internetowym

Karta produktu to element, który decyduje o tym, czy klient podejmie decyzję o zakupie. Jej optymalizacja jest tym samym bardzo ważna. 

Pamiętaj o tym, żeby pokazywać produkty w proporcji do czegoś, np. ubranie na modelce.

Zapewnij możliwość zakupu przedmiotu czasowo niedostępnego lub informuj o przewidywanym czasie uzupełnienia towaru. 

Daj znać klientowi, gdy na stanie sklepu pozostało już niewiele sztuk produktu. Użytkownik poczuje presję i podejmie szybszą decyzję o zakupie. 

Nigdy nie ukrywaj informacji dotyczących produktu (w tym ocen) ani tych o warunkach darmowej dostawy.

Optymalizacja UX koszyka i procesu zakupowego w celu zwiększenia konwersji

Użytkownicy porzucają koszyki w E-commerce z różnych powodów. Najczęściej, ponieważ jedynie przeglądają dostępne produkty. 

Trudno temu zapobiec, ale istnieją sposoby na optymalizację koszyka i procesu zakupowego, dzięki którym ilość porzuceń może się znacznie zmniejszyć. 

Jednym z nich jest opcja zakupów bez zakładania konta. Proces rejestracji bywa niestety długi, a użytkownicy z reguły chcą robić szybkie zakupy. Warto możliwie najbardziej skrócić i ułatwić proces zakupowy oraz uwidocznić sumę do zapłaty. 

Niezwykle ważne jest także bezpieczeństwo strony – użytkownicy co do zasady nie ufają stronom bez ważnych certyfikatów i wizualnych aspektów, które zwiększają wiarygodność (np. ikona kłódki, inne tło pod formularzem do wpisania danych z karty kredytowej).

Jak projektować formularze przyjazne dla użytkownika?

Większość formularzy, które możemy znaleźć na stronach Internetowych składa się z 5 komponentów: struktury, inputów, etykiet pól, przycisku akcji, informacji zwrotnej. 

Tworząc formularz, pamiętaj o tym, aby nie wymagać od użytkownika zbędnych informacji. Zwróć też uwagę na to, czy pytania łączą się w logiczną całość. Powinny być też umieszczone zgodnie ze ścieżką poruszania się wzroku. 

Dobrze, aby pól było możliwie najmniej. Etykiety twórz krótkie i zawsze widoczne. Jeśli formularz jest skomplikowany, warto umieścić je nad polami, wyrównane do lewej strony.

Zadbaj również o to, aby w formularzu znajdowały się dwa rodzaje przycisków – główny i pomocniczy. Na koniec nie zapomnij o zostawieniu feedbacku informującego użytkownika o tym, że formularz został prawidłowo wysłany.

Formularz logowania i rejestracji - wskazówki UX do zwiększania konwersji

Procesy logowania i rejestracji powinny przebiegać łatwo. Należy więc unikać mylących określeń (np. sign up i sign in) i dać użytkownikowi wybór tego, w jaki sposób chce się logować. Pamiętaj także, aby umożliwić użytkownikowi zobaczenie hasła – jeśli się pomyli, będzie mógł to sam zweryfikować. Zwróć też uwagę, czy ma on możliwość pozostania zalogowanym, a ustawienia zapamiętują ostatnio wybrany login. Użytkownik doceni te funkcjonalności, jeśli często korzysta z Twojej strony.

Informowanie użytkownika o błędzie w formularzu - dobre praktyki

Jednym z istotnych momentów doświadczenia użytkownika ze stroną są komunikaty o błędach. 

Powinny być maksymalnie jasno sformułowane i krótkie. Unikaj języka technicznego, ponieważ użytkownik może go nie zrozumieć. Pamiętaj też, aby używać próśb, nie nakazów. Nigdy nie oskarżaj użytkownika o błąd; lepiej będzie, jeśli wskażesz mu drogę do tego, jak problem rozwiązać. 

W miarę możliwości informuj także, gdzie pojawił się błąd. Użytkownik powinien wiedzieć, czy źle wpisał login, hasło czy też może e-mail. Jeśli to możliwe, postaraj się obrócić sytuację na swoją korzyść, formułując komunikat tak, aby był zabawny.

Projektowanie modułów ocen, recenzji i komentarzy z myślą o User Experience

Warto zadbać o to, aby opcja recenzowania czy komentowania produktów była dopasowana do potrzeb klientów i umożliwiała wystawienie wiarygodnej opinii. Możesz podzielić wystawianie opinii ze względu na cechy produktów. Nie zapomnij jednak o estetyce – wizualna reprezentacja danych jest bardzo ważna.

Pokaż wszystkie oceny i ich rozkład. Niczego nie ukrywaj, również złych opini, ponieważ stracisz na wiarygodności. 

Pamiętaj jednak, aby weryfikować oceny – nie potrzebujesz opinii kogoś, kto nawet nie nabył produktu. 

Wdrożenie chatu

Coraz częściej pojawiającym się elementem na stronach www są czaty - obsługiwane przez boty lub konsultantów. 

Wdrażając chat na swojej stronie należy pamiętać również o UX. Oznacza to nie tylko poprawne zaprogramowanie i zaprojektowanie tej funkcjonalności, ale również korzystanie z niej w sposób, który będzie zwiększał wygodę użytkownika i szybciej doprowadzał go do punktu konwersji.

Stronicowanie treści vs nieskończony scroll

Paginacja i nieskończony scroll mają swoje wady i zalety, więc nie można powiedzieć, że któraś jest lepsza lub gorsza. Dodatkowo istnieje także trzecia opcja, swoiste połączenie obu wspomnianych – doładowywanie strony za pomocą przycisku. 

Niezależnie od wdrażanego sposobu przeglądania, trzeba mieć na uwadze kilka rzeczy, m.in. ilość wyświetlanych treści na telefonach komórkowych i możliwość wyświetlenia linków w stopce..

Świetny UX to świetne wyniki biznesowe

User experience jest dziś obecny we wszystkich obszarach sprzedaży i marketingu Internetowego. Uporczywe ignorowanie jego zasad oznacza więc po prostu niewykorzystany potencjał.

Jeśli chcesz uniknąć takiej sytuacji, możesz w pierwszej kolejności rozważyć przeprowadzenie audytu UX.