W pierwszej sekcji dowiedzieliśmy się, jak utworzyć podstawowy formularz. W tej sekcji znajdziesz sprawdzone metody. Z tego modułu dowiesz się, czym są wrażenia użytkownika (UX) i dlaczego dobrze wdrożony interfejs użytkownika (UI) może mieć duże znaczenie.
Tworzenie przyjaznych dla użytkownika interfejsów
Wypełnianie formularzy może być czasochłonne i frustrujące, ale nie musi takie być. Aby zapewnić użytkownikom jak największą wygodę, zadbaj o intuicyjny interfejs. Zadbaj o optymalną strukturę formularza i grafikę (układ, odstępy, rozmiar i kolor czcionki) oraz logiczny interfejs (np. sformułowania etykiet i odpowiednie typy danych wejściowych). Dowiedz się, jak ulepszyć formularz i ułatwić 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ć przeznaczenie elementu sterującego formularza.
Używaj etykiety dla każdego elementu sterującego formularzem
Chcesz dodać do formularza nowy element sterujący? Zacznij od dodania etykiety nowego pola. Dzięki temu nie zapomnisz go dodać.
Dodanie najpierw etykiet pomaga też skupić się na celach formularza – jakich danych potrzebuję? Gdy to zrobisz, możesz skupić się na pomocy użytkownikowi w wprowadzaniu danych i wypełnianiu formularza.
Treść etykiety
Powiedz, że chcesz opisać pole e-maila. 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 wybierzesz?
W naszym przykładzie preferowany jest tekst „Adres e-mail”, ponieważ krótkie etykiety są łatwiejsze do przejrzenia, zmniejszają bałagan wizualny 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 lub po prawej stronie elementu formularza. Gdzie ją umieścisz?
Z badań wynika, że najlepszym rozwiązaniem jest umieszczenie etykiety nad elementem sterującym formularza, aby użytkownik mógł szybko przejrzeć formularz i zobaczyć, która etykieta należy do którego elementu sterującego.
Projektowanie formularzy
Dobry projekt formularza może znacznie zmniejszyć odsetek porzuceń.
Ułatw użytkownikom wprowadzanie danych, używając odpowiedniego elementu i typu danych wejściowych
Możesz wybierać spośród różnych elementów formularza i typów danych wejściowych.
Aby zapewnić użytkownikom jak najlepsze wrażenia, używaj elementu i typu danych wejściowych, które najlepiej pasują do Twojego przypadku użycia.
Jeśli użytkownik ma wypełnić kilka wierszy tekstu, użyj elementu <textarea>.
Jeśli użytkownicy muszą zaakceptować warunki korzystania z Twojej witryny, użyj <input type="checkbox">.
Powinieneś też wizualnie odróżniać od siebie 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 rozpoznawanie przeznaczenia elementu formularza. Jeśli na przykład coś wygląda jak link, kliknięcie tego elementu powinno otwierać nową stronę, a nie przesyłać formularz.
Ułatwianie użytkownikom poruszania się po formularzach
Ekstrawagancki układ może być zabawny, ale może utrudniać wypełnienie formularza.
W szczególności badania pokazują, że najlepiej jest używać tylko jednej kolumny. Użytkownicy nie chcą tracić czasu na szukanie kolejnego elementu formularza. Użycie jednej kolumny sprawia, że jest tylko jeden kierunek, w którym można się poruszać.
Ułatwianie użytkownikom interakcji z formularzami
Aby uniknąć przypadkowych kliknięć i ułatwić użytkownikom interakcję z formularzem, powiększ przyciski. Zalecany rozmiar docelowego elementu dotykowego przycisku to co najmniej 48 pikseli. Aby uniknąć przypadkowych interakcji, dodaj też wystarczającą ilość miejsca między elementami sterującymi formularza za pomocą właściwości CSS margin.
Domyślny rozmiar elementów sterujących formularza jest zbyt mały, aby można było z nich wygodnie korzystać. Aby zwiększyć rozmiar, użyj padding i zmień domyślną wartość font-size.
Możesz zdefiniować różne rozmiary dla różnych urządzeń wskazujących, np. myszy, za pomocą pointerfunkcji multimedialnej CSS.
// 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 pointerfunkcji mediów CSS.
Wyświetlanie błędów w miejscu ich wystąpienia
Aby użytkownicy mogli łatwo sprawdzić, który element formularza wymaga ich uwagi, wyświetlaj komunikaty o błędach obok elementu formularza, do którego się odnoszą. Gdy wyświetlasz błędy podczas przesyłania formularza, przejdź do pierwszego nieprawidłowego elementu formularza.
Wyraźnie informuj użytkowników, jakie dane mają wpisać.
Upewnij się, że użytkownicy wiedzą, jak wprowadzać prawidłowe dane. Czy hasło musi mieć co najmniej 8 znaków? Poinformuj ich o tym.
<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>
Wyraźnie informuj 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, wyraźnie to zaznacz. W artykule The Anatomy of Accessible Forms znajdziesz alternatywne sposoby oznaczania pól wymaganych. Jeśli większość pól w formularzu jest wymagana, lepiej oznaczyć pola opcjonalne.
Jak powiązać komunikaty o błędach z elementami sterującymi formularza, aby były dostępne dla czytników ekranu? Więcej informacji znajdziesz w module Ułatwienia dostępu.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o projektowaniu formularzy
Jak opiszesz element sterujący formularza?
<description>.<label>.description.placeholder.Jaki jest zalecany rozmiar docelowego obszaru dotykowego?
Gdzie należy umieszczać komunikaty o błędach?
<form>.