4 Formulir Desain UX Tips Yang Harus Anda Ketahui (Dengan Contoh)

Kami cenderung memikirkan formulir hanya sebagai sarana untuk mengumpulkan data pengguna, tetapi terkadang juga bersifat satu arah satu-satunya jalan, untuk pengguna kami terhubung dengan kami. Mungkin delusi berpikir kita bisa membuat pengguna cinta mengisi formulir, namun tentu saja mungkin untuk menemukan solusi yang tidak terlalu mengganggu mereka, dan membantu mereka sepanjang proses.

Saat menjelajah internet, kami terkadang menemukan solusi mengejutkan yang secara programatik benar, tetapi dirancang sedemikian rupa membuat banyak pengguna meninggalkan situs karena pengalaman pengguna yang buruk.

Jika formulir kami dirancang dengan baik, kami akan dapat tidak hanya menyenangkan pengguna kami tetapi juga tim backend yang dapat menangani apalagi kesalahan input pengguna. Jadi, dalam artikel ini, kita akan melihat bagaimana kita bisa meminimalkan kesalahan input pengguna dan masih buat pengguna kami senang.

Antisipasi Kebutuhan Pengguna

Situs web dan aplikasi miliki basis & tujuan pengguna yang berbeda, dan bahkan lokasi yang sama dapat menampung banyak formulir yang mengumpulkan berbagai jenis data, hanya untuk menyebut yang paling sering:

• Formulir masuk
• Formulir pendaftaran
• Formulir profil pengguna
• Formulir pendaftaran buletin
• Formulir checkout
• Survei pengguna
• Formulir kontak
• Formulir komentar
• Formulir pencarian

Semua tipe formulir ini memerlukan hal yang berbeda. Saat mendesain formulir checkout, penting untuk meyakinkan kredibilitas pengguna tentang keamanan, sedangkan dalam hal formulir komentar, sebaiknya tambahkan emoji atau metode lain yang memungkinkan pengguna untuk mengekspresikan suasana hati mereka yang sebenarnya.

Namun, bahkan tipe formulir yang serupa mungkin perlu dirancang secara berbeda, karena semua situs memilikinya basis pengguna yang unik. Sebelum memulai proses desain, selalu merupakan ide bagus mengantisipasi apa yang dibutuhkan pengguna kami, dan desain yang sesuai.

Contoh: Penargetan Login Sosial Kebutuhan Pengguna

Formulir login Codepen berisi tiga login sosial dengan Github di bagian atas. Pilihan ini tidak masuk akal untuk sebagian besar situs.

Tapi itu sempurna untuk Codepen, karena basis pengguna mereka terdiri dari pengembang, yang banyak di antaranya ingin masuk dengan akun Github mereka, atau menghubungkan akun pengembangan mereka satu sama lain sekaligus.

Pikirkan Mobile-First

Pengguna seluler dan desktop memiliki kebutuhan yang berbeda, tetapi sebagai mengisi formulir adalah tantangan yang jauh lebih besar pada layar ponsel, menggunakan gerakan tangan daripada pada keyboard fisik, a pendekatan mobile-first dapat membawa kita lebih jauh ketika kita ingin merancang formulir yang dapat digunakan.

Selain itu, banyak bentuk pola UI yang berfungsi dengan baik di perangkat seluler akan bekerja dengan baik di desktop juga.

Contoh: Kontrol yang Disentuh

Formulir seluler berkualitas tinggi tidak dapat dibayangkan tanpa kontrol yang terlihat di mana pengguna seluler dapat dengan mudah mengetuk dengan jari-jari mereka.

Bentuk pendaftaran buletin dari konferensi desain web An Event Apart menyesuaikan dengan cara pengguna seluler mengakses layar - isinya dua bidang input yang mudah untuk diketuk dan a tombol seukuran ujung jari.

Bidang input teks lebih tinggi seperti biasa sehingga pengguna seluler dapat dengan mudah mengetuknya, dan tombol besar, oranye dengan ikon centang lebih lanjut mendorong pengguna untuk mengirimkan formulir.

Versi desktop situs menggunakan desain bentuk yang sama, karena juga terlihat bagus dan berfungsi dengan baik pada layar yang lebih besar.

Contoh: Input yang Dapat Dihabiskan

Saat merancang formulir untuk seluler, selalu penting untuk mempertimbangkan bagaimana kami bisa meminimalkan ruang yang kita gunakan. Itu input yang dapat dibuang Pola desain UI telah menjadi sangat populer akhir-akhir ini, dan ini bekerja sangat baik pada ponsel.

Booking.com memanfaatkan pola ini dalam formulir pencarian di situs selulernya. Saat pengguna mengetuk ke dalam kolom pencarian, ia akan mengembang untuk sisakan lebih banyak ruang untuk gerakan, dan daftar pilih dengan rekomendasi juga muncul di bawahnya.

Ketika pengguna mengetuk keluar dari bidang, itu menyusut, dan informasi tambahan menghilang.

Contoh: Tombol Morphing

Tombol morphing ambil pola input yang dapat dibuang satu langkah lebih jauh, karena pengguna pertama kali melihat tombol, yang kemudian berubah menjadi bentuk ketika mereka mengetuknya.

Tangkapan layar di bawah ini berasal dari artikel The Startup yang brilian tentang desain formulir yang inovatif, yang menghadirkan banyak solusi kreatif lainnya juga.

Memfasilitasi Input Take-In

Bentuk yang panjang cenderung menghalangi pengguna. Yang terbaik yang bisa kita lakukan adalah hanya minta input yang benar-benar kita butuhkan. Ini tidak hanya penting dari perspektif pengalaman pengguna, tetapi pengguna juga dapat ragu untuk memberikan terlalu banyak informasi pribadi karena masalah privasi.

Namun, kadang-kadang, kita masih harus mengikuti bentuk yang lebih panjang. Dalam hal ini adalah ide bagus potong menjadi potongan-potongan kecil, dan melayani potongan sebagai layar berturut-turut.

Banyak situs e-Commerce (mis. Amazon) menggunakan solusi ini untuk mengurangi tingkat pengabaian gerobak.

Jika kita ingin memudahkan mengisi formulir isian, aturan praktisnya adalah mengurangi gangguan dan tindakan pengguna sebanyak mungkin.

Contoh: Pemilih Input Pribadi

Pemilih konten yang berbeda, seperti pemilih tanggal atau pemilih warna, tidak hanya memudahkan untuk mengambil input yang tepat, tetapi mereka juga membuat formulir lebih menarik, dan secara signifikan mengurangi kesalahan pengguna.

Aplikasi pengambilan daftar Todoist memberikan petunjuk yang dipersonalisasi di dalam pemilih tanggal ketika pengguna berada di atas hari.

Misalnya pada tangkapan layar di bawah ini, pengguna dapat melihat bahwa untuk 31 Agustus ia sudah memiliki 2 tugas karena, dan dapat mempertimbangkan informasi ini ketika memutuskan tanggal yang tepat untuk tugas. Ini adalah ide yang bagus untuk aplikasi di mana produktivitas adalah perhatian utama pengguna.

Contoh: Input Seret dan Jatuhkan

Desain seret dan lepas biasanya bekerja dengan baik dengan bidang unggahan file, terutama di mana pengguna seharusnya mengunggah gambar.

Mereka mungkin tidak mengurangi tindakan pengguna yang jauh dibandingkan dengan tombol Unggah file biasa, tetapi mereka membuatnya lebih mudah pilih file mana yang ingin diunggah pengguna, karena itu mengurangi kemungkinan mengirimkan file yang salah.

WordPress.com menyediakan antarmuka input pengguna drag-and-drop yang elegan dan intuitif dalam bentuk editor posnya. Itu thumbnail kecil dan representasi visual dari file yang sudah diunggah selanjutnya membantu pengguna dengan cepat melakukan pengunggahan.

Contoh: Hamparan untuk Menghilangkan Gangguan

Jika pengguna terganggu saat mengisi formulir kami, mereka lebih rentan terhadap kesalahan, dan juga lebih mudah terganggu

Hamparan konten adalah alternatif yang bagus untuk desain bentuk minimalis. Mereka digunakan oleh situs yang lebih kompleks yang ingin menampilkan berbagai jenis informasi pada layar yang sama.

Pada tangkapan layar di bawah, Anda dapat melihat versi desktop Booking.com. Ketika pengguna mengarahkan kursor pada formulir pencarian, sisa konten yang didapat ditutupi oleh lapisan keabu-abuan untuk membantu mereka tetap fokus pada proses pengisian formulir.

Berikan Umpan Balik kepada Pengguna

Memberi umpan balik yang tepat pada waktu yang tepat secara signifikan dapat meningkatkan pengalaman pengguna.

Dalam desain bentuk, ada dua jenis umpan balik pengguna:

1. Umpan balik diberikan sebelum pengiriman formulir - untuk mengurangi kesalahan dan membentuk tingkat pengabaian, seperti pelacak kemajuan, validasi input instan yang segera memberi penghargaan kepada pengguna untuk input yang benar, atau tooltips pembantu
2. Umpan balik diberikan setelah pengiriman formulir - untuk memberi tahu pengguna mereka melakukan kesalahan, seperti pesan kesalahan

Jenis umpan balik pengguna yang sangat dibutuhkan pengguna kami bergantung pada karakteristik audiens target kami, dan tujuan situs kami.

Contoh: Pelacak Kemajuan

Formulir yang lebih panjang dari satu halaman, seperti survei dan sebagian besar formulir checkout e-Commerce dapat memanfaatkan pelacak kemajuan pola desain. Pelacak kemajuan memberi sebuah umpan balik visual instan kepada pengguna tentang status mereka, dan mendorong mereka untuk melanjutkan proses.

Aplikasi web pembuat survei SnapSurveys memperlihatkan sedikit pelacak kemajuan tepat di atas tombol kirim sehingga pengguna dapat secara alami menangkapnya.

dia pelacak kemajuan tidak menggunakan label apa pun, tetapi cara itu dirancang memperjelas tujuannya - jumlah lingkaran menunjukkan jumlah langkah, langkah yang sudah dieksekusi menjadi biru, dan pengguna dapat dengan mudah melihat berapa langkah yang masih di depan mereka.

Contoh: Validasi Real-Time

Pengecer kosmetik Body Shop menggunakan validasi waktu nyata pada formulir Profil Pengguna untuk menghilangkan kesalahan dan meningkatkan UX dari proses penyelesaian formulir.

Input diperiksa sementara pengguna mengisi formulir, dan jawaban benar dan salah segera ditunjukkan oleh ikon yang mudah dibedakan sedikit lebih jauh di sebelah kanan tetapi masih di area yang terlihat.

Contoh: Tooltips Ekspresif

Mikroskopi dimengerti juga merupakan bagian penting dari umpan balik pengguna yang sukses dalam desain formulir. Menurut definisi, salinan situs web terdiri dari potongan teks kecil digunakan dalam berbagai elemen - label, tombol, pesan kesalahan, tooltips, dll.

Dalam formulir loginnya, grup perbankan Barclay menjawab pertanyaan yang mungkin ditanyakan pengguna dengan bantuan tooltips yang dirancang dengan baik itu termasuk mikroskopi yang mudah dipahami.

Tooltips tersembunyi sedikit di belakang? ikon tidak mengganggu pengguna yang tahu cara mengisi formulir login, tetapi untuk selalu hadir untuk pengguna yang tidak yakin.

Beberapa tooltips bahkan mengandung sedikit visual dari kartu debit beranotasi sehingga pengguna dapat dengan mudah menemukan data yang harus mereka masukkan ke dalam formulir login.