Jak projektować i tworzyć formularze w celu poprawy UX w WordPress

Opublikowany: 2019-04-08

Pomimo tego, że jest to kluczowy aspekt na każdej stronie internetowej, tajemnicą poliszynela jest to, że wszyscy nienawidzą wypełniania formularzy w sieci.

Ale pojawia się pytanie…

Dlaczego te formularze internetowe są nienawidzone? Co sprawia, że ​​są tak denerwujące?

Odpowiedź jest dość prosta i bezpośrednia. Krótko mówiąc, jest to wynik złego projektu i niewłaściwego umieszczenia; jednym słowem, głównym winowajcą jest zła forma UX. Dzisiaj w tym artykule dowiesz się, jak projektować lepsze formularze, a następnie tworzyć je odpowiednio, aby zapewnić doskonałe wrażenia użytkownika.

Jak projektować lepsze formularze i tworzyć je z dobrym UX?

Większość interakcji online miała miejsce z formularzami online i staje się to niezbędne dla każdego rodzaju biznesu online. Dlatego jeśli prowadzisz biznes online, musisz zadbać o projektowanie i zdawać sobie sprawę z najlepszego wykorzystania formularzy.

Zanim przejdziemy do głębin, zróbmy listę w formacie tabelarycznym:

1. Autentyczne formularze projektu
2. Układ kolumn i wyrównanie sekcji
3. Zadbaj o prostotę i prostotę formy
4. Zadaj najbardziej istotne pytania
5. Zapewnij alternatywne opcje
6. Tworzenie formularzy wieloetapowych
7. Walidacja formularza inline
8. Odpowiednie umieszczanie formularzy
9. Ustaw silne wezwanie do działania
10. Umieszczenie etykiety
11. Dodawanie autouzupełniania
12. Układ kolumn i wyrównanie sekcji
13. Formularz przyjazny RODO
14. Różne

Teraz spójrz na taktykę w szczegóły, których należy przestrzegać, jeśli chodzi o projektowanie i używanie formularzy w celu uzyskania lepszego UX.

Zaprojektuj autentyczne formy

Przez większość czasu formy wydają się nudne i pozbawione autentyczności, ponieważ zostały zaprojektowane w sposób niedbały i nieprofesjonalny. Konieczne jest poinformowanie użytkowników o przeznaczeniu formularza.

Pierwszym krokiem do skłonienia użytkowników do wypełnienia formularza jest zdobycie ich zaufania i podanie celu!

Użytkownicy nie mają tendencji do dostarczania informacji o sobie. I dlaczego ktoś miałby powierzać swoje cenne dane nieznajomemu, który nie buduje poczucia zaufania? W takim przypadku musisz upewnić się, że podane przez nich informacje znajdują się w bezpiecznych rękach i w jaki sposób zostaną przez Ciebie wykorzystane.

Projektując lepsze formularze, możesz wdrożyć Google Captcha lub Goggle reCAPTCHA, ponieważ zapobiegają one manipulowaniu formularzami internetowymi przez spamowanie. Zobaczysz, że efekt spamowania zostanie usunięty, a co najważniejsze, użytkownicy poczują się komfortowo wypełniając formularze.

Powrót do indeksu

Układ kolumn i wyrównanie sekcji

Badania dotyczące śledzenia wzroku wykazały, że formularze jednokolumnowe są lepsze niż formularze wielokolumnowe. Ogólnie rzecz biorąc, mamy tendencję do wypełniania formularza podczas przewijania strony w dół: poruszając się od góry do dołu i w ten sposób koncentrujemy się na treści, którą idziemy przez gh.

UX w WordPressie, formularze kontaktowe
Zachowaj wyrównanie na wszystkich sekcjach

W takim przypadku formularz z wieloma kolumnami może zwieść użytkowników i odwrócić ich uwagę od treści. Formularz z równoległymi kolumnami może zakłócić przepływ i przerwać, ale utrzymanie go w jednym układzie może być wygodniejsze. Co więcej, formularz jednokolumnowy wypełnia się szybciej i podnosi poziom ufności do 95%.

Powrót do indeksu

Zadbaj o prostotę i nieskomplikowaną formę

Prostota ma wrodzoną moc sprawiania, że ​​wszystko wydaje się autentyczne i przyjazne. To samo dotyczy projektowania formularzy internetowych. Spróbuj uprościć formularze internetowe i zapewnij łatwy i prosty sposób komunikacji. Zrób studium i jeśli to konieczne, przejdź do krótkiego badania, co sprawia, że ​​formularz jest przeszkodą dla jego użytkowników.

