Robisz wszystko, co możesz, aby stworzyć stronę internetową które doprowadzą odwiedzających do konwersji. Kiedy studiujesz dane analityczne, jesteś podekscytowany, widząc, że utworzona przez Ciebie podróż użytkownika jest wielokrotnie wspierana przez odwiedzających. Jest jednak coś, co uniemożliwia im nawrócenie.
Le formularz kontaktowy jest istotną częścią podróży Twoich gości. Nawet jeśli faktycznie masz prawie wszystko, co może zaoferować strona internetowa, a formularz kontaktowy może zepsuć wrażenia, jeśli nie zostanie prawidłowo użyte. „Zepsute” przyciski, mylące pola, zbyt wiele kroków, niezorganizowany interfejs… nawet rozmieszczenie formularz kontaktowy może zakłócić doświadczenie użytkownika.
Jest wiele rzeczy, które mogą pójść nie tak.
Zasady 5 dotyczące budowania idealnego formularza kontaktowego
Badanie śledzenia wzroku Google opublikowane w 2014 roku wykazało, że przestrzeganie najbardziej podstawowych wskazówek dotyczących projektowania formularze znacząco poprawi komfort użytkowania. W szczególności, gdy formularz kontaktowy spełnia wszystkie zasady, 78% użytkowników może go wypełnić i przesłać za jednym razem. Jednak gdy formularz kontaktowy narusza te zasady, tylko 42% jest w stanie to zrobić za jednym razem.
Ciekawi Cię, jakie są te zasady? Więc czytaj dalej.
Zasada nr 1: skup się na wyrównaniu
Jak zobaczysz w innych zasadach tutaj, ludzie często martwią się długością formularze kontaktu, co często prowadzi do złych wyborów projektowych. Weźmy na przykład kwestię wyrównania.
Możesz zobaczyć taki formularz na stronie BrainTraffic i pomyśleć: Hmmm… ale czy to nie jest zbyt długie na wypełnienie?
Jednym ze sposobów myślenia o rozwiązaniu tego „problemu” jest przesunięcie etykiet w lewo i umieszczenie pól odpowiedzi w prawo. Jednak eksperci UX powiedzą Ci, że jest to poważny błąd, ponieważ ogranicza możliwość skanowania formularza. To samo dotyczy sytuacji, gdy myślisz o umieszczeniu pól obok siebie w poziomie.
Jeśli chcesz swój formularze styki spełniają normę wyrównania, oto co musisz zrobić:
- Wyrównaj do lewej wszystkie etykiety, pola formularzy i główny przycisk wezwania do działania.
- Nigdy nie wyrównuj powiązanych pól w poziomie. Formularz można ustrukturyzować logicznie, ale każde pytanie lub pole powinno być ułożone pionowo.
- Każde pole z pytaniami wielokrotnego wyboru (z mniej niż sześcioma opcjami) musi być wyświetlane na pionowej liście punktów lub pól wyboru, a nie w menu rozwijanym.
Reguła 2: uwzględnij wszystkie odpowiednie pola
Jeśli chodzi o projektowanie formularzy kontaktowych, możesz pomyśleć, że im krótsze, tym lepsze, prawda? Nie zawsze tak jest. Najważniejsze jest to, aby zapewnić użytkownikom wszystkie niezbędne i odpowiednie pola.
Zrobił to Michael Aagaard, starszy optymalizator konwersji w Unbounce prezentacja w 2015 r., który poruszył ten problem. On i jego zespół chcieli wiedzieć, co by się stało, gdyby skrócili ten formularz kontaktowy:
Jak widać, usunęli pola, które uważali za niepotrzebne, aby usprawnić proces wypełniania formularza. Jednak po zakończeniu testu stwierdzili 14% spadek konwersji w przypadku krótszej formy.
Reguła # 3: Uprość pola
Nie ma znaczenia, czy Twoi użytkownicy korzystają z formularza kontaktowego za pomocą komputera stacjonarnego lub urządzenia mobilnego, czy też potrzebują technologii wspomagającej, aby im pomóc, formularz musi być wyposażony. aby uprościć proces wprowadzania.
Oto kilka technik, które powinieneś znać:
tabelaryczne
W przypadku użytkowników komputerów stacjonarnych i osób z problemami z dostępnością upewnij się, że w formularzu kontaktowym jest włączona logiczna kolejność zakładek.
Maski wejściowe
Zamiast zmuszać użytkowników do zgadywania, jak chcesz sformatować określone pola, możesz dodać je za pomocą masek wprowadzania, które automatycznie je formatują.
Autouzupełnianie Google
Zamiast kodować każde pole, aby tak było formaty automatycznie zgodnie ze standardami, które mają być przestrzegane, aktywuj autouzupełnianie za pomocą wtyczki Google Addresses Autouzupełnianie. To nie tylko uchroni Cię przed błędami ortograficznymi i nieprawidłowo wypełnionymi adresami, ale także uchroni odwiedzających przed wpisywaniem większości tych informacji.
Reguła # 4: Wyjdź ze wszystkich
Chociaż zdaję sobie sprawę, że ta zasada będzie sprzeczna z podstawami minimalizmu, jest to zasada, na którą należy zwrócić szczególną uwagę, aby uniknąć niepotrzebnego frustrowania odwiedzających.
Pozwól, że wyjaśnię: masz formularz kontaktowy, który wygląda dość prosto. Twoi użytkownicy wypełniają go na podstawie sugestii etykiet i klikają przycisk przesyłania. Potem dostają tę okropną czerwoną wiadomość: „Nie zrobiłeś tego dobrze! Wróć, popraw formularz i odeślij go! "
Prawdopodobnie spotkałeś się z tym jako użytkownik i wiesz, jakie może to być frustrujące, zwłaszcza jeśli niektóre wprowadzone informacje zostaną usunięte po wyświetleniu błędu. Więc zamiast pozostawiać użytkownikom zgadywanie, co należy naprawić i jak, nie pozwól, aby dotarło do tego punktu. Przeliteruj wszystko po drodze:
- Skoncentruj się w terenie (szczególnie na urządzeniach mobilnych), aby użytkownicy wiedzieli dokładnie, gdzie wypełniają formularz.
- Zapisz wszystkie wymagania dotyczące formatowania, jeśli nie używasz masek wprowadzania do automatycznego formatowania pól.
- Wyraźnie wskaż, kiedy pole jest „Opcjonalne” (użyj słowa, a nie czerwonej gwiazdki).
- Daj użytkownikom możliwość pokazywania lub ukrywania pola hasła podczas wpisywania.
- Wyświetlaj komunikat o błędzie, gdy tylko użytkownik zajmie się polem. Nie czekaj z tym do końca.
Reguła # 5: Nie ukryj porady
Tekst tablicy w formularzu kontaktowym wygląda następująco:
Zobacz, jak Target umieszcza etykiety w polu? W niektórych formularzach kontaktowych te etykiety / wskazówki po prostu znikają, gdy użytkownik kliknie pole. Cel traktuje to trochę inaczej i przenosi etykietę na górę pola pola (zobacz „adres e-mail”).
Niezależnie od tego, jak to się robi, eksperci ds. Użyteczności, podobnie jak grupa Nielsen Norman, powie Ci, że jest to zła praktyka projektowa, ponieważ:
- Jest to problematyczne w przypadku wielozadaniowości, rozproszonych lub zbyt szybkich użytkowników w następnym polu. Kiedy wskazówka znika, użytkownicy muszą opuścić pole, aby na nowo odkryć to, czego potrzebują.
- Znikające porady uniemożliwiają również użytkownikom powrót do formularza w celu sprawdzenia pracy lub poprawienia błędu bez całkowitego usuwania odpowiedzi, aby zobaczyć, co jest poniżej.
- Jaśniejszy szary tekst używany w zastępczych wskazówkach nie jest idealny do łatwego czytania.
- Pola z tekstem podpowiedzi można pomylić z polami, które już wypełniły dane, pozostawiając użytkownikom możliwość ich zignorowania, przesłania formularza i otrzymania komunikatu o błędzie.
- Niektóre narzędzia do czytania zawartości ekranu nie są w stanie odczytać tekstu podpowiedzi.
Według NNG użytkownicy uważają puste pola za bardziej atrakcyjne niż te, które zawierają tekst podpowiedzi. Nawet jeśli twoje formularze wydają się dłuższe, aby umieścić te etykiety lub deskryptory nad polem, poprawi to użyteczność.
To tyle, jeśli chodzi o te wskazówki, mam nadzieję, że pomogą Ci zbudować lepsze formularze kontaktowe.
