Praktik Terbaik Untuk Desain Formulir Seluler

(Artikel ini disponsori oleh Adobe.) Formulir adalah kunci dari semua interaksi seluler; itu berdiri di antara orang dan apa yang mereka cari. Setiap hari, kami menggunakan formulir untuk aktivitas online yang penting. Ingat-ingat terakhir kali Anda membeli tiket, memesan kamar hotel, atau melakukan pembelian secara online — kemungkinan besar interaksi tersebut berisi langkah mengisi formulir.

Bentuk hanyalah sarana untuk mencapai tujuan. Pengguna harus dapat menyelesaikannya dengan cepat dan tanpa kebingungan. Dalam artikel ini, Anda akan mempelajari teknik praktis yang akan membantu Anda mendesain formulir yang efektif.

Apa yang Membuat Formulir Efektif?

Tujuan utama dari setiap formulir adalah penyelesaian. Dua faktor memiliki dampak besar pada tingkat penyelesaian:

• Persepsi kompleksitas
  Hal pertama yang dilakukan pengguna ketika mereka melihat formulir baru adalah memperkirakan berapa banyak waktu yang diperlukan untuk menyelesaikannya. Pengguna melakukan ini dengan memindai formulir. Persepsi memainkan peran penting dalam proses estimasi. Semakin kompleks tampilan formulir, semakin besar kemungkinan pengguna akan meninggalkan proses.
• Biaya interaksi
  Biaya interaksi adalah jumlah upaya — baik kognitif maupun fisik — yang dilakukan pengguna untuk berinteraksi dengan antarmuka untuk mencapai tujuan mereka. Biaya interaksi memiliki hubungan langsung dengan kegunaan bentuk. Semakin banyak upaya yang harus dilakukan pengguna untuk melengkapi formulir, semakin tidak dapat digunakan formulir tersebut. Biaya interaksi yang tinggi dapat disebabkan oleh data yang sulit dimasukkan, ketidakmampuan untuk memahami arti dari beberapa pertanyaan, atau kebingungan tentang pesan kesalahan.

Komponen Bentuk

Bentuk khas memiliki lima komponen berikut:

• Bidang masukan
  Ini termasuk bidang teks, bidang kata sandi, kotak centang, tombol radio, bilah geser, dan bidang lain yang dirancang untuk input pengguna.
• Label bidang
  Ini memberi tahu pengguna apa arti kolom input yang sesuai.
• Struktur
  Ini termasuk urutan bidang, tampilan formulir di halaman, dan koneksi logis antara bidang yang berbeda.
• Tombol tindakan
  Formulir akan memiliki setidaknya satu ajakan bertindak (tombol yang memicu pengiriman data).
• Masukan
  Umpan balik memberi tahu pengguna tentang hasil operasi. Umpan balik bisa positif (misalnya, menunjukkan bahwa formulir berhasil dikirim) atau negatif (mengatakan sesuatu seperti, "Nomor yang Anda berikan salah").

Artikel ini mencakup banyak aspek yang terkait dengan struktur, bidang input, label, tombol tindakan, dan validasi. Sebagian besar poin yang disebutkan dalam artikel ini memiliki contoh visual do and not; semua contoh tersebut dibuat menggunakan Adobe XD.

Bidang Masukan

Ketika berbicara tentang desain formulir, hal terpenting yang dapat dilakukan seorang desainer adalah meminimalkan kebutuhan untuk mengetik. Mengurangi upaya input sangat penting. Desainer dapat mencapai tujuan ini dengan berfokus pada desain bidang formulir.

Minimalkan Jumlah Total Bidang

Setiap bidang yang Anda minta untuk diisi pengguna membutuhkan upaya. Semakin banyak upaya yang diperlukan untuk mengisi formulir, semakin kecil kemungkinan pengguna akan melengkapi formulir. Itulah mengapa aturan dasar desain formulir lebih pendek lebih baik — singkirkan semua bidang yang tidak penting.

Baymard Institute menganalisis formulir checkout dan menemukan bahwa proses checkout yang terlalu lama atau terlalu rumit adalah salah satu alasan utama pengabaian saat checkout. Studi ini menemukan bahwa checkout rata-rata berisi hampir 15 bidang formulir. Sebagian besar layanan online dapat mengurangi jumlah bidang yang ditampilkan secara default sebesar 20 hingga 60%.

Banyak desainer yang akrab dengan aturan "kurang lebih"; tetap saja, mereka mengajukan pertanyaan tambahan dalam upaya mengumpulkan lebih banyak data tentang pengguna mereka. Mungkin tergoda untuk mengumpulkan lebih banyak data tentang pengguna Anda selama pendaftaran awal, tetapi tahan godaan itu. Pikirkan seperti ini: Dengan setiap bidang tambahan yang Anda tambahkan ke formulir Anda, Anda meningkatkan kemungkinan kehilangan calon pengguna. Apakah informasi yang Anda peroleh dari bidang layak kehilangan pengguna baru? Ingatlah bahwa, selama Anda telah mengumpulkan informasi kontak pengguna, Anda selalu dapat menindaklanjuti dengan permintaan untuk lebih banyak data.

Bedakan dengan Jelas Semua Bidang Opsional

Sebelum mengoptimalkan bidang opsional, tanyakan pada diri Anda apakah Anda benar-benar perlu memasukkannya ke dalam formulir Anda. Pikirkan tentang informasi apa yang benar-benar Anda butuhkan, bukan apa yang Anda inginkan. Idealnya, jumlah bidang opsional dalam formulir Anda harus nol.

Jika setelah sesi curah pendapat, Anda masih ingin menyertakan beberapa pertanyaan opsional dalam formulir Anda, jelaskan kepada pengguna bahwa bidang tersebut opsional:

• Tandai bidang opsional alih-alih yang wajib.
  Jika Anda meminta sesedikit mungkin, maka sebagian besar bidang dalam formulir Anda akan menjadi wajib. Oleh karena itu, tandai hanya bidang-bidang tersebut dalam minoritas. Misalnya, jika lima dari enam bidang adalah wajib, maka masuk akal untuk menandai hanya satu bidang sebagai opsional.
• Gunakan label "Opsional" untuk menunjukkan bidang opsional.
  Hindari penggunaan tanda bintang ( * ) yang berarti “opsional”. Tidak semua pengguna akan mengaitkan tanda bintang dengan informasi opsional, dan beberapa pengguna akan bingung dengan artinya (tanda bintang sering digunakan untuk menunjukkan bidang wajib).

Ukuran Bidang Sesuai

Jika memungkinkan, gunakan panjang bidang sebagai keterjangkauan. Panjang field input harus sebanding dengan jumlah informasi yang diharapkan di field. Ukuran bidang akan bertindak sebagai batasan visual — pengguna akan mengetahui berapa banyak teks yang diharapkan untuk dimasukkan hanya dengan melihat bidang tersebut. Umumnya, kolom seperti kode area dan nomor rumah harus lebih pendek dari pada alamat jalan.

Tawarkan Fokus Lapangan

Fokus otomatis bidang input pertama di formulir Anda. Pemfokusan otomatis bidang memberi pengguna indikasi dan titik awal, sehingga mereka dapat mulai mengisi formulir dengan cepat. Dengan melakukan itu, Anda mengurangi biaya interaksi — menghemat pengguna satu ketukan yang tidak perlu.

Buat bidang input aktif menonjol dan terfokus. Fokus bidang itu sendiri harus sangat jelas — pengguna harus dapat memahami sekilas di mana fokusnya. Ini bisa berupa warna perbatasan beraksen atau kotak yang pudar.

Jangan Minta Pengguna Untuk Mengulangi Alamat Emailnya

Alasan mengapa bidang tambahan untuk alamat email sangat populer di kalangan pengembang produk adalah jelas: Setiap perusahaan ingin meminimalkan risiko hard bouncing (tidak terkirim yang disebabkan oleh alamat email yang tidak valid). Sayangnya, mengikuti pendekatan ini tidak menjamin bahwa Anda akan mendapatkan alamat yang valid. Pengguna sering menyalin dan menempelkan alamat mereka dari satu bidang ke bidang lainnya.

Berikan Opsi "Tampilkan Kata Sandi"

Menggandakan bidang input kata sandi adalah kesalahan umum lainnya di antara desainer produk. Desainer mengikuti pendekatan ini karena mereka yakin ini akan mencegah pengguna salah mengetik kata sandi. Pada kenyataannya, kolom kedua untuk kata sandi tidak hanya meningkatkan biaya interaksi, tetapi juga tidak menjamin bahwa pengguna akan melanjutkan tanpa kesalahan. Karena pengguna tidak melihat apa yang telah mereka masukkan di bidang, mereka dapat membuat kesalahan yang sama dua kali (di kedua bidang) dan akan menghadapi masalah ketika mereka mencoba masuk menggunakan kata sandi. Seperti yang dirangkum Jakob Nielsen:

Kegunaan menderita ketika pengguna mengetikkan kata sandi dan satu-satunya umpan balik yang mereka dapatkan adalah deretan peluru. Biasanya, menutupi kata sandi bahkan tidak meningkatkan keamanan, tetapi itu merugikan bisnis Anda karena kegagalan login.

Alih-alih menduplikasi bidang kata sandi, berikan opsi yang memungkinkan pengguna untuk melihat kata sandi yang telah mereka pilih untuk dibuat. Memiliki ikon atau kotak centang yang membuka kedok kata sandi saat diklik. Pratinjau kata sandi dapat menjadi kesempatan bagi pengguna untuk memeriksa data mereka sebelum mengirim.

Jangan Mengiris Bidang Data

Jangan memotong bidang saat menanyakan nama lengkap, nomor telepon, atau tanggal lahir. Bidang yang diiris memaksa pengguna untuk membuat ketukan tambahan untuk pindah ke bidang berikutnya. Untuk bidang yang memerlukan beberapa pemformatan (seperti nomor telepon atau tanggal lahir), juga lebih baik untuk memasangkan satu bidang dengan aturan pemformatan yang jelas sebagai penggantinya.

Hindari Menu Dropdown

Luke Wroblewski dengan terkenal mengatakan bahwa dropdown harus menjadi UI pilihan terakhir. Dropdown sangat buruk untuk seluler karena elemen yang diciutkan membuat proses input data lebih sulit di layar kecil: Menempatkan opsi di dropdown membutuhkan dua ketukan dan menyembunyikan opsi.

Jika Anda menggunakan dropdown untuk memilih opsi, pertimbangkan untuk menggantinya dengan tombol radio. Mereka akan membuat semua opsi terlihat dan juga mengurangi biaya interaksi — pengguna dapat mengetuk item dan memilih sekaligus.

Gunakan Placeholder Dan Input Bertopeng

Ketidakpastian format adalah salah satu masalah yang paling signifikan dari desain formulir. Masalah ini memiliki koneksi langsung dengan pengabaian formulir — ketika pengguna tidak yakin dengan format di mana mereka harus menyediakan data, mereka dapat dengan cepat meninggalkan formulir. Ada beberapa hal yang dapat Anda lakukan untuk memperjelas format.

Teks Placeholder

Teks di bidang input dapat memberi tahu pengguna konten apa yang diharapkan. Teks placeholder tidak diperlukan untuk bidang sederhana seperti "Nama lengkap", tetapi bisa sangat berharga untuk bidang yang memerlukan data dalam format tertentu. Misalnya, jika Anda merancang fungsi pencarian untuk melacak paket, sebaiknya berikan contoh nomor pelacakan sebagai pengganti untuk bidang nomor pelacakan.

Sangat penting bahwa formulir Anda harus memiliki perbedaan visual yang jelas antara teks placeholder dan nilai aktual yang dimasukkan oleh pengguna. Dengan kata lain, teks placeholder seharusnya tidak terlihat seperti nilai preset. Tanpa perbedaan visual yang jelas, pengguna mungkin berpikir bahwa bidang dengan placeholder sudah memiliki nilai.

Masukan Bertopeng

Penyembunyian bidang adalah teknik yang membantu pengguna memformat teks yang dimasukkan. Banyak desainer mengacaukan masking bidang dengan teks placeholder — keduanya bukanlah hal yang sama. Tidak seperti placeholder, yang pada dasarnya adalah teks statis, masker secara otomatis memformat data yang disediakan oleh pengguna. Pada contoh di bawah ini, tanda kurung, spasi, dan tanda hubung muncul di layar secara otomatis saat nomor telepon dimasukkan.

Masukan bertopeng juga memudahkan pengguna untuk memvalidasi informasi. Ketika nomor telepon ditampilkan dalam potongan, akan lebih mudah untuk menemukan dan memperbaiki kesalahan ketik.

Sediakan Papan Ketik yang Cocok

Pengguna seluler menghargai aplikasi dan situs web yang menyediakan keyboard yang sesuai untuk bidang tersebut. Fitur ini mencegah mereka melakukan tindakan tambahan. Misalnya, ketika pengguna perlu memasukkan nomor kartu kredit, aplikasi Anda seharusnya hanya menampilkan dialpad. Sangat penting untuk menerapkan pencocokan keyboard secara konsisten di seluruh aplikasi (semua formulir di aplikasi Anda harus memiliki fitur ini).

Atur jenis input HTML untuk menampilkan keypad yang benar. Tujuh jenis input relevan dengan desain formulir:

• input type="text" menampilkan keyboard normal perangkat seluler.
• input type="email" menampilkan keyboard normal dan '@' dan '.com'.
• input type="tel" menampilkan keypad numerik 0 hingga 9.
• input type="number" menampilkan keyboard dengan angka dan simbol.
• input type="date" menampilkan pemilih tanggal perangkat seluler.
• input type="datetime" menampilkan pemilih tanggal dan waktu perangkat seluler.
• input type="month" menampilkan pemilih bulan dan tahun perangkat seluler.

Gunakan Penggeser Saat Meminta Rentang Tertentu

Banyak formulir meminta pengguna untuk memberikan rentang nilai (misalnya, rentang harga, rentang jarak, dll.). Alih-alih menggunakan dua bidang terpisah, "dari" dan "ke", untuk tujuan itu, gunakan penggeser untuk memungkinkan pengguna menentukan rentang dengan interaksi jempol.

Jelaskan Dengan Jelas Mengapa Anda Meminta Informasi Sensitif

Orang-orang semakin peduli tentang privasi dan keamanan informasi. Ketika pengguna melihat permintaan informasi yang mereka anggap pribadi, mereka mungkin berpikir, “Hm, mengapa mereka membutuhkan ini?” Jika formulir Anda meminta informasi sensitif kepada pengguna, pastikan untuk menjelaskan mengapa Anda membutuhkannya. Anda dapat melakukannya dengan menambahkan teks dukungan di bawah bidang yang relevan. Sebagai aturan praktis, teks penjelasan tidak boleh melebihi 100 karakter.

Hati-hati Dengan Default Statis

Tidak seperti default cerdas, yang dihitung oleh sistem berdasarkan informasi yang dimiliki sistem tentang pengguna, default statis adalah nilai prasetel dalam bentuk yang sama untuk semua pengguna. Hindari default statis kecuali Anda yakin sebagian besar pengguna Anda (misalnya, 95%) akan memilih nilai tersebut — terutama untuk bidang yang wajib diisi. Mengapa? Karena kemungkinan besar Anda akan menimbulkan kesalahan — orang memindai formulir dengan cepat, dan mereka tidak akan menghabiskan waktu ekstra untuk menguraikan semua pertanyaan; sebagai gantinya, mereka hanya akan melewati bidang, dengan asumsi itu sudah memiliki nilai.

Lindungi Data Pengguna

Jef Raskin pernah berkata, “Sistem harus memperlakukan semua input pengguna sebagai hal yang sakral.” Ini benar-benar berlaku untuk formulir. Sangat bagus ketika Anda mulai mengisi formulir web dan kemudian secara tidak sengaja me-refresh halaman tetapi datanya tetap berada di bidang. Alat seperti Garlic.js membantu Anda mempertahankan nilai formulir secara lokal hingga formulir dikirimkan. Dengan cara ini, pengguna tidak akan kehilangan data berharga jika mereka secara tidak sengaja menutup tab atau browser.

Tindakan Otomatis

Jika Anda ingin membuat proses input data semulus mungkin, tidak cukup dengan meminimalkan jumlah kolom input — Anda juga harus memperhatikan upaya pengguna yang diperlukan untuk input data. Mengetik memiliki biaya interaksi yang tinggi — rawan kesalahan dan memakan waktu, bahkan dengan keyboard fisik. Tetapi ketika datang ke layar seluler, itu menjadi lebih kritis. Lebih banyak mengetik meningkatkan peluang pengguna untuk membuat kesalahan. Upayakan untuk mencegah pengetikan yang tidak perlu, karena akan meningkatkan kepuasan pengguna dan mengurangi tingkat kesalahan.

Berikut adalah beberapa hal yang dapat Anda lakukan untuk mencapai tujuan ini:

Pelengkapan otomatis

Sebagian besar pengguna mengalami pelengkapan otomatis saat mengetik pertanyaan di kotak pencarian Google. Google memberi pengguna daftar saran yang terkait dengan apa yang diketik pengguna di bidang. Mekanisme yang sama dapat diterapkan pada desain bentuk. Misalnya, formulir dapat melengkapi alamat email secara otomatis.

Kapitalisasi otomatis

Autocapitalizing membuat huruf pertama menjadi kapital secara otomatis. Fitur ini sangat baik untuk bidang seperti nama dan alamat jalan, tetapi hindari untuk bidang kata sandi.

Koreksi otomatis

Koreksi otomatis memodifikasi kata-kata yang tampaknya salah eja. Nonaktifkan fitur ini untuk bidang unik, seperti nama, alamat, dll.

Pengisian otomatis detail pribadi

Mengetik alamat sering kali merupakan bagian paling rumit dari formulir pendaftaran online apa pun. Buat tugas ini lebih mudah dengan menggunakan fungsi browser untuk mengisi bidang berdasarkan nilai yang dimasukkan sebelumnya. Menurut penelitian Google, pengisian otomatis membantu orang mengisi formulir 30% lebih cepat.

Gunakan Fitur Asli Perangkat Seluler Untuk Menyederhanakan Input Data

Perangkat seluler modern adalah perangkat canggih yang memiliki banyak kemampuan luar biasa. Desainer dapat menggunakan fitur asli perangkat (seperti kamera atau geolokasi) untuk menyederhanakan tugas memasukkan data.

Berikut adalah beberapa tip tentang cara menggunakan sensor dan perangkat keras perangkat.

Layanan Lokasi

Dimungkinkan untuk memilih negara pengguna berdasarkan data geolokasi mereka. Namun terkadang mengisi ulang alamat lengkap bisa menjadi masalah karena masalah akurasi. Google Places API dapat membantu mengatasi masalah ini. Ini menggunakan geolokasi dan pra-pengisian alamat untuk memberikan saran yang akurat berdasarkan lokasi persis pengguna.

Menggunakan layanan lokasi, juga memungkinkan untuk menyediakan default cerdas. Misalnya, untuk formulir “Temukan penerbangan”, kolom “Dari” dapat diisi terlebih dahulu dengan bandara terdekat dengan pengguna berdasarkan geolokasi pengguna.

Otorisasi Biometrik

Masalah terbesar menggunakan kata sandi teks saat ini adalah kebanyakan orang lupa kata sandi. 82% orang tidak dapat mengingat kata sandi mereka, dan 5 hingga 10% sesi mengharuskan pengguna untuk mengatur ulang kata sandi. Pemulihan kata sandi adalah masalah besar dalam e-commerce. 75% pengguna tidak akan menyelesaikan pembelian jika mereka harus mencoba memulihkan kata sandi mereka saat check out.

Masa depan kata sandi bukanlah kata sandi. Bahkan saat ini, pengembang seluler dapat memanfaatkan teknologi biometrik. Pengguna tidak perlu mengetikkan kata sandi; mereka harus dapat menggunakan pembaca biometrik untuk otentikasi — masuk menggunakan sidik jari atau pemindaian wajah.

Kamera

Jika formulir Anda meminta pengguna untuk memberikan detail kartu kredit atau informasi dari SIM mereka, proses input data dapat disederhanakan dengan menggunakan kamera sebagai pemindai. Berikan opsi untuk mengambil foto kartu dan mengisi semua detail secara otomatis.

Tapi ingat bahwa tidak peduli seberapa bagus aplikasi Anda mengisi kolom, penting untuk membiarkannya tersedia untuk diedit. Pengguna harus dapat mengubah bidang kapan pun mereka mau.

Suara

Perangkat yang dikontrol suara, seperti Apple HomePod, Google Home, dan Amazon Echo, secara aktif merambah pasar. Jumlah orang yang lebih suka menggunakan suara untuk operasi umum telah tumbuh secara signifikan. Menurut ComScore, 50% dari semua pencarian akan menjadi pencarian suara pada tahun 2020.

Saat pengguna menjadi lebih nyaman dan percaya diri menggunakan perintah suara, mereka akan menjadi fitur interaksi seluler yang diharapkan. Masukan suara memberikan banyak keuntungan bagi pengguna seluler — ini sangat berharga dalam situasi ketika pengguna tidak dapat fokus pada layar, misalnya, saat mengemudikan mobil.

Saat mendesain formulir, Anda dapat memberikan input suara sebagai metode alternatif input data.

Label Bidang

Tulis Label yang Jelas Dan Ringkas

Label adalah teks yang memberi tahu pengguna data apa yang diharapkan dari mereka di bidang input tertentu. Menulis label yang jelas adalah salah satu cara terbaik untuk membuat formulir lebih mudah diakses. Label harus membantu pengguna memahami informasi apa yang diperlukan secara sekilas.

Hindari menggunakan kalimat lengkap untuk menjelaskan. Label bukan teks bantuan. Tulis label yang ringkas dan jelas (satu atau dua kata), sehingga pengguna dapat dengan cepat memindai formulir Anda.

Tempatkan Label Dan Masukan Berdekatan

Letakkan setiap label di dekat bidang input, karena mata akan tahu secara visual bahwa mereka terikat satu sama lain.

Jangan Gunakan Teks Placeholder yang Menghilang Sebagai Label

