Przewodnik dla początkujących dotyczący konwertowania użytkowników mobilnych

Pomyśl o sytuacji, kiedy byłeś w pociągu, siedziałeś na lotnisku lub po prostu leżałeś na kanapie i musiałeś wypełnić formularz online na swoim smartfonie. Czy kiedykolwiek zwracałeś uwagę na wygląd formularza mobilnego?

Jest szansa, że ​​nie zauważyłeś. Taki jest cel — zapewnienie użytkownikom intuicyjnego doświadczenia, które pozwoli im bezproblemowo wypełnić formularz i kontynuować pracę.

W tym przewodniku omówimy najskuteczniejsze sposoby, aby to zrobić. Tutaj dowiesz się, jak projektować formularze mobilne, które nie są niezgrabne ani źle wyrównane, ale które pomagają zwiększyć konwersje i zapewniają doskonałe wrażenia użytkownika.

Spis treści

Projektowanie formularzy mobilnych a stacjonarnych

Obecnie odwiedzający Twoją witrynę nie tylko ją przeglądają, przeglądają zawartość i wypełniają formularze na swoich komputerach stacjonarnych. Wykonują te zadania również na swoich urządzeniach mobilnych.

Od kwietnia do czerwca 2022 r. urządzenia mobilne odpowiadały za prawie 60% globalnego ruchu w witrynie. Oznacza to, że bardzo ważne jest, aby formularz można było łatwo przeglądać, wypełniać i przesyłać za pomocą urządzenia mobilnego.

Dlaczego projektowanie formularzy mobilnych jest ważne?

Najlepszy projekt formularza mobilnego pozwala na pozytywne doświadczenia użytkownika, co zapewnia zadowolenie odwiedzającego witrynę, który jest bardziej skłonny do konwersji na klienta i zostania powracającym użytkownikiem.

Projekt, układ i funkcjonalność formularzy mobilnych odgrywają dużą rolę w ogólnym doświadczeniu użytkownika witryny.

Jeśli Twoje formularze nie są przystosowane do urządzeń mobilnych, możesz odnotować mniejszą liczbę konwersji, spadek ruchu w witrynie mobilnej oraz wzrost liczby niezadowolonych i sfrustrowanych klientów. A kto tego chce?

Dlaczego projekt formularza mobilnego powinien różnić się od projektu na komputer?

„Na urządzeniach mobilnych wszystko działa inaczej, więc marketerzy muszą upewnić się, że wszystkie elementy ich witryn są zawsze zoptymalizowane pod kątem urządzeń mobilnych” — mówi Lilach Bullock, wielokrotnie nagradzana influencerka i strateg marketingowy.

„I to oczywiście obejmuje formularze — zwłaszcza że wydaje się, że ciągle musisz wypełniać formularze na urządzeniu mobilnym”.

W szczególności pomyśl o różnicy w wielkości wyświetlacza lub ekranu między urządzeniem mobilnym, takim jak Apple iPhone, które zwykle ma rozmiar od 4,7 ″ do 6,7 ″; oraz laptop lub komputer stacjonarny Mac, który zwykle ma rozmiar od 13 do 24 cali. Można bezpiecznie założyć, że forma pasująca do ekranu iPhone'a nie pasowałaby idealnie do ekranu komputera stacjonarnego.

Jeśli Twoi użytkownicy mobilni nie mogą łatwo przeczytać, wypełnić i przesłać formularza, możesz stracić ich interesy. Dlatego stworzenie przyjaznego dla urządzeń mobilnych formularza, który pasuje do ekranu dowolnego urządzenia mobilnego, ma kluczowe znaczenie dla zapewnienia doskonałego doświadczenia użytkownika, aby wywrzeć trwałe wrażenie na odwiedzających i pomóc zwiększyć liczbę konwersji.

Czym jest responsywne projektowanie stron internetowych?

Jeśli chcesz pójść o krok dalej w projektowaniu formularzy mobilnych i upewnić się, że cała witryna działa na wszystkich typach urządzeń, możesz wdrożyć responsywny projekt witryny.

Responsywne projektowanie stron internetowych uwzględnia rozmiar ekranu użytkownika, platformę, orientację i środowisko. Jest to prosty i skuteczny sposób na stworzenie wspaniałego doświadczenia użytkownika, ponieważ tak wiele osób stale odwiedza i przegląda różne strony internetowe na różnych urządzeniach.

Istnieje kilka sposobów, aby upewnić się, że witryna ma responsywny wygląd. Na przykład, jeśli jesteś użytkownikiem WordPressa, istnieje kilka responsywnych motywów WordPress, które możesz zainstalować i użyć do zaprojektowania swojej witryny.

Ponadto, jeśli budujesz lub stworzyłeś swoją witrynę za pomocą oprogramowania takiego jak Squarespace, Twoja witryna może automatycznie zostać wyposażona w responsywny projekt strony internetowej.

Obecnie responsywne projektowanie stron internetowych jest popularnym wyborem dla firm ze względu na ogromną liczbę osób odwiedzających strony internetowe za pośrednictwem różnych urządzeń mobilnych. Ale na razie wróćmy do omawiania projektowania formularzy mobilnych.

Projektowanie formularzy mobilnych: 11 wytycznych UX

„Podczas projektowania formularzy mobilnych” — wyjaśnia Bullock — „ważne jest, aby wszystko było proste i jak najszybsze. [Formularze] są trudniejsze do wypełnienia na urządzeniach mobilnych i wydaje się, że wszystko trwa dłużej niż powinno”.

Innymi słowy, najważniejsza jest prostota dla użytkownika końcowego. Podczas tworzenia formularza przyjaznego dla urządzeń mobilnych należy wykonać kilka kroków, aby zapewnić odwiedzającym jak najlepsze wrażenia użytkownika. Przyjrzyjmy się 11 najlepszym praktykom projektowania formularzy mobilnych, które możesz zacząć wdrażać już dziś.

1. Zminimalizuj liczbę pól formularza.

Słyszeliście kiedyś powiedzenie „mniej znaczy więcej”? Cóż, dokładnie o tym powinieneś pomyśleć podczas tworzenia formularza mobilnego.

Pomiędzy rozmiarem ekranu urządzenia mobilnego a ilością treści, które musisz umieścić w swoim formularzu, łatwo jest przypadkowo sprawić, że formularz stanie się zagracony. Pamiętaj o usunięciu zbędnego puchu. Zachowaj tylko pola formularza dla informacji, które są absolutnie potrzebne .

Aby usprawnić ten proces, należy również jasno i zwięźle oznaczyć pola formularza oraz oznaczyć opcjonalne pola jako „opcjonalne” lub umieścić gwiazdkę obok wymaganych.

Źródło obrazu

Celem jest jak najprostsze wypełnienie formularza, aby szanse na jego wypełnienie rosły.

2. Automatyzuj wprowadzanie danych, jeśli to możliwe.

Jeśli przypadkowo błędnie wpiszesz swój adres, a formularz poprawi pisownię, formularz automatycznie poprawi Twoją odpowiedź.

Jeśli zaczniesz wpisywać swój adres wysyłki i pojawi się okno z resztą adresu z pytaniem, czy chcesz „automatycznie wypełnić” pozostałe pola formularza zapisanym adresem, oznacza to, że formularz automatycznie uzupełnia odpowiedź za Ciebie.

Wdrażając funkcje autokorekty i autouzupełniania w swoich formularzach mobilnych, poprawisz wygodę użytkowników, sprawiając, że wprowadzanie danych będzie szybkie, proste i proste.

W poniższym przykładzie osoba może łatwo automatycznie uzupełnić swoje informacje, klikając małe wyskakujące okienko, które się pojawi.

Źródło obrazu

3. Użyj układu jednokolumnowego.

Tworząc długi lub wieloetapowy formularz, wypisz całą zawartość w układzie jednokolumnowym.

Źródło obrazu

Jednokolumnowe układy formularzy to:

a. Łatwiejsze do odczytania.

Umieszczenie wszystkich pól formularza w formacie jednokolumnowym pozwala odwiedzającym skupić się tylko na jednym elemencie na raz, co ułatwia czytanie formularza.

b. Mniej zniechęcające.

Jeśli spojrzysz na formularz, zwłaszcza w ciasnej przestrzeni, jak na urządzeniu mobilnym, i zobaczysz dużą ilość zgniecionych treści, możesz poczuć się przytłoczony. Dlatego oddzielenie treści wierszami i umieszczenie pól formularza w formacie jednokolumnowym sprawia, że ​​treść wygląda mniej onieśmielająco.

c. Szybciej ukończyć.

Gdy umieścisz wieloetapowy formularz w jednej kolumnie, potencjalni klienci mogą go wypełnić szybciej niż w przypadku formularza wielokolumnowego. To dlatego, że format ułatwia czytanie formularza i pracę krok po kroku.

Przyjrzyj się temu formularzowi rejestracji na stronie internetowej HubSpot, oglądanej z komputera stacjonarnego lub laptopa.

Źródło obrazu

Dwukolumnowy układ ma tutaj sens, ponieważ na szerszym ekranie jest dużo miejsca do pracy. Teraz sprawdź ten sam formularz na urządzeniu mobilnym.

Źródło obrazu

Ten jednokolumnowy układ pozwala na naturalny przepływ oka, jednocześnie zapobiegając bałaganowi na kompaktowym ekranie telefonu komórkowego.

4. Spójność ma znaczenie (podobnie jak wygląd formy).

Jak zamknąć folder lub otwartą kartę na laptopie?

Klikając przycisk „x” w prawym górnym rogu.

Ale co, jeśli przycisk nie pojawił się w konkretnej aplikacji? Jak byś się czuł, gdybyś poszedł zamknąć okno?

Może zdezorientowany lub zirytowany. Możesz spędzić minutę lub dwie zastanawiając się, jak zamknąć aplikację.

To tylko szeroki przykład, ale dobrze ilustruje znaczenie spójności. Obejrzyj ten film, aby dowiedzieć się więcej.

Spójność w projektowaniu formularzy dotyczy nie tylko stylu (kolory, typografia, logo itp.), ale także ogólnie przyjętych konwencji, do których ludzie są przyzwyczajeni.

Oto kilka wskazówek, które zapewnią spójne wrażenia:

• Dopasuj wygląd i styl swojego formularza do swojej marki i witryny.
• Upewnij się, że styl i formatowanie formularza są spójne i uzupełniają się (nic nie powinno wyglądać nie na miejscu).
• Wyrównaj dane wejściowe pól formularza do lewej.
• Umieść każdą etykietę nad odpowiednim polem wprowadzania i wyrównaj ją do lewej.
• Użyj gwiazdki, aby wskazać pytania obowiązkowe.

Źródło obrazu

Pierwsze wrażenie pozostawia trwałe wrażenie (w życiu iw biznesie). Dotyczy to formularzy mobilnych. Nikt nie chce wypełniać ciemnego, trudnego do odczytania, zagraconego i nieatrakcyjnego formularza.

Twoja forma mobilna powinna być bardzo funkcjonalna i estetyczna. Jego wygląd powinien przyczyniać się do jego czytelności i pozytywnego doświadczenia użytkownika. Aby to osiągnąć, użyj prostego i łatwego do odczytania stylu i rozmiaru czcionki, palety kolorów, która nie wydaje się przytłaczająca, oraz minimalnych pól formularza.

5. Pamiętaj o wrażeniach dotykowych.

Pomyśl o tym, jak trzymasz telefon podczas pisania wiadomości.

Najprawdopodobniej trzymanie telefonu obiema rękami, podczas gdy kciuki służą do interakcji z ekranem. Możesz też zrobić to samodzielnie lub pisać palcem wskazującym.

Wchodzimy w interakcję ze smartfonami znacznie inaczej niż z laptopem czy komputerem stacjonarnym (wskaż kciuk, który pisze SMS-y), a projekt formularza mobilnego powinien to odzwierciedlać.

Oto kilka sugestii, o których warto pamiętać:

• Zapewnij odpowiednią ilość białych znaków, aby zachować porządek w formularzu i uniknąć przypadkowych naciśnięć przycisków.
• Upewnij się, że przyciski są rozmieszczone logicznie (na przykład przycisk przesyłania w dolnej części formularza, aby użytkownicy nie musieli przewijać w górę, aby go znaleźć).
• Sprawdź, czy tekst (rozmiar i styl czcionki) jest czytelny na małym ekranie telefonu (nikt nie chce ściskać ekranu i powiększać, aby móc przeczytać tekst).
• Upewnij się, że pola formularza i przyciski są wystarczająco duże, aby można je było wygodnie stuknąć palcem.
• Spraw, aby formularz pojawiał się w dolnej części ekranu (tam, gdzie to możliwe), aby był łatwo dostępny.

Źródło obrazu

6. Wykorzystaj ograniczenia wejściowe.

Ograniczenia wejściowe ograniczają typ odpowiedzi, którą osoba może wprowadzić w polu formularza. Może to obejmować limit słów (np. podczas wypełniania formularza podania o pracę) lub możliwość wprowadzania tylko cyfr (w przypadku numeru telefonu).

Jest to widoczne w poniższym formularzu, gdzie pojawia się klawiatura numeryczna, gdy osoba idzie wprowadzić swój numer telefonu.

Źródło obrazu

Ograniczenia wejściowe maksymalizują wydajność formularzy poprzez ograniczenie przypadkowych błędów, opóźnień lub pomyłek. Na przykład, jeśli ktoś próbował dokonać rezerwacji stolika w restauracji i przypadkowo wybrał datę w przeszłości, ograniczenie uniemożliwiłoby mu faktyczne wybranie i potwierdzenie tej daty.

Jest to szczególnie ważne w przypadku projektowania na urządzenia mobilne, ponieważ mniejsze ekrany utrudniają dokładne wprowadzanie informacji. Ustawiając ograniczenia wprowadzania danych, zaoszczędzisz czas podczas wypełniania pól formularza i zapobiegniesz otrzymywaniu długich lub nieprawidłowych odpowiedzi.

Oto kolejny przykład ograniczenia danych wejściowych.

Źródło obrazu

7. Stwórz jasne przyciski akcji.

Przyciski są niedocenianym aspektem projektowania formularzy mobilnych. Pomyśl o tym: przesłanie formularza lub konwersję otrzymasz dopiero po naciśnięciu odpowiedniego przycisku. Nie można więc pominąć tego elementu.

Ta ściągawka do interfejsu użytkownika i blog UX Planet to świetne zasoby do projektowania skutecznych przycisków. Oto krótkie omówienie niektórych z wymienionych zasad, które można zastosować do formularzy mobilnych.

• Zbyt wiele guzików psuje bulion (tak jak w polach formularzy, zachowaj tylko te niezbędne).
• Konsekwentnie stylizuj i oznaczaj przyciski (wielkie litery, formatowanie, wyrównanie itp.).
• Pozwól skupić się na głównym przycisku (głównej czynności, którą ma wykonać użytkownik), wyróżniając go rozmiarem lub kolorem.
• Prawo jest dobre — powszechną praktyczną zasadą dla urządzeń mobilnych jest umieszczenie głównego przycisku po prawej stronie, a drugiego po lewej (choć może się to różnić w zależności od indywidualnych potrzeb).
• Konkretne etykiety są prawie zawsze odpowiedzią („Edytuj tę stronę” zamiast „Edytuj”).

Źródło obrazu

8. Zapewnij skanery kart do płatności.

Próbowałeś wprowadzić dane swojej karty kredytowej w formularzu za pomocą smartfona? Wpisywanie kilku liczb na małym ekranie za pomocą małej klawiatury może być żmudnym procesem.

Aplikacje do skanowania kart, takie jak Microblink, stają się coraz bardziej popularne właśnie z tego powodu. Dokonując zakupu, odwiedzający mogą kliknąć przycisk, który przenosi ich do ekranu, na którym mogą zrobić bezpieczne zdjęcie przedniej i tylnej strony swojej karty, niezależnie od tego, czy jest to prawo jazdy, czy karta kredytowa.

Źródło obrazu

Wystarczy kilka zdjęć, aby Twoi potencjalni klienci zostali zakończeni jedną z najbardziej czasochłonnych części procesu wypełniania formularzy mobilnych — zapewnieniem odwiedzającym wydajności, frustracji i błędów.

9. Wyjaśnij potrzebę konkretnych informacji.

Czy podczas wypełniania prostej rejestracji e-mailowej lub formularza rejestracyjnego zostałeś poproszony o podanie danych osobowych, które nie mają nic wspólnego z samym formularzem rejestracyjnym?

Jest to powszechne zjawisko we wszystkich typach formularzy (nie tylko mobilnych). Poproszenie kogoś o podanie danych osobowych lub innych poufnych informacji bez wyjaśnienia, że ​​ich potrzebujesz, może wydawać się pobieżne.

Zadając pytanie, które nie jest bezpośrednio związane z powodem, dla którego odwiedzający wypełnia formularz, konieczne jest utworzenie pola podsumowania (z dodatkowymi informacjami), które dana osoba będzie mogła kliknąć, aby zrozumieć, dlaczego prosisz o te informacje.

Takie wskaźniki mogą również pomóc w zapewnieniu dodatkowych wskazówek dotyczących wypełniania pola formularza, gdy instrukcje nie są od razu widoczne. Na poniższym obrazku okno podsumowania pojawia się, gdy osoba najedzie kursorem na ikonę.

Źródło obrazu

Te drobne szczegóły sprawią, że Twój formularz będzie wyglądał na profesjonalny i przemyślany, a jednocześnie zmniejszy prawdopodobieństwo, że użytkownik opuści w połowie.

10. Zbierz weryfikację i informacje zwrotne.

Doświadczenie użytkownika leży u podstaw dobrego projektu formularza mobilnego. Walidacja i informacje zwrotne odgrywają ważną rolę w zapewnianiu doskonałego UX.

