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.

Selanjutnya kita akan membahas tentang komponen yang lainnya yaitu:

  1. Feedback
  2. Helper Text
  3. 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:

Contoh penggunaan helper text yang baik, memberikan bantuan yang jelas kepada user tentang kode barcode.

2. Helper Text Untuk Data Yang Spesifik

Kamu bisa menambahkan helper text untuk input-input yang perlu data yang spesifik.

Contoh text helper kenapa kita butuh data tanggal lahir. ex: facebook.com

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.

Contoh penggunaan helper text yang baik, memberikan bantuan yang jelas kepada user tentang kode barcode.

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.

Helper text muncul ketika user klik input
Helper text muncul ketika user hover di icon helper

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:

  1. Right time: Waktu yang tepat menginformasikan jika ada pesan validasi.
  2. Right place: Tempat yang tepat menginformasikan jika ada pesan validasi.
  3. Right color: Warna yang tepat untuk menginformasikan pesan validasi.
  4. 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.

Contoh penggunaan 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.

Inline validation tidak hanya menampilkan pesan error, tapi pesan jika sudah benar

Tapi bagusnya berikan jeda waktu sebentar sampai user benar-benar selesai melakukan input data lalu kemudian melakukan validasi.

Berikan jeda setelah user selesai input untuk 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:

Contoh penempatan validasi

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:

  1. Apa yang salah dan apa penyebab kesalahan tersebut.
  2. 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.

Contoh esan warning

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!