Tekst na buttonie – czy ma znaczenie?

Czy tekst na buttonie ma znaczenie? Poznaj rodzaje przycisków i najważniejsze zasady ich projektowania

UX writing w interfejsie obejmuje każdy najmniejszy element, na którym znajduje się tekst, a więc także wszelkiego rodzaju przyciski. Z reguły przycisk, do którego projektujesz tekst, i tak zostanie kliknięty, jednak jakość stworzonego przez Ciebie komunikatu może poprawić wrażenia użytkownika z odwiedzin na stronie lub przyczynić się do zwiększenia konwersji. Sprawdź, jakich zasad przestrzegać podczas projektowania etykiet na przyciski.

Po co nam przycisk?

Przycisk (ang. button) to element interfejsu, który umożliwia użytkownikowi wykonanie konkretnej akcji, np. przejście do nowej podstrony, potwierdzenie zakupu biletów czy zaakceptowanie ciasteczek. Buttony, którymi chcemy uzyskać największy wpływ na interakcję użytkownika, muszą być dobrze widoczne i tak ustawione na stronie, aby uprościć użytkownikowi podjęcie intuicyjnej decyzji. Ważny jest więc nie tylko tekst na tym przycisku, lecz także jego umiejscowienie i wygląd.

Przyciski powinny spełniać 3 warunki:

  • funkcja i stan przycisków są jasne,
  • wskazują, że można rozpocząć działanie,
  • można je łatwo zidentyfikować wśród innych elementów interfejsu.

Odpowiednio zaprojektowany przycisk buduje poczucie komfortu poznawczego i sprawia, że podjęcie działania staje się dla użytkownika naturalne. 

 

Chcesz zwiększyć komfort korzystania z serwisu? Dowiedz się, czym jest responsywna strona internetowa.

Typy przycisków

Poznaj najważniejsze rodzaje przycisków, z którymi spotkasz się podczas projektowania stron internetowych lub aplikacji.

1. Wezwanie do działania (CTA)

Do tej kategorii należą wszystkie przyciski, które mają zachęcić użytkownika do podjęcia jakiejś akcji, np. złożenia zamówienia, sprawdzenia oferty czy zapisania się do newsletteru. Zazwyczaj przyciski CTA występują samodzielnie, dlatego powinny być dobrze opisane i widoczne.

Button wezwanie do działania (CTA)

Źródło: AlohaCamp

2. Przycisk działań podstawowych

 

Przycisk tego typu jest bardzo podobny do przycisku CTA. Kliknięcie w niego jest często pierwszym krokiem dodarcia do celu, którym może być opłacenie zamówienia, założenie konta czy zalogowanie do niego, jak w przypadku banku Pekao. Graficznie wyróżnia się go mocniejszym kolorem.

Przycisk działań podstawowych

Źródło: Pekao24

3. Przycisk działań wtórnych

 

Ten przycisk umożliwia wykonanie akcji, która nie jest tak ważna, jak ta wyrażona na przycisku działań podstawowych. Oba przyciski często występują obok siebie. Przycisk wtórny zazwyczaj jest mniej wyeksponowany wizualnie – może wyglądać jak ghost buton lub zwykły przycisk tekstowy.

Źródło: Hebe

4. Ghost button

 

Ten typ przycisku pełni zazwyczaj rolę podrzędną. Doskonale sprawdzi się, kiedy chcesz umieścić na stronie dodatkową funkcję o mniejszym priorytecie, taką jak np. „Dowiedz się więcej”. Ghost button jest zazwyczaj przezroczysty lub półprzezroczysty, ma wyraźną ramkę i tekst w środku.

Źródło: Spotify

5. FAB (Floating Action Button)

 

To przycisk w kształcie koła z ikoną w środku, który zazwyczaj znajduje się w prawym dolnym rogu strony lub aplikacji. Używa się go, aby zainicjować jakieś działanie w obrębie strony lub aplikacji. Ikona na tym przycisku może być dowolna – najczęściej spotykany jest znak „+” lub ikona wiadomości. Przykładowy przycisk FAB możesz zobaczyć na stronie Your KAYA. Znajduje się na nim ikona wiadomości, a po jego kliknięciu wyświetla się okienko do chatu z konsultantem.

FAB (Floating Action Button)

Źródło: Your KAYA

6. Extended FAB

 

To rozszerzona wersja przycisku FAB, który oprócz ikony zawiera również tekst wyjaśniający działanie tego przycisku, co sprawia, że użytkownicy mogą dokładniej zrozumieć jego funkcję. Przykładem aplikacji, w której zobaczysz Extended FAB, jest Gmail, gdzie za jego pomocą utworzysz nową wiadomość.

Źródło: Gmail

UX writing na przyciskach – 5 praktyk użytecznego projektowania przycisków

UX writing jest istotnym elementem procesu tworzenia przycisków. Przygotowaliśmy 5 praktyk, dzięki którym projektowanie etykiet na różnego rodzaju przyciski będzie znacznie prostsze.

1. Używaj czasowników

 

W przeciwieństwie do rzeczowników czasowniki wprowadzają do komunikatu akcję, dynamikę. Dobrą praktyką jest wykorzystywanie czasowników – zarówno w 2. osobie liczby pojedynczej, jak i 1. osobie liczby pojedynczej na przyciskach, których funkcją jest wybranie jakiejś opcji czy potwierdzenie wyboru. Forma pierwszoosobowa jest szczególnie polecana w przypadku przycisków, które mogą wpływać na konwersję.