Sementara label sebaris terlihat bagus dan menghemat tampilan layar yang berharga, manfaat ini jauh lebih besar daripada kelemahan kegunaan yang signifikan, yang paling kritis di antaranya adalah hilangnya konteks. Saat pengguna mulai memasukkan teks dalam bidang, teks placeholder menghilang dan memaksa orang untuk mengingat informasi ini. Meskipun mungkin tidak menjadi masalah untuk formulir dua bidang sederhana, ini bisa menjadi masalah besar untuk formulir yang memiliki banyak bidang (misalnya, 7 hingga 10). Akan sulit bagi pengguna untuk mengingat semua label bidang setelah memasukkan data. Tidak mengherankan, pengujian pengguna terus-menerus menunjukkan bahwa placeholder di bidang formulir sering kali lebih merugikan kegunaan daripada bantuan.

Ada solusi sederhana untuk masalah hilangnya placeholder: label mengambang (atau adaptif). Setelah pengguna mengetuk bidang dengan tempat penampung label, label tidak hilang, ia bergerak ke atas bidang dan memberi ruang bagi pengguna untuk memasukkan datanya.

Label Rata Atas

Menempatkan label bidang di atas bidang dalam formulir meningkatkan cara pengguna memindai formulir. Menggunakan teknologi pelacakan mata untuk ini, Google menunjukkan bahwa pengguna membutuhkan lebih sedikit fiksasi, lebih sedikit waktu fiksasi, dan lebih sedikit saccades sebelum mengirimkan formulir.

Keuntungan penting lainnya dari label rata atas adalah mereka menyediakan lebih banyak ruang untuk label. Label panjang dan versi yang dilokalkan akan lebih mudah masuk ke dalam tata letak. Yang terakhir ini sangat cocok untuk layar ponsel kecil. Anda dapat membuat bidang formulir memperluas lebar penuh layar, membuatnya cukup besar untuk menampilkan seluruh input pengguna.

Kasus Kalimat Vs. Judul Kasus

Ada dua cara umum untuk menggunakan huruf kapital pada kata:

• Judul kasus: Kapitalisasi setiap kata. "Ini Adalah Judul Kasus."
• Kasus kalimat: Kapitalisasi kata pertama. "Ini adalah kasus kalimat."

Menggunakan kasus kalimat untuk label memiliki satu keunggulan dibandingkan kasus judul: Ini sedikit lebih mudah (dan, dengan demikian, lebih cepat) untuk dibaca. Sementara perbedaan untuk label pendek dapat diabaikan (tidak ada banyak perbedaan antara "Nama Lengkap" dan "Nama Lengkap"), untuk label yang lebih panjang, huruf besar/kecil lebih baik. Sekarang Anda Tahu Betapa Sulitnya Membaca Teks Panjang di Judul Kasus.

Hindari Menggunakan Caps Untuk Label

Teks huruf besar semua — artinya teks dengan semua huruf kapital — boleh saja dalam konteks yang tidak melibatkan pembacaan substantif (seperti akronim dan logo), tetapi sebaliknya hindari semua huruf besar. Seperti yang disebutkan oleh Miles Tinker dalam karyanya Legibility of Print , cetak huruf besar semua secara dramatis memperlambat kecepatan pemindaian dan membaca dibandingkan dengan jenis huruf kecil.

tata letak

Anda sekarang tahu bahwa pengguna memindai halaman web, daripada membacanya. Hal yang sama berlaku untuk mengisi formulir. Itu sebabnya desainer harus mendesain formulir yang mudah dipindai. Membiarkan pemindaian yang efisien dan efektif sangat penting untuk membuat proses pengisian formulir secepat mungkin.

Gunakan Tata Letak Satu Kolom

Sebuah studi oleh CXL Institute menemukan bahwa formulir satu kolom lebih cepat diselesaikan daripada formulir multi-kolom. Dalam penelitian itu, peserta tes mampu menyelesaikan formulir satu kolom rata-rata 15,4 detik lebih cepat daripada formulir multi-kolom.

Beberapa kolom mengganggu momentum vertikal pengguna; dengan beberapa kolom, mata mulai zig-zag. Ini secara dramatis meningkatkan jumlah fiksasi mata dan, sebagai hasilnya, waktu penyelesaian. Selain itu, formulir multi-kolom mungkin menimbulkan pertanyaan yang tidak perlu pada pengguna, seperti "Di mana saya harus mulai?" dan “Apakah pertanyaan di kolom kanan sama pentingnya dengan pertanyaan di kolom kiri?”

Dalam desain satu kolom, mata bergerak ke arah alami, dari atas ke bawah, satu garis pada satu waktu. Ini membantu untuk menetapkan jalur yang jelas bagi pengguna. Satu kolom sangat bagus untuk seluler karena layar lebih panjang secara vertikal, dan pengguliran vertikal adalah gerakan alami bagi pengguna seluler.

Ada beberapa pengecualian untuk aturan ini. Dimungkinkan untuk menempatkan bidang pendek dan terkait secara logis pada baris yang sama (seperti untuk kota dan kode area).

Buat Aliran Dengan Pertanyaan Anda

Cara Anda mengajukan pertanyaan juga penting. Pertanyaan harus diajukan secara logis dari sudut pandang pengguna, bukan menurut logika aplikasi atau basis data, karena akan membantu menciptakan rasa percakapan dengan pengguna. Misalnya, jika Anda mendesain formulir pembayaran dan menanyakan detail seperti nama lengkap, nomor telepon, dan kartu kredit, pertanyaan pertama seharusnya adalah nama lengkap. Mengubah urutan (misalnya, memulai dengan nomor telepon alih-alih nama) menyebabkan ketidaknyamanan. Dalam percakapan di dunia nyata, tidak biasa meminta nomor telepon seseorang sebelum menanyakan namanya.

