Najlepsze praktyki projektowania formularzy internetowych

Najlepsze praktyki projektowania formularzy internetowych

Użyteczność strony internetowej mierzy się wieloma zmiennymi, jednym z nich jest przejrzystość i intuicyjność formularzy. Długość formularza, kontekst użycia i gromadzone dane to tylko niektóre z istotnych zmiennych. W niektórych przypadkach rozwiązania, które powinieneś zastosować, będą inne, ale nie jest to usprawiedliwieniem dla całkowitego łamania zasad. Zamiast tego użyj poniższych sugestii jako punktu wyjścia, a jeśli zdecydujesz się odejść od tych przyjętych najlepszych praktyk, upewnij się, że masz ważny powód.

1. Mów krótko – Chociaż usuwanie zbędnych informacji wymaga więcej pracy, wyższe wskaźniki ukończenia i mniejszy wysiłek użytkownika sprawiają, że jest to korzystne. Usuń wszystkie pola, które proszą o informacje, które można uzyskać w inny sposób, łatwiej zebrać później lub całkowicie zignorować. Powód biznesowy dla tego zalecenia jest prosty: za każdym razem, gdy usuwasz pole lub pytanie z formularza, konwersja formularza idzie w górę.

1. Wizualnie zaznacz powiązane ze sobą etykiety i pola – Etykiety powinny znajdować się w pobliżu pól, do których się odnoszą. Uważaj, aby dołączyć <label> dla czytników ekranu i uniknąć niejasnych odstępów, które występują, gdy etykiety są równomiernie rozmieszczone na kilku polach. Jeśli Twój formularz wymaga informacji na dwa różne tematy, podziel go na dwie odrębne grupy pól.

1. Pola powinny być wyświetlane w jednej kolumnie. Kolumny poziome przerywają pionowy ruch typowy dla formularzy. Utrzymanie pojedynczej kolumny z odrębnym wierszem dla każdego pola zapewni użytkownikom ciągłość przepływu informacji, zamiast wymagać od nich dostosowywania się do niekończących się zmian wizualnych. (Powiązane logicznie dane, takie jak miasto, województwo i kod pocztowy, mogą być wyświetlane w tym samym wierszu jako wyjątek).
2. Ułóż wszystko w logicznej kolejności. Zachowaj pola (takie jak numer karty kredytowej, data ważności i kod zabezpieczający) oraz wybrane wartości w konwencjonalnej kolejności (np. Wysyłka standardowa, Wysyłka 2-dniowa, Wysyłka 1-dniowa). Ale wybierając wartości pól, weź pod uwagę, jak często będą one używane. Jeśli to możliwe, najpierw wymień najpopularniejsze wybory. Przetestuj nawigację za pomocą klawisza Tab, aby upewnić się, że kolejność pól jest odpowiednia dla użytkowników klawiatury.
3. Nie używaj tekstu zastępczego. Tekst zastępczy jest popularny wśród projektantów, ponieważ zmniejsza bałagan wizualny. Jednak tekst zastępczy jest naprawdę szkodliwy dla użyteczności i należy go unikać.
4. Dopasuj pola do typów i rozmiarów danych wejściowych. Jeśli dostępne są tylko dwie lub trzy alternatywy, rozważ użycie przycisków opcji zamiast menu rozwijanych (które wymagają tylko jednego kliknięcia lub dotknięcia). Ponieważ użytkownicy nie mogą wyświetlić całego zgłoszenia, jest to niezwykle podatne na błędy, dlatego pola tekstowe powinny mieć mniej więcej ten sam rozmiar, co zamierzone dane wejściowe.

1. Rozróżnij pola obowiązkowe i opcjonalne. Najpierw usuń jak najwięcej pól opcjonalnych (zobacz pierwsze zalecenie powyżej). Nie zmuszaj użytkowników do odkrywania metodą prób i błędów, czy pewne pola są rzeczywiście niezbędne, jeśli dotyczą tylko określonej grupy użytkowników. Po prostu umieść w formularzu jedno lub dwa opcjonalne pola i upewnij się, że są one wyraźnie oznaczone jako takie.
2. Opisz wszelkie dane wejściowe lub specyfikacje formatowania. Wskaż dokładne wymagania, jeśli pole wymaga określonego typu lub formatu danych wejściowych. Nie wymagaj od ludzi odgadywania skomplikowanych wymagań dotyczących hasła. To samo dotyczy norm gramatycznych, takich jak interpunkcja lub odstępy między numerami telefonów lub informacjami o kartach kredytowych.
3. Nie umieszczaj przycisków Resetuj/Wyczyść. Prawdopodobieństwo konieczności „zaczęcia od nowa” w formularzu online jest mniejsze niż niebezpieczeństwo niezamierzonego usunięcia. Zapewnij opcję „Anuluj” w formularzach wymagających podania szczególnie prywatnych danych, takich jak informacje finansowe, aby pomóc użytkownikom, którzy chcą wycofać się z formularza i usunąć swoje informacje. Aby jednak zapobiec przypadkowym kliknięciom, upewnij się, że przycisk Anuluj jest znacznie mniej widoczny niż przycisk Prześlij. Wdrożenie analityki internetowej może pomóc w ustaleniu gdzie użytkownicy najczęściej klikają i zoptymalizować przyciski.
4. Wysyłaj bardzo jasne i zwięzłe komunikaty o błędach. Aby zagwarantować, że użytkownicy nie przegapią tych kluczowych informacji, błędy powinny być zgłaszane za pomocą kombinacji sygnałów, a nie tylko koloru: podświetl pole, użyj czerwonego tekstu i użyj większej czcionki. Subtelność nie jest w tej chwili odpowiednia.

Niepoprawne dane wejściowe należy zapisać, aby użytkownicy mogli je poprawić, a problem powinien zostać szczegółowo wyjaśniony.