Istnieją badania, które wskazują na apatię użytkownika do umieszczania informacji w formularzu. Oznacza to, że istnieje prawdopodobieństwo utraty konwersji, jeśli formularz nie jest odpowiednio zaprojektowany i zarządzany. Dlatego rozsądnie byłoby, aby formularze wyglądały na proste i łatwe do wypełnienia.

Powrót do indeksu

Zadaj najbardziej istotne pytania

Aby zapewnić zainteresowanie użytkownika wypełnianiem formularzy, pytaj tylko o to, czego naprawdę potrzebujesz, aby się nie nudził. Powinno to zostać wdrożone od razu, aby zapewnić lepszy UX. Zrób to minimum, aby uzyskać maksymalny wynik.

WordPress, formularze kontaktowe
Zadawaj odpowiednie pytania

Jedna rzecz, o której musisz pamiętać podczas projektowania formularzy, długość i liczba pól wejściowych w formularzu to jedne z kluczowych elementów, które wymagają rozważenia. Ponieważ długość formularza jest proporcjonalna do częstości porzucania. Oznacza to, że im dłuższe formularze umieszczasz w swojej witrynie, tym wyższy wskaźnik porzucania możesz się spodziewać.

Kiedyś Neil Patel ujawnił w jednym ze swoich artykułów, w którym powiedział, że był w stanie zwiększyć konwersję o 26%, usuwając tylko jedno pole formularza ze swojego formularza kontaktowego. Upewnij się więc, że Twój formularz kontaktowy zawiera najbardziej odpowiednie pytanie.

Tworzenie formularzy wieloetapowych

Projektowanie formularzy internetowych do tworzenia formularzy wieloetapowych może być kolejnym świetnym sposobem na zwiększenie zaangażowania użytkowników i zmniejszenie uciążliwości formularzy. Oznacza to, że dzielenie formularzy na wiele etapów zapewnia mniejsze zmęczenie podczas wypełniania formularza.

Projektując wieloetapowy formularz postaraj się, aby w pierwszym kroku nie było więcej niż 2-3 pola. Ponadto pasek postępu formularza motywuje użytkowników do ukończenia całego procesu wypełniania formularza. Nie spowoduje to rozproszenia uwagi podczas wypełniania formularza.

Powrót do indeksu

Wbudowana walidacja formularza

Twoje formularze online powinny być zaprojektowane w taki sposób, aby zapewniały zbieranie najbardziej ważnych informacji od użytkowników. Na przykład, jeśli ktoś poda nieprawidłowe informacje, formularz pokaże czerwony sygnał po błędzie. To wydarzenie ostatecznie pomaga użytkownikom podczas wypełniania formularza.

Istnieje szereg korzyści, jeśli umieścisz walidację w formularzu. Niektóre z nich podano poniżej:

  • Walidacja pomaga użytkownikom zrozumieć błędy podczas wypełniania formularza. Gwarantuje to dokładność danych, które podają za pomocą formularza.
  • Daje również poczucie pewności wśród użytkowników. Pomyślnie wypełnione wypełnienie formularza przedstawia kciuk w górę z zachęcającą wizualną informacją zwrotną.
  • Użytkownicy podają dokładne i aktualne informacje, jednocześnie odbiorcy otrzymują również autentyczne dane.

Zapewnij alternatywne opcje

Chociaż zapewniasz użytkownikom możliwość rejestracji w swojej witrynie, zachowaj co najmniej jeden alternatywny sposób, aby tak się stało. To z pewnością zwiększy zainteresowanie Twoich użytkowników wypełnieniem odpowiedniego formularza.

UX wtyczki i interfejs użytkownika WordPress
Podaj alternatywną opcję

Najlepszym sposobem na zapewnienie alternatywnych opcji jest umożliwienie użytkownikom logowania się przez Google, Facebook, Twitter lub inne media. Ogólnie rzecz biorąc, można zdefiniować ideę jako filozofię „mniej znaczy więcej”, którą należy zastosować w praktyce podczas projektowania formularzy.

Powrót do indeksu

Odpowiednie umieszczanie formularzy

Po zaprojektowaniu formularzy internetowych nadszedł czas na umieszczenie ich we właściwej pozycji. Zwiększy to zaangażowanie użytkowników i pomoże uzyskać zaufanie właściwych osób do świadczonych przez Ciebie usług.

