Halo, Habr! Saya hadir untuk Anda terjemahan artikel "
10 Tips Merancang Bentuk Sempurna ".
Bentuk memainkan peran portal antara pengguna dan sistem dan seringkali menjadi dasar halaman. Otorisasi, pendaftaran, pembaruan status, input data pembayaran atau alamat pengiriman dikendalikan oleh formulir. Untuk toko online, formulir yang dirancang dengan baik memainkan peran penting. Dari pengalaman saya sendiri, desain yang bagus menggandakan penjualan online.
Karena formulir menjalankan fungsi penting untuk antarmuka pengguna, ada aturan untuk desainnya.
1. Mulai dengan memasukkan data
Mulai dengan elemen paling sederhana - bidang teks. Ini adalah komponen paling umum dari banyak bentuk, jadi jika Anda melakukannya dengan benar, Anda berada di tengah jalan.
Ada 3 elemen utama untuk formulir: bidang teks, judul, dan pesan kesalahan. Apa pun desain yang Anda pilih untuk membuatnya, pastikan bahwa pengguna tahu informasi apa yang diperlukan, dan jika ada kesalahan, bagaimana Anda bisa menghilangkannya.
Judul harus di atas.
Tren lahir dan mati. Sekarang modis untuk menempatkan placeholder sebagai tajuk. Penggunaannya, meskipun tidak salah, menimbulkan beberapa masalah UX (catatan: "pengalaman pengguna"). Faktanya adalah bahwa ketika bidang diisi, pengguna tidak melihat tajuk.
Berita utama harus selalu dilihat. Karena itu, mereka ditempatkan di atas.
Mengapa di atas, dan tidak di sebelah kiri bidang entri data?
Ketika tajuk berada di sebelah kiri bidang teks, pada layar ponsel elemen-elemen akan bergerak relatif satu sama lain. Pertama-tama pikirkan tentang bagaimana semuanya akan terlihat di layar ponsel.
Bantu pengguna dengan menentukan contoh di placeholder.
Argumen lain yang mendukung penempatan pos di atas bidang entri data adalah bahwa pengguna membaca informasi dalam garis vertikal, karena menurut penelitian, ini lebih cepat daripada memindahkan tampilan dari kolom kiri ke kanan.
2. Pesan kesalahan dan peringatan
Untuk bidang teks standar, pesan kesalahan diperlukan.
Berikut adalah 3 tips untuk mendesainnya:
Kesalahan terjadi karena klien dan server.
Di sisi klien, masalah terdeteksi ketika bidang yang diperlukan tidak diisi, atau alamat email yang dimasukkan salah:
- Server memeriksa apakah email yang diberikan ada;
- Pengguna diberitahu tentang kesalahan klien sebelum mengirimkan formulir. Diperlukan kesalahan untuk mencegah pengiriman informasi yang salah oleh pengguna.
Periksa pesan kesalahan
Berikan informasi di bidang mana kesalahan itu terjadi. Untuk alasan keamanan, beberapa pengembang tidak menunjukkan kesalahan dalam email atau kata sandi selama otorisasi, dan ini benar-benar normal. Tetapi ketika pengguna berlangganan buletin atau memasukkan alamatnya selama pembelian, tunjukkan padanya bidang mana yang diisi secara tidak benar dan mengapa.
Setiap kali Anda mengisi bidang teks, periksa bagaimana kesalahan akan terlihat sebelum dan setelah Anda mengklik tombol kirim.
Gunakan peringatan
Memberitahu pengguna jika bidang memerlukan kriteria tertentu, misalnya, jika kata sandi harus mengandung sejumlah karakter tertentu atau menggabungkan angka dan huruf.
Tunjukkan seberapa kuat kata sandi, apakah email terdaftar di situs, atau jika login sedang sibuk.
3. Gunakan bentuk yang cocok
Secara visual, bentuknya terlihat lebih ringkas jika kombinasi digunakan. Pertimbangkan bagaimana pengguna akan menggunakan formulir dari telepon.
Jika semua bidang adalah teks, pengguna harus terus-menerus membuka keyboard.
Untuk perubahan, minta pengguna untuk beralih dari bidang teks ke dropdown (catatan: "daftar drop-down") atau ke radiobutton dan sebaliknya.
Pikirkan tentang bagaimana pengguna memegang telepon, dan bagaimana menghilangkan ketidaknyamanan yang disebabkan oleh kombinasi bidang yang sama untuk memasukkan data.
4. Tombol Radio, Dropdown, dan Kotak Centang
Terkadang ada kebingungan ketika memilih radiobutton, dropdown, dan checkbox.
Radiobutton sangat bagus untuk memberikan sejumlah kecil kemungkinan jawaban. Pilih kemungkinan jawaban di muka atau lewati bidang ini.
Radiobutton adalah solusi terbaik ketika Anda hanya dapat memilih satu opsi.
Ketika lebih banyak elemen dibutuhkan, dropdown akan menjadi pilihan yang lebih cocok (dalam praktiknya - lebih dari 5-6 jawaban). Anda juga dapat memilih item default atau mengatur placeholder “Pilih item”.
Kotak centang adalah pilihan terbaik ketika Anda hanya perlu mengisi satu bidang (misalnya, syarat dan ketentuan), atau lebih dari satu jawaban diberikan. Jika Anda ingin memilih surat iklan mana yang akan dikirimkan kepada pengguna, kotak centang akan memungkinkan Anda membuat lebih dari satu pilihan.
Menggunakan kotak centang alih-alih radiobutton seharusnya tidak membatasi Anda dalam keputusan desain UI Anda.
Sebagai seorang desainer, Anda memiliki cukup kebebasan dalam memilih bagaimana elemen UI (catatan: "antarmuka pengguna") akan ditampilkan di layar. Sekalipun Anda ingin mengubah entah bagaimana kotak centang sehingga lebih menarik, ini seharusnya tidak memengaruhi persepsi pengguna.
Alih-alih menulis teks di depan lingkaran kecil, Anda dapat membuat gambar atau ikon untuk dipilih.
5. Jika memungkinkan, kecualikan bidang opsional
Jika tujuan bisnis adalah untuk menjual produk, maka tujuan Anda sebagai desainer adalah untuk menghilangkan sebanyak mungkin ketidaknyamanan antara pengguna dan sistem.
Menghapus bidang yang tidak perlu akan memungkinkan pengguna melakukan lebih sedikit usaha.
Saat melamar, penting untuk mengetahui berbagai jenis metode pembayaran dan pengiriman.
Jika departemen penjualan ingin mengetahui preferensi pelanggan, Anda dapat melakukan ini dengan email konfirmasi.
Selalu mencari cara untuk menggunakan bidang minimum yang terlihat.
Jika Anda ingin mengoptimalkan toko online Anda, minimalkan jumlah bidang untuk alamat pengiriman dan checkout.
Jika Anda melihat antarmuka untuk memesan tiket pesawat, tunjukkan kepada pengguna jumlah bidang terkecil yang diperlukan untuk melihat penerbangan yang tersedia.
Maka Anda dapat menawarkan lebih banyak kondisi: jumlah tas, dll.
6. Gunakan pelengkapan otomatis untuk formulir besar
Bergantung pada nama jalan, mengisi bilah alamat bisa memakan banyak waktu, terutama dari telepon. Menulis alamat dengan benar bisa jadi lebih sulit.
Pertimbangkan untuk menggunakan GoogleMapsAPI sehingga nama jalan terisi secara otomatis. Ini berarti bahwa pengguna hanya perlu memasukkan beberapa karakter dan memilih jalan yang diinginkan dari daftar yang diusulkan. Anda juga dapat secara otomatis mengisi kode pos berdasarkan nama jalan, tetapi kami akan membahasnya nanti.
7. Gunakan logika kondisional
Gunakan logika untuk memperkenalkan beberapa informasi bagi pengguna untuk membuat hidupnya lebih mudah.
- Jika negara pengguna diketahui, desain mungkin berisi bidang tambahan ("negara bagian" jika Anda berada di AS, "daerah" di Irlandia, dll.)
- Gunakan kode pos untuk memasukkan nama kota, negara bagian, atau provinsi
- Jika Anda menghitung negara pengguna berdasarkan alamat IP, apakah mungkin memasukkan kode negara di bidang input telepon?
Jika Anda ingin mengisi beberapa bidang untuk pengguna, selalu beri dia kesempatan untuk memasukkan informasi sendiri. Ada kemungkinan Anda salah dalam sesuatu.
Misalnya, Anda menggunakan GoogleMapsAPI untuk menemukan jalan di Jerman. Mengetahui nama jalan, Anda bisa mendapatkan kode area. Namun, beberapa jalan di Jerman cukup besar, sehingga mencakup kode yang berbeda, sehingga informasinya mungkin salah dalam kasus jalan perbatasan. Selalu berikan kemampuan kepada pengguna untuk memasukkan data jika perlu.
Menggunakan logika kondisional untuk semua negara di dunia akan membutuhkan terlalu banyak pekerjaan, jadi Anda harus menyadari arti dari upaya Anda. Jelajahi negara tempat pesanan paling sering datang, dan mulailah mengoptimalkannya. Jika ini mengarah pada pendapatan yang lebih tinggi, lakukan hal yang sama dengan negara-negara lain.
8. Gunakan Placeholder dengan benar
Kami sebelumnya membahas bahwa placeholder tidak selalu digunakan, karena menghilang ketika memasukkan informasi. Tetapi kami tidak mempertimbangkan cara lain untuk menggunakannya yang dapat membantu pengguna.
Placeholder adalah peluang bagus untuk menunjukkan kepada pengguna cara memasukkan informasi. Contoh yang baik adalah memasukkan telepon. Apakah pengguna perlu memasukkan kode negara? Atau kode kota?
Saat Anda membutuhkan nomor telepon atau kartu dalam format tertentu, beri tahu pengguna tentang hal ini dengan memberikan contoh pengisian placeholder. Ini adalah cara terbaik untuk memperbaiki kesalahan dengan hanya menunjukkan informasi apa yang dibutuhkan: kode negara, dll.
9. Laporkan langkah selanjutnya.
Jika setelah mengisi formulir lain untuk input, beri tahu pengguna.
Alih-alih "Berikutnya" atau "Bayar", Anda dapat menulis "Periksa pesanan" atau "Pembayaran PayPal".
Tambahkan pesan yang menunjukkan langkah selanjutnya setelah mengklik tombol. Apakah proses pemesanan akan selesai atau apakah pengguna memiliki waktu untuk memeriksa semuanya? Apakah dia akan membayar?
Selalu mencari cara untuk memberikan kenyamanan kepada pengguna, terutama jika terhubung dengan rekening banknya.
Saya merasa jengkel setiap kali saya membeli di Amazon karena saya tidak mendapatkan semua informasi, termasuk biaya pengiriman, hingga langkah terakhir. Jujurlah dengan pengguna Anda. Dapatkan kredibilitas dengan memberikan informasi yang diperlukan pada setiap langkah pengisian, jelaskan apa yang diharapkan dengan penggunaan di masa depan.
10. Terus mencari cara untuk mengoptimalkan
Setelah Anda meluncurkan formulir baru yang cerah, terus menganalisanya. Jika Anda menemukan bahwa banyak pengguna meninggalkan situs, cari tahu alasannya. Lakukan survei untuk mencari tahu mengapa pengguna merasa tidak nyaman, kemudian bekerja untuk menyelesaikan ketidaknyamanan ini. Bagi perancang, karya itu tidak pernah "selesai sepenuhnya."
Kesimpulan
Terkadang desain formulir tidak begitu menarik, tetapi jika dilakukan dengan baik, mereka dapat mengubah persepsi situs atau aplikasi oleh pengguna. Rancang formulir dengan hati-hati untuk memudahkan pengguna. Jelas berikan arahan lebih lanjut, berikan petunjuk dengan peringatan dan pengganti, dan sarankan lengkapi otomatis agar pengguna tidak mengetik terlalu banyak.