Merancang Form yang User-Friendly
Form adalah salah satu elemen UI paling kritis — di sinilah user memberikan data. Form yang buruk = user meninggalkan halaman.
Prinsip Form UX
- Minta hanya yang diperlukan — setiap field tambahan mengurangi completion rate
- Satu kolom — form single-column lebih mudah di-scan daripada multi-column
- Label di atas input — lebih mudah dibaca dari label di samping
- Group related fields — nama depan + belakang, kota + kode pos
Label dan Input yang Benar
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="[email protected]"
required
aria-describedby="email-help"
/>
<small id="email-help">Kami tidak akan membagikan email kamu.</small>
</div>
Penting:
<label>+forattribute — klik label = fokus inputtype="email"— keyboard mobile menampilkan @placeholder— contoh format, bukan pengganti labelaria-describedby— menghubungkan helper text ke input
Validasi UX
Inline validation lebih baik dari validasi setelah submit:
- Tampilkan error saat user meninggalkan field (on blur), bukan saat mengetik
- Pesan error harus spesifik — "Email harus mengandung @" bukan "Input tidak valid"
- Gunakan warna merah + ikon untuk error (jangan hanya warna — accessibility)
Input Types yang Tepat
| Data | Type | Alasan |
|---|---|---|
email |
Keyboard mobile dengan @ | |
| Telepon | tel |
Keyboard numerik |
| Password | password |
Hidden + paste enabled |
| Tanggal | date |
Date picker native |
| URL | url |
Keyboard dengan .com |
Gojek dan Tokopedia menggunakan input types yang tepat — saat isi nomor HP, keyboard numerik langsung muncul.
