Artikel ini adalah lanjutan dari artikel sebelumnya yang berjudul Belajar UI/UX: Panduan Membuat Form yang Baik dan Benar dan Efisien.
Dalam artikel sebelumnya kita sudah membahas tips dan optimasi komponen dari form yaitu: Struktur, Input, Label dan Action Button.
Daftar Isi
Selanjutnya kita akan membahas tentang komponen yang lainnya yaitu:
- Feedback
- Helper Text
- Validation
Kita langsung saja ya guys!
Helper Text
Helper text berfungsi untuk memberikan bantuan kepada user.
Tapi kamu tidak seharusnya menjelaskan cara mengisi form kepada user secara menyeluruh.
Jika kamu sampai perlu menjelaskan cara mengisi form tersebut kepada user, kemungkinan struktur form kamu kurang bagus.
Baikanya perbaharui dulu form strukturnya.
Helper text harusnya digunakan seminimal mungkin, khususnya di mobile form karena space yang kita punya hanya sedikit.
Lalu apa saja tips dalam membuat Helper Text yang baik?
1. Text Pendamping
Text pendamping harus digunakan saat benar-benar diperlukan.
Text pendamping juga harusnya tidak lebih dari 100 kata saja.
Kita sebaiknya menaruh text pendamping di sebelah input.
Contohnya ada di gambar di bawah ini:
2. Helper Text Untuk Data Yang Spesifik
Kamu bisa menambahkan helper text untuk input-input yang perlu data yang spesifik.
3. Informasi Keamanan atau Privasi
Helper text bisa kamu gunakan untuk memberikan informasi tentang persetujuan keamanan atau privasi.
Jika data yang kamu inginkan dari user terkait dengan keamanan atau privasi, maka kamu bisa menambahkan helper text untuk memperjelas infromasi tersebut.
Biasanya helper text ini muncul ketika user selesai atau sedang mengisi input.
4. Helper Text Dinamis
Memberikan banyak helper text di dalam sebuah form akan membuat form kamu jadi terlihat rame.
Kalau sudah rame, user sering jadi bingung!
User bisa terdistraksi oleh penggunaan helper text yang terlalu banyak.
Tampilan helper text saat benar-benar diperlukan oleh user
Solusinya adalah helper text yang dinamis.
Gimana contohnya?
Kamu bisa memunculkan helper text saat user fokus ke input atau saat hover ke dalam icon helper text.
Tapi hati-hati penggunaan hover untuk memunculkan helper text, pastikan helper text akan menghilang ketika user sudah tidak hover atau helper text harus hilang saat user klik di luar wilayah helper text tersebut.
Karena kadang-kadang helper text model gini suka nutupin input yang lain.
Validation
Komponen selanjutnya yang tidak kalah penting dalam sebuah form adalah validation.
Validation adalah salah satu cara agar user tidak memasukkan data yang salah.
Prinsip utama yang perlu kita ingat saat membuat form validation adalah:
- Right time: Waktu yang tepat menginformasikan jika ada pesan validasi.
- Right place: Tempat yang tepat menginformasikan jika ada pesan validasi.
- Right color: Warna yang tepat untuk menginformasikan pesan validasi.
- Clear language: Bahasa yang tepat agar pesan validasi mudah dimengerti.
Semua ini untuk menghindari agar user tidak bingung.
Lalu bagaimana cara membuat form validation yang baik?
1. Inline Validation
User tidak senang ketika dia harus mengisi semua data form dan saat di submit ternyata terjadi kesalahan dalam data yang mereka masukkan.
Hmm kayak bolak balik gitu deh guys!
Waktu yang tepat untuk memberitahu user jika terjadi kesalahan adalah saat user selesai memberikan informasi itu.
Solusi untuk masalah ini adalah Inline Validation.
Kenapa inline validation bagus? Karena selain menampilkan pesan error, kita juga bisa menampilkan pesan atau status jika data yang di input sudah benar bersamaan saat data selesai di input.
Tapi bagusnya berikan jeda waktu sebentar sampai user benar-benar selesai melakukan input data lalu kemudian melakukan validasi.
2. Tempat yang tepat (Rule of Thumb)
Tempat menaruh pesan validasi yang baik adalah di sebelah masing-masing input. Sehingga user menjadi lebih jelas tentang pesan validasi dan inputnya.
Contoh penempatan validasi yang bagus bisa kamu lihat di gambar di bawah ini:
3. Gunakan Warna yang Sesuai
Pemilihan warna yang tepat bisa membuat user lebih cepat dalam melihat pesan validasi.
Secara umum, gunakan warna merah untuk pesan error, warna kuning untuk pesan warning, dan warna hijau untuk pesan sukses.
4. Pesan Validasi Yang Jelas
Gunakan bahasa yang mudah dimengerti oleh user.
Jangan gunakan bahasa-bahasa teknis yang tidak dimengerti oleh user. Sebaiknya gunakan bahasa yang umum.
Adapun pesan validasi harusnya menjelaskan secara jelas tentang:
- Apa yang salah dan apa penyebab kesalahan tersebut.
- Apa langkah yang harus dilakukan user untuk memperbaiki error tersebut.
Jika 2 informasi di atas sudah ada di pesan validasi, seharusnya user menjadi lebih mudah mengerti dan tahu selanjutkan mau melakukan apa.
Jangan biarkan user menebak-nebak errornya, munculkan pesan validasi yang jelas.
Feedback
Feedback bisa berbentuk visual atau suara yang bisa membantu user untuk mengerti hasil dari sebuah proses. Secara umum setiap form harus memberikan feedback yang mudah dimengerti oleh user. Misalnya feedback saat form berhasil ataupun saat terjadi error.
Feedback yang bagus harus memberikan informasi yang jelas kepada user sehingga user tahu apakah proses yang sedang mereka lakukan berhasil atau tidak.
Kesimpulan
Itulah lanjutan dari tutorial membuat arikel yang lebih efisien.
Membuat sebuah form tidak hanya tentang mengumpulkan data tapi juga harus mudah untuk digunakan.
Jadi sebuah form tidak hanya tentang mengumpulkan informasi tapi juga harus mempermudah user dalam mengisi informasi tersebut.
Itulah salah satu artikel tentang belajar ui ux di ngide.net,
Semoga artikel ini bermanfaat.
Salam NGIDE!
