W poprzednim artykule pisałem o sposobach analizy formularzy w celu poprawy ich skuteczności. Dzisiaj przedstawię Wam listę 15 zasad tworzenia dobrych formularzy z którą warto się zapoznać przed rozpoczęciem procesu optymalizacji konwersji.

Skupię się na 15 ogólnych zasadach dobrych formularzy – o tych elementach powinniśmy pamiętać zawsze projektując lub pracując nad poprawą konwersji danego formularza.

15 zasad tworzenia dobrych formularzy

1. Wyrównanie nazw pól formularza do prawej strony

Najszybciej użytkownicy wypełniają formularze, jeśli ich nazwy pól znajdują się bezpośrednio ponad nimi. Zazwyczaj jednak takie formularze zajmują zbyt dużo miejsca, dlatego decydujemy się umieszczać nazwy pól po ich lewej stronie.

W takich przypadkach należy pamiętać o wyrównaniu do prawej strony nazw pól formularza. Ułatwia to użytkownikom skanowanie tekstu oraz usprawnia proces wypełniania formularza. Niezastosowanie się do tej zasady powoduje, że czytelność formularza może znacznie się pogorszyć:


2. Używaj czytelnych czcionek

Pamiętaj o używaniu jedynie czcionek, które są czytelne na ekranie komputera, czyli tych z rodziny sans-serif (np. Verdana).

3. Używaj białego tła, by wyróżnić pola formularza

Białe tło sygnalizuje automatycznie użytkownikowi, że dane pole jest przeznaczone do wypełnienia. Zastosowanie innego koloru może wprowadzić użytkownika w zakłopotanie, sugerując mu np. że danego pola nie da się edytować:


4. Używaj kontrastujących ze sobą kolorów

Nie ma nic gorszego niż zlewające się kolory użyte w formularzu. Źle dobrane kolory sukcesywnie utrudniają każdemu użytkownikowi wypełnienie formularza.

W dobraniu odpowiednich kolorów pomogą Ci 2 narzędzia: color wheel, który dobiera odpowiednie kolory oraz checkmycolours, który sprawdzi zastosowane w designie kolory.

5. Usuń duże objętościowo teksty

Jeżeli Twój formularz poprzedzony jest szczegółową instrukcją wypełniania, najlepszym krokiem będzie, jeśli tą instrukcję usuniesz. Tak czy owak nikt jej nie przeczyta!

6. Używaj pełnych nazw

Unikaj stosowania skrótów w tworzonym formularzu nawet jeśli ich powszechne zastosowanie wydaje Ci się oczywiste. Ktoś może źle rozszyfrować Twoje intencje i wtedy będzie miał spory problem z domyśleniem się co tak naprawdę miałeś na myśli.

7. Pytaj jedynie o elementy, których potrzebujesz

Pytanie o nieistotne z punktu widzenia użytkownika dane bardzo negatywnie wpływa na zaufanie użytkownika do wypełnianego formularza. Przykładem może być tutaj wymagane podanie daty urodzenia w formularzu kontaktowym.

Jeżeli naprawdę potrzebujesz takich informacji – powiedz użytkownikowi dlaczego.


8. Informuj użytkownika na samym początku o wymaganiu specyficznych informacji

Jeżeli Twój formularz pyta o nieszablonowe kwestie (jak np. numer PESEL), dobrze jest poinformować o tym użytkownika na początku, aby mógł przygotować sobie niezbędne dokumenty. Zapewnia to, że nie będzie musiał przerywać procesu wypełniania formularza, by znaleźć brakujące dane.

9. Oznaczaj boldem i gwiazdką wymagane pola

Dzięki jasnemu oznaczeniu wymaganych pól przyspieszamy użytkownikowi proces wypełniania formularza i dajemy mu możliwość skanowania. Ta rada jest oczywiście najbardziej użyteczna, gdy pól wymaganych jest stosunkowo mało.

10. Grupuj pola formularza

Tematyczne grupowanie poszczególnych pól formularza pomaga nam odpowiednio go zorganizować, a użytkownikowi zrozumieć potrzebę wymaganych danych. Istotnym jest, by używać jak najmniejszej liczby ozdobników, które pomogą nam wizualnie stworzyć grupy.


11. Pozwól użytkownikowi zaufać Twojej stronie

Jednym z najważniejszych zadań każdej witryny internetowej jest zbudowanie zaufania. Jeśli chcesz, by użytkownik podał Ci swoje dane, przekonaj go, że może Ci zaufać. Umieść informacje o certyfikatach, bezpieczeństwie i dodaj link do polityki prywatności Twojego serwisu.

12. Używaj walidacji inline

Bezstresowe i wyczerpujące informowanie klienta o popełnionych przez niego w trakcie wypełniania formularza błędach jest bardzo istotne. Jednym z najgorszych tego sposobów jest wyświetlanie pop-upów – używając tej metody możesz mieć pewność, że użytkownik nie będzie dokładnie wiedział o co Ci chodzi (formularz rejestracyjny w Electro pokaże Ci jak nie informować użytkownika o błędach).

Natomiast jeśli chcesz mieć pewność, że Twój użytkownik szybko i w pełni zrozumie popełniony błąd – zastosuj walidację inline (więcej na temat walidacji inline przeczytasz na blogu Lindy Bustos).

13. Ułatwiaj użytkownikowi wprowadzanie danych

Nie wymagaj od użytkownika stosowania odpowiedniego formatu liczb. Przykładek może być numer identyfikacji podatkowej (NIP). Automatyczne przerabianie formatu liczby z 1231231212 na 123-123-12-12 jest znacznie lepszym rozwiązaniem niż informowanie użytkownika post factum o błędnie wypełnionej rubryce.

14. Wyręczaj swojego użytkownika

Wielokrotnie możemy zmniejszyć liczbę pól, które musi uzupełnić użytkownik. Przykładowo, gdy uzyskamy kod pocztowy, możemy automatycznie wygenerować nazwę miejscowości. Podobnie jest przy wprowadzaniu numeru karty kredytowej, który umożliwia nam identyfikację jej rodzaju.

Pamiętajmy przy tym o pozostawieniu użytkownikowi możliwości późniejszej zmiany automatycznie wygenerowanych wartości (w przypadku błędów).

15. Stosuj tylko jeden call-to-action

Wypełnianie formularzy jest niemiłym dla użytkownika procesem samym w sobie. Dodatkowo możemy go utrudnić poprzez zastosowanie kilku przycisków call-to-action. Najlepszym rozwiązaniem jest pozostawienie jedynie pojedynczego przycisku – np. „wyślij”. Odradzam umieszczanie dodatkowych przycisków, takich jak „wróć do początku” lub „wyczyść”.

Jeśli już musimy zastosować dwa różne przyciski call-to-action, postarajmy się, by główny znacząco się wyróżniał.

Podsumowanie

Powyżej przedstawiona lista zawiera 15 najlepszych praktyk o których powinniśmy pamiętać tworząc formularze. Czy po przeczytaniu tego artykułu przychodzą Ci do głowy inne elementy o których trzeba pamiętać? Jeśli tak, podziel się z nami w komentarzach.

Pamiętajmy jednak, że każdy formularz można poprawiać i stosując nawet wszystkie istniejące na świecie spisy najlepszych praktyk, nie uda nam się stworzyć idealnego formularza, który perfekcyjnie trafiał by w język i potrzeby naszych użytkowników.

Każdy formularz trzeba usprawniać. O elementach formularzy, na które należy zwrócić uwagę podczas testów napiszę w artykule w przyszłym tygodniu.

Wiele ludzi podczas rozmowy myli optymalizację konwersji z usability (pl. użyteczność). Niektórzy twierdzą, że oczywistą oczywistością jest, że można postawić znak równości pomiędzy tymi pojęciami. Jestem przekonany, że grubo się mylą. Optymalizacja konwersji to coś znacznie więcej niż usability.

Konwersja, współczynnik konwersji, usability… o co w ogóle chodzi?

Na samym początku chciałbym wytłumaczyć wszystkie pojęcia, aby była co do nich jasność, co przez każde z nich rozumię. Zacznę od podstaw, czyli wyjaśnienia czym jest konwersja, współczynnik konwersji, optymalizacja konwersji i usability. Jeżeli od razu chcesz dowiedzieć się czemu uważam, że optymalizacja konwersji to nie użyteczność przeskocz to wprowadzenie (lub kliknij tutaj).

Konwersja

Konwersja to sprecyzowana akcja, którą chcesz aby wykonali użytkownicy Twojej witryny internetowej. W zależności od biznesu konwersją może być:

• zakup,
• włożenie produktu do koszyka,
• pobranie pliku / aplikacji,
• rejestracja,
• polecenie znajomemu,
• otwarcie czatu,
• wysłanie formularza kontaktowego,
• inne.

Generalnie rzecz biorąc konwersja użytkownika oznacza jego zamianę ze zwykłego odwiedzającego w klienta lub potencjalnego klienta.

Współczynnik konwersji

Po wyliczeniu liczby konwersji, czyli liczby użytkowników, którzy podjęli sprecyzowaną przez nas akcję możemy obliczyć współczynnik konwersji.

Współczynnik konwersji to procentowy stosunek liczby użytkowników, którzy podjęły sprecyzowaną akcję (czyli liczba konwersji) do liczby użytkowników, którzy rozpoczęli proces prowadzący do punktu konwersji (najogólniej rzecz biorąc liczba odwiedzających stronę).

Równanie współczynnika konwersji oznacza, że liczba użytkowników odwiedzających Twoją stronę internetową pomnożona przez współczynnik konwersji da liczbę konwersji (czyli liczbę klientów lub potencjalnych klientów). Dodając do równania średnią wartość zamówienia otrzymujemy obrót w danym okresie.

Prostym wnioskiem z powyższego równania jest, że aby zwiększać sprzedaż można:

• przyciągać więcej użytkowników (kupować ruch),
• zwiększać współczynnik konwersji (optymalizować konwersję),
• zwiększać średnią wartość zamówienia.

Optymalizacja konwersji

Optymalizacja konwersji to zwiększanie współczynnika konwersji. Proces ten prowadzi więc do przekonania większego procenta użytkowników aby wykonał sprecyzowaną akcję (np. kupił produkt). Optymalizacja konwersji prowadzi do tego, że zwiększamy sprzedaż nie wydając ani złotówki więcej na pozyskanie ruchu. Dodatkowe środki możemy przeznaczyć na zdobycie większej liczby użytkowników.

Wyobraźmy sobie witrynę, która przyciąga 20.000 użytkowników miesięcznie, średnia wartość zamówienia wynosi 300 zł, a współczynnik konwersji wynosi 3%. Szybka kalkulacja i wiemy, że rocznie witryna sprzedaje produkty za 2.160.000 zł.

Optymalizując konwersję i podnosząc jej współczynnik do 4% roczny obrót zwiększa się o 720.000 zł do 2.880.000 zł. Mały wzrost, wielki wpływ na biznes.

Przy takim samym budżecie reklamowym witryna może dzięki optymalizacji konwersji zarabiać znacznie więcej.

Usability

Jak podaje norma ISO 9241 użyteczność to miara wydajności, efektywności i satysfakcji użytkownika, z jaką dany produkt (w naszym przypadku witryna internetowa) może być używany do osiągnięcia określonych celów przez danych użytkowników.

Na użyteczność serwisu składa się pięć najważniejszych elementów:

• ease of learning – jak szybko użytkownik, który nigdy wcześniej nie widział danej witryny, może nauczyć się nią posługiwać, aby wykonać podstawowe czynności?
• efficiency of use – jak szybko użytkownik, który nauczył się już interfejsu, jest w stanie wykonać czynności?
• memorability – czy użytkownik, który używał wcześniej daną witrynę, pamięta ją w wystarczającym stopniu podczas kolejnej wizyty, aby płynnie wykonać czynności, czy musi uczyć się wszystkiego od początku?
• error frequency – jak często użytkownicy popełniają błędy podczas korzystania z witryny internetowej? jak poważne są to błędy? jak użytkownicy radzą sobie z popełnionymi błędami?
• subjective satisfaction – jak bardzo użytkownik lubi korzystać z witryny?

Usability sprowadza się do pracy nad poprawą łatwości korzystania przez użytkownika z witryny.

Automatycznie po przeczytaniu powyższego stwierdzenia nasuwa się pytanie:

Jeżeli optymalizacja konwersji skłania użytkownika do wykonania danej czynności, a usability ułatwia korzystanie z witryny (więc i realizację celów) to…

…dlaczego optymalizacja konwersji to nie (tylko) usability?

Odpowiedź na to pytanie jest bardzo prosta.

Optymalizacja konwersji jest procesem znacznie szerszym i zawiera w sobie m.in. pracę nad usability.

Konwersję, czyli proces zamiany użytkownika w klienta poprzez realizację założonego przed nim zadania można porównać (tak jak pisał Mariusz w swoim artykule) do przeprawy przez kładkę.

Kładka to nasza strona internetowa. Jej fundamentem jest właśnie usability. Na jej końcu znajduje się cel, czyli akcja, którą chcemy aby nasz użytkownik wykonał. Powody (symbolizowane przez niebieskie strzałki) dla których użytkownicy opuszczają kładkę i nie realizują akcji, na której nam zależy wychodzą jednak poza obszar usability.

Użytkownicy mogą nie docierać do celu ponieważ:

• nie są zainteresowani podjęciem akcji (np. jedynie oglądają produkty),
• nie rozumieją czym się zajmujesz,
• nie są zainteresowani ofertą,
• nie potrzebują danego produktu,
• nie rozumieją Twojego przekazu,
• nie wszystkie ich wątpliwości zostały rozwiane,
• wolą zamówić produkt u Twojego konkurenta,
• ryzyko jest zbyt duże,
• itp.

Oczywiście jeżeli usability witryny jest kiepskie nim również należy się zająć podczas optymalizacji konwersji.

Aby zaadresować pozostałe elementy, które powodują, że użytkownik nie dociera do celu należy optymalizować cały przekaz marketingowy. W procesie optymalizacji konwersji, obok usability, trzeba pracować nad:

• zestawem wartości dla klientów (ang. value proposition) – to one mają odpowiedzieć użytkownikowi na pytanie „czemu mam kupić u ciebie, a nie u konkurencji?”
• istotnością przekazu – witryna musi być zbieżna z oczekiwaniami użytkownika, czyli odpowiadać przekazowi, który sprowadził użytkownika na daną podstronę
• klarownością przekazu – design i kopia strony powinny być ciągle poprawiane – design powinien być tak zaprojektowany by przepływ wzroku nie był niczym przerywany; klarowność kontentu oznacza, że obrazki i tekst prowadzą do jak najkrótszego czasu potrzebnego do zrozumienia przekazu
• pośpiechem – przekaz powinien być tak skonstruowany, by zachęcał użytkownika do działania właśnie teraz (a nie odkładania go)
• minimalizacją obaw i lęków – należy budować wiarygodność i zaufanie
• eliminacją elementów odwracających uwagę – powinno się pracować nad elementami, które mogłyby odwrócić użytkownika od zaprojektowanej przez nas akcji

Powyższe czynniki dowodzą, że proces optymalizacji konwersji nie jest równy usability.

Optymalizacja konwersji to poprawa całego przekazu marketingowego strony internetowej, w skład którego wchodzi również praca nad usability.

Czy po przeczytaniu tego posta uważacie, że projekt optymalizacji konwersji jest warty rozważenia? Zachęcam zatem do lektury postu Mateusza na temat tego, jaki model współpracy wybrać w ramach projektu optymalizacji konwersji.