Podstawy projektowania

W pierwszej sekcji omówiliśmy, jak utworzyć podstawowy formularz. Ta sekcja jest w całości poświęcona sprawdzonym metodom. W tym module dowiesz się więcej o wrażeniach użytkowników (UX), i dlaczego dobrze wdrożony interfejs (UI) może mieć duże znaczenie.

Tworzenie łatwych w użyciu interfejsów

Wypełnianie formularzy może być czasochłonne i frustrujące. Nie musi. Aby zadbać o wygodę użytkowników, należy zadbać o jego intuicyjny interfejs. Zadbaj o optymalną strukturę formularza i projekt graficzny (układ, odstępy, rozmiar i kolor czcionki). i logiczny interfejs użytkownika (np. sformułowania etykiet i odpowiednie typy danych wejściowych). Zobaczmy, jak można ulepszyć formularz i ułatwić jego obsługę.

Etykiety

Pamiętasz, do czego służy element <label>? Etykieta opisuje element sterujący formularza. Widoczna i poprawnie 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 zapomnij go dodać.

Wcześniejsze dodanie etykiet pomaga też skupić się na celach formularza – jakich danych potrzebujesz w tym miejscu? Gdy już 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 tekst reklamy wybierzesz?

Na przykład nazwa „Adres e-mail” jest preferowana, Krótkie etykiety są łatwiejsze do skanowania, bałaganu i bałaganu, i pomóc użytkownikom szybciej zrozumieć, jakich danych potrzebuje.

Pozycja etykiety

Dzięki CSS możesz umieścić etykietę na górze, na dole, w lewej i prawej części elementu sterującego formularza. Gdzie go umieścić?

Programy badawcze że sprawdzona metoda to umieścić etykietę nad elementem sterującym formularza, aby użytkownik mógł szybko zeskanować formularz i sprawdzić, która etykieta należy do którego elementu sterującego formularza.

Projektowanie formularzy

Dobry projekt formy znacznie obniżyć współczynnik porzuceń formularza. Pomóż użytkownikom wprowadzać dane, używając odpowiedniego elementu i typu danych wejściowych Do wyboru masz różne elementy formularzy i typy danych wejściowych do wyboru. Aby zapewnić jak najlepsze wrażenia użytkownika, używaj elementów i typów danych wejściowych najlepiej dopasowanych do Twojego przypadku użycia. Jeśli użytkownik powinien wpisać wiele wierszy tekstu, użyj elementu <textarea>. Tam, gdzie użytkownik musi zaakceptować warunki korzystania z Twojej witryny, użyj <input type="checkbox">.

Warto też wizualnie rozróżnić różne typy elementów sterujących formularza. Przycisk powinien wyglądać jak przycisk. Dane wejściowe, np. dane wejściowe. Ułatw użytkownikom rozpoznanie zastosowania elementu sterującego formularza. Jeśli na przykład coś wygląda jak link, kliknięcie go powinno otworzyć nową stronę, bez przesyłania formularza.

Pomóż użytkownikom poruszać się po formularzach

Ekstrawagancki układ może być atrakcyjny, ale może przeszkodzić w wypełnieniu formularza.

W szczególności programy badawcze że najlepiej jest używać tylko jednej kolumny. Użytkownicy nie chcą spędzać czasu na wyszukiwaniu w miejscu, w którym znajduje się następny element sterujący formularza. Za pomocą jednej kolumny można podążać tylko w jednym kierunku.

Pomaganie użytkownikom w korzystaniu z formularzy

Aby uniknąć przypadkowych kliknięć: i ułatwić użytkownikom interakcję z formularzem, odpowiednio duże przyciski. Zalecane rozmiar elementu kliknięcia przycisku to co najmniej 48 pikseli. Dodaj też wystarczające odstępy między elementami sterującymi formularza za pomocą funkcji margin właściwość CSS, która pozwala uniknąć przypadkowych interakcji.

Domyślny rozmiar elementów sterujących formularza jest za mały, aby można było z niego korzystać. Zwiększ rozmiar, używając opcji padding i zmieniając domyślną wartość font-size.

Możesz określić różne rozmiary dla różnych urządzeń wskazujących, np. myszą przy użyciu funkcji multimediów CSS pointer.

// 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 pointer Funkcja multimediów CSS.

Pokaż błędy w miejscach ich występowania

Aby ułatwić użytkownikom określenie, które ustawienia formularza wymagają ich uwagi, mogą wyświetlać komunikaty o błędach obok elementów sterujących formularza, do których się one odnoszą. Jeśli podczas przesyłania formularza zobaczysz błędy, pamiętaj, aby przejść do pierwszego elementu sterującego nieprawidłowym formularzem.

Wyraźnie poinformuj użytkowników, jakie dane mają wpisać

Upewnij się, że użytkownicy wiedzą, jak wpisać prawidłowe dane. Czy hasło musi zawierać co najmniej 8 znaków? Powiedz im 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>

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, zadbaj o to, żeby było oczywiste. Anatomia formularzy ułatwień dostępu zawiera opis alternatywnych metod określania wymagane pola. Jeśli większość pól formularza jest wymaganych, lepiej użyć Wskaż pola opcjonalne.

Jak połączyć komunikaty o błędach z elementami sterującymi formularza, aby były one dostępne dla czytników ekranu? Więcej informacji na ten temat znajdziesz w następnym module.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o projektowaniu formularzy

Zasoby

• Tworzenie niesamowitych formularzy
• Sprawdzone metody projektowania formularzy mobilnych
• Baymard Institute: badania nad UX e-commerce
• Nie zmuszaj mnie do myślenia