Dołącz do czytelników
Brak wyników

W ogniu pytań

5 listopada 2019

NR 48 (Październik 2019)

Eksperci w ogniu pytań

112

Tym razem w ogniu pytań postawiliśmy specjalistki w dziedzinie UX. Świetnie wiemy, że content jest ważny, ale w tej chwili najważniejszy jest użytkownik i właśnie dlatego postanowiliśmy zgłębić temat must have 2020 – użyteczność. Chcieliśmy się dowiedzieć, na co zwracać uwagę podczas projektowania stron internetowych oraz jak poprawiać doświadczenie klienta, aby zwiększyć konwersję. Kogo i co zapytaliśmy? Tego dowiecie się z poniższego tekstu. Mamy nadzieję, że garść praktycznych wskazówek przyda się Wam w codziennej pracy.

1. Jakie są trzy typowe, a jednocześnie kluczowe błędy w projektowaniu stron www/serwisów transakcyjnych/aplikacji mobilnych?

Agnieszka Turalińska 
UX designer, EDISONDA

Bezrefleksyjne kopiowanie 
„Zróbmy to tak, jak Apple, Allegro, firma X. Skoro firma X odniosła sukces, to mojemu serwisowi też się uda”. Brzmi znajomo? W sugerowaniu się rozwiązaniami znalezionymi w sieci nie ma nic złego, o ile nie oznacza ono bezrefleksyjnego kopiowania. Zawsze należy zwracać uwagę na kontekst użycia oraz grupę docelową. 

PRZYKŁAD:
Aplikacja Uber zawiera menu typu hamburger. Większość jej użytkowników to osoby poniżej 40. roku życia, charakteryzujące się wysokim poziomem kompetencji cyfrowych. Oznacza to, że rozpoznają oni podstawowe wzorce projektowe i wiedzą, jak się nimi posługiwać. Zastosowanie takiego menu w aplikacji skierowanej do innego targetu niekoniecznie się sprawdzi. 

Zapominanie o grupie docelowej
Kolejny częsty błąd to zapominanie o użytkowniku. Zdarza się, że projektujemy „pod siebie”, przywołując własne doświadczenia. Zapominamy przez to o szerokim kontekście użytkowania. Każdy z nas ma doświadczenia i preferencje w używaniu różnorodnych serwisów i aplikacji, a końcowi użytkownicy projektowanego rozwiązania mogą mieć zupełnie inne doświadczenia i potrzeby. Warto więc wcześniej upewnić się, czy zebraliśmy dostatecznie dużo informacji o potrzebach oraz zweryfikować, czy nasza wiedza jest aktualna (np. przeprowadzając badania).

Koncentrowanie się na wąskiej grupie odbiorców
…lub koncentrowanie się na jednej, wąskiej grupie użytkowników i ich specyficznych, niszowych potrzebach. Bywa tak, że projektanci wprowadzają daną funkcjonalność lub rozwiązują problem w określony sposób, ponieważ informacja ta pochodzi od ważnego użytkownika (lub takiego, który często dzwoni do biura obsługi klienta). W tej sytuacji należałoby najpierw odpowiedzieć na kilka ważnych pytań. Jaka potrzeba kryje się za tego typu prośbą? Czy podobne potrzeby mają inni użytkownicy serwisu i jak duża jest ta grupa? Może zaspokojenie danej potrzeby lepiej zrealizować w inny sposób?

Przeładowanie
Kolejnym błędem jest nadmierne przeładowanie serwisu lub aplikacji różnymi funkcjonalnościami. W projektowaniu rzadko „więcej” znaczy „lepiej”. Przed dodaniem nowej funkcjonalności warto odpowiedzieć sobie na pytanie, czy na pewno jest ona potrzebna znaczącej większości użytkowników. Usunięcie funkcjonalności jest niestety o wiele trudniejsze niż jej dodanie, a użytkownicy nie lubią, kiedy coś im się odbiera.

