Rincian bentuk Lemon Kecil

Pentingnya formulir

Siapa pun yang menggunakan aplikasi atau situs web memiliki tujuan tertentu. Formulir sering kali menjadi satu-satunya hal yang menghalangi pengguna untuk mencapai tujuan mereka. Formulir terus menjadi salah satu jenis interaksi pengguna yang penting di web dan aplikasi. Formulir sering dianggap sebagai langkah terakhir dalam mencapai tujuan. Pengguna harus dapat mengisi formulir dengan cepat dan mudah. Mari kita lihat formulir pembayaran Little Lemon saat ini secara mendetail, yang menunjukkan beberapa kesalahan umum dalam desain formulir.

Tata letak

Pertama, kolom teks di mana pengguna perlu memasukkan data berada di tengah dan tidak sejajar ke kiri seperti dalam praktik terbaik. Tombol checkout tidak terlihat jelas dan tidak ada keranjang atau informasi tentang apa yang dibeli pengguna.

Bagaimana dengan panjangnya?

Sertakan indikator kemajuan

Biasanya, check out adalah proses multi-langkah. Ini berarti pelanggan harus melalui beberapa langkah sebelum pesanannya selesai. Agar proses ini dapat digunakan, sertakan indikator kemajuan yang menunjukkan di mana pelanggan berada dalam proses checkout dan berapa banyak waktu yang tersisa untuk menyelesaikan proses tersebut.

Sertakan hanya bidang-bidang yang penting

Sejumlah besar pembeli melakukan riset pembelian potensial pada ponsel pintar mereka. Sementara itu, pertanyaan yang lebih besar adalah apakah para pengguna tersebut bersedia membeli di perangkat seluler mereka. Semua orang telah menjawab pertanyaan yang ditakuti, seperti 'Bagaimana Anda mendengar tentang kami? Meskipun pertanyaan-pertanyaan tersebut dapat membantu penjual, namun tidak melakukan apa pun untuk pembeli.

Meskipun pertanyaan-pertanyaan ini menjengkelkan di desktop, namun bisa berakibat fatal di perangkat seluler. Dalam bukunya yang luar biasa, Web Forms: Mengisi Bagian yang Kosong, Luke Wroblewski menyatakan:

"Setiap pertanyaan yang Anda ajukan kepada orang-orang di formulir Web mengharuskan mereka untuk menguraikannya, merumuskan tanggapan dan kemudian memasukkan jawaban mereka di tempat yang Anda sediakan di formulir. Dengan waspada terhadap setiap pertanyaan yang Anda ajukan, Anda dapat menghapus pertanyaan yang tidak terlalu penting atau dapat ditanyakan pada waktu atau tempat yang lebih baik atau dapat disimpulkan secara otomatis. Dan semakin sedikit pertanyaan yang Anda ajukan, semakin besar kemungkinan orang mengisi formulir dengan cepat dan mudah."

Checkout Little Lemon menunjukkan bagaimana pengalaman yang sederhana dapat dengan cepat menjadi rumit. Halaman menampilkan kolom-kolom yang tidak perlu seperti Inisial Tengah, Telepon Malam dan Telepon Seluler, sementara memecah kolom-kolom tersebut, kolom Alamat memiliki tiga baris yang mengesankan dan sebuah Kota (bukan hanya satu untuk kode pos), ditambah lagi pengguna diharapkan untuk mengetik ulang alamat surel mereka.

Kolom-kolom yang wajib diisi dan kesalahan

Setelah mengisi kolom formulir dan mengklik kirim, sebuah pesan kesalahan diterima, mencegah pengguna untuk melanjutkan: "Nama depan harus minimal 4 karakter." Ada dua masalah yang harus diatasi berdasarkan tangkapan layar:

Nama depan bukan bidang yang wajib diisi karena tidak memiliki tanda bintang (*) untuk menunjukkan bahwa bidang formulir memerlukan input. Menggunakan tanda bintang untuk menunjukkan bidang yang harus diisi pada formulir, menurut Nielsen Norman Group, adalah cara sederhana untuk meningkatkan kegunaan. Bidang formulir memiliki jumlah karakter minimum. Detail kecil seperti ini memiliki dampak yang signifikan pada pengalaman pengguna akhir dalam desain yang berpusat pada pengguna. Setidaknya ada 220 nama tiga karakter. Dalam beberapa hal, hal ini tidak manusiawi karena sistem menganggap seseorang tidak nyata atau tidak valid.

Kolom yang harus diisi: solusi

Tanda bintang atau teks yang diperlukan menunjukkan bahwa bidang formulir diperlukan. Periksa apakah semua bidang formulir yang diperlukan sudah ditandai. Sertakan umpan balik untuk menyoroti kesalahan seperti kolom wajib diisi yang kosong, email yang tidak valid (misalnya, saat email tidak memiliki tanda '@'), dan sebagainya. Mengapa ada batasannya?

Batas karakter

Batas karakter adalah jenis batasan teknis yang harus disampaikan selama kolaborasi antara pengembang dan desainer. Batas karakter bawah dan atas akan diperlukan oleh sebuah sistem untuk dua alasan: keamanan dan penyimpanan.

validasi harus dilakukan pada input untuk memastikan bahwa input tersebut memiliki jenis, panjang, format, dan rentang yang benar. Hasilnya, saat pengguna masuk untuk mengakses informasi, informasi tersebut dapat divalidasi dengan database. Kerentanan yang memungkinkan pengguna untuk memasukkan kolom dengan bebas akan menghasilkan data yang tidak akurat dan kemungkinan bot membobol sistem Anda.

batas karakter maksimum digunakan dalam penyimpanan karena tidak mungkin untuk menyimpan nama yang panjangnya 1.073.741.823 byte. Nama terpanjang di dunia hanya sepanjang 747 karakter.

Batas karakter: sebuah solusi

Hapus persyaratan jumlah karakter minimum. Terapkan persyaratan karakter maksimum yang cocok untuk sebagian besar nama di dalam basis data - 50 karakter adalah tempat yang tepat untuk memulai. Mengapa harus ada batasan? Batasan karakter adalah jenis batasan teknis yang *harus* diungkapkan selama kolaborasi antara pengembang dan perancang. Sebuah sistem akan membutuhkan batas karakter bawah dan atas untuk keamanan dan penyimpanan.

Validasi harus dilakukan pada input untuk memastikan bahwa input tersebut memiliki jenis, panjang, format, dan rentang yang benar. Hasilnya, saat pengguna masuk untuk mengakses informasi, informasi tersebut dapat divalidasi terhadap database. Kerentanan yang memungkinkan pengguna untuk memasukkan kolom dengan bebas akan mengakibatkan data yang kacau dan kemungkinan bot membobol sistem Anda.

Email

Pengguna hanya memesan makanan, jadi apakah mereka perlu mengonfirmasi email mereka? Jika itu penting, pertimbangkan bahwa ketika pengguna mengonfirmasi email mereka di kolom yang terpisah, mereka sering melakukan kesalahan ketik. Persyaratan bahwa pengguna mengetikkan email mereka dalam dua bidang teks meningkatkan kemungkinan kesalahan ketik.

Konfirmasi email: sebuah solusi

Jadi, pendekatan terbaik adalah dengan mengirimkan tautan konfirmasi kepada pengguna. Ini adalah pendekatan yang paling ramah pengguna karena membutuhkan sedikit usaha dari pengguna.

Pembayaran tidak menjelaskan CVV

Seperti AVS, CVV atau CVC adalah akronim yang ambigu. Pastikan untuk menjelaskannya.

CVV: sebuah solusi

Gambar di bawah ini menggambarkan bahwa CVV terletak di bagian belakang kartu bank Anda, dan merupakan tiga digit terakhir yang dicetak.

Pikiran terakhir

Salah satu aspek yang paling membuat frustrasi dalam menggunakan internet adalah validasi formulir. Jika tidak jelas bagi pengguna apa yang mereka lakukan salah dan tidak ada cara mudah untuk memperbaikinya, mereka cenderung menyerah dan pindah ke situs lain saat mengisi formulir.