Obrazac je razgovor s osobom koja ne sjedi pokraj vas. Mora objasniti što traži, prepoznati nepotpun odgovor i jasno reći je li poruka stigla. Najviše problema često stvaraju sitnice koje autoru izgledaju očito.

Kao radni primjer uzmimo prijavu na besplatnu radionicu. Organizator treba ime, adresu za potvrdu i izbor termina. Broj osobne iskaznice, kućna adresa i datum rođenja nisu potrebni za taj zamišljeni postupak. Prvi korak prema boljem obrascu jest ukloniti polja za koja nemate jasan razlog.

Svako polje treba trajnu oznaku

Tekst unutar praznog polja može nestati čim počnete pisati. Zato naziv polja postavite iznad ili uz njega i povežite ga s kontrolom. W3C-ov vodič za oznake obrazaca preporučuje jasnu povezanost oznake i polja; kod eksplicitne veze vrijednosti atributa for i id moraju se podudarati.

<label for="adresa">E-adresa za potvrdu</label>
<input id="adresa" name="email" type="email"
       autocomplete="email" aria-describedby="adresa-pomoc" required>
<p id="adresa-pomoc">Na ovu adresu šaljemo potvrdu prijave.</p>

Primjer prikazuje samo jedno polje, ne kompletan sustav prijava. Oznaka govori što treba unijeti, a kratka uputa objašnjava zašto. Primjer poput „ime@primjer.hr” može biti pomoćni tekst, ali ne treba zamijeniti naziv polja. Za isti razlog pazite da više polja nema isti id.

Redoslijed treba pratiti posao

Postavite najprije izbor radionice ili termina ako on određuje ostatak prijave, zatim podatke koji su potrebni za potvrdu. Povezane izbore grupirajte. Za izbor jednog termina prikladna je skupina radijskih gumba; za više neovisnih mogućnosti potvrdni okviri. Odabirom kontrole koja odgovara pitanju smanjujete potrebu za dodatnim objašnjenjima.

Na mobitelu jedan stupac često olakšava praćenje. Gumb za slanje neka bude blizu završetka obrasca, s nazivom koji opisuje radnju, primjerice „Pošalji prijavu”. Ako prije konačne prijave postoji pregled, gumb bi trebao jasno reći „Pregledaj prijavu”. Posjetitelj ne bi trebao pogađati je li sljedeći korak konačan.

Pogreška treba ponuditi put do ispravka

Poruka „Neispravni podaci” ne govori korisniku što se dogodilo. Bolje je označiti konkretno polje i objasniti problem: „Unesite e-adresu u obliku ime@domena”. Ne temeljite poruku samo na crvenoj boji. Povežite objašnjenje s poljem i sačuvajte ostale ispravno unesene vrijednosti.

Za obrazac s više pogrešaka koristan je kratak sažetak iznad polja, s poveznicama na mjesta koja treba ispraviti. Nemojte automatski slati korisnika na početak dugačke stranice bez objašnjenja. Razlikujte obavezno polje koje je prazno od privremene pogreške poslužitelja; u drugom slučaju promjena unesene adrese neće riješiti problem.

Provjera u pregledniku nije cijela provjera

Tip email i atribut required mogu pomoći korisniku dok unosi podatke. Poslužitelj ipak mora samostalno provjeriti primljeni zahtjev. Pregledničke provjere mogu se zaobići, a mrežni zahtjev može stići iz drugog programa. Za stvarnu prijavu treba provjeriti i postoji li odabrani termin te ima li još mjesta.

U ilustrativnoj radionici preostalo je jedno mjesto. Dvoje ljudi može istodobno otvoriti obrazac koji prikazuje slobodno mjesto. Zato konačna odluka o prihvaćanju ne može ovisiti samo o tekstu koji su vidjeli prije minute. Potrebno je dosljedno spremanje i jasna poruka kada je termin u međuvremenu popunjen. To je posao aplikacije, a ne kozmetička dorada obrasca.

Potvrda mora odražavati stvarni ishod

Nakon uspješnog spremanja prikažite da je prijava zaprimljena i što slijedi. Ako prijava tek čeka ručnu potvrdu, nemojte napisati da je mjesto zajamčeno. Ako potvrdu šaljete e-poštom, provjerite da je taj korak stvarno izveden ili odvojeno objasnite da je prijava spremljena, ali dostava poruke nije potvrđena.

Spriječite da dvostruki klik stvori dvije prijave. Onemogućavanje gumba tijekom slanja može pomoći prikazu, no pouzdanost mora postojati i na poslužitelju. Jedinstvena oznaka zahtjeva ili odgovarajuće pravilo za prepoznavanje ponovljenog slanja može razdvojiti ponovni pokušaj od nove prijave. O tim razlikama više pišemo u vodiču za automatizaciju.

Provjera iz perspektive posjetitelja

  1. Prođite cijeli obrazac tipkovnicom i pogledajte je li fokus stalno vidljiv.
  2. Pošaljite prazan obrazac, zatim obrazac s jednom pogreškom.
  3. Provjerite ostaje li ispravno unesen sadržaj nakon odbijenog slanja.
  4. Povećajte prikaz i provjerite raspored na telefonu.
  5. Pregledajte nazive polja pomoću čitača zaslona kada je to dostupno.
  6. U kontroliranoj provjeri simulirajte nedostupnost primatelja ili poslužitelja.

Automatski alati mogu pronaći dio problema, ali ne znaju je li rečenica razumljiva ili obećava li potvrda više nego što sustav radi. Zamolite osobu koja nije oblikovala obrazac da objasni što očekuje nakon pritiska na gumb. Takav mali razgovor često otkrije nedoumice prije objave.

Obrazac je dio cjeline, pa provjerite i raspored i navigaciju web stranice. Pristupačnost nije završni premaz: odluke o broju polja, redoslijedu, jeziku i obradi pogrešaka određuju koliko će cijeli postupak biti upotrebljiv.