Przejdź do głównej treści

Zasady 5 tworzą doskonałą formę kontaktu

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 901.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Robisz wszystko, co w Twojej mocy, aby zbudować witrynę internetową, która zachęci odwiedzających do konwersji. Studiując analitykę, z przyjemnością odkrywasz, że stworzona przez Ciebie ścieżka użytkownika jest wielokrotnie wspierana przez odwiedzających. Jednak jest coś, co uniemożliwia ich nawrócenie.

Formularz kontaktowy jest istotną częścią podróży Twoich gości. Nawet jeśli masz prawie wszystko, co strona internetowa może zaoferować, formularz kontaktowy może zepsuć doświadczenie, jeśli nie zostanie prawidłowo użyty. „Zepsute” przyciski, zagmatwane pola, zbyt wiele kroków, zdezorganizowany interfejs… nawet umieszczenie formularza kontaktowego może zakłócić komfort użytkowania.

Jest wiele rzeczy, które mogą pójść nie tak.

Zasady 5 dotyczące budowania idealnego formularza kontaktowego

Badanie Google Eye Tracking opublikowane w 2014 roku wykazało, że przestrzeganie najbardziej podstawowych wskazówek dotyczących projektowania formularzy znacznie poprawi komfort użytkowania. W szczególności, gdy formularz kontaktowy spełnia wszystkie zasady, 78% użytkowników może je 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 przepisach, ludzie często niepokoją się długością formularzy kontaktowych, 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?

wypełnij formularz.png

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, aby Twoje formularze kontaktowe spełniały standardy dostosowania, oto co musisz zrobić:

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

  • 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:

przykład formularza kontaktowego court.png

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.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

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ą.

formatowanie pól html.png

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.

błąd formy wordpress.png

Reguła # 5: Nie ukryj porady

Tekst tablicy w formularzu kontaktowym wygląda następująco:

pole z napiwkami.png

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”).

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

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.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry