Formularze kontaktowe są kluczowym elementem wielu witryn internetowych. Chociaż są one generalnie proste, musisz upewnić się, że są łatwe w użyciu, jeśli chcesz gromadzić potencjalnych klientów i pozostawać w kontakcie z użytkownikami. Zwykle nie stanowi to problemu w ruchu biurowym, ale korzystanie z formularzy może być trudne, jeśli korzystasz z urządzenia mobilnego.
W tym samouczku porozmawiamy trochę o tym, jak ważne jest projektowanie formularzy dostosowanych do urządzeń mobilnych. Następnie przeprowadzimy Cię przez pięć wskazówek, aby upewnić się, że formularze działają płynnie na urządzeniach mobilnych.
Zabierzmy się do pracy!
Dlaczego ważne jest, aby Twoje formularze były przyjazne dla urządzeń przenośnych
Formularze mają różne kształty i rozmiary. Najczęściej będziesz miał do czynienia z formularzami kontaktowymi:
Formularze rejestracyjne (subskrypcyjne) są również bardzo popularne, ponieważ pozwalają zbierać e-maile i kierować je podczas kampanii:
Jednak formularze mogą być używane do wszelkich innych celów. Na przykład możesz zbierać informacje za pomocą ankieta internetowa lub kwestionariusz , w takim przypadku będziesz potrzebować formularzy, które umożliwią użytkownikom wprowadzanie odpowiedzi.
Innymi słowy, formularze są bardzo wszechstronne i prawie wszystkie witryny używają formularzy w taki czy inny sposób. Dlatego ważne jest, aby Twoje formularze były łatwe w użyciu (chyba że chcesz zapewnić odwiedzającym frustrujące wrażenia).
Korzystanie z formularzy na komputerze stacjonarnym lub laptopie jest zwykle bardzo łatwe. Masz pełną myszkę i klawiaturę, więc wybranie pola, którego chcesz użyć i wprowadzenie danych nie powinno stanowić problemu. Jednak przeglądanie Internetu za pomocą smartfona lub innego kompaktowego urządzenia wiąże się z komplikacjami.
Podczas pracy palcami na małym ekranie interakcja z formularzami może czasami być przytłaczająca z powodu złych decyzji projektowych. To jest coś, czego powinieneś unikać we własnych projektach. W końcu, jeśli użytkownicy mobilni nie mogą wchodzić w interakcje z Twoimi formularzami, możesz stracić konwersje, potencjalnych klientów lub po prostu zirytować odwiedzających.
Ważne jest również, aby zrozumieć, że ruch mobilny jest teraz, jeśli nie ważniejszy, niż źródła na komputerach. W rzeczywistości ruch mobilny już w ostatnich latach wyprzedził ten ostatni. Oznacza to, że zaprojektowanie strony internetowej przyjaznej dla urządzeń mobilnych powinno być głównym celem przy rozpoczynaniu nowego projektu.
Wskazówki 5 do projektowania łatwych w użyciu form mobilnych
Na szczęście projektowanie formularzy dostosowanych do urządzeń mobilnych nie jest tak trudne, jak można by sobie wyobrazić. W większości przypadków wystarczy pamiętać o kilku podstawach i dokładnie przetestować formularze przed ich użyciem. Porozmawiajmy o tym, jak to zrobić!
1. Usuń wszystkie niepotrzebne sekcje
Im więcej pól zawiera formularz, tym trudniej będzie go używać na telefonie komórkowym. Rzeczywiście, korzystanie z formularzy na urządzeniach mobilnych jest po prostu bardziej skomplikowane. Zmniejszając liczbę pól lub sekcji zawartych w formularzach, możesz zmaksymalizować swoje szanse na wypełnienie ich przez odwiedzających.
Oto szybki przykład a formularz kontaktowy z kilkoma dodatkowymi polami, które nie są konieczne na urządzeniach mobilnych:
W większości przypadków wszystko, czego potrzebujesz do wspaniałego formularz kontaktowy to nazwa, adres e-mail i treść wiadomości, którą chcesz otrzymać. Wszystko inne zależy od rodzaju witryny, z której korzystasz i od tego, czy próbujesz zbierać leady.
Ostatecznie im mniej pól ma formularz, tym łatwiej będzie z nich korzystać mobilnym odwiedzającym. W końcu wybranie pola za pomocą ekranu dotykowego może być trudne, bez względu na to, jak dobrze zostało zaprojektowane, aby zminimalizować liczbę przeskoków, które muszą wykonać użytkownicy.
Twoim celem w tym momencie jest przejrzenie istniejących formularzy w Twojej witrynie. Przejrzyj każdą z ich sekcji i określ, czy naprawdę potrzebujesz dodatkowych pól innych niż wspomniane wcześniej. Jeśli istnieje zbędne pole, po prostu je usuń.
2. Jeśli to możliwe, użyj list rozwijanych
Większość z nas czuje się komfortowo, pisząc na urządzeniach mobilnych i korzystając z ekranów dotykowych. Jednak wysłanie SMS-a do znajomego i wypełnienie formularza formularz kontaktowy to dwa bardzo różne doświadczenia. Dzięki temu istnieje duże prawdopodobieństwo, że poczujesz się sfrustrowany, jeśli będziesz musiał wpisać dużo informacji.
Jednym ze sposobów na ułatwienie życia użytkownikom mobilnym jest uproszczenie wyborów, jakie muszą podejmować w odniesieniu do elementów witryny. Aby dać ci wyobrażenie o czym mówimy, skorzystajmy z naszego poprzedniego przykładu rezerwacja restauracja:
Zrobić rezerwacja, prawdopodobnie będziesz musiał podać imię i nazwisko, adres e-mail, telefon et podać godzinę i liczbę obecnych osób. Istnieją dwa sposoby utworzenia pola formularza w celu sprawdzenia pory dnia. rezerwacja:
- Skonfiguruj pole, które akceptuje tylko wpisy numeryczne.
- Zaprojektuj listę rozwijaną zawierającą wszystkie dostępne godziny rezerwacji.
Jak możesz sobie wyobrazić, ta ostatnia jest bardziej przyjazna dla użytkowników mobilnych. Dzięki takiemu podejściu nie muszą wprowadzać liczb i mogą po prostu wybrać to, co dla nich najlepsze, spośród dostępnych opcji.
Pomysł, aby spojrzeć na swoje formularze i sprawdzić, czy zawierają one pola, które można zastąpić menu rozwijanymi. Nie zawsze tak będzie, ponieważ nie można używać menu rozwijanych do zbierania nazwisk lub e-maili, ale można użyć innych opcji.
Niezależnie od ich zastosowania, chcesz upewnić się, że menu rozwijane zawierają opcje, które można łatwo wybrać z urządzeń mobilnych. Innymi słowy, spraw, aby menu było wystarczająco duże, aby ktoś nie musiał dziobać, aby wybrać odpowiednią opcję.
3. Upewnij się, że przyciski przesyłania są łatwe w dotyku
Ta wskazówka jest dość prosta, ale wciąż należy o niej wspomnieć. Każdy projektowany przez Ciebie formularz powinien zawierać sposób na potwierdzenie przez użytkowników, że chcą przesłać wprowadzone dane. W większości przypadków oznacza to utworzenie przycisku przesyłania:
Podczas korzystania ze zwykłego komputera kliknięcie przycisku przesyłania jest najbardziej naturalną rzeczą na świecie. Jednak napotkaliśmy kilka formularzy na urządzeniach mobilnych, w których naciśnięcie przycisku jest znacznie trudniejsze.
Jeśli odwiedzający nie mogą przesłać informacji, które wprowadzili w formularzach, wszystkie twoje wysiłki pójdą na marne. Poza tym nic nie wygląda tak nieprofesjonalnie jak przycisk wysłać to nie działa zgodnie z oczekiwaniami.
Aby zaprojektować lepsze przyciski przesyłania na urządzenia mobilne, warto wziąć pod uwagę trzy wskazówki:
- Upewnij się, że są wystarczająco duże, aby można było z łatwością dotknąć urządzenia mobilnego.
- Nie umieszczaj przycisków zbyt blisko innych elementów, aby użytkownicy nie dotykali ich prawidłowo.
- Podświetl swoje przyciski, na przykład za pomocą kontrastujących kolorów lub kreatywnej typografii.
Oprócz tego będziesz chciał przetestować swoje przyciski przed uruchomieniem witryny. Za minutę omówimy bardziej szczegółowo, jak to zrobić. Na razie porozmawiajmy o wydajności.
4. Upewnij się, że twoje formularze wczytują się szybko
W wielu naszych artykułach mówimy dużo o wydajności witryny i nie dzieje się tak dlatego, że potrzebujemy szybkości. Chodzi o to, że większość ludzi nie lubi wolnych stron internetowych, co ma sens.
Przy większej szybkości Internetu może być trudno czekać na zbyt długie ładowanie witryny. Ponadto prędkości mobilnego Internetu różnią się znacznie bardziej niż zwykłe połączenia domowe. Oznacza to, że Twoja witryna będzie musiała być wysoce zoptymalizowana pod kątem urządzeń mobilnych, jeśli chcesz zadowolić tych użytkowników, ponieważ nie wszyscy będą mieli dostęp do Internetu (tj. Szybki).
Ta wskazówka może dotyczyć całej witryny, ale jest również ważna w przypadku stron mobilnych wyświetlających formularze. Jeśli ładowanie tych części witryny trwa zbyt długo, Jeśli stracić konwersje i możliwości kontaktu z odwiedzającymi.
Zwykle witryna ładuje się nie dłużej niż dwie sekundy. Po przekroczeniu tego limitu współczynniki odrzuceń zwykle dramatycznie rosną, co jest dla Ciebie okropną wiadomością, a biorąc pod uwagę naturę przeglądania na urządzeniach mobilnych, najlepiej jest utrzymywać ten czas na jak najniższym poziomie. .
Mając to na uwadze, istnieje wiele sposobów na poprawę ogólnej wydajności witryny. Możesz na przykład przejść na lepszy planzakwaterowanie, użyj responsywnego motywu zoptymalizowanego pod kątem szybkości i kompresuj swoje obrazy. Oczywiście pomogą one wszystkim użytkownikom, ale będą szczególnie przydatne dla tych, którzy korzystają z mniejszych urządzeń.
5. Przetestuj swoje formularze przed opublikowaniem
Biorąc pod uwagę, że formularze są kluczową częścią większości witryn internetowych, przed opublikowaniem warto je dokładnie przetestować. W przypadku WordPressa ten proces jest dość prosty. Możesz śmiało zaprojektować określone strony, aby wyświetlać formularze i nie publikować ich, dopóki w pełni ich nie przetestujesz.
Oczywiście wybór wtyczki lub motywu, którego chcesz użyć, zależy od Ciebie (o ile może pomóc w tworzeniu witryn mobilnych). Jednak jeśli chodzi o fazę testowania, zalecamy zachowanie jej prostoty i używanie narzędzi takich jak narzędzia rozwoju Chrom do wykonania pracy.
Przejdźmy przez krótki przykład. Jeśli używasz przeglądarki Chrome, przejdź dalej i wyświetl podgląd strony z formularzem, który chcesz przetestować. Następnie kliknij prawym przyciskiem myszy w dowolnym miejscu na tej stronie i wybierz opcję sprawdzać . Chrome wyświetli zestaw narzędzi, których możesz użyć do przeglądania i edycji kodu źródłowego strony po prawej i po lewej stronie, możesz zobaczyć podgląd jej wyglądu z urządzenia mobilnego:
U góry ekranu możesz użyć menu do przełączania się między różnymi rozdzielczościami. Chrome zawiera ustawienia dla kilku popularnych urządzeń mobilnych, ale możesz też wprowadzić własną rozdzielczość.
W tym momencie powinieneś sprawdzić wygląd i zachowanie swojego formularza kontaktowego na wielu urządzeniach. Weźmy poniższy przykład - formularz działa dobrze, ale widać, że nie pasuje tak dobrze, jak powinien. Zwróć szczególną uwagę na tekst i ikony, które znajdują się zbyt blisko krawędzi ekranu:
Jednym ze sposobów uniknięcia tego problemu jest uproszczenie formularzy, o czym wspomnieliśmy w pierwszej wskazówce. W poniższym przykładzie formularz korzysta z wielu list rozwijanych i wymaga tylko trzech pól. Dzięki temu jest łatwy w użyciu, a co ważniejsze, forma jest tak prosta, że musi pasować idealnie do wszystkich urządzeń:
Jeśli masz jakiekolwiek problemy z którymkolwiek ze swoich formularzy, oczywiście musisz je natychmiast rozwiązać. W przeciwnym razie ryzykujesz zrażeniem swoich mobilnych odbiorców, czego staramy się najpierw uniknąć!
Wnioski
Zapewnienie zgodności witryny internetowej z urządzeniami mobilnymi jest kluczem do utrzymania ruchu i nie frustrowania odwiedzających. W szczególności formularze powinny być łatwe w użyciu na urządzeniach mobilnych, jeśli nie chcesz przegapić wiadomości lub cennych potencjalnych klientów.
Jeśli chodzi o projektowanie formularzy przyjaznych dla urządzeń mobilnych, oto pięć wskazówek, które upraszczają Twoje życie:
- Usuń wszystkie niepotrzebne sekcje.
- Jeśli to możliwe, użyj list rozwijanych.
- Upewnij się, że przyciski przesyłania są łatwe do naciśnięcia.
- Upewnij się, że twoje formularze wczytują się szybko.
- Przetestuj swoje formularze przed ich opublikowaniem.
