Robisz wszystko, aby zbudować stronę internetową, która doprowadzi odwiedzających do konwersji. Studiując analizy, jesteś podekscytowany, widząc, że stworzona przez Ciebie podróż użytkownika jest odbierana przez tych odwiedzających raz po raz. Jednak coś powstrzymuje ich przed konwersją. Dowiedz się, co to jest w tym zaawansowanym Przewodniku po formularzach kontaktowych.
Formularz kontaktowy jest kluczowym elementem podróży odwiedzających.
Nawet jeśli skutecznie sprzedałeś je na dowolnej stronie internetowej, formularz kontaktowy może realistycznie zrujnować im doświadczenie, jeśli nie zostanie dobrze wykonany.
Zepsute przyciski, mylące pola, zbyt wiele kroków, zdezorganizowany interfejs … do diabła, nawet umieszczenie formularza kontaktowego może zakłócić wrażenia użytkownika.
Jest wiele rzeczy, które mogą pójść nie tak, a w tym artykule zrobimy wszystko, co w naszej mocy, aby edukować Cię, jak możesz uniknąć tych rzeczy.
W szczególności dajemy Ci nasze…
6 zasad budowania idealnego formularza kontaktowego
Ale trzymaj się, najpierw szybkie PSA…
Zanim przejdziemy dalej, powinieneś wiedzieć, że jest to zaawansowane spojrzenie na świat formularzy kontaktowych WordPress.
Jeśli chcesz prostego wprowadzenia, nasze pierwsze kroki z formularzami kontaktowymi post jest doskonałym miejscem na rozpoczęcie.
Następnie, gdy wiesz, że musisz utworzyć więcej formularzy kontaktowych dla swojej witryny, następnym krokiem jest wybór odpowiedniej wtyczki formularza kontaktowego, aby ułatwić życie.
Gdy już zrobisz te rzeczy, liczymy, że będziesz gotowy i przygotowany do zaawansowanego działania w formie (heh), które nastąpi później.
Moving on…
Loginy użytkownika. Zapisy do członkostwa. Subskrypcje e-mail. Prośby o wycenę. Kwestionariusze. Prośby o wsparcie. Formy zamówienia i płatności.
Istnieje wiele różnych sposobów korzystania z formularzy kontaktowych w witrynie WordPress. Nie zmienia to jednak zasad, których musisz przestrzegać, jeśli chcesz, aby Formularz kontaktowy działał dobrze.
Badanie Google eye-tracking opublikowane w 2014 r. wykazało, że przestrzeganie najbardziej podstawowych wytycznych dotyczących użyteczności w projektowaniu formularzy znacznie poprawi wrażenia użytkownika.
W szczególności, gdy formularz kontaktowy przestrzega wszystkich zasad, 78% użytkowników może je wypełnić i przesłać za jednym razem. Gdy formularz kontaktowy narusza te zasady, tylko 42% jest w stanie to zrobić za jednym zamachem.
Ciekawi cię, jakie są te zasady? Więc czytaj dalej.
Zasada # 1: skoncentruj się na wyrównaniu
Jak widać w niektórych innych zasadach tutaj, ludzie często są zaniepokojeni długością formularzy kontaktowych, co często prowadzi do złych wyborów projektowych.
Weźmy na przykład sprawę wyrównania.
Możesz zobaczyć taki formularz na stronie BrainTraffic i pomyśleć: “Hmmm… ale czy to nie za długo, aby go wypełnić?”
Jednym ze sposobów na rozwiązanie tego “problemu” jest przesunięcie etykiet po lewej stronie i umieszczenie pól odpowiedzi po prawej stronie.
Jednak eksperci UX powiedzą, że jest to poważne Nie-Nie, ponieważ naraża skanowalność formularza.
To samo dotyczy sytuacji, gdy myślałeś o umieszczeniu pól obok siebieally.
Zasadniczo, jeśli odejdziesz od struktury etykiety na górze / pola pod it, stworzysz tarcie w środowisku użytkownika.
W 2010 roku wydano zbiór wytycznych dotyczących projektowania formularzy internetowych o nazwie “Simple but Crucial User Interfaces in the World Wide Web: Introducing 20 Guidelines for Usable Web Form Design”.
Google wybrało te wytyczne w 2014 i przetestowało je za pomocą badania eye-tracking.
Wśród wielu znalezisk doszli do wniosku, że wyrównane do lewej strony formularze z etykietami umieszczonymi na każdym polu przyniosły lepsze wrażenia użytkownika.
Jeśli chcesz, aby formularze kontaktowe przestrzegały tej prostej zasady wyrównania, oto, co musisz zrobić:
- Wyrównaj do lewej wszystkie etykiety, pola formularza i główny przycisk wezwania do działania.
- Nigdy nie wyrównuj powiązanych pól w poziomie. Formularz można uporządkować logicznie, ale każde pytanie lub pole musi być ułożone pionowo.
- Każde pole z pytaniami wielokrotnego wyboru (z mniej niż sześcioma opcjami) powinno być wyświetlane na pionowej liście punktorów lub pól wyboru, a nie w rozwijanym menu.
Ten projekt jest nie tylko świetny dla użytkownika, ale pomoże Twojej witrynie wypełnić lukę między komputerem a mobilnością (szczególnie ważne, gdy pracujesz nad aktualizacją witryn dla mobilnego indeksu Google).
Reguła # 2: Dołącz Wszystkie Odpowiednie Pola
Jeśli chodzi o projektowanie formularzy kontaktowych, można pomyśleć, że krótszy jest lepszy, prawda?
Nie zawsze tak jest. Najważniejsze jest to, że udostępniasz użytkownikom wszystkie niezbędne i odpowiednie pola.
Michael AAGAARD, starszy Optymalizator konwersji dla Unbounce, wygłosił prezentację w 2015 roku, w której zajął się tym właśnie pytaniem.
On i jego zespół chcieli wiedzieć, co by się stało, gdyby skrócili ten formularz kontaktowy:
Jak widać, usunęli to, co uważali za niepotrzebne pola, aby usprawnić proces wypełniania formularza.
Jednak po zakończeniu testu odkryli 14% spadek konwersji przy krótszej formie.
Następnie badali, które pola miały najwyższe i najniższe interakcje w formularzu kontaktowym.
Korzystając z oryginalnego, dłuższego wzoru, zmienili te pola i zaktualizowali etykiety, aby wyjaśnić, jakiego rodzaju informacje były potrzebne.
Ponownie przeprowadzili test i zauważyli 19% poprawę leadów dzięki ponownie oznakowanej i zreorganizowanej wersji długiej formy:
2″width=” 600″height=” 316 ” />Unbounce stwierdził, że klucze do poprawy dłuższego formularza kontaktowego znajdują się w etykietach, a nie w długości formularza.
Jednak nie zawsze tak działają te testy.
Na przykład Expedia odkryła, że w formularzu kontaktowym pojawiło się pole “Firma”, które dezorientowało klientów.
Było to opcjonalne, ale użytkownicy niekoniecznie to rozumieli i z kolei wypełniali błędne informacje, które ostatecznie doprowadziły do odrzucenia ich zakupu.
Kiedy Expedia zdała sobie sprawę z problemu, usunęła pole i zobaczyła dodatkowe 12 milionów dolarów przychodu w następnym roku.
Sugerowałbym, aby podczas tworzenia własnego formularza kontaktowego zacząć od podstawowych pól, tak jak zrobił to QuickBooks tutaj:
Jeśli okaże się, że konwersje nie są zgodne z oczekiwaniami, przestudiuj analizy i sprawdź, czy możesz określić, które pola uniemożliwiają użytkownikom wypełnienie formularza.
Zasada # 3: Uprość Wprowadzanie Danych
Niezależnie od tego, czy użytkownicy korzystają z formularza kontaktowego za pomocą komputera stacjonarnego lub urządzenia mobilnego, czy też potrzebują technologii wspomagającej, aby im w tym pomóc, formularz powinien być wyposażony w celu uproszczenia procesu wprowadzania danych.
Oto kilka technik, których powinieneś być świadomy:
Tabbing
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, w jaki sposób chcesz sformatować określone pola, możesz je kodować za pomocą masek wejściowych, które automatycznie formatują je jako typy użytkowników.
Ten typ automatycznego formatowania prowadzi również do mniejszej liczby kliknięć (zwłaszcza jeśli pole takie jak numer telefonu lub karta kredytowa jest podzielone na wiele pól) i szybszego wypełniania formularzy.
Typy Wejść
Typy wprowadzania HTML pomogą użytkownikom zobaczyć odpowiednie opcje klawiatury podczas pisania na urządzeniach mobilnych, oszczędzając im konieczności wpisywania wszystkiego od zera (jak “.com” dla poczty e-mail).
Autouzupełnianie Google
Zamiast kodować każde pole, aby automatycznie formatować według standardów, które musi spełnić, Włącz automatyczne wypełnianie za pomocą wtyczki autouzupełniania adresu Google.
Nie tylko pomoże Ci uniknąć problemów z błędami w pisowni i nieprawidłowo sformatowanymi adresami, ale oszczędzi odwiedzających od konieczności wpisywania większości tych informacji.
Logika Warunkowa
Jeśli martwisz się długością formularza kontaktowego–zwłaszcza jeśli jest on skierowany do różnych typów użytkowników i spełnia różne cele–możesz użyć logiki warunkowej, aby go skrócić.
Gdy użytkownik wybierze swój konkretny “warunek”, tylko wtedy będzie należy odsłonić odpowiednie części formularza.
Wiele wtyczek formularza kontaktowego zawiera rozszerzenie. Na przykład, tutaj jest jeden dla Forminatora.
Bułka tarta
Bułka tarta lub pasek postępu formularza kontaktowego niekoniecznie musi upraszczać proces wypełniania formularza.
Pomaga to jednak zachęcić użytkowników do jego ukończenia, ponieważ pozostałe kroki są jasno określone.
Jeszcze raz, oto przykład paska postępu wykorzystującego element paginacji Forminatora:
Dodaj pasek postępu do formularzy, aby ułatwić użytkownikom poruszanie się po procesie wypełniania formularzy.
Zasada # 4: Przeliteruj Wszystko
Chociaż zdaję sobie sprawę, że ta zasada będzie sprzeczna z podstawowymi zasadami minimalizmu, jest to jedna, 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 na wystarczająco prosty.
Użytkownicy wypełniają je na podstawie sugestii etykiet i klikają przycisk przesyłania.
Potem otrzymują tę brzydką czerwoną wiadomość: “nie zrobiłeś tego dobrze! Wróć, popraw formularz i prześlij ponownie!”
Prawdopodobnie spotkałeś się z tym jako użytkownik i wiesz, jak frustrujące może to być, zwłaszcza jeśli niektóre z wprowadzonych informacji znikną po wyrzuceniu błędu.
Więc zamiast pozostawiać użytkownikom zgadywanie, co należy naprawić i jak, nie pozwól, aby to dotarło do tego punktu.
Przeliteruj wszystko po drodze:
- Zapewnij focus w terenie (zwłaszcza na urządzeniach mobilnych), aby użytkownicy wiedzieli dokładnie, gdzie są w trakcie wypełniania formularza.
- Napisz wszelkie wymagania formatowania, jeśli nie używasz masek wprowadzania do automatycznego formatowania pól.
- Jawnie określ, kiedy pole jest “Opcjonalne” (użyj słowa, a nie czerwonej gwiazdki).
- Daj użytkownikom możliwość pokazania lub ukrycia pola hasła podczas jego wprowadzania.
- Wyświetla komunikat o błędzie, gdy tylko użytkownik zaangażuje się w pole. Nie czekaj na to do samego końca.
We wspomnianym badaniu Google eye-tracking śledzili użytkowników, którzy przystąpili do testu i stwierdzili, że brak formatowania był często określany jako skarga.
Google sugeruje dostarczenie jasnych wytycznych w całym formularzu, a także bardzo widocznych komunikatów o błędach. Ponadto etykiety te nie powinny być tylko standardową czerwoną czcionką.
Powinny być zarysowane, kolorowe i pogrubione.
Zasada # 5: trzymaj się z dala od wskazówek
Tekst podpowiedzi 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.
Target radzi sobie z tym nieco inaczej i zamiast tego przenosi etykietę na górę pola (patrz “adres e-mail”).
Niezależnie od tego, jak jest to obsługiwane, eksperci od użyteczności-jak Nielsen Norman Group-powiedzą, że jest to zła praktyka projektowania, ponieważ:
- Jest to problematyczne dla użytkowników, którzy są wielozadaniowi, rozpraszają się lub zbyt szybko przechodzą do następnego pola. Gdy wskazówka zniknie, użytkownicy muszą wycofać się z pola, aby na nowo odkryć, co jest potrzebne.
- Wskazówki, które znikają, zabraniają użytkownikom cofania formularza, aby sprawdzić swoją pracę lub naprawić błąd bez całkowitego usuwania odpowiedzi, aby zobaczyć, co jest pod spodem.
- Jaśniejszy szary tekst używany do podpowiedzi zastępczych nie jest idealny do łatwego czytania.
- Pola z tekstem Podpowiedzi mogą być mylone z polami, które już wypełniły dane, pozostawiając użytkownikom ich pominięcie, przesłanie formularza i otrzymanie Komunikatu o błędzie.
- Niektóre narzędzia czytnika ekranu nie są w stanie odczytać tekstu podpowiedzi zastępczej.
Według NNG, użytkownicy uważają puste pola za bardziej atrakcyjne niż te, które zawierają tekst podpowiedzi.
Chociaż umieszczenie tych etykiet lub deskryptorów nad polem może wydłużyć wygląd formularzy,poprawi to użyteczność.
Zasada # 6: spójrz na swoje przyciski
WPMU DEV ma już świetny przewodnik po projektowaniu lepszych przycisków, więc nie będę tego powtarzał. Zamiast tego chcę skupić się na kilku rzeczach, które możesz zrobić, aby poprawić przyciski formularza kontaktowego.
Na początek zawsze wyrównuj podstawowy CTA z polami formularza, nawet jeśli nie wydaje się to logiczne.
Na przykład, jeśli masz przycisk “Dalej” i “Wstecz”, “Dalej” powinien pojawić się po lewej stronie, ponieważ jest to działanie, które większość użytkowników zamierza podjąć.
Staraj się również nie używać przycisków “Resetuj”, “Wyczyść” lub “Anuluj”. Wielu użytkowników dostaje się do dolnej części formularza i automatycznie kliknij pierwszy przycisk, który zobaczą, myśląc, że jest to przycisk przesyłania.
Jeśli stracą wszystkie odpowiedzi przez błędne naciśnięcie niewłaściwego przycisku, może okazać się, że nie będą chcieli ponownie przesłać.
W tym teście A / B z Unbounce odkryli, że kopiowanie oparte na wartości (nawet jeśli jest dłuższe) było bardziej skuteczne w konwersji użytkowników.
Zaktualizowana Kopia otrzymała ponad 31% więcej konwersji niż oryginalna wiadomość.
Na koniec użyj znaków zaufania wokół przycisków formularza kontaktowego, gdy ma to sens.
Oświadczenie CoSchedule o braku karty kredytowej jest dobrym przykładem tego:
Ale bądź ostrożny. Jeśli używasz znaku zaufania, gdy nie jest potrzebny, może to być błędned użytkownicy wierzą, że muszą przekazać poufne informacje, gdy tak nie jest, jak pokazuje ten test A / B z Behave:
Wersja B otrzymała prawie 13% więcej zgłoszeń niż Wersja A, ponieważ pieczęć zabezpieczająca doprowadziła użytkowników do przekonania, że w końcu będą musieli przesłać płatność lub inne poufne informacje za pośrednictwem strony internetowej.
Czas na zastosowanie ationu w (formie)
Formularze kontaktowe nie są uniwersalne.
Każda strona internetowa (i firma stojąca za Stroną Internetową) ma inny cel, a zatem formularze kontaktowe w niej muszą działać specjalnie, aby pomóc w osiągnięciu tego celu.
Jeśli chcesz poprawnie wykonać powyższe zasady podczas pracy nad tymi celami, masz dwie opcje.
Możesz znaleźć wtyczkę WordPress, która pomoże Ci stworzyć niestandardowy formularz kontaktowy WordPress lub możesz zbudować własny.
Wtyczka taka jak WPMU DEV ‘ s Forminator daje Ci to, co najlepsze z obu światów (i jest darmowa!).
Zainstaluj wtyczkę i wybierz szablon na początek, a następnie stwórz formularz, aby dopasować go do konkretnych potrzeb, korzystając z szeregu zaawansowanych opcji i ustawień dostosowywania.
Niezależnie od tego, co zdecydujesz, pamiętaj, że użytkownicy niekoniecznie boją się długich formularzy kontaktowych, chodzi bardziej o to, jak dobrze stworzyłeś dla nich doświadczenie w formularzu.