Walidacja pozwala ludziom wiedzieć, czy wprowadzone przez nich informacje są prawidłowe (czy nie). Zwróć uwagę na zielone haczyki w polach formularza poniżej.

Źródło obrazu

Podczas wypełniania formularzy mobilnych odwiedzający na pewno popełnią błąd tu czy tam. Formularz powinien oflagować te błędy w czasie rzeczywistym, aby użytkownik mógł je natychmiast poprawić.

Na przykład, jeśli ktoś doda nieprawidłowy kod pocztowy obok swojego adresu, formularz mobilny powinien wyświetlić komunikat o błędzie. Powinno to wskazywać — w łatwym do zrozumienia języku — lokalizację błędu i sposób, w jaki dana osoba może go naprawić (jak widać na poniższym obrazku).

Źródło obrazu

Ważne jest również, aby przekazywać użytkownikom informacje zwrotne podczas przechodzenia przez formularz. Na przykład pasek postępu w długich, wieloetapowych formularzach może uatrakcyjnić proces wypełniania formularzy, pokazując użytkownikom, jak daleko dotarli i ile czasu pozostało do ich wypełnienia.

Źródło obrazu

Rozważmy osobę wypełniającą powyższy formularz bez paska postępu. Będą klikać przycisk „Dalej”, nie mając pojęcia, kiedy formularz się kończy, a może nawet porzucić go tuż przed ostatnim krokiem w frustracji.

Gdy ludzie prześlą swoje formularze, należy skierować ich do innego ekranu lub strony z napisem „Sukces!” lub „Dziękuję”, aby wiedzieli, że ich zgłoszenie zadziałało.

Oto przykład strony sukcesu w HubSpot, która pojawia się, gdy użytkownik zarejestruje się w celu otrzymania bezpłatnego zestawu Google Ads.

Źródło obrazu

11. Zapewnij dostępność formularzy.

Dostępność ma fundamentalne znaczenie dla użyteczności formularza. Formularze zaprojektowane z myślą o ułatwieniach dostępu mogą być używane przez szersze grono osób, w tym osoby z niepełnosprawnościami wzrokowymi, fizycznymi, sensorycznymi i poznawczymi.

Oto kilka konkretnych zaleceń dotyczących tworzenia dostępnych formularzy z World Wide Web Consortium Web Accessibility Initiative, WebAIM i The A11Y Project Checklist).

• Sprawdź, czy tekst nie jest pikselowany ani nie jest rozmyty podczas powiększania formularza (dla lepszej wizualizacji).
• Oznacz elementy formularza w sposób zrozumiały dla czytnika ekranu.
• Upewnij się, że formularz jest dostępny zarówno w trybie pionowym, jak i poziomym.
• Unikaj stosowania limitu czasowego (tam, gdzie to możliwe), aby dać ludziom wystarczająco dużo czasu na odpowiedź.
• Dołącz podpisy lub transkrypcje dla dowolnych komponentów wideo lub audio w formularzu.
• Pamiętaj o kontraście kolorów. Oto bezpłatne narzędzie, które może w tym pomóc.
• Sprawdź, czy Twój formularz jest w pełni użyteczny za pomocą samej klawiatury.

Świetnym sposobem na upewnienie się, że wszystkie powyższe strategie projektowania formularzy mobilnych będą się trzymać, jest zbadanie, czego nie należy robić w projektowaniu formularzy. Poniższy film przedstawia kilka przykładów tego, czego nie należy robić podczas projektowania formularzy zarówno na urządzeniach mobilnych, jak i na komputerach.

Wrócić do Ciebie

Nie jest tajemnicą, że odwiedzający Twoją witrynę internetową wypełniają i przesyłają formularze internetowe za pośrednictwem urządzeń mobilnych. Dzieje się tak, ponieważ jest to wygodne i wydajne, ponieważ większość ludzi nosi ze sobą urządzenia mobilne wszędzie, co sprawia, że ​​formularze muszą być przyjazne dla urządzeń mobilnych.

W przeciwnym razie Twoje formularze będą trudne do odczytania, wypełnienia i przesłania, co może udaremnić potencjalnych klientów lub spowodować całkowitą utratę ich działalności.

Rozważając projekt formularza mobilnego i wdrażając te wytyczne, poprawisz komfort korzystania z formularza mobilnego, zbudujesz pozytywne relacje z potencjalnymi klientami i klientami oraz zwiększysz liczbę konwersji.

Uwaga edytora: ten post został pierwotnie opublikowany w grudniu 2018 r. i został zaktualizowany pod kątem kompleksowości.