Zrozumiałość · Poziom A

3.2.2 Podczas wprowadzania danych

Zmiana wartości pola nie powinna zaskakiwać zmianą strony.

Krótko

Gdy użytkownik zmieni wartość pola, zaznaczy checkbox albo wybierze opcję, strona nie może bez uprzedzenia automatycznie zmienić kontekstu.

Problem w praktyce

Użytkownik wybiera województwo w formularzu. Strona od razu przeładowuje się, fokus znika, a część wpisanych danych przepada. Osoba nie została uprzedzona, że sama zmiana pola uruchomi taką akcję.

To kryterium nie jest oceną jakości walidacji formularza. Dotyczy przewidywalności zmian po wprowadzeniu danych.

Kogo to dotyczy

  • Osób korzystających z klawiatury i czytników ekranu, które mogą nie zauważyć automatycznej zmiany.
  • Osób z trudnościami poznawczymi, które potrzebują jasnego kroku „dalej”.
  • Użytkowników na mobile, gdzie przeładowanie po wyborze opcji bywa trudne do zauważenia.
  • Osób pracujących w długich formularzach, gdzie utrata kontekstu oznacza realną stratę czasu.

Dobry przykład

  • Po wyborze filtra użytkownik aktywuje przycisk „Zastosuj filtry”.
  • Lista „Wybierz język” ma tekst: „Po wyborze języka strona zostanie przeładowana”.
  • Checkbox pokazuje dodatkowe pola w tym samym formularzu, ale nie przenosi użytkownika na inną stronę.
  • Zmiana pola aktualizuje krótką podpowiedź bez utraty fokusu i bez przeładowania strony.

Zły przykład

  • Wybór kraju w polu select od razu przenosi na inną wersję strony.
  • Zaznaczenie checkboxa automatycznie wysyła formularz.
  • Zmiana daty w kalendarzu przeładowuje stronę bez ostrzeżenia.
  • Wpisanie ostatniej cyfry kodu SMS automatycznie przenosi dalej, mimo że użytkownik nie został o tym uprzedzony.

Przykłady kodu

Dobry przykład: wybór i osobny przycisk

Zmiana wartości pola nie wykonuje jeszcze akcji.

Kod — HTML

<label for="region">Województwo</label>
<select id="region" name="region">
  <option>Dolnośląskie</option>
  <option>Mazowieckie</option>
</select>
<button type="submit">Zastosuj</button>

Dobry przykład: użytkownik jest uprzedzony

Jeśli zmiana pola przeładuje stronę, informacja jest podana przed polem.

Kod — HTML

<p id="language-help">
  Po wyborze języka strona zostanie przeładowana.
</p>
<label for="language">Język strony</label>
<select id="language" name="language" aria-describedby="language-help">
  <option value="pl">Polski</option>
  <option value="en">English</option>
</select>

Zły przykład: automatyczne przejście bez uprzedzenia

Użytkownik zmienia wartość pola, a strona od razu przechodzi dalej.

Kod — JavaScript

const region = document.querySelector("#region");

region.addEventListener("change", () => {
  document.querySelector("form").submit();
});

Przykład graficzny

Źle

Wybór: „Mazowieckie” → formularz sam się wysyła

Zmiana wartości pola wywołała dużą akcję bez uprzedzenia.

Dobrze

Wybór: „Mazowieckie” → przycisk „Zastosuj”

Użytkownik sam decyduje, kiedy uruchomić zmianę.

Statyczne demo pokazuje, że sama zmiana danych nie powinna uruchamiać nieoczekiwanej zmiany kontekstu.

Jak sprawdzić

  1. Znajdź pola formularzy, selecty, checkboxy, radio buttony, filtry i przełączniki.
  2. Zmień wartość każdego elementu bez wciskania przycisku zatwierdzającego.
  3. Sprawdź, czy strona nie przeładowuje się, nie wysyła formularza i nie przenosi fokusu bez uprzedzenia.
  4. Jeśli zmiana kontekstu następuje automatycznie, sprawdź, czy użytkownik został o tym poinformowany przed kontrolką.
  5. Oddziel ocenę przewidywalności od oceny treści komunikatów walidacyjnych.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • część skryptów reagujących na zdarzenie change,
  • formularze wysyłane automatycznie,
  • brak widocznego przycisku zatwierdzającego w prostych układach.

Automat nie oceni pewnie

  • czy użytkownik został skutecznie uprzedzony,
  • czy aktualizacja treści jest zmianą kontekstu,
  • czy automatyczna zmiana była przewidywalna w danym procesie.

Typowe błędy

  • Filtry w sklepie przeładowują stronę po każdym zaznaczeniu checkboxa.
  • Wybór języka automatycznie zmienia stronę bez zapowiedzi.
  • Select „wybierz dział” od razu przenosi do innej sekcji.
  • Formularz wysyła się po ostatnim polu bez jasnej informacji.

Źródła