Dobry UX zaczyna się od pytania, po co ktoś wchodzi na stronę. Osoba, która wpisała w Google nazwę usługi z miastem, chce szybko sprawdzić zakres, cenę i dane kontaktowe. Ktoś, kto trafił z poradnika, potrzebuje najpierw zrozumieć temat, a dopiero potem zobaczyć ofertę. To dwie różne ścieżki i strona powinna obsłużyć obie, zamiast wrzucać wszystkich na stronę główną.

Ścieżki rozpisujemy na podstawie danych: wejść z wyszukiwarki, najczęściej odwiedzanych podstron, miejsc wyjścia i tego, jakie frazy prowadzą na stronę. Do tego dochodzą rozmowy z Tobą i, jeśli to możliwe, z osobami, które odbierają telefony od klientów. Często to one najlepiej wiedzą, o co ludzie pytają i czego nie mogą znaleźć.

Z tych ścieżek powstaje architektura informacji, czyli mapa podstron i menu, a potem makiety. Makieta to szkic układu bez grafiki. Pozwala ustalić, co ma być na górze strony, gdzie stoi przycisk kontaktu, jak wygląda formularz i ile pól naprawdę potrzebujesz. Poprawka na makiecie zajmuje chwilę, a ta sama zmiana po wdrożeniu kosztuje dużo więcej.

• scenariusze dla głównych grup klientów
• mapa podstron i menu oparta na frazach i danych
• makiety w wersji na telefon i komputer
• uproszczone formularze i widoczny kontakt

UI design to warstwa, którą klient ocenia w pierwszych sekundach. Czytelna typografia, wyraźny kontrast, przyciski, które wyglądają jak przyciski, i spójne kolory sprawiają, że strona wydaje się wiarygodna i łatwa w obsłudze. Chaos w wyglądzie działa odwrotnie, nawet jeśli oferta jest dobra.

Projekt interfejsu zaczynamy od wersji na telefon, bo w większości branż stamtąd przychodzi duża część ruchu. Sprawdzamy wielkość pól do kliknięcia, czytelność tekstu bez powiększania i to, czy najważniejsze informacje są widoczne bez długiego przewijania. Wersję na komputer projektujemy równolegle, a nie jako dodatek.

Elementy interfejsu zbieramy w zestaw komponentów: nagłówki, przyciski, karty, formularze, tabele, komunikaty błędów. Dzięki temu kolejne podstrony powstają szybciej i wyglądają spójnie, a programista ma jasne zasady. UI designer pracuje u nas razem z osobą odpowiedzialną za UX, więc projekt nie rozjeżdża się między tym, co ładne, a tym, co wygodne.

UX writing to pisanie krótkich tekstów w interfejsie: etykiet przycisków, nagłówków sekcji, podpowiedzi w formularzach, komunikatów błędów i potwierdzeń. To one decydują, czy klient wie, co się stanie po kliknięciu. „Wyślij zapytanie o wycenę” mówi więcej niż „Wyślij”, a komunikat „Podaj numer telefonu w formacie 9 cyfr” oszczędza frustracji bardziej niż „Błędne dane”.

UX writing a copywriting: różnica

Copywriting ma przekonać i sprzedać, UX writing ma poprowadzić i usunąć wątpliwości. W praktyce na stronie ofertowej potrzebne są oba. UX copywriting łączy te dwie rzeczy: nagłówek odpowiada na pytanie klienta, akapit pod nim wyjaśnia korzyść, a przycisk mówi wprost, co będzie dalej. Teksty pod wyszukiwarkę piszemy osobno w ramach copywritingu SEO, ale uzgadniamy je z projektem, żeby nie walczyły o miejsce na ekranie.

Przykłady i dobre praktyki UX copywritingu

Kilka zasad, które stosujemy w każdym projekcie. Przycisk opisuje działanie, a nie ogólnik. Formularz pyta tylko o to, co jest potrzebne do odpowiedzi. Cena lub informacja o sposobie wyceny jest blisko przycisku kontaktu. Komunikat błędu mówi, co poprawić, a nie tylko, że coś jest źle. Nagłówki sekcji da się przeczytać jako streszczenie strony, nawet bez akapitów pod nimi.

Projekt, który podoba się zespołowi, nie zawsze jest wygodny dla klienta. Dlatego przed wdrożeniem dajemy klikalny prototyp do przejścia kilku osobom z grupy docelowej. Każda dostaje konkretne zadanie, na przykład znaleźć produkt w określonym rozmiarze, sprawdzić koszt dostawy albo umówić wizytę. Obserwujemy, gdzie się zatrzymują, czego szukają i co klikają przez pomyłkę.

Tę część pracy prowadzi UX researcher albo UX designer, który przygotowuje scenariusze i spisuje wnioski. Nie potrzeba do tego dużych badań. Już kilka sesji zwykle pokazuje najważniejsze problemy: niejasną nawigację, za długi formularz, ukryty koszt dostawy, przycisk, którego nikt nie zauważa.

Po wdrożeniu testy trwają dalej, ale już na danych. W Google Analytics 4 widać, ile osób przechodzi kolejne kroki ścieżki, a przy większym ruchu można porównać dwie wersje tego samego elementu. Więcej o tej pracy piszemy przy optymalizacji konwersji.

Nie zawsze trzeba projektować wszystko od nowa. Jeśli strona ma ruch, ale mało zapytań, a sklep ma wejścia, ale ludzie porzucają koszyk, często wystarczy poprawić kilka miejsc. Audyt UX pokazuje, które to są miejsca i co w nich zmienić.

W audycie przechodzimy główne ścieżki tak, jak robi to klient, analizujemy dane z Google Analytics 4 i, jeśli strona je ma, nagrania sesji i mapy kliknięć. Sprawdzamy nawigację, formularze, kartę produktu, koszyk, czytelność na telefonie i teksty w interfejsie. Wynik to lista problemów z priorytetami i konkretnymi rekomendacjami, którą można wdrożyć etapami.

Audyty UX łączymy z przeglądem SEO, bo te dwa obszary często się przenikają. Wolna strona przeszkadza i ludziom, i robotom. Niejasny nagłówek obniża zarówno zrozumienie oferty, jak i trafność dla wyszukiwarki. Dla sklepów osobny przegląd od strony SEO robimy w ramach audytu SEO sklepu.

W sklepie internetowym UX przekłada się bezpośrednio na przychód. Każdy zbędny krok w zamówieniu, niejasny koszt dostawy albo filtr, który nie działa na telefonie, to stracone zamówienia. Dlatego w projekcie sklepu najwięcej uwagi poświęcamy trzem miejscom: kategoriom, karcie produktu i procesowi zamówienia.

Kategorie muszą pozwalać szybko zawęzić wybór, a filtry pokazywać realne cechy produktów. Karta produktu powinna odpowiadać na pytania, które klient zadałby sprzedawcy w sklepie stacjonarnym: rozmiar, materiał, dostępność, czas i koszt dostawy, zwroty. Koszyk i zamówienie upraszczamy do minimum, z możliwością zakupu bez zakładania konta i z widocznymi metodami płatności.

Projektujemy sklepy na różnych platformach, a pełne wykonanie sklepu z projektem opisujemy na stronie tworzenie sklepów internetowych. Po wdrożeniu w GA4 mierzymy liczbę zamówień, wartość koszyka i miejsca, w których klienci przerywają zakup.

• kategorie i filtry wygodne na telefonie
• karta produktu z odpowiedziami na pytania klientów
• krótki proces zamówienia bez zbędnych pól
• pomiar zamówień i porzuceń koszyka w GA4

Na stronie firmowej celem jest zwykle telefon albo formularz. Projekt ustawia więc ofertę, zakres, sposób wyceny i kontakt tak, żeby klient nie musiał ich szukać. Dla firm usługowych ważne są też podstrony pod konkretne usługi i miasta, bo to na nie trafia ruch z Google. Pełne wykonanie strony z projektem opisujemy na stronie tworzenie stron internetowych.

Landing page projektujemy pod jedną kampanię i jedną akcję. Mniej nawigacji, jeden wyraźny przycisk, odpowiedzi na najczęstsze wątpliwości i formularz w zasięgu wzroku. Tu UX design i marketing działają najbliżej siebie, bo efekt każdej zmiany w układzie od razu widać w koszcie pozyskania zapytania z reklamy. Więcej o tym typie stron piszemy przy landing page.

W aplikacji mobilnej ograniczenia są inne: mały ekran, obsługa kciukiem, praca przy słabym zasięgu. Projekt UX/UI aplikacji zaczynamy od najczęstszych zadań użytkownika i od tego, ile kroków potrzeba, żeby je wykonać. O samym tworzeniu aplikacji piszemy na stronie aplikacje mobilne.