Doskonałym przykładem jest platforma sprzedażowa Allegro. Przyciski zaznaczone poniżej mają charakter transakcyjny i wszystkie napisane są w 2. osobie liczby pojedynczej.

Źródło: Allegro

2. Pisz jednoznacznie – wyjaśnij, co się stanie po kliknięciu

 

W projektowaniu buttonów zgodnie z zasadami UX writingu istotne jest także pisanie kontekstowe, czyli przekazywanie użytkownikowi, czego może spodziewać się dalej. Im bardziej jednoznaczny komunikat, tym lepiej. Powinien jak najdokładniej odpowiadać na pytanie, co się stanie, gdy kliknie się przycisk, np. „Przechodzę do podsumowania” zamiast „Dalej” czy „Dodaj zdjęcie” zamiast „Dodaj”.

 

Na przycisku czasem nie da się przekazać użytkownikowi wszystkich istotnych informacji. Dobrym rozwiązaniem jest umieszczenie krótkiego wyjaśnienia pod przyciskiem. Taki sposób sprawdził się na platformie Airbnb, na której możesz zarezerwować nocleg. Przed zmianą komunikatu użytkownicy często porzucali proces rezerwacji, ponieważ obawiali się, że po kliknięciu przycisku z ich konta pobrana zostanie płatność. Umieszczenie krótkiej informacji na ten temat pod przyciskiem wyeliminowało problem.

Źródło: Airbnb

3. Używaj krótkich komunikatów

 

Zazwyczaj przycisk jest obiektem graficznym o ograniczonej przestrzeni, dlatego umieszczenie na nim spójnego i zwięzłego komunikatu może być wyzwaniem. Komunikat na takim przycisku powinien mieć od dwóch do czterech słów. Pozwala to zachować zarówno prostotę informacyjną, jak i spójny wygląd przycisku. Cały komunikat znajduje się wtedy na jednym poziomie, a tekst nie nawarstwia się, dzięki czemu użytkownik może włożyć mniej energii w „objęcie” całego przycisku wzrokiem.

4. Nie wprowadzaj użytkownika w poczucie winy

 

Prawdopodobnie kojarzysz ptaszka aplikacji Duolingo, który denerwuje się, gdy dzień dobiega końca, a przygotowana w aplikacji porcja ćwiczeń nie została wykonana. Duo może wysłać powiadomienie „Wygląda na to, że zapomniałeś o lekcji hiszpańskiego. Wiesz, co się teraz stanie!” Dokładnie ten przykład podaliśmy w naszym tekście o zwodniczych pułapkach.

 

Podobnie oskarżycielski ton pojawia się często na przyciskach typu CTA. Nie jest to dobre rozwiązanie. Tzw. confirmshaming może występować na jednym z dwóch położonych obok siebie przycisków wyboru, np. na banerze zachęcającym do założenia konta oszczędnościowego. Jeśli chcesz zrezygnować z założenia konta, musisz kliknąć: „Nie chcę oszczędzać”, co nie jest prawdą, bo może oszczędzasz w inny sposób.

 

Takie działanie jest przykładem dark patterns, czyli technik, które projektanci stron wykorzystują, aby skłonić użytkowników do podjęcia określonych działań.

5. Pisz spójnie na całym serwisie

 

Projektując opisy na przyciskach, pamiętaj, że mają one pasować do komunikacji w całym serwisie. Jeśli udało ci się określić głos i ton marki, weź je pod uwagę w procesie projektowania. Pamiętaj, jaki charakter ma twoja działalność i wybierz bardziej lub mniej formalny rodzaj etykiet na buttonach.

UX writing przycisków – o czym jeszcze pamiętać?

Może zdarzyć się tak, że zaprojektowany przycisk nie będzie dobrze współgrał z serwisem i jego użytkownikami. W takim momencie warto poszukać rozwiązania. Dobrym pomysłem mogą być testy A/B, dzięki którym sprawdzisz, jak poszczególne elementy różnych wersji przycisku rezonują z użytkownikami.

 

W procesie projektowania przyda się także znajomość prawa Fittsa, które opisuje zależność, jaka występuje między wielkością i odległością celu (w tym przypadku przycisku) a czasem potrzebnym na dotarcie do niego. Przykład: duży i bliżej położony przycisk będzie łatwiejszy do wciśnięcia niż ten mniejszy i położony dalej.

 

Więcej o prawach UX dowiesz się z artykułu: Prawa UX, czyli wykorzystanie psychologii w projektowaniu interfejsów.

Słowa mają moc! Wybierz odpowiedni tekst na buttonie

Użytkownicy chcą wykonać w interfejsie określone działanie. Spodziewają się, że przyciski im to umożliwią: coś przesuną, zablokują, skasują czy wyślą. Jasne i dobrze dopasowane microcopy przycisków wpływa na poprawę doświadczenia użytkownika w interakcji z witryną, dlatego pamiętaj o zasadach UX writingu podczas projektowania etykiet.

 

Dowiedz się więcej o audycie UX.

Autorka tekstu

Zajmuje się dbałością o strategie contentowe i tworzeniem różnego rodzaju treści dla klientów agencji. Absolwentka filologii polskiej na Uniwersytecie Warszawskim. Wciąż pogłębia swoją wiedzę na temat poprawnej polszczyzny. Interesuje się copywritingiem i marketingiem internetowym. Po pracy uwielbia czytać i oglądać dobre filmy.

Marta Ogonowska

Content Specialist

Udostępnij:

Możemy Ci pomóc w zakresie digital marketingu?

Porozmawiajmy!