Tunda Pertanyaan Mendalam Sampai Akhir

Saat merancang alur untuk pertanyaan yang ingin Anda ajukan, pikirkan tentang prioritas. Ikuti aturan "mudah sebelum sulit" dan tempatkan pertanyaan mendalam atau pribadi terakhir. Ini memudahkan pengguna ke dalam proses; mereka akan lebih cenderung menjawab pertanyaan yang kompleks dan lebih mengganggu setelah mereka menjalin hubungan baik. Ini memiliki dasar ilmiah: prinsip konsistensi Robert Cialdini menetapkan bahwa ketika seseorang mengambil tindakan kecil atau langkah menuju sesuatu, mereka merasa lebih terdorong untuk menyelesaikannya.

Kelompokkan Bidang Terkait Bersama

Salah satu prinsip psikologi Gestalt, prinsip kedekatan, menyatakan bahwa elemen terkait harus saling berdekatan. Prinsip ini dapat diterapkan pada urutan pertanyaan dalam suatu formulir. Semakin banyak pertanyaan terkait, semakin dekat mereka satu sama lain.

Desainer dapat mengelompokkan bidang terkait menjadi beberapa bagian. Jika formulir Anda memiliki lebih dari enam pertanyaan, kelompokkan pertanyaan terkait ke dalam bagian yang logis. Jangan lupa untuk memberikan ruang putih yang cukup di antara bagian untuk membedakannya secara visual.

Jadikan Formulir Panjang Terlihat Lebih Sederhana

Bagaimana Anda mendesain formulir yang mengajukan banyak pertanyaan kepada pengguna? Tentu saja, Anda bisa meletakkan semua pertanyaan di satu layar. Tapi ini menghambat tingkat penyelesaian Anda. Jika pengguna tidak memiliki motivasi yang cukup untuk melengkapi formulir, kerumitan formulir dapat membuat mereka takut. Kesan pertama memainkan peran penting. Umumnya, semakin panjang atau semakin rumit suatu formulir, semakin kecil kemungkinan pengguna untuk mulai mengisi bagian yang kosong.

Minimalkan jumlah bidang yang terlihat pada satu waktu. Ini menciptakan persepsi bahwa bentuknya lebih pendek dari yang sebenarnya.

Ada dua teknik untuk melakukan ini.

Pengungkapan Progresif

Pengungkapan progresif adalah tentang memberi pengguna hal yang benar pada waktu yang tepat. Tujuannya adalah untuk menemukan barang yang tepat untuk ditampilkan di layar kecil pada waktu yang tepat:

• Awalnya, tunjukkan kepada pengguna hanya beberapa opsi yang paling penting.
• Ungkapkan bagian dari formulir Anda saat pengguna berinteraksi dengannya.

Chunking

Chunking berarti memecah bentuk panjang menjadi langkah-langkah. Dimungkinkan untuk meningkatkan tingkat penyelesaian dengan membagi formulir menjadi beberapa langkah. Chunking juga dapat membantu pengguna memproses, memahami, dan mengingat informasi. Saat merancang formulir multi-langkah, selalu beri tahu pengguna tentang kemajuan mereka dengan pengukur kelengkapan.

Desainer dapat menggunakan pelacak kemajuan (seperti yang ditunjukkan pada contoh di atas) atau indikator “Langkah # keluar dari #” untuk mengetahui jumlah total langkah dan untuk menunjukkan seberapa jauh pengguna saat ini. Pendekatan yang terakhir bisa sangat bagus untuk formulir seluler karena indikasi langkah tidak memakan banyak ruang.

Tombol Aksi

Tombol adalah elemen interaktif yang mengarahkan pengguna untuk mengambil tindakan.

Jadikan Tombol Tindakan Deskriptif

Label tombol harus menjelaskan fungsi tombol; pengguna harus dapat memahami apa yang terjadi setelah ketukan hanya dengan melihat tombol. Hindari label umum seperti "Kirim" dan "Kirim", sebagai gantinya gunakan label yang menjelaskan tindakan.

Jangan Gunakan Tombol Hapus Atau Atur Ulang

Tombol hapus atau setel ulang memungkinkan pengguna untuk menghapus data mereka dalam formulir. Tombol-tombol ini hampir tidak pernah membantu pengguna dan sering menyakiti mereka. Risiko menghapus semua informasi yang dimasukkan pengguna lebih besar daripada manfaat kecil karena harus memulai lagi. Jika pengguna mengisi formulir dan secara tidak sengaja menekan tombol yang salah, kemungkinan besar mereka tidak akan memulai dari awal.

Gunakan Gaya Berbeda Untuk Tombol Primer Dan Sekunder

Hindari tindakan sekunder jika memungkinkan. Tetapi jika formulir Anda memiliki dua ajakan bertindak (misalnya, formulir e-niaga yang memiliki tombol "Terapkan diskon" dan "Kirim pesanan"), pastikan perbedaan visual yang jelas antara tindakan utama dan sekunder. Prioritaskan tindakan utama secara visual dengan menambahkan lebih banyak bobot visual ke tombol. Ini akan mencegah pengguna mengetuk tombol yang salah.

Desain Target Sentuh Ramah Jari

Target sentuh kecil menciptakan pengalaman pengguna yang mengerikan karena membuat pengguna sulit berinteraksi dengan objek interaktif. Sangat penting untuk merancang target sentuh yang ramah jari: bidang input dan tombol yang lebih besar.

Gambar di bawah ini menunjukkan bahwa lebar rata-rata jari orang dewasa adalah sekitar 11 mm.

Menurut pedoman desain material, target sentuh harus setidaknya 48 × 48 DP. Target sentuh dengan ukuran ini menghasilkan ukuran fisik sekitar 9 mm, berapa pun ukuran layarnya. Mungkin tepat untuk menggunakan target sentuh yang lebih besar untuk mengakomodasi spektrum pengguna yang lebih luas.