Pomijanie kontekstu biznesowego
Dobry projekt to taki, który uwzględnia potrzeby użytkowników, ale też realizuje cele biznesowe klienta. Niestety, nie zawsze te cele są dokładnie sprecyzowane, dlatego warto rozpoczynać każdy projekt od warsztatu i takiego dopasowania koncepcji, aby była ona nie tylko użyteczna, ale też opłacalna.


Joanna Konopińska
UX specialist, Agencja UX Symetria

Jednym z kluczowych błędów jest projektowanie wyłącznie idealnej ścieżki danego procesu i brak przemyślenia pozostałych scenariuszy. Kompletnie przygotowany proces to taki, który uwzględnia realne przypadki użyć (m.in. ewentualne błędy). Warto zastanowić się nad tym na etapie projektowania, by nie łatać w pośpiechu dziur podczas realizacji wdrożenia. To często owocuje rozwiązaniami, które znacznie obniżają jakość doświadczenia użytkownika z produktem.
Kolejnym problemem jest niewłaściwa komunikacja z użytkownikiem, czyli zaniedbanie jakości treści na stronie i stosowanie niezrozumiałego dla odbiorcy nazewnictwa. Prosty język to niezmiernie istotna kwestia podczas projektowania serwisu, choć często bywa pomijana na etapie prac projektowych. Forma i sposób komunikacji powinny być dopasowane do grupy docelowej serwisu, jednakże zakładanie, że użytkownicy z wąskiej grupy (np. księgowe) doskonale rozumieją branżowe słownictwo jest ryzykowne, dlatego warto to weryfikować.
Brak spójności serwisu zarówno pod względem grafiki, jak i sposobów nawigacji to jeden z większych problemów. 
Podchodząc do projektowania serwisu, konieczne jest globalne spojrzenie na serwis czy aplikację jako całość. Przyjęcie pewnych założeń podczas tworzenia pierwszych ekranów i konsekwentne ich używanie to kluczowa kwestia, aby użytkownik swobodnie poruszał się po serwisie czy aplikacji i mógł się jej „nauczyć”. W przypadku bardziej rozbudowanych produktów dobrym rozwiązaniem jest stosowanie design systemu, który porządkuje i ułatwia pracę.

2. Jak tworzyć skuteczne CTA (call to action), aby zwiększać konwersję? O czym należy pamięć, a czego unikać?

Agnieszka Turalińska 
UX designer, EDISONDA

Jest kilka uniwersalnych zasad, które można zastosować niezależnie od tematyki strony:

Spraw, aby przycisk był widoczny
CTA powinno wyróżniać się na tle innych elementów strony, aby użytkownik miał szansę zobaczyć je jak najszybciej. Kluczowy przycisk akcji powinien być umieszczony w widocznym miejscu, mieć kontrastowy kolor oraz duży rozmiar. Forma graficzna powinna być jednak spójna z layoutem strony. Optymalnie byłoby, gdyby przycisk znalazł się nad foldem, czyli na pierwszym ekranie. Jeśli strona jest obszerniejsza, możesz kilka razy powtórzyć CTA, aby użytkownik nie musiał wracać do góry. Warto jednak pamiętać o kontekście użycia – jeśli projektujesz formularz, przyciski akcji nie powinny się w nim pojawiać kilka razy. 

Wybierz odpowiednią etykietę 
Treść wezwania do działania powinna być zachęcająca i precyzyjna. Najczęściej pojawiają się tam teksty w formie trybu rozkazującego, np: „Kup”, „Czytaj dalej”, „Zapisz się”. Możesz też użyć pierwszej osoby liczby pojedynczej, np. „Zamawiam” lub „Popieram”. Jasny komunikat nie musi być jednowyrazowy – często spotyka się np. „Pobierz darmowy e-book”. 

PRZYKŁAD:
I tym razem bardzo ważny jest kontekst użycia. Jeśli już przekonasz użytkownika, aby kliknął w CTA na stronie z ofertą kredytu i wypełnia on właśnie wniosek kredytowy, to na stronie z formularzem nie umieszczaj przycisku „Wyślij, aby w 15 minut otrzymać informację o decyzji kredytowej”. Wystarczy samo „Wyślij”. Informację o szybkiej obsłudze wniosku umieść w ofercie, aby tam skłonić użytkownika do kliknięcia w CTA.
Jeśli masz sklep internetowy, staraj się unikać sformułowań „Zamawiam z obowiązkiem zapłaty”. Taka forma może odstraszyć klientów. Lepiej wykorzystać tu CTA „Zamów i zapłać”, „Zapłać teraz”, „Kupuję i płacę” lub „Zamawiam i płacę”.

Pokaż korzyści dla użytkownika 
Powiedz odbiorcy, co zyska po kliknięciu w CTA. Może to być konkretna rzecz (e-book, kurs online, rabat) lub obietnica wartości (np. zwiększenie przychodów). Nie musisz wymieniać wszystkich tych korzyści bezpośrednio na buttonie, ale zadbaj o to, by znalazły się one w jego sąsiedztwie. W ten sposób poprawisz konwersję, ponieważ pod wpływem sugestii użytkownik szybciej podejmie decyzję o kliknięciu. 

WKAZÓWKA:
Jeśli dana oferta ma ograniczony czas trwania, poinformuj o tym poprzez wyświetlanie komunikatu o upływającym czasie. Jeśli Twoi konsultanci odpowiadają naprawdę szybko, warto zaakcentować tę przewagę, pisząc np. „Oddzwonimy w 15 min”. Ważne, aby te dane były zgodne z rzeczywistością. 

Dostosuj język do profilu odbiorcy
Pamiętaj o dostosowaniu komunikatu do grupy docelowej. Mniej formalny ton możesz wykorzystać w ofercie skierowanej do młodych ludzi. Nie oznacza to jednak, że do starszych użytkowników należy mówić tonem formalnym i skomplikowanym. Język CTA powinien być prosty i czytelny. Warto zapoznać się z zaleceniami Pracowni Prostej Polszczyzny lub pojęciem tone of voice przy okazji tworzenia treści na stronę.

Pokaż jedno CTA
Ważne, aby nie rozpraszać uwagi użytkownika. Jeśli pokażesz jedno CTA, będziesz mieć pewność, że użytkownik skupi się na tym jednym przycisku. Jeśli dodanie drugiego CTA to konieczność, zwróć uwagę na to, by jego forma nie konkurowała wizualnie z akcją, na której bardziej Ci zależy. 

Niech Twój CTA „oddycha”
Tzw. whitespace pełni w internecie bardzo ważną funkcję. Pusta przestrzeń wokół Twojego CTA jeszcze bardziej uwydatni przekaz. 

Pamiętaj o innych urządzeniach
Sprawdź, jak Twoja strona z CTA wyświetla się na telefonie komórkowym i tablecie. Czy jest responsywna? Jak układają się poszczególne elementy? Jak skaluje się font? Sprawdź, czy wszystko się dobrze wyświetla, a CTA ma odpowiednią wielkość.


Joanna Konopińska
UX specialist, Agencja UX Symetria

Skuteczne CTA musi być dla użytkownika zauważalne, czyli mieć odpowiedni kontrast kolorystyczny względem tła i być otoczone wolną, jasną przestrzenią. Musi również sugerować swoją klikalność, np. poprzez podkreślenie czy zwiększenie rozmiaru fontu. Równie ważne jest copy – powinno informować odbiorcę, czego może spodziewać się po kliknięciu. Odbiór etykiety powinien być prosty i jednoznaczny, aby użytkownik mógł szybko i bez zastanowienia podjąć akcję.

3. Mój przepis na idealny formularz/wniosek online to…

Agnieszka Turalińska 
UX designer, EDISONDA

Zmniejszenie liczby pól w formularzu
Rzecz, którą należy zrobić na starcie, to zastanowić się, czy na pewno wszystkie pola w formularzu są potrzebne. Jaki jest cel gromadzenia poszczególnych informacji? Do czego będą wykorzystywane te dane? Czy zysk z ich wykorzystania jest większy niż ryzyko porzucenia wniosku przez użytkownika zirytowanego wypełnianiem długiego, skomplikowanego formularza?

Grupowanie tematyczne
Kiedy zbędne pola zostaną usunięte, ale formularz nadal będzie długi, warto pogrupować zagadnienia tematycznie i nadać im śródtytuły. Jeśli to nie wystarczy, można podzielić wniosek na kroki. Warto wtedy pokazywać, na jakim etapie znajduje się użytkownik oraz ile kroków zostało jeszcze do końca formularza.

Wykorzystanie autouzupełniania
Jeśli dysponujemy danymi z ciasteczek (cookies), możemy wykorzystać autouzupełnianie. Przykładowo mogą to być ostatnio używane elementy, dane osobowe (po zalogowaniu) lub ogólnodostępne bazy danych – 
np. po wpisaniu kodu pocztowego może się wyświetlić nazwa miejscowości. 

Precyzyjne etykiety i efektywna walidacja
Użytkownik nie powinien mieć wątpliwości, co powinien wpisać w poszczególne pola formularza. Warto więc wyświetlić podpowiedź (w inpucie, przykładowy format danych, dodatkowe informacje dostępne po kliknięciu w ikonę czy tekst z wyjaśnieniem). Jeśli mimo wszystko błąd się pojawi, komunikat o nim powinien być widoczny oraz przedstawiony w jednoznaczny i zrozumiały dla każdego sposób.

Widoczne lub pływające etykiety
Jeśli już jesteśmy przy etykietach – lepiej ich nie ukrywać. Ostatnio dość powszechne jest umieszczenie etykiet wewnątrz pól do uzupełnienia. Po kliknięciu etykieta znika, a użytkownik musi pamiętać, o jaką informację został poproszony. Jeśli chcesz zastosować podobny zabieg, sięgnij po tzw. floating label. W tym przypadku etykieta początkowo jest w polu do wpisania, ale po kliknięciu przenosi się do góry i pozostaje widoczna. 

Projektowanie wg mobile first
Na koniec projektowania warto pamiętać o użytkownikach różnych rodzajów urządzeń. Jeśli formularz będzie uzupełniany na telefonie komórkowym, to najlepiej zacząć projektowanie od wersji mobilnej. Użyteczność można tu poprawić poprzez wykorzystanie możliwości telefonu – np. geolokalizacji czy aparatu fotograficznego itp.


Joanna Konopińska
UX specialist, Agencja UX Symetria

Wcale nie jest to skracanie go za wszelką cenę! Jeżeli nie da się zmniejszyć liczby pól w formularzu (np. ze względu na wymagania biznesowe), nie musimy z tego powodu płakać. Często słyszy się, że najlepszy formularz to krótki formularz. Moim zdaniem nawet dłuższe formularze mogą być przyjemne w obsłudze, jeśli zadbamy o kilka rzeczy.

  1. Przede wszystkim ważne jest indywidualne podejście – przed zaprojektowaniem zastanówmy się m.i...

Pozostałe 70% treści dostępne jest tylko dla Prenumeratorów.

Masz już prenumeratę? Zaloguj się, aby przeczytać artykuł.
Zaloguj się
Nie masz jeszcze prenumeraty? Nic straconego! Dołącz do grona stałych Czytelników już dziś i miej pewność, że żadne treści już Cię nie ominą.
Co zyskasz, kupując prenumeratę?
  • 6 drukowanych wydań magazynu Online Marketing
  • Dodatkowe artykuły niepublikowane w formie papierowej
  • Dostęp do czasopisma w wersji online
  • Dostęp do wszystkich archiwalnych wydań magazynu oraz dodatków specjalnych
  • ... i wiele więcej!
Sprawdź szczegóły

Przypisy