7 sekretów projektowania wielkich form
Niemal każdy projekt strony zawiera jakąś formę. Od prostego zbierania adresów e-mail do zapisywania się do biuletynu lub powiadomienia do pełnych formularzy płatności, konieczne jest zaprojektowanie formularza, który będzie łatwy w użyciu i zrozumiały.
Zmieniają się również standardy projektowania formularzy. Podczas gdy wiele formularzy zawierało wiele kolumn i wymagało dużej ilości informacji, większość najlepszych praktyk sugeruje teraz, aby formularze były jak najprostsze. Jest też wiele do zaprojektowania. Dobra forma jest dostępna do skanowania, nie wymaga dużej ilości pisania i zawiera inteligentne etykietowanie i formatowanie, aby pomóc użytkownikom w poprawnym wypełnianiu formularzy za pierwszym razem.
Oto kilka sekretów, aby upewnić się, że projektujesz formularz, który użytkownicy faktycznie wypełniają.
1. Ułatw skanowanie i czytanie
Wiesz, że użytkownicy skanują witryny internetowe w celu zebrania informacji i określenia, jakie działania zostaną podjęte lub czy ich treść i projekt ich interesuje. To samo dotyczy formularzy. Użytkownik powinien być w stanie określić, jakie informacje są potrzebne na pierwszy rzut oka i podać jasne wyjaśnienie, na czym polega formularz i jak go przesłać.
Formularz wysoce skanowalny obejmuje:
- Kontrast: tekst musi być krótki i łatwy do odczytania. Unikaj mnóstwa kolorów i trzymaj się tradycyjnych ciemności na jasnych kombinacjach tekst-tło.
- Grupowanie i spacja: informacje o grupie podobne na dłuższych formularzach. Podczas zbierania informacji o płatnościach można na przykład grupować informacje o klientach, informacje o płatnościach i informacje o wysyłce. Trzy krótsze bloki są łatwiejsze do strawienia niż jedna długa. Użyj inteligentnego odstępu, aby etykiety były połączone z polem, które wyjaśniają, zamiast jednolitego odstępu między tekstem a elementami pola.
- Jasne wykończenie / wezwanie do działania : przycisk jest duży i łatwy do zauważenia. Mikrokopia wewnątrz przycisku powinna informować użytkowników o tym, co się stanie, np. "Prześlij", "zapłać teraz" lub "przejdź do następnego kroku". Pamiętaj, aby zamknąć pętlę zwrotną i dać znać użytkownikom, kiedy formularz zostanie poprawnie przesłany.
2. Rozważ pływające etykiety
Było dużo debaty na temat tego, czy używać tekstu podpowiedzi w polach formularzy. Głównym problemem jest to, że zbyt często ten tekst nie znika z kliknięciem i użytkownicy muszą go aktywnie usuwać, aby rozpocząć pisanie. To niezręczne.
Ponadto, Znaleziono Nielsen Norman Group puste pola mogą przyciągać wzrok i pomagać użytkownikom w wyraźniejszym wprowadzaniu informacji.
Jeśli uważasz, że potrzebujesz wskazówek, zastanów się nad pływającymi etykietami z interaktywnym rozwiązaniem. Umieść informacje o etykietach w polach formularzy, aby wyglądały jak tekst zastępczy, ale pozwól tekstowi animować się i przesuń w lewą górną pozycję, gdy użytkownik się podniesie lub kliknie w pole. Etykieta lub podpowiedź nigdy nie zniknie i nie przeszkadza użytkownikowi w wypełnianiu formularza. (Plus mała animacja to zabawna niespodzianka dla użytkowników).
3. Użyj masek polowych
Maski terenowe mogą dostarczać niektóre z tych samych wskazówek i podpowiedzi, ale bez wchodzenia w drogę użyteczności. Maska pola pojawia się tylko wtedy, gdy użytkownik aktywuje pole i zapewnia dodatkową wskazówkę dotyczącą skanowania, jakie informacje są potrzebne. Maska może pomóc użytkownikowi dalej, automatycznie formatując informacje, aby uniknąć błędów, które wykopią formularz po przesłaniu.
Dobrym przykładem działania maski w terenie są numery telefonów. Rozważ różnorodne opcje formatu:
- (000) 000-0000
- 000-000-0000
- 0000000000
W jaki sposób użytkownik wie, który z nich zadziała? Pole formularza określi i dostosuje format jako typ użytkownika, więc nie musi o tym myśleć, a jedynie wpisywać liczby. (Oszczędza to także kłopotów związanych z przełączaniem między klawiaturami na urządzeniu mobilnym).
4. Uczyń formularze przyjaznymi dla klawiatury
Nie masz możliwości poznania typu urządzenia, na które użytkownik natknie się w formularzu, ale i tak powinno być ono równie łatwe do wypełnienia. Rozważ wszystkie typy klawiatur, które mogą wysyłać informacje do formularza i dostosuj pola do wykrywania i używania odpowiedniej opcji.
Na komputerach użytkownicy powinni mieć możliwość wprowadzania formularzy i wypełniania każdego pola bez konieczności klikania myszą. Przesuwaj automatycznie z jednego pola do drugiego po zakończeniu lub użyj tabulatorów lub wprowadź, aby się przemieszczać. W3.org ma solidny zestaw zalecenia dotyczące klawiatury abyś naśladował.
Na urządzeniach mobilnych dopasuj typ klawiatury do wymaganych danych. Jeśli dane wejściowe dotyczą liter, wywołaj klawiaturę alfa; dla liczb, wywołaj opcję numeryczną. Z Google: "Użytkownicy aplikacji doceniają aplikacje, które zapewniają odpowiednią klawiaturę do wprowadzania tekstu. Upewnij się, że jest to konsekwentnie wdrażane w całej aplikacji, a nie tylko dla niektórych zadań, ale nie dla innych. "
5. Wybierz format pionowy
Formy pionowe są łatwiejsze dla użytkowników niż formaty z wieloma kolumnami. Do zasady najlepszych praktyk należy upewnienie się, że wszystkie pola mieszczą się na ekranie bez przewijania w formacie od góry do dołu.
Jedyny wyjątek dotyczy bardzo krótkich formularzy, w których użytkownik musi wprowadzić tylko adres e-mail lub nazwę i adres e-mail. Dwie kolumny obok siebie i przycisk wezwania do działania mogą działać dobrze w tej sytuacji, o ile adres e-mail jest wystarczająco długi, aby użytkownicy mogli zobaczyć wszystkie litery swojego adresu.
Pamiętaj o logicznym porządkowaniu elementów w formie pionowej. Jeśli zbierasz imię, nazwisko, adres e-mail i kolor włosów, ułóż je w taki sposób.
6. Typowanie limitów
Wykorzystaj jak najwięcej formularzy wstępnego wypełnienia formularzy. Nic nie jest bardziej zachwycające niż dodanie adresu i po kilku pierwszych kliknięciach interfejs API Google uruchamia się i sugeruje opcje adresu.
To robi trzy rzeczy:
- Ułatwia użytkownikom, zwłaszcza na urządzeniach mobilnych.
- Pomaga ograniczyć liczbę niezbędnych pól.
- Może to pomóc w wyeliminowaniu niektórych błędów użytkownika, takich jak błędne wpisywanie.
Rozważ to samo z adresami e-mail, aby użytkownicy otrzymywali popularne domeny e-mail po symbolu @. Gdy użytkownik wpisze [e-mail chroniony] .... pole automatycznie sugeruje [email protected] .
7. Keep It Short and Sweet
Będziesz kuszony, aby prosić użytkowników o wiele informacji w formularzach. Oprzeć się pokusie!
Proś tylko o istotne informacje w formularzach. Istnieje większe prawdopodobieństwo, że użytkownicy wypełnią formularze wymagające mniejszego zaangażowania. Jeśli potrzebujesz więcej informacji w późniejszym czasie, możesz wysłać je pocztą e-mail z listy, prosząc o dodatkowe informacje. (Jako osoba, która już zdecydowała się na udział, użytkownik z większym prawdopodobieństwem skontaktuje się z Tobą, aby uzyskać więcej informacji w tym momencie).
Unikaj pól opcjonalnych. Nie pytaj o nadmiarowe informacje. Nie używaj wielu pól, w których możesz użyć jednego (na przykład numery telefonów).
Wniosek
Daj użytkownikom coś w zamian za wypełnienie formularza. Spraw, aby było zabawnie lub interesująco. Dziękuję użytkownikowi.
Utworzenie łatwego do odczytania i łatwego w użyciu formularza zwiększy twoje szanse na zbieranie danych i przekształcenie odwiedzającego stronę w użytkownika powtarzającego się.