4 Inspirujące wzorce projektowania formularzy [FREE]

Badanie przeprowadzone przez HubSpot wykazało, że 82% respondentów stwierdziło, że porzuciło lejek zakupowy na stronie internetowej z powodu słabych lub niekompletnych formularzy, a 93% z tych osób po raz pierwszy zetknęło się z tymi formularzami na komputerach stacjonarnych.

Formularze są istotną częścią Twojej strony internetowej i biznesu, niezależnie od tego, czy przeprowadzasz ankietę, oferujesz potencjalnym klientom sposób na skontaktowanie się z Tobą, czy zachęcasz do zapisania się na newsletter. Istnieje wiele sposobów na stworzenie świetnie wyglądającego i skutecznego formularza internetowego, ale zawsze można coś poprawić. Formularze nie muszą być nudne.

4 inspirujące wzorce projektowania formularzy [FREE]

Dobrze zaprojektowany formularz dodaje wartość do całego projektu, nie umniejszając jego użyteczności. Dodatkowo, takie formularze działają o wiele lepiej. W nowym frameworku projektowania UI Salesforce, Lightning, małe zmiany w projekcie formularza mogą poprawić konwersję formularza. Zanurzmy się w tym temacie.

Formularze bez ramek

Bezskrzynkowe formularze internetowe to formularze internetowe, które nie mają widocznych pudełek lub obramowań. Dzięki temu formularze internetowe wydają się bardziej współczesne i nowoczesne, ponieważ nie mają tradycyjnego wyglądu formularzy internetowych z otaczającymi je pudełkami. Tradycyjne formularze internetowe z pudełkami wokół nich mogą być postrzegane jako przestarzałe.

Formy internetowe oparte na krzywych wykorzystują użycie zakrzywionych linii i rogów, aby stworzyć zainteresowanie. Krzywe mogą być znalezione w kształtach i układach. Dobrze zaprojektowane zakrzywione boksy nie muszą koniecznie podążać za tradycyjnymi pudełkowymi projektami. Jeśli zrobione poprawnie, krzywe mogą nawet prowadzić oko wokół całego formularza internetowego, dodając napięcie między negatywną i pozytywną przestrzenią. Dodaje to wiele atrakcyjności wizualnej i może pomóc uczynić nudny wyglądający formularz internetowy bardziej ekscytującym i wciągającym.

Animowane formularze

Animowany projekt formularza jest zaprojektowany z pewną animacją w samym formularzu. Może to być zrobione na wielu różnych poziomach, od prostych animacji, które pomagają stworzyć zainteresowanie i przyciągnąć uwagę (jak odbijające się strzałki i przyciski) do bardziej złożonych i rozbudowanych projektów, które wydobywają to, co najlepsze z animowanego projektowania stron internetowych, jak animacje tła lub przejścia między stronami. Głównym celem stosowania takich animowanych efektów jest uczynienie doświadczenia użytkownika tak atrakcyjnym, jak to tylko możliwe - wszyscy wiemy, że użytkownicy zmagają się z tymi nudnymi formularzami stron internetowych!

Wsuń się od dołu lub z boku

Ten szablon webflow umożliwia użytkownikom przesłanie formularza kontaktowego w dowolnym momencie bez odrywania się od ogólnego wyglądu. Możesz pozwolić konsumentom skontaktować się z Tobą, kiedy tylko będą gotowi, dodając przycisk kontaktowy na dole strony.

Możesz również wykorzystać wysuwane menu, aby umożliwić ludziom dostęp do swojego formularza. Zamiast wysyłać odwiedzających do strony kontaktowej, wciągnij formularz z boku ekranu. Jest to doskonały wzór dla przypadków, gdy ktoś może chcieć sprawdzić informacje na stronie podczas pomocy.

Formularz pełnoekranowy

Świetną techniką zwrócenia uwagi na swój formularz jest wyeliminowanie elementów rozpraszających. Zamiast wtłaczać formularz w już zaznaczone miejsce na stronie (takie jak stopka), spróbuj włączyć punkt zaangażowania, aby uczynić go pełnoekranowym. Pomaga to użytkownikowi wprowadzić informacje, które chce w łatwy i skoncentrowany sposób, dzięki czemu łatwiej jest mu je uzupełnić.

Formularze w języku naturalnym

Gdyby formularze internetowe mogły mówić, mogłyby brzmieć tak: "Właśnie zamierzasz przesłać swoje informacje. Czy jesteś pewien? To jest wymagane." Formularze w sieci nie zawsze są tak proste, jak byśmy chcieli. Dziś oczekujemy, że doświadczenia internetowe i interfejsy użytkownika będą bardziej ludzkie i znajome; na przykład, interakcja ze stroną internetową powinna przypominać bardziej rozmowę niż pisanie na klawiaturze. Wprowadzanie danych w języku naturalnym jest jednym ze sposobów, w jaki możemy sprawić, by formularze internetowe były bardziej konwersacyjne - to znaczy, by nie były tylko kolejnym kawałkiem tekstu do wypełnienia. Interfejs języka naturalnego pomaga użytkownikom zadając pytania tak, aby ludzie zadawali pytania. Pozwala on na stworzenie kontekstu konwersacyjnego, jednocześnie redukując nieporozumienia poprzez wykorzystanie konwencjonalnej etykiety formularza i wzorca pola wprowadzania danych. Ma unikalne, dobrze zaprojektowane odczucia, jak również.

Projektowanie formularzy krok po kroku (proceduralne)

Projekt formularza internetowego krok po kroku pozwala na rozbicie sekcji informacji na strawne części, które są łatwe do naśladowania. Tutaj użytkownik otrzymuje wizualne wskazówki do wypełnienia każdego pola.

Ta strona internetowa ma jasną ścieżkę dla użytkowników, aby wziąć przez jej kroki formularza internetowego, z obu nagłówków i wizualne wskazówki prowadzące je po drodze. Użycie tego wzoru formularza ułatwia zadanie osobom, które mogą się wahać przed podaniem swoich informacji online.

Pozwalanie ludziom na dodawanie informacji w łatwych do zrozumienia fragmentach zachęca do dalszych działań i zapewnia bardziej skoncentrowane doświadczenie niż po prostu wyświetlanie wszystkich pól na raz.

W niektórych przypadkach może wystarczyć jedno kliknięcie przycisku. Czasami jednak warto wyświetlić, ile kroków jest potrzebnych do wypełnienia formularza, aby użytkownik nie pogubił się w całej procedurze.

Wnioski

Sieć jest ulicą dwukierunkową, a my musimy tworzyć wartościowe treści dla użytkowników i utrzymywać ich zaangażowanie dzięki ekscytującemu projektowi formularzy internetowych. Formularze są integralną częścią przeglądania stron internetowych, więc dlaczego nie poświęcić trochę czasu na zastanowienie się, jak sprawić, by formularze internetowe były jak najbardziej angażujące? Myśląc o tych wzorcach i dodając bardziej ludzki dotyk do naszych projektów formularzy internetowych, możemy pomóc zmniejszyć liczbę porzuceń, jednocześnie zachęcając do lepszego zaangażowania z mniejszym zamieszaniem.