Niektóre statystyki pokazują, że czas zaangażowania zwykle osiąga szczyt, gdy umieścisz formularze na najwyższej pozycji. To przede wszystkim przyciąga uwagę użytkowników, którzy odwiedzają Twoją witrynę.

Ale znowu, umieszczenie formularza subskrypcji, zanim użytkownicy zobaczą zawartość Twojej strony, może być zbyt nachalne i denerwować użytkowników. Krótko mówiąc, nie ma ustalonej zasady, gdzie należy umieścić formularz na stronie. Zależy to od wielu zmiennych, takich jak cel danej strony, cel biznesowy, ogólne zachowanie odbiorców itp.

Zasadniczo musisz zachować równowagę między swoim celem a tym, czego mogą potrzebować Twoi użytkownicy; i odpowiednio umieść formularz.

Powrót do indeksu

Ustaw silne wezwanie do działania

Statystyki pokazują jeden zaskakujący fakt, że 72% marketerów B2B nie ma wezwania do działania na swoich wewnętrznych stronach. Upewnij się, że masz silne i chwytliwe wezwanie do działania. Podczas projektowania formularza należy pamiętać, że wezwanie do działania jest punktem zwrotnym między konwersjami a współczynnikiem odrzuceń.

wezwanie do działania, WordPress
Dodaj silne wezwanie do działania

Odpowiednie wezwanie do działania kończy się mnóstwem kliknięć, ponieważ zmusza użytkowników do pozytywnego działania. Co więcej, zbyt wiele CTA również wprowadza ludzi w błąd i musisz być pewien, co oferujesz, a kopia CTA musi to pokazywać.

Ogólnie rzecz biorąc, rozmiar, kolor i tekst CTA muszą być znaczące, aby mogło wywrzeć wrażenie. Możesz dostosować CTA do głosu i tonu swojej marki. Postaraj się stworzyć poczucie pilności, które może mieć wpływ na użytkowników brutto.

Powrót do indeksu

Umieszczenie etykiety

Etykiety informują użytkowników o informacjach, które muszą umieścić w polu wejściowym. Zasadniczo są one umieszczone poza polem formularza. Podobnie jak samo umieszczanie formularzy, umieszczanie etykiet nie ma żadnego konkretnego przewodnika po tym, gdzie i jak je wyrównać i umieścić. Zależy to głównie od sytuacji i wymagań.

Projektanci formularzy mogą ukryć etykietę, aby animować formularze, zamiast używać symboli zastępczych. Ale najczęstszym jest pozycjonowanie poza polem formularza. Możesz również wyrównać etykietę, aby przyciągnąć większą uwagę użytkowników. Etykieta wyrównana do lewej zwykle przyciąga większą uwagę użytkowników. Upewnij się więc, że odpowiednio zaprojektowałeś etykietę formularza.

Powrót do indeksu

Dodawanie autouzupełniania

Rozważ automatyczne wypełnienie, jeśli użytkownicy są już zarejestrowani w Twoich usługach w odpowiednich polach. Dzięki temu zaoszczędzisz czas i niepotrzebne obciążenia, które możesz napotkać podczas wypełniania dowolnego formularza.

Możesz również automatycznie wypełnić niektóre pola wejściowe za pomocą geolokalizacji. Pomoże im to w szybkim wypełnieniu formularza. W takim przypadku upewnij się, że wszystkie pola wejściowe są dostępne do dostosowania i zapewnij im maksymalną kontrolę podczas wypełniania odpowiedniego formularza.

Powrót do indeksu

Formularz przyjazny RODO

Spraw, aby Twoje formularze były przyjazne dla RODO, aby działały zgodnie z przepisami Unii Europejskiej (UE). To jeden z najważniejszych aspektów w dzisiejszych czasach, który zabezpieczy Twoją firmę przed wpływem przepisów UE.

RODO, formularz kontaktowy przyjazny RODO
Zrób formularz zgodny z RODO

Chociaż nie jest jasne, w jaki sposób RODO może na Ciebie wpłynąć, może to być źródłem zniszczenia dla każdego rodzaju organizacji. Przeprowadź odpowiednie badanie w tym zakresie lub skonsultuj się z ekspertem zajmującym się RODO.Uczyć się więcej o tym, jak sprawić, by Twoja witryna była przyjazna RODO.

Przeczytaj także: Jak sprawić, by Twoja strona była przyjazna dla RODO za pomocą wtyczki WordPress.

Powrót do indeksu

Różnorodny