Tidak hanya ukuran target yang penting, tetapi ruang yang cukup antara target sentuh juga penting. Alasan utama untuk menjaga jarak aman antara target sentuh adalah untuk mencegah pengguna menyentuh tombol yang salah dan melakukan tindakan yang salah. Jarak antar tombol menjadi sangat penting ketika pilihan biner seperti "Setuju" dan "Tidak Setuju" terletak tepat bersebelahan. Pedoman desain material merekomendasikan untuk memisahkan target sentuh dengan ruang 8 DP atau lebih, yang akan menciptakan kepadatan dan kegunaan informasi yang seimbang.

Nonaktifkan Tombol Setelah Ketuk

Tindakan formulir biasanya memerlukan beberapa waktu untuk diproses. Misalnya, penghitungan data mungkin diperlukan setelah penyerahan. It's essential not only to provide feedback when an action is in progress, but also to disable the submit button to prevent users from accidentally tapping the button again. This is especially important for e-commerce websites and apps. By disabling the button, you not only prevent duplicate submissions, which can happen by accident, but you also provide a valuable acknowledgment to users (users will know that the system has received their submission).

Assistance And Support

Provide Success State

Upon successful completion of a form, it's critical to notify users about that. It's possible to provide this information in the context of an existing form (for example, showing a green checkmark above the refreshed form) or to direct users to a new page that communicates that their submission has been successful.

Errors And Validation

Users will make mistakes. It's inevitable. It's essential to design a user interface that supports users in those moments of failures.

While the topic of errors and validation deserves its own article, it's still worth mentioning a few things that should be done to improve the user experience of mobile forms.

Use Input Constraints for Each Field

Prevention is better than a cure. If you're a seasoned designer, you should be familiar with the most common cases that can lead to an error state (error-prone conditions). For example, it's usually hard to correctly fill out a form on the first attempt, or to properly sync data when the mobile device has a poor network connection. Take these cases into account to minimize the possibility of errors. In other words, it's better to prevent users from making errors in the first place by utilizing constraints and offering suggestions.

For instance, if you design a form that allows people to search for a hotel reservation, you should prevent users from selecting check-in dates that are in the past. As shown in the Booking.com example below, you can simply use a date selector that allows users only to choose today's date or a date in the future. Such a selector would force users to pick a date range that fits.

Don't Make Data Validation Rules Too Strict

While there might be cases where it's essential to use strict validation rules, in most cases, strict validation is a sign of lazy programming. Showing errors on the screen when the user provides data in a slightly different format than expected creates unnecessary friction. And this would have a negative impact on conversions.

It's very common for a few variations of an answer to a question to be possible; for example, when a form asks users to provide information about their state, and a user responds by typing their state's abbreviation instead of the full name (for example, CA instead of California). The form should accept both formats, and it's the developer job to convert the data into a consistent format.

Clear Error Message

When you write error messages, focus on minimizing the frustration users feel when they face a problem in interacting with a form. Here are a few rules on writing effective error messages:

• Never blame the user.
  The way you deliver an error message can have a tremendous impact on how users perceive it. An error message like, “You've entered a wrong number” puts all of the blame on the user; as a result, the user might get frustrated and abandon the app. Write copy that sounds neutral or positive. A neutral message sounds like, “That number is incorrect.”
• Avoid vague or general error messages.
  Messages like “Something went wrong. Please, try again later” don't say much to users. Users will wonder what exactly went wrong. Always try to explain the root cause of a problem. Make sure users know how to fix errors.
• Make error messages human-readable.
  Error messages like “User input error: 0x100999” are cryptic and scary. Write like a human, not like a robot. Use human language, and explain what exactly the user or system did wrong, and what exactly the user should do to fix the problem.

Display Errors Inline

When it comes to displaying error messages, designers opt for one of two locations: at the top of the form or inline. The first option can make for a bad experience. Javier Bargas-Avila and Glenn Oberholzer conducted research on online form validation and discovered that displaying all error messages at the top of the form puts a high cognitive load on user memory. Users need to spend extra time matching error messages with the fields that require attention.

Jauh lebih baik untuk memposisikan pesan kesalahan sebaris. Pertama, penempatan ini sesuai dengan alur membaca alami pengguna dari atas ke bawah. Kedua, kesalahan akan muncul dalam konteks input pengguna.

Gunakan Validasi Dinamis

Waktu di mana Anda memilih untuk menampilkan pesan kesalahan sangat penting. Melihat pesan kesalahan hanya setelah menekan tombol kirim mungkin membuat pengguna frustrasi. Jangan menunggu sampai pengguna menyelesaikan formulir; memberikan umpan balik saat data sedang dimasukkan.

Gunakan validasi sebaris dengan umpan balik waktu nyata. Validasi ini secara instan memberi tahu orang-orang apakah informasi yang mereka ketikkan kompatibel dengan persyaratan formulir. Pada tahun 2009, Luke Wroblewski menguji validasi sebaris terhadap validasi pasca-pengiriman dan menemukan hasil berikut untuk versi sebaris:

• 22% peningkatan tingkat keberhasilan,
• 22% penurunan kesalahan yang dibuat,
• 31% peningkatan peringkat kepuasan,
• 42% penurunan waktu penyelesaian,
• 47% penurunan jumlah fiksasi mata.

Tetapi validasi sebaris harus diterapkan dengan hati-hati:

• Hindari menampilkan validasi sebaris pada fokus.
  Dalam hal ini, segera setelah pengguna mengetuk bidang, mereka melihat pesan kesalahan. Kesalahan muncul bahkan ketika bidang benar-benar kosong. Saat pesan kesalahan ditampilkan pada fokus, mungkin terlihat seperti formulir meneriaki pengguna bahkan sebelum mereka mulai mengisinya.
• Jangan memvalidasi setelah setiap karakter diketik.
  Pendekatan ini tidak hanya meningkatkan jumlah upaya validasi yang tidak perlu, tetapi juga membuat pengguna frustrasi (karena pengguna kemungkinan akan melihat pesan kesalahan sebelum mereka menyelesaikan kolom). Idealnya, pesan validasi sebaris akan muncul sekitar 500 hingga 1000 milidetik setelah pengguna berhenti mengetik atau setelah mereka pindah ke bidang berikutnya. Aturan ini memiliki beberapa pengecualian: Sangat membantu untuk memvalidasi inline saat pengguna mengetik saat membuat kata sandi (untuk memeriksa apakah kata sandi memenuhi persyaratan kompleksitas), saat membuat nama pengguna (untuk memeriksa apakah nama tersedia) dan saat mengetik pesan dengan batas karakter.

Aksesibilitas

Pengguna dari semua kemampuan harus dapat mengakses dan menikmati produk digital. Desainer harus berusaha untuk memasukkan kebutuhan aksesibilitas sebanyak yang mereka bisa ketika membangun sebuah produk. Berikut adalah beberapa hal yang dapat Anda lakukan untuk membuat formulir Anda lebih mudah diakses.

Pastikan Bentuknya Memiliki Kontras Yang Tepat

Pengguna Anda kemungkinan akan berinteraksi dengan formulir Anda di luar ruangan. Pastikan mudah digunakan baik di bawah sinar matahari yang menyilaukan maupun di lingkungan dengan cahaya redup. Periksa rasio kontras bidang dan label di formulir Anda. W3C merekomendasikan rasio kontras berikut untuk teks isi:

• Teks kecil harus memiliki rasio kontras minimal 4,5:1 terhadap latar belakangnya.
• Teks besar (tebal 14 poin, reguler 18 poin dan lebih tinggi) harus memiliki rasio kontras minimal 3:1 terhadap latar belakangnya.

Mengukur kontras warna bisa tampak luar biasa. Untungnya, beberapa alat membuat prosesnya sederhana. Salah satunya adalah Web AIM Color Contrast Checker, yang membantu desainer mengukur tingkat kontras.

Jangan Mengandalkan Warna Saja Untuk Mengkomunikasikan Status

Buta warna (atau defisiensi penglihatan warna) mempengaruhi sekitar 1 dari 12 pria (8%) dan 1 dari 200 wanita di dunia. Meskipun ada banyak jenis buta warna, dua yang paling umum adalah protanomali, atau berkurangnya kepekaan terhadap cahaya merah, dan deuteranomali, atau berkurangnya kepekaan terhadap cahaya hijau. Saat menampilkan kesalahan validasi atau pesan sukses, jangan mengandalkan warna saja untuk mengomunikasikan status (yaitu dengan membuat bidang input hijau atau merah). Seperti yang dinyatakan oleh pedoman W3C, warna tidak boleh digunakan sebagai satu-satunya sarana visual untuk menyampaikan informasi, menunjukkan suatu tindakan, mendorong respons, atau membedakan elemen visual. Desainer harus menggunakan warna untuk menonjolkan atau melengkapi apa yang sudah terlihat. Dukung orang buta warna dengan memberikan isyarat visual tambahan yang membantu mereka memahami antarmuka pengguna.

Izinkan Pengguna Mengontrol Ukuran Font

Izinkan pengguna untuk meningkatkan ukuran font untuk meningkatkan keterbacaan. Perangkat seluler dan browser menyertakan fitur untuk memungkinkan pengguna menyesuaikan ukuran font di seluruh sistem. Juga, pastikan formulir Anda memiliki cukup ruang untuk ukuran font yang besar.

Uji Keputusan Desain Anda

Semua poin yang disebutkan di atas dapat dianggap sebagai praktik terbaik industri. Tetapi hanya karena sesuatu disebut "praktik terbaik" tidak berarti itu selalu merupakan solusi optimal untuk formulir Anda. Aplikasi dan situs web sangat bergantung pada konteks penggunaannya. Jadi, selalu penting untuk menguji keputusan desain Anda; pastikan proses pengisian formulir lancar, alurnya tidak terganggu, dan pengguna dapat menyelesaikan masalah apa pun yang mereka hadapi di sepanjang jalan. Lakukan sesi pengujian kegunaan secara teratur, kumpulkan semua data berharga tentang interaksi pengguna, dan pelajari darinya.

Kesimpulan

Pengguna dapat ragu-ragu untuk mengisi formulir. Jadi, tujuan kami sebagai desainer adalah membuat proses pengisian formulir semudah mungkin. Saat mendesain formulir, berusahalah untuk menciptakan interaksi yang cepat dan tanpa gesekan. Terkadang perubahan kecil — seperti menulis pesan kesalahan dengan benar — dapat meningkatkan kegunaan formulir secara signifikan.

Artikel ini adalah bagian dari seri desain UX yang disponsori oleh Adobe. Adobe XD dibuat untuk proses desain UX yang cepat dan lancar, karena memungkinkan Anda beralih dari ide ke prototipe lebih cepat. Rancang, buat prototipe, dan bagikan — semuanya dalam satu aplikasi. Anda dapat melihat lebih banyak proyek inspiratif yang dibuat dengan Adobe XD di Behance, dan juga mendaftar ke buletin desain pengalaman Adobe untuk tetap mendapatkan informasi terbaru dan terinformasi tentang tren dan wawasan terbaru untuk desain UX/UI.