UX writing, czyli teksty, które prowadzą klienta przez stronę

UX writing to planowanie i redagowanie tekstów interfejsu tak, aby użytkownik rozumiał, co może zrobić i jaki będzie skutek działania. Tekst pojawia się w kontekście konkretnego zadania, na przykład wyboru wariantu produktu, wypełnienia formularza albo opłacenia zamówienia.

Do UX writingu należą etykiety przycisków, nazwy pól, instrukcje, komunikaty błędów, potwierdzenia, etykiety filtrów i informacje o stanie zamówienia. Microcopy to krótkie fragmenty tekstu w interfejsie, które objaśniają działanie elementu albo pomagają przejść przez zadanie.

Tekst interfejsu musi odpowiadać zachowaniu systemu. Przycisk "Zamawiam i płacę" powinien prowadzić do złożenia zamówienia z obowiązkiem zapłaty, a komunikat o błędzie płatności nie powinien sugerować, że zamówienie zostało opłacone. Nielsen Norman Group opisuje teksty interfejsu jako między innymi etykiety poleceń widoczne na przyciskach i w menu.

Konsekwentne nazewnictwo pomaga rozpoznać etap procesu. Jeśli sklep nazywa tę samą czynność raz "koszykiem", a raz "zamówieniem", klient może nie wiedzieć, czy przeszedł dalej, czy wrócił do poprzedniego kroku.

Jeśli teksty wymagają zaplanowania razem z przebiegiem zakupów, projektowanie sklepów WooCommerce z czytelną ścieżką klienta może uwzględnić także nazwy działań i informacje w interfejsie.

Klient spotyka UX writing w każdym miejscu, w którym interfejs przekazuje instrukcję, nazwę działania albo wynik. Tekst powinien odpowiadać na pytanie użytkownika w danym kroku, zamiast powtarzać ogólne hasła marki.

Etykieta przycisku nazywa działanie, a potwierdzenie wyjaśnia, co system zrobił i gdzie klient znajdzie dalsze informacje. Instrukcja przy polu powinna podać wymagany format i wyjaśnić, czy pole jest obowiązkowe.

W3C WAI wskazuje, że tekst zastępczy w polu nie zastępuje etykiety, ponieważ znika po wpisaniu wartości i może być niedostępny dla części technologii asystujących. Zasady opisuje dokumentacja W3C WAI o instrukcjach w formularzach.

UX writing prowadzi użytkownika przez działanie w interfejsie, a copywriting przede wszystkim przedstawia ofertę i argumenty za nią. Oba rodzaje tekstów mogą wystąpić na jednej stronie, ale odpowiadają na inne potrzeby odbiorcy.

Na stronie produktu copywriting może wyjaśniać zastosowanie modelu i jego różnice względem innych produktów. UX writing przy tym samym produkcie nazwie przycisk "Dodaj do koszyka", opisze wybór rozmiaru i wskaże błąd, jeśli klient nie zaznaczy wariantu.

Granica zależy od kontekstu, a nie od długości tekstu. Krótki nagłówek może przedstawiać korzyść, a dłuższa instrukcja może prowadzić użytkownika przez złożony formularz.

Jeśli chcesz oddzielić warstwę interfejsu od całego doświadczenia klienta, przeczytaj wyjaśnienie pojęcia UX i User Experience.

Jasny tekst na przycisku nazywa działanie i pozwala przewidzieć jego skutek. Etykieta powinna być zrozumiała również wtedy, gdy użytkownik zobaczy ją bez otaczającego akapitu.

1. Nazwij działanie: użyj czasownika lub konkretnej czynności, na przykład "Zapisz adres".
2. Doprecyzuj skutek: jeśli krok zmienia stan zamówienia, nazwij rezultat, na przykład "Przejdź do płatności".
3. Sprawdź etykietę osobno: przeczytaj ją bez nagłówka i tekstu obok, aby ocenić, czy sama wyjaśnia działanie.
4. Usuń niejasność: zamień "Dalej" na nazwę następnego kroku, jeśli użytkownik może rozumieć ją na kilka sposobów.

Przycisk "Wyślij" jest czytelny w prostym formularzu kontaktowym, gdy użytkownik wie, co wysyła. W checkoutcie lepsza może być etykieta opisująca skutek, jeśli kliknięcie złoży zamówienie lub rozpocznie płatność.

Etykieta musi odpowiadać działaniu systemu. Jeśli przycisk zapisuje formularz, ale nie składa zamówienia, tekst sugerujący zakup może wprowadzić klienta w błąd.

Teksty w formularzu i checkoutcie powinny wyjaśniać, jakich danych sklep potrzebuje, dlaczego o nie prosi i co użytkownik może zrobić w razie problemu. Poprawiaj je w miejscu, w którym klient podejmuje decyzję lub wpisuje informację.

Przykłady pokazują, jak zastąpić ogólną etykietę informacją potrzebną do wykonania kroku.

Tekst po zmianie powinien zgadzać się z procesem sklepu. Przed publikacją sprawdź, czy opis kosztów odpowiada aktualnym zasadom dostawy, a wymagane dane mają uzasadnienie w realizacji zamówienia. W3C WAI zaleca przekazywanie instrukcji dotyczących wymaganych danych i ich formatu; podpowiedź nie powinna zastępować etykiety pola.

Tekst nie naprawi niejasnej polityki dostaw ani błędnej konfiguracji płatności. Jeśli warunki procesu są nieustalone, najpierw uzgodnij je z osobą odpowiedzialną za obsługę zamówień.

Komunikat błędu powinien nazwać problem i podać możliwy sposób rozwiązania, a potwierdzenie powinno określić, co system zrobił. Konkretna informacja pomaga użytkownikowi wrócić do zadania, gdy nie może samodzielnie odgadnąć przyczyny problemu.

Przy błędzie płatności napisz, że płatność nie została potwierdzona, i podaj dostępne działanie, na przykład ponowienie próby lub wybór innej metody. Nie informuj o opłaceniu zamówienia, jeśli system nie otrzymał potwierdzenia od operatora.

Przy pustym koszyku poinformuj, że nie ma w nim produktów, i wskaż drogę do katalogu. Przy braku towaru nazwij niedostępny wariant i zaproponuj realny następny krok, jeśli sklep go oferuje.

W3C WAI zaleca, aby komunikaty o błędach były zrozumiałe i pomagały użytkownikowi je rozwiązać. Tekst powinien wskazać pole lub problem, a nie opierać się wyłącznie na kolorze. Szczegóły zawiera dokumentacja W3C WAI o powiadomieniach w formularzach.

Wzór komunikatu: co się stało, co użytkownik może zrobić i co wydarzy się dalej. Przykład: "Nie udało się potwierdzić płatności. Spróbuj ponownie albo wybierz inną metodę. Zamówienie pozostaje nieopłacone do czasu potwierdzenia transakcji."

Tekst interfejsu działa wtedy, gdy użytkownik rozumie go podczas wykonywania zadania i potrafi przejść do kolejnego kroku. Sam przegląd redakcyjny nie pokaże, czy klient rozumie komunikat w trakcie zamawiania.

1. Przejdź przez proces: wykonaj zakup na telefonie i komputerze, zapisując miejsca, w których tekst nie wyjaśnia działania lub wymaganego formatu.
2. Sprawdź z użytkownikiem: poproś osobę, która nie zna sklepu, o wykonanie konkretnego zadania i obserwuj, gdzie się waha lub popełnia błąd.
3. Porównaj dane: przed zmianą i po niej sprawdź błędy formularza, ukończenia checkoutu i kliknięcia w ważne przyciski.
4. Zmieniaj pojedynczy problem: jednoczesna zmiana tekstu, układu i ceny dostawy utrudnia ocenę, co wpłynęło na wynik.

Google Analytics 4 pozwala analizować zdarzenia skonfigurowane dla sklepu. Microsoft Clarity udostępnia nagrania sesji i mapy kliknięć, które pomagają sprawdzić, jak użytkownicy zachowują się na stronie. Dane nie wyjaśniają same motywacji, dlatego zestaw je z testem zadania, zgłoszeniami obsługi lub rozmową.

Jeśli obserwacje wskazują na rezygnacje przy składaniu zamówienia, sprawdź diagnozę porzuconego koszyka WooCommerce.

Zakup utrudniają teksty, które nie wyjaśniają działania, pomijają ważną informację albo używają różnych nazw dla tego samego elementu. Każdy problem poprawiaj w miejscu, w którym wpływa na decyzję lub wykonanie kroku.

• Ogólny przycisk: "Dalej" nie wskazuje, czy klient przejdzie do dostawy, płatności czy podsumowania. Nazwij następny krok.
• Żargon: skróty i terminy techniczne zmuszają klienta do domyślania się znaczenia. Zastąp je słowami używanymi przez odbiorców.
• Błąd bez rozwiązania: "Nieprawidłowe dane" nie wskazuje pola ani poprawki. Podaj, czego brakuje lub jaki format wpisać.
• Ukryty koszt: informacja o opłacie pokazana dopiero po wypełnieniu formularza może przerwać decyzję. Pokaż koszt na właściwym etapie.
• Niespójne nazwy: nazywanie tej samej czynności "kup teraz", "zamów" i "złóż zamówienie" może zaciemnić różnicę między etapami. Ustal jedną nazwę dla każdego działania.

Perspektywa KC Mobile: podczas przeglądu sklepu sprawdzamy tekst razem z zachowaniem elementu. Komunikat może być poprawny językowo, a mimo to nie pomagać, jeśli pojawia się poza widokiem użytkownika albo nie wskazuje pola, którego dotyczy.

Jeśli problem obejmuje nie tylko treść, ale też układ, formularz lub przebieg zakupu, projektowanie sklepu internetowego WooCommerce może objąć prace nad całą ścieżką. Przy problemie skupionym na barierach zakupowych pomocny będzie audyt konwersji sklepu WooCommerce.

• Interfejs użytkownika (UI): definicja, elementy i przykłady
• Customer experience: co oznacza i jak poprawić doświadczenie klienta
• Jak wykorzystać UX i CRO w e-commerce: plan poprawy konwersji
• Jak zwiększyć konwersję poprzez projekt strony internetowej? Praktyczna lista decyzji