W pierwszej sekcji omówiliśmy, jak stworzyć podstawową formę. Ta sekcja jest poświęcona sprawdzonym metodom. W tym module dowiesz się więcej o wygodzie użytkowników i o tym, dlaczego dobrze zaimplementowany interfejs może mieć tak duże znaczenie.
Tworzenie przyjaznych dla użytkownika interfejsów
Wypełnianie formularzy może być czasochłonne i frustrujące. Nie musi. Aby zadbać o wrażenia użytkowników, zadbaj o intuicyjność interfejsu. Zadbaj o optymalną strukturę formularza i projekt graficzny (układ, odstępy, rozmiar i kolor czcionki) oraz logiczny interfejs użytkownika (np. z opisem etykiet i odpowiednimi rodzajami danych wejściowych). Przyjrzyjmy się, jak możesz ulepszyć formularz i ułatwić jego korzystanie z niego.
Etykiety
Pamiętasz, do czego służy element <label>?
Etykieta opisuje element sterujący formularza.
Widoczna i dobrze napisana etykieta pomaga użytkownikowi zrozumieć cel elementu sterującego formularza.
Używanie etykiety dla każdego elementu sterującego formularza
Czy chcesz dodać do formularza nowy element sterujący? Zacznij od dodania etykiety nowego pola. Dzięki temu nie zapomnisz o ich dodaniu.
Dodanie etykiet na początku ułatwia też skupienie się na celach formularza – jakich danych potrzebuję? Gdy to zrobisz, możesz skupić się na pomaganiu użytkownikowi w wprowadzaniu danych i wypełnianiu formularza.
Sformułowanie etykiety
Załóżmy, że chcesz opisać pole adresu e-mail. Możesz to zrobić w ten sposób:
<label for="email">Enter your email address</label>
Możesz też opisać to w ten sposób:
<label for="email">Email address</label>
Który opis wybierasz?
W naszym przykładzie preferowany jest tekst „Adres e-mail”, ponieważ krótkie etykiety są łatwiejsze do skanowania, unikają bałaganu na ekranie i pomagają użytkownikom szybciej zrozumieć, jakie dane są potrzebne.
Pozycja etykiety
Za pomocą CSS możesz umieścić etykietę u góry, u dołu, po lewej i prawej stronie elementu sterującego formularza. Gdzie go umieszczasz?
Badania pokazują, że sprawdzoną metodą jest umieszczenie etykiety nad elementem sterującym formularza, aby użytkownik mógł szybko zeskanować formularz i zobaczyć, która etykieta należy do którego elementu sterującego formularza.
Projektowanie formularzy
Dobry projekt formularza może znacznie zmniejszyć współczynnik porzuceń formularza.
Ułatwiaj użytkownikom wpisywanie danych za pomocą odpowiednich elementów i typów danych wejściowych.
Masz do wyboru różne elementy formularzy i typy danych wejściowych.
Aby zapewnić jak najlepsze wrażenia użytkownikom, używaj elementów i typów danych wejściowych, które najlepiej pasują do Twojego przypadku.
Jeśli użytkownik powinien wypełnić wiele wierszy tekstu, użyj elementu <textarea>.
Aby zaakceptować warunki korzystania z Twojej witryny, użyj <input type="checkbox">.
Musisz też wizualnie rozróżniać różne typy elementów sterujących formularza. Przycisk powinien wyglądać jak przycisk. Dane wejściowe, takie jak dane wejściowe. Ułatw użytkownikom rozpoznanie przeznaczenia elementów sterujących formularza. Jeśli na przykład link wygląda jak link, kliknięcie go powinno otworzyć nową stronę bez przesłania formularza.
Pomóż użytkownikom poruszać się po formularzach
Ekstrawagancki układ może być zabawny, ale może utrudniać wypełnienie formularza.
Badania pokazują przede wszystkim, że najlepiej używać tylko jednej kolumny. Użytkownicy nie chcą poświęcać czasu na szukanie miejsca, w którym znajduje się kolejny element sterujący. Korzystając z jednej kolumny, można podążać tylko w jednym kierunku.
Pomaganie użytkownikom w korzystaniu z formularzy
Aby uniknąć przypadkowych kliknięć i kliknięć, a także ułatwić użytkownikom interakcję z formularzem, ustaw odpowiednio duże przyciski.
Zalecany rozmiar elementu docelowego kliknięcia przycisku to co najmniej 48 pikseli.
Należy też dodać odpowiednie odstępy między elementami sterującymi formularza za pomocą właściwości CSS margin, aby uniknąć przypadkowych interakcji.
Domyślny rozmiar elementów sterujących formularza jest za mały, aby można było ich używać. Możesz zwiększyć rozmiar za pomocą parametru padding i zmieniając domyślną wartość font-size.
Za pomocą funkcji multimediów CSS pointer możesz zdefiniować różne rozmiary dla różnych urządzeń wskazujących, np. myszy.
// pointer device, for example, a mouse
@media (pointer: fine) {
input[type="checkbox"] {
width: 15px;
height: 15px;
}
}
// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
input[type="checkbox"] {
width: 30px;
height: 30px;
}
}
Dowiedz się więcej o funkcji mediów CSS pointer.
Pokaż błędy w miejscach, w których się pojawiają
Aby ułatwić użytkownikom zorientowanie się, które ustawienia formularza wymagają ich uwagi, wyświetlaj komunikaty o błędach obok elementu, do którego się odwołują. Podczas wyświetlania błędów przy przesyłaniu formularza przejdź do pierwszego nieprawidłowego elementu sterującego.
Poinformuj użytkowników, jakie dane mają wpisać
Upewnij się, że użytkownicy wiedzą, jak podać prawidłowe dane. Czy hasło musi wpisać co najmniej 8 znaków? Powiedz im.
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>
Poinformuj użytkowników, które pola są wymagane
<label for="name">Name (required)</label>
<input name="name" id="name" required>
Jeśli pole jest obowiązkowe, powinno być jasne. Anatomia formularzy z ułatwieniami dostępu wyjaśnia alternatywne sposoby wskazywania pól wymaganych. Jeśli większość pól w formularzu jest wymagana, lepiej wskazać pola opcjonalne.
Jak połączyć komunikaty o błędach z elementami sterującymi formularza, aby były dostępne dla czytników ekranu? Więcej informacji na ten temat znajdziesz w następnym module.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat projektowania formularzy
Jak opisać element sterujący formularzem?
<description>.<label>.description.placeholder.Jaki jest zalecany rozmiar docelowego elementu dotykowego?
Gdzie umieścić komunikaty o błędach?
<form>.