Oprócz wyżej wymienionych, jest jeszcze kilka innych kwestii do rozważenia, aby mieć lepszy UX na swojej stronie. Rzućmy okiem na poniższą listę:

  • Niektóre statystyki pokazują, że symbole zastępcze w polach formularza często szkodzą użyteczności, czasami może to skomplikować proces wypełniania formularza. Ale czasami może być świetnym wyborem, aby zachować jedyny symbol zastępczy w miejscu etykiety pola. To zależy od sytuacji. Na przykład w przypadku subskrypcji newslettera zamiast etykiety możemy użyć jedynie symbolu zastępczego.
  • Nie ma potrzeby ani konieczności jednoczesnego przechowywania zarówno etykiety, jak i symbolu zastępczego.
  • W razie potrzeby etykiety pól i ich pola wejściowe należy pogrupować wizualnie, aby ułatwić użytkownikom zrozumienie formularza. W takim przypadku uważaj na luźne wyściółki, czasami mogą być śmiertelne.
  • Możesz podkreślić autofokus w celu podkreślenia punktu początkowego. Pomoże to użytkownikowi w prawidłowym rozpoczęciu pracy.
  • Wielkie litery są trudne do odczytania; rozsądnie byłoby napisać etykietę w połączeniu obu. Czasami teksty przycisków mogą być pisane wielkimi literami.
  • Przycisk to coś, co ma na celu bezpośrednie działanie użytkownika. Dlatego należy zwrócić szczególną uwagę na projektowanie przycisków. Przycisk należy zaprojektować i stworzyć po dołączeniu pól.
  • Nie zapomnij włączyć zamaskowanych danych wejściowych, aby ułatwić wypełnianie formularza.
  • Rozsądnie jest użyć przycisku opcji zamiast menu rozwijanego. Przyspieszy to proces wypełniania formularza. Sprawia, że ​​wypełnianie formularzy jest łatwe i płynne.
  • Zachowaj opcję podglądu hasła lub możliwość sprawdzenia przez użytkowników swoich informacji przed naciśnięciem przycisku przesyłania. W takim przypadku również powiadamiasz użytkowników o wciśniętym przycisku Caps Lock.

Powrót do indeksu

Przed zakończeniem

Formularze to jedna z najbardziej nieodzownych części strony internetowej. Dlatego projektowanie formularzy, a następnie tworzenie ich może być kluczowym aspektem posiadania solidnego UX na Twojej stronie. Przed projektowaniem formularzy musisz spojrzeć na rzeczy z perspektywy użytkownika.

1 nowy NT BG

WP Fluent Forms Pro

Wypróbuj Fluent Forms już dziś i przekonaj się sam!

Pobierz teraz

Wszystkie formularze powinny być zwięzłe od początku do końca i zapewnić użytkownikom ulgę w wypełnianiu całego formularza. Dokonaj właściwego studium z odpowiednich zasobów i włóż najlepszy wysiłek, jakiego potrzebujesz. Ponieważ formularze są ważną częścią osiągnięcia konwersji, upewnij się, że użytkownicy mogą przez nie szybko i płynnie przejść.

Wniosek

Ponieważ formularze są krytyczną częścią Twojej witryny, musisz być ostrożny przy ich projektowaniu i tworzeniu. Projektując formularze internetowe, zawsze ważne jest przeprowadzanie testów A/B i sprawdzanie wszystkich aktualnych trendów marketingowych.

Upewnij się również, że wszystkie utworzone formularze są przyjazne dla urządzeń mobilnych. W porządku, można powiedzieć, że jeśli zastosujesz taktykę, którą tutaj omawialiśmy, zdecydowanie byłby to najlepszy wybór dla Twojej witryny.

Zgodnie z moją rekomendacją, jeśli chcesz użyć dowolnej wtyczki do tworzenia formularzy WordPress, upewnij się, że używasz WP Fluent Forms, aby poprawić swój UX w WordPress. Mam nadzieję, że ten artykuł pomógł Ci dowiedzieć się więcej o projektowaniu formularzy w Twojej witrynie, aby poprawić UX witryny. Jeśli masz jakiekolwiek pytania dotyczące kontekstu, daj mi znać, zostawiając komentarz poniżej. Mam nadzieję, że wkrótce skontaktuję się z Tobą.

Kilka fajnych rekomendowanych lektur:

? Typy formularzy alternatywnych

? Formy kaldery kontra forma płynna WP

? Zwiększ zaangażowanie użytkowników