Form adalah sebuah komponen yang pasti ada dalam sebuah sistem. Form biasanya digunakan untuk mengumpulkan informasi dari user demi mencapai sebuah tujuan tertentu.
Form tidak selalu tentang aplikasi. Dalam kehidupan diluar teknologi, form sangat sering kita temukan dalam kehidupan sehari-hari. Seperti misalnya saat kita mengurus ijin tertentu, maka kita akan disuruh untuk mengisi form.
Daftar Isi
Namun banyak sekali kendala saat user mengisi data form. Entah formnya kurang jelas. Entah formnya berantakan. Sehingga user kesusahan dalam mengisi data yang diminta.
Oleh karena itu, pada artikel kali ini kita akan membahas bagaimana cara membuat form yang baik dan efisien sehingga mudah digunakan oleh user.
Form terdiri dari beberapa komponen utama yaitu:
- Struktur Form
- Input
- Label
- Action Button
- Feedback
- Helper Text
- Validation
Kita akan membahas satu persatu dari komponen diatas. Bagaimana optimasi masig-masing komponen. Sehingga membuat form yang baik yang bisa membantu user untuk mudah dalam mengisi data form tersebut.
Struktur Form
Komponen pertama adalah struktur.
Sebuah form terdiri dari kumpulan beberapa input yang seharusnya disusun dengan rapi berdasarkan strukturnya.
Perlu kita ingat bahwa form adalah sebuah interface yang antara user dengan sistem.
Jadi interface ini harus jelas dan logis. Logindari sisi user ya. Bukan dari sisi programmer!
Lalu bagaimana cara membuat struktur form yang baik?
1. Hanya tampilkan informasi yang dibutuhkan user
Pastikan form dibuat hanya mengumpulkan informasi yang penting sesuai dengan tujuannya. Jangan menambahkan input yang membuat user memasukkan data dalam jumlah banyak sekaligus.
Semakin banyak data yang diisi, biasanya akan membuat user semakin malas untuk mengisi data.
Jadi selalu pastikan data yang diminta dalam form adalah informasi yang paling penting dan berguna untuk tujuan kita.
Lihat gambar dibawah.
Dari data penelitian diatas, alasan no 2 kenapa user tidak melanjutkan proses checkout adalah karena proses checkout yang terlalu panjang.
Jadi belum belanja saja user sudah males. Tentu ini jadi kerugian besar dong!
Cara mengetahui apakah jumlah field kamu terlalu banyak adalah mengurangi jumlah input sampai tujuan dari form tersebut tidak tercapai.
Jika masih data yang kamu butuhkan masih terpenuhi, artinya field kamu kelebihan.
Kurangi terus sampai data yang kamu ingin kumpulkan menjadi kurang. Itulah struktur form terbaik untuk tujuan kamu.
2. Susun Form Dengan Rapi dan Logis
Susunan input dalam form juga harus diperhatikan. Jangan secara asal mengurutkan input dalam form kamu.
Urutkan form dengan rapi dan sesuai dengan logika dari user. Bukan logika dari sisi programmer!
Kadang-kadang programmer suka asal sih! Asal beres doang!
Gambar diatas adalah gambaran bagaiamana mengelompokkan input.
Ngerti ga?
3. Gabungkan Input yang Memiliki Hubungan yang Sama
Tips selanjutnya yang bisa kamu coba untuk membuat struktur form yang baik adalah dengan mengelompokkan beberapa field yang memiliki hubungan yang sama menjadi 1 kelompok besar.
Tujuannya agar user lebih mudah dan cepat dalam mengisi form.
Dari gambar di atas bisa kita lihat bahwa dengan mengelompokkan field yang berkaitan membuat form lebih mudah dibaca dan dimengerti oleh user.
Berpengaruh kepada tingkat user menyelesaikan form.
4. 1 Kolom vs 2 Kolom
Form sebaiknya terdiri dari 1 kolom dengan alasan user akan lebih mudah mengisi data. Dibandingkan dengan 2 kolom atau lebih.
Jika 1 kolom saja, maka user akan cenderung mengisi data dari atas ke bawah dalam 1 alur.
Jika 2 kolom, maka user akan cenderung membaca form dengan pola seperti huruf Z.
Jika kamu ingin user lebih cepat mengisi data, buat dia jadi 1 kolom.
Jika kamu ingin user lebih hati-hati dalam mengisi data, buat 2 kolom.
That the rules
Perhatikan user flow untuk kedua tipe kolom di gambar di atas.
Input Field
Komponen kedua dari sebuah form adalah input.
Input dalam form memiliki beberapa jenis yaitu:
- Input type text
- Input type number
- Input type email
- Input type password
- Input dropdown atau select
- Checkbox
- Radio button
Jadi bagaimana tips dalam optimasi input fields dalam sebuah form yang baik?
1. Optimasi Jumlah Input
Semakin banyak jumlah input akan meningkatkan jumlah interaction cost.
Coba perhatikan lagi input yang ada di form kamu, apakah jumlahnya bisa kurangi lagi tapi tetap menghasilkan output yang sama.
Pada gambar di atas, gambar sebelah kiri memiliki 10 input dan total 10 interaction cost.
Gambar sebelah kana setelah dioptimasi sekarang memiliki 5 input dengan total 5 interaction cost untuk mencapai hasil output yang sama.
Kalian tahu kan yang mana yang lebih bagus?
Yang kanan kan!
2. Mandatory & Optional Input
Berikan tanda yang jelas mana field yang mandatory dan mana yang optional.
Jika tidak benar-benar diperlukan, input yang optional bisa langsung dihilangkan saja karena tentu akan mengurangi interaction cost.
Pada gambar diatas menceritakan bagaimana best practice untuk membuat sebuah form itu mandatory atau optional.
Gambar sebelah kiri sering kita lakukan. Tapi ternyata kurang efektif.
Gambar ditengah jelas salah karena tanda * seharusnya menandakan mandatory input.
Gambar paling kanan sudah tepat karena dibandingkan dengan menandai input yang mandatory semua, lebih bagus jika kita menandai form yang optional saja. Jadi secara tidak sadar user sudah tahu kalau input lainnya adalah mandatory.
Tapi jika jumlah input mandatory lebih sedikit dari optional, maka gambar sebelah kiri lebih tepat digunakan.
3. Perhatikan Penggunaan Default Value
Penggunaan default value yang tidak tepat akan cenderung dilewati oleh user.
Jika user melihat input sudah terisi nilainya, tentu dia tidak akan melihat lagi dan lanjut ke input selanjutnya.
Oleh karena itu, jangan gunakan default value tapi gunakan smart default value. Contohnya seperti otomatis mengisi pilihan negara berdasarkan lokasi user. Mengisi prefix no telp berdasarkan negaranya.
4. Tambahkan Autofocus (Khusus Desktop Browser)
Tambahkan autofocus ke input yang paling pertama user harus isi sehingga user merasa terbantu dan tahu harus mengisi form dari mana.
Jika terjadi error, bisa juga ditambahkan outofocus ke input tersebut sehingga user tahu bagian mana yang menyebapkan error pada form tersebut.
Intinya buat user merasa terbantu.
5. Sesuaikan Input Type Dengan Data
Pastikan input type yang dipilih sesuai dengan data yang dimasukkan user.
Misalnya, jika kamu ingin user hanya bisa memasukkan angka, maka buat input type number.
Jika kamu ingin user memasukkan email, maka pastikan pakai input type email.
6. Hindari Penggunaan Dropdown Select
Input type select adalah pilihan terakhir dari pembuatan UI untuk form kamu.
Kenapa? Karena select input itu meningkatkan interaction cost sehingga user perlu melakukan 2 kali klik untuk memilih optionnya. Belum juga user harus scroll dahulu.
Ganti dropdown select ini dengan radio button atau checkbox. User dapat langsung melihat semua pilihan dan hanya perlu 1 klik untuk memilih data.
7. Tambahkan Placeholder & Masked Input
Salah satu alasan user tidak mengisi input adalah tidak tahu harus mengisi apa. Untuk membantu user lebih tahu format input yang harus diisi adalah dengan menambahkan placeholder dan masked input.
Placeholder text bisa kamu tambahkan untuk menjelaskan kepada user untuk mengisi data seperti apa. Tapi jangan tambahkan placeholder untuk input-input yang umum seperti Full Name atau Email karena user sudah tahu secara umum datanya.
Gambar diatas adalah contoh penggunaan placeholder yang tepat. Itu bisa memberikan gambaran kepada user jika dia harus mengisi tracking number dengan format seperti yang ada di placeholder.
Tapi buat perbedaan yang jelas kalau text yang ada di input itu adalah placeholder. Jadi user tidak merasa kalau input itu sudah terisi dan melewatinya.
Masked Input bisa kamu gunakan untuk mencegah user memasukkan value yang salah.
Kamu bisa menambahkan masked input untuk data seperti no telp, cc number dan lainnya.
8. Tambahkan Opsi Show Password
Sebagian besar dari kita saat membuat sebuah fungsi yang menuntut user untuk memasukkan password, biasanya kita akan membuat 2 buah input yaitu Password dan Password Confirmation.
Apakah cara diatas salah? Tidak juga. Tapi cara diatas memiliki kekurangan yaitu user tidak tahu apakah data di input password atau di Password confirmation yang salah.
Cara mengatasi ini adalah dengan menampilkan opsi Show Password.
Dengan menambahkan opsi Show Password, kita bisa menghapus field Password Confirmation karena sekarang user sudah bisa melihat passwordnya dan tidak perlu lagi memasukkan passwordnya 2 kali.
3. Label
Dengan menambahkan label yang jelas dapat membuat UI kamu makin jelas. Label berfungsi untuk memberi tahu fungsi dari sebuah input dan harus tetap muncul saat input terisi data.
Lalu apa tips membuat label yang benar?
1. Perhatikan Jumlah Kata
Label bukanlah help text. Meski bertujuan untuk memberikan informasi tentang input, label yang terlalu panjang justru membuat form menjadi terlihat berantakan.
Coba perhatikan gambar dibawah ini.
Terlihat aneh gak? Anehlah, masa engga!
Bandingkan 2 gambar diatas, label di gambar kedua membuat form telihat lebih rapi tapi tetap bisa memberikan informasi kepada user tentang fungsi dari masing-masing input tersebut.
Label sebaiknya hanya memiliki 1 atau 2 kata dan deskriptif sehingga user dengan cepat bisa membaca form.
Ingat kata kuncinya: DESKRIPTIF
2. Jangan Gunakan Huruf Besar
Jangan gunakan label dengan huruf besar semua karena kan lebih sulit dibaca user.
Gunakan format Sentence case atau Title Case.
HURUF BESAR SEMUA SEPERTI NGAJAK BERANTEM GA?? HAH?!
3. Posisi Label
Posisi label menentukan fokus user saat mengisi data form.
Secara umum, posisi label ada 2 yaitu di atas input dan di sisi sebelah kiri input.
Kelebihan posisi label di atas:
- Mudah dibaca oleh user
- Mendukung multi language form.
Kelebihan posisi label rata kiri:
- Membuat user lebih hati-hati dalam membaca form.
- Cocok digunakan untuk form yang menuntut user agar mengisi form dengan hati-hati.
Kelebihan posisi label rata kanan:
- Lebih mudah dibaca karena lebih rapi dibandingkan dengan rata kiri.
- Lebih cepat diisi oleh user dibandingkan dengan rata kiri.
Jadi posisi mana yang lebih baik?
Jawabannya tergantung dengan kebutuhan kamu. Jika kamu ingin agar user cepat mengisi form, taruh label di atas input.
Jika kamu ingin user lebih hati-hati dan membaca form satu-persatu, taruh di sebelah kiri.
4. Inline & Floating Label
Gunakan inline label atau bisa dibilang juga placehoder, jika kamu memiliki jumlah input yang kecil mungkin 2-3 input saja.
Jika lebih dari itu, jangan pernah memakai inline label karena akan menyusahkan user saat form sudah terisi dan labelnya menghilang.
Bikin kesel dan bingung guys!
Gunakan inline label jika hanya inputnya sedikit, seperti tampilan halaman login diatas.
Jika kamu menggunakan inline label dan inputnya banyak, maka form kamu akan seperti diatas, saat user mengisi data, maka labelnya menghilang dan dijamin user jadi bingung.
4. Action Button
Action button adalah komponen dari form yang bertugas untuk memberikan aksi terhadap form tersebut. Seperti menyimpan, update atau delete.
Tapi dalam membuat button juga tidak bisa sembarangan. Ada beberapa tips yang bisa kamu pakai untuk membuat sebuah action button yang baik.
1. Perhatikan Disable State
Disable state berfungsi untuk memberitahu user kalau suatu proses sedang terjadi. Biasanya setelah button itu di klik.
Tapi jangan pernah membuat disable state sebelum user klik button, ini akan membuat user frustasi karena buttonnya tidak bisa di klik.
Jika tujuan kamu adalah ingin user mengisi input dulu baru meng-enable button, sebaiknya biarkan button tersebut tetap bisa di klik.
Baru kemudian tunjukkan input yang belum terisi atau pesan jika terjadi error.
2. Bedakan Primary Button dengan Secondary Button
Ketika sebuah form memiliki 2 button sebagai primary button dan secondary button yang secara visual mirip, akan membuat user menjadi bingung.
Ada beberapa tips untuk membuat primary dan secondary button itu berbeda:
- Dengan membedakan warnanya.
- Dengan membedakan bentuknya.
- Dengan membedakan tipenya.
Pada gambar sebelah kiri, tidak ada perbedaan antara mana primary button dan mana secondary button. Jadi bisa membuat user kebingungan.
Gambar sebelah kanan membedakan primary button dengan secondary button dengan jelas.
3. Text Button yang Deskriptif
Hindari penggunaan kata-kata umum seperti Simpan, Submit, Save. Sebaiknya gunakan kata yang menjelaskan action dari form itu secara langsung tapi tidak terlalu panjang.
Misalnya seperti Simpan Data Produk atau Create My Account.
Selain menghindari kata yang ambigu, user jadi semakin jelas dan yakin dengan goals dari form tersebut.
4. Hindari Penggunaan Reset Button
Reset button berfungsi untuk menghapus semua data yang sudah user inputkan ke dalam form.
Jangan pernah menambahkan reset button di form jika kamu tidak yakin dengan tujuan dari button tersebut.
Kombinasi dari design yang jelek bisa membuat user secara tidak sengaja meng klik reset button dan menghapus semua data yang sudah susah payah mereka isi. Jika ini benar-benar terjadi, kemungkinan besar user akan meninggkalkan form kamu dan tidak mengisi lagi.
5. Posisi dan Ukuran Button
Umumnya taruh action button di paling bawah form, karena kita mengharapkan user untuk mengisi semua data dahulu kemudian akan menekan button untuk melakukan action.
Ukuran button juga sangat berpengaruh. Sesuaikan ukuran button dengan ukuran input. Jika button terlalu besar atau terlalu kecil akan merusak tampilan UI.
6. Button Behavior
Sebuah button memiliki beberapa behavior, diantaranya:
- Normal State: State saat button tidak ada interaksi dengan mouse atau touch.
- Hover State: State saat saat button dihover oleh mouse.
- Pressed State: State saat button diklik atau di touch pada mobile phone.
- Disable State: Tambahan state yang menandakan button tidak bisa di klik atau touch. Biasanya digunakan saat sedang memproses data.
Silakan lengkapi button yang kamu buat dengan semua state diatas agar meningkatkan pengalaman user dalam menggunakan form.
Kesimpulan
Membuat sebuah form tidak hanya tentang mengumpulkan data tapi juga harus mudah untuk digunakan.
User bisa sangat kesusahan dalam mengisi data dan tugas kita adalah membuat UI yang mudah digunakan dan dimengerti.
Tips diatas akan sangat membantu kamu untuk meningkatkan kemudahan user dalam mengisi data dalam form.
Tips selanjutnya tentang Feedback, Helper Text dan Validation akan kita bahas di artikel selanjutnya ya guys. Bisa dicek disini: Belajar UI/UX: Panduan Membuat Form yang Baik dan Benar dan Efisien Part 2
Semoga artikel ini bermanfaat.
Salam NGIDE!
