Mendesain Form yang Membantu Pengguna
Saat mendesain sebuah form, kita mungkin langsung memikirkan warna, tipografi, dan layout. Padahal, tantangan sebenarnya adalah membantu pengguna menyelesaikan pekerjaan dengan mudah, memahami informasi yang ditampilkan, dan menghindari kesalahan saat mengisi data.
Saya mempelajari hal ini ketika mendesain fitur Facility Request. Form tersebut digunakan untuk mengajukan kebutuhan fasilitas pelatihan. Setelah itu, saya juga mengembangkan desain untuk Participant Assignment Letter, yaitu fitur yang berkaitan dengan surat penugasan peserta. Kedua fitur ini memiliki kebutuhan yang serupa. Pengguna harus mengisi informasi yang cukup banyak dan memastikan data yang dimasukkan sesuai dengan kebutuhan dokumen.
Dalam artikel ini, saya membagikan beberapa keputusan desain yang saya ambil, alasan di baliknya, serta tips dan manfaat untuk kita yang ingin merumuskan desain untuk suatu fitur. Saya menggunakan Nielsen’s 10 Usability Heuristics sebagai salah satu acuan, tetapi fokusnya bukan sekadar menerapkan teori. Yang lebih penting adalah memahami masalah pengguna yang ingin diselesaikan.
Sebelum Mendesain, Apa yang Perlu Diperhatikan?
Bagi seorang UI Designer, mendesain form bukan sekadar menentukan posisi field, memilih warna, atau mengatur jarak antar-komponen. Setiap keputusan desain seharusnya memiliki alasan yang berkaitan dengan kebutuhan pengguna.
Sebelum mulai membuat wireframe atau menentukan tampilan visual, ada beberapa hal yang perlu diperhatikan.
1. Pahami User Flow Sebelum Membuat Layout
Sebelum membuka Figma, pahami terlebih dahulu bagaimana pengguna akan menyelesaikan tugasnya melalui fitur yang akan dibuat.
Coba jawab beberapa pertanyaan berikut:
- Siapa yang akan menggunakan fitur ini?
- Apa tujuan utama pengguna?
- Informasi apa yang mereka butuhkan?
- Tindakan apa yang harus mereka lakukan?
- Apa yang mungkin menghambat proses tersebut?
Dari jawaban tersebut, kita bisa menyusun user flow untuk menggambarkan langkah-langkah yang perlu dilakukan pengguna.
Memahami alur kerja juga membantu kita menentukan urutan informasi dan tindakan yang masuk akal. Jangan langsung membuat layout berdasarkan asumsi pribadi tanpa memahami proses yang sebenarnya dilakukan pengguna.
Pendekatan ini sejalan dengan konsep User-Centered Design, yaitu menjadikan kebutuhan, karakteristik, dan konteks pengguna sebagai pertimbangan dalam proses perancangan.
Referensi: Nielsen Norman Group — Journey Mapping 101.
2. Perhatikan Visual Hierarchy
Tidak semua informasi memiliki tingkat kepentingan yang sama. Karena itu, kita perlu mengatur visual hierarchy agar pengguna dapat mengetahui informasi mana yang perlu diperhatikan terlebih dahulu.
Beberapa cara yang bisa diterapkan:
- Gunakan ukuran dan ketebalan font untuk membedakan judul, subjudul, dan informasi pendukung.
- Kelompokkan informasi yang saling berkaitan.
- Berikan jarak yang cukup antar-kelompok informasi.
- Gunakan warna dan kontras untuk memberikan penekanan pada elemen penting.
- Hindari memberikan penekanan visual yang sama pada semua elemen.
Sebagai contoh, judul bagian sebaiknya lebih mudah dikenali daripada label field. Tombol utama juga perlu memiliki penekanan visual yang sesuai dengan tingkat kepentingan tindakannya.
Visual hierarchy membantu pengguna memindai halaman dan memahami struktur informasi tanpa harus membaca setiap elemen secara berurutan.
Namun, penekanan visual tetap perlu memperhatikan accessibility. Menurut WCAG 2.2, teks normal perlu memiliki rasio kontras minimal 4.5:1 terhadap latar belakang untuk memenuhi Level AA.
Referensi: W3C — Web Content Accessibility Guidelines (WCAG) 2.2.
3. Kurangi Cognitive Load
Cognitive load berkaitan dengan beban mental yang dibutuhkan seseorang untuk memahami dan menggunakan suatu sistem.
Ketika sebuah form menampilkan terlalu banyak informasi atau meminta pengguna mengingat data yang sebenarnya sudah tersedia, proses pengisian dapat menjadi lebih sulit.
Beberapa praktik yang bisa diterapkan:
- Kelompokkan field berdasarkan kategori atau fungsinya.
- Hindari meminta informasi yang sebenarnya sudah tersedia di sistem.
- Gunakan label yang jelas dan mudah dipahami.
- Berikan contoh format input jika pengguna perlu memasukkan data dengan pola tertentu.
- Pertimbangkan untuk membagi form yang kompleks menjadi beberapa bagian jika hal tersebut membantu alur kerja.
Prinsip ini memiliki hubungan dengan Recognition Rather Than Recall dalam Nielsen’s Usability Heuristics. Pengguna sebaiknya dapat mengenali informasi dan pilihan yang tersedia daripada harus mengingatnya sendiri.
Dengan mengurangi input dan informasi yang tidak diperlukan, pengguna dapat lebih fokus pada tugas yang sedang dikerjakan.
Referensi: Nielsen Norman Group — 10 Usability Heuristics for User Interface Design.
4. Rancang Feedback untuk Setiap Tindakan
Pengguna perlu mengetahui apakah tindakan yang mereka lakukan berhasil, sedang diproses, atau mengalami kegagalan.
Prinsip ini berkaitan dengan Visibility of System Status dalam Nielsen’s Usability Heuristics.
Beberapa praktik yang bisa diterapkan:
- Ketika data berhasil disimpan, tampilkan konfirmasi.
- Ketika input tidak sesuai, tampilkan pesan validasi yang menjelaskan kesalahan.
- Ketika proses membutuhkan waktu, tampilkan loading indicator.
- Ketika tindakan tidak dapat dilakukan, jelaskan penyebab dan langkah yang perlu diambil.
Pesan error sebaiknya menjelaskan apa yang salah dan bagaimana pengguna dapat memperbaikinya. Hindari pesan umum seperti “Something went wrong” tanpa penjelasan tambahan.
Panduan GOV.UK Design System juga menyarankan agar pesan error ditampilkan dekat dengan field terkait, menggunakan bahasa yang jelas, dan memberikan petunjuk untuk memperbaiki kesalahan.
Referensi: GOV.UK Design System — Error Message.
5. Perhatikan Accessibility dan Readability
Desain yang baik perlu mempertimbangkan berbagai kondisi pengguna, termasuk pengguna yang memiliki keterbatasan penglihatan atau menggunakan assistive technology.
W3C menyediakan Web Content Accessibility Guidelines (WCAG) sebagai standar untuk meningkatkan aksesibilitas konten web. WCAG menggunakan empat prinsip yang dikenal dengan singkatan POUR.
Get Cleo Excellen Iskandar’s stories in your inbox
Join Medium for free to get updates from this writer.
Beberapa hal yang perlu diperhatikan:
- Jangan menggunakan warna sebagai satu-satunya indikator status.
- Gunakan ukuran teks yang mudah dibaca.
- Pastikan setiap input memiliki label yang jelas.
- Pastikan elemen interaktif dapat dikenali dan dioperasikan dengan mudah.
WCAG membantu UI/UX Designer memastikan bahwa antarmuka dapat digunakan oleh berbagai pengguna dengan kebutuhan yang berbeda. Misalnya, jangan mengandalkan warna merah saja untuk menandai error, tetapi tambahkan ikon atau pesan teks agar informasi tetap dapat dipahami. Gunakan ukuran teks dan kontras warna yang mudah dibaca, berikan label yang jelas pada setiap input, serta pastikan tombol dapat dikenali ketika pengguna bernavigasi menggunakan keyboard. Dengan menerapkan hal tersebut, kita dapat membuat desain yang lebih inklusif dan mudah diakses.
Hal ini penting karena desain yang terlihat jelas bagi seorang desainer belum tentu mudah digunakan oleh semua pengguna.
Referensi: W3C — WCAG 2.2.
Kelima prinsip tersebut dapat menjadi panduan awal sebelum sebuah desain masuk ke tahap implementasi. Namun, tidak semua prinsip harus diterapkan dengan cara yang sama pada setiap fitur. Kita tetap perlu mempertimbangkan konteks penggunaan, kompleksitas tugas, dan kebutuhan pengguna.
Menerapkan Prinsip Desain dalam Studi Kasus
Prinsip-prinsip tersebut menjadi pertimbangan saya ketika mendesain fitur Facility Request dan Participant Assignment Letter.
Dalam prosesnya, saya menemukan beberapa kebutuhan yang perlu diperhatikan, mulai dari mempertahankan alur kerja yang sudah dikenal, mengurangi input manual, hingga membantu pengguna memperbaiki kesalahan ketika mengisi form.
Berikut beberapa keputusan desain yang saya ambil beserta alasan dan prinsip usability yang mendasarinya.
Design System sebagai Fondasi Konsistensi
Dalam pengembangan sistem, rekan satu tim saya telah membuat design system yang digunakan sebagai acuan visual dan komponen antarmuka. Design system tersebut mencakup elemen seperti warna, tipografi, tombol, badge, dan form fields.
Mengapa konsistensi ini penting?
Dengan menggunakan komponen yang konsisten, pengguna dapat mengenali fungsi elemen antarmuka dengan lebih cepat.
Misalnya, ketika gaya tombol utama digunakan secara konsisten, pengguna dapat lebih mudah mengenali tindakan yang paling penting pada berbagai halaman.
Bagi developer, penggunaan komponen yang sudah tersedia juga membantu menjaga keseragaman tampilan saat fitur baru ditambahkan.
Saya menggunakan design system tersebut sebagai acuan ketika mendesain kedua form, sehingga keduanya tetap menjadi bagian dari satu aplikasi dan memiliki pola interaksi yang seragam.
Hal ini berkaitan dengan prinsip Consistency and Standards dari Nielsen’s Usability Heuristics. Sistem sebaiknya mempertahankan pola yang konsisten agar pengguna tidak perlu mempelajari ulang cara menggunakan setiap elemen.
1. Mengikuti Alur Kerja yang Sudah Dikenal
Salah satu keputusan penting pada Participant Assignment Letter adalah mengikuti struktur dokumen yang sudah digunakan dalam proses manual.
Form dibagi menjadi enam bagian, yaitu Informasi surat, Detail pelaksanaan, Ketentuan Pegawai, PIC BSU, Approval, dan Lampiran. Pengelompokan ini juga mengikuti struktur dokumen Participant Assignment Letter yang dihasilkan.[Masukkan gambar desain Participant Assignment Form di sini]
Keputusan ini berkaitan dengan prinsip Match Between the System and the Real World dari Nielsen’s Usability Heuristics. Sistem sebaiknya menggunakan istilah dan struktur yang dekat dengan pemahaman pengguna, bukan memaksakan cara kerja baru tanpa alasan yang jelas.
Jika pengguna sudah terbiasa membaca dokumen dengan urutan tertentu, mempertahankan urutan tersebut membantu mereka menemukan informasi yang dicari. Pengguna tidak perlu terus-menerus menerjemahkan struktur dokumen yang dikenalnya ke struktur form yang berbeda.
2. Mengurangi Input yang Tidak Perlu
Form digital sering kali meminta pengguna memasukkan informasi secara manual. Padahal, beberapa data mungkin sudah tersedia di sistem.
Pada Facility Request Form, informasi seperti Nama Program dan Nomor serta Tanggal Memo diisi secara otomatis berdasarkan memo yang sudah disetujui. Field tersebut ditampilkan dengan latar belakang abu-abu untuk membedakannya dari field yang dapat diedit.
Keputusan ini berkaitan dengan prinsip Recognition Rather Than Recall. Pengguna sebaiknya dapat mengenali informasi yang tersedia daripada harus mengingat atau memasukkannya kembali.
Manfaatnya bukan hanya mengurangi jumlah input. Pengguna juga tidak perlu mengetik ulang nomor memo yang panjang, sehingga risiko salah ketik dapat dikurangi.
3. Membantu Pengguna Membedakan Informasi dan Tindakan
Ketika sebuah form memiliki banyak field, pengguna perlu mengetahui bagian mana yang hanya menampilkan informasi dan bagian mana yang memerlukan tindakan.
Pada Facility Request Form, field yang otomatis terisi menggunakan tampilan berbeda dari field yang dapat diedit. Sebaliknya, field yang membutuhkan input pengguna tetap memiliki batas visual yang jelas.
Pendekatan ini berkaitan dengan prinsip Consistency and Standards serta Recognition Rather Than Recall. Pengguna dapat mempelajari pola visual dari satu field, lalu menggunakan pemahaman yang sama pada field lain.
Tanpa perbedaan yang jelas, pengguna mungkin mencoba mengubah informasi yang sebenarnya tidak dapat diedit atau mengira field yang perlu diisi hanyalah teks biasa.
Bagi desainer, hal ini menjadi pengingat bahwa tampilan setiap field seharusnya memiliki tujuan. Perbedaan visual tidak perlu dibuat hanya untuk variasi, tetapi untuk membantu pengguna memahami cara kerja antarmuka.
4. Mencegah Kesalahan Sebelum Terjadi
Kesalahan tidak selalu terjadi karena pengguna tidak teliti. Terkadang, antarmuka tidak memberikan petunjuk yang cukup untuk membantu pengguna memasukkan data dengan benar.
Pada Participant Assignment Form, Nomor Surat merupakan salah satu field yang perlu diisi secara manual. Karena formatnya harus mengikuti pola tertentu, pengguna perlu mendapat petunjuk jika input yang diberikan tidak sesuai.
Pendekatan ini berkaitan dengan prinsip Error Prevention. Daripada membiarkan pengguna melanjutkan proses dengan data yang tidak sesuai, sistem sebaiknya membantu mencegah kesalahan sedini mungkin.
Pesan validasi yang ditampilkan dekat dengan field juga membantu pengguna memahami bagian mana yang perlu diperbaiki. Mereka tidak harus mencari sendiri penyebab masalah di seluruh form.
Panduan GOV.UK Design System juga menyarankan agar pesan error menjelaskan masalah secara spesifik dan memberikan arahan yang dapat dilakukan pengguna.
Bagi desainer, kita perlu memikirkan kondisi input yang mungkin terjadi, bukan hanya merancang tampilan ketika semua data sudah benar.
Referensi: GOV.UK Design System — Error Message.
5. Memberikan Arahan Ketika Pengguna Mengalami Masalah
Selain mencegah kesalahan, desain juga perlu membantu pengguna pulih ketika masalah terjadi.
Pada Facility Request Form, pengguna perlu menyimpan perubahan sebelum mengunduh surat. Jika mereka mencoba mengunduh dokumen tanpa menyimpan perubahan, sistem menampilkan peringatan yang menjelaskan tindakan yang harus dilakukan.
Pesan tersebut tidak hanya menyatakan bahwa tindakan gagal. Pesan juga menjelaskan bahwa pengguna perlu menyimpan perubahan terlebih dahulu sebelum mencoba mengunduh kembali.
Hal ini berkaitan dengan prinsip Help Users Recognize, Diagnose, and Recover from Errors. Pesan yang baik membantu pengguna memahami masalah dan menentukan langkah berikutnya, bukan sekadar menampilkan bahwa terjadi kesalahan.
Bagi pengguna, arahan yang jelas mengurangi kebutuhan untuk menebak penyebab masalah atau meminta bantuan orang lain. Bagi desainer, ini menunjukkan bahwa kondisi error juga merupakan bagian dari pengalaman pengguna yang perlu dirancang, bukan hanya kondisi ketika semuanya berjalan normal.
Penutup
Saat mendesain sebuah fitur, mulailah dengan memahami kebutuhan pengguna dan masalah yang ingin diselesaikan. Gunakan prinsip usability sebagai panduan, lalu evaluasi desain dari sudut pandang pengguna. Ingat, setiap keputusan desain seharusnya memiliki tujuan yang jelas, yaitu membantu pengguna menyelesaikan pekerjaannya dengan lebih mudah.
Referensi
- Nielsen, J. (1994). 10 Usability Heuristics for User Interface Design. Nielsen Norman Group. Last reviewed January 30, 2024.
- Nielsen Norman Group. Journey Mapping 101.
- GOV.UK Design System. Error Message.
- World Wide Web Consortium (W3C). (2023). Web Content Accessibility Guidelines (WCAG) 2.2.
