10 Tips untuk Merancang Bentuk Sempurna

Artikel ini awalnya diterbitkan di onepixelout.com

Formulir adalah portal antara pengguna dan sistem, dan sering kali menjadi fokus halaman web. Login, registrasi, perbarui status Anda, masukkan informasi pembayaran dan alamat pengiriman - semua ini ditangani menggunakan formulir. Untuk situs eCommerce, formulir yang dibuat dengan baik dapat membuat semua perbedaan.

Dalam pengalaman saya, meningkatkan desain bentuk tunggal bahkan dapat menggandakan penjualan toko online.

… Dan saya suka mendesain formulir.

Karena bentuk adalah aspek fungsional dari antarmuka pengguna, ada beberapa aturan terkait dengan cara mendesainnya. Hari ini kita akan melihat tips dan praktik terbaik dalam hal mendapatkan formulir untuk melakukan semua kerja keras, sehingga pengguna tidak harus melakukannya.

1. Mulai dengan Input

Mulai dengan elemen formulir yang paling umum: bidang input teks. Ini adalah komponen paling umum dari sebagian besar bentuk, jadi lakukan dengan benar dan Anda sudah setengah jalan ke sana.

Ada 3 elemen dasar dari setiap input formulir: bidang teks, dan label, dan pesan kesalahan. Apa pun cara yang Anda pilih untuk merancang blok bangunan paling mendasar ini, pastikan selalu ada cara bagi pengguna untuk mengetahui informasi mana yang dibutuhkan, dan jika ada kesalahan - bagaimana mereka dapat pulih dari kesalahan itu. Yang membawa kita dengan rapi di mana menempatkan label.

Label Go On Top

Tren datang dan pergi. Ada tren yang cenderung menggunakan placeholder sebagai label. Meskipun menggunakan penampung untuk label tidak selalu salah, mereka menghadirkan beberapa masalah UX. Masalahnya adalah jika pengguna mengetuknya, labelnya hilang. Jika pengguna kembali ke formulir ini dan input difokuskan karena kesalahan, label juga hilang.

Label harus terlihat setiap saat. Karena alasan ini, label berada di atas.

Mengapa bagian atas dan bukan bagian kiri dari bidang input?

Ketika label ada di sebelah kiri bidang, ini perlu menumpuk satu di atas yang lain di ponsel. Pikirkan dulu mobile.

gambar dari giphy

Arahkan pengguna untuk memasukkan informasi yang benar dengan placeholder, dan gunakan label untuk tujuan penggunaannya.

Argumen lain untuk menempatkan label di atas bidang input mereka adalah bahwa pembaca memiliki garis vertikal linear untuk membaca informasi, yang penelitian telah menunjukkan lebih cepat daripada melompat dari kolom kiri ke kolom kanan. Jadi buat segalanya lebih mudah bagi pengguna Anda - garis yang bersih bagi mereka untuk membaca hal-hal yang perlu mereka masukkan untuk bergerak maju dengan situs web Anda.

2. Negara Kesalahan dan Peringatan

Untuk setiap bidang input teks standar Anda akan memerlukan pesan kesalahan yang sesuai. Berikut adalah beberapa kiat tentang merancang untuk kasus kesalahan:

Pesan kesalahan dapat berasal dari klien atau server. Sisi klien dapat mendeteksi hal-hal seperti ketika bidang wajib tidak diisi, atau ketika alamat email dalam format yang salah. Sisi server akan dapat mengetahui apakah alamat email saat ini ada. Ketahui mana yang merupakan klien dan mana yang merupakan server. Kesalahan sisi klien harus diberikan kepada pengguna sebelum formulir dikirimkan sebagai petunjuk. Kesalahan sisi klien harus mencegah pengguna mengirimkan informasi yang salah.

Pandai dengan pesan kesalahan.

Ketika pengguna membuat kesalahan, beri mereka informasi tentang bidang mana yang menyebabkan kesalahan. Untuk keamanan, beberapa pengembang mungkin tidak ingin menentukan saat masuk apakah email atau kata sandi salah, dan itu tidak masalah. Tetapi ketika pengguna hanya mendaftar untuk email atau memasukkan alamat mereka di kasir, beri tahu mereka bidang mana yang salah dan mengapa.

Setiap kali Anda mendesain input teks, perhatikan juga bagaimana pesan kesalahan akan terlihat sebelum dan setelah pengguna menekan "Kirim".

Sertakan Peringatan

Jika bidang tertentu memerlukan kriteria tertentu - misalnya, kata sandi perlu memiliki sejumlah karakter dan menggabungkan angka dan huruf, beri tahu pengguna. Anda dapat memasukkan cara untuk menunjukkan seberapa kuat kata sandi saat mereka memasukkannya. Mungkin bermanfaat juga untuk menunjukkan apakah email sudah terdaftar, atau nama pengguna sudah diambil.

3. Kelompok Suka dengan Suka

Secara visual formulir akan terlihat lebih rapi ketika Anda mengelompokkan suka dengan suka, tetapi dari sudut pandang pengalaman pengguna juga lebih baik. Pikirkan tentang bagaimana pengguna seluler akan berinteraksi dengan formulir ini. Jika bidang input teks bersamaan, pengguna harus tetap menggunakan keyboard untuk menyelesaikan kolom.

Jika Anda meminta pengguna untuk beralih dari bidang input teks ke dropdown, ke radio dan kembali ke bidang input teks, ini lebih bergeser dari sisi pengguna. Pikirkan tentang bagaimana pengguna memegang perangkat mobile mereka, dan bagaimana ini dapat mengurangi gesekan dengan mengelompokkan bidang input yang sama bersamaan.

4. Tombol Radio, Dropdown dan Kotak Centang

Terkadang ada kebingungan tentang kapan saatnya menggunakan tombol radio, dropdown dan kotak centang.

Tombol radio adalah cara terbaik untuk menunjukkan kepada pengguna sejumlah kecil kemungkinan jawaban. Sebagai perancang, Anda dapat memilih dulu jawaban, atau membiarkannya kosong. Tombol radio adalah pilihan terbaik ketika hanya satu opsi yang dapat dipilih.

Ketika ada banyak kemungkinan jawaban, dropdown lebih cocok (aturan praktis saya adalah jika ada lebih dari 5 atau 6). Anda dapat memilih sebelumnya jawaban, atau meninggalkan item teratas sebagai "Silakan Pilih" untuk memerintahkan pengguna untuk membuat pilihan.

Kotak centang adalah pilihan terbaik ketika Anda memiliki satu kotak untuk dicentang (seperti syarat dan ketentuan) atau Anda memiliki lebih dari satu pilihan yang memungkinkan. Jika Anda ingin mengetahui email pemasaran mana yang akan dikirimkan kepada pengguna, sekelompok kotak centang akan memungkinkan Anda membuat lebih dari satu pilihan.

Menggunakan kotak centang alih-alih tombol radio seharusnya tidak membatasi Anda dalam keputusan desain antarmuka pengguna Anda. Sebagai perancang, Anda memiliki banyak fleksibilitas tentang bagaimana elemen-elemen UI ini dapat muncul di layar. Jika Anda masih ingin menata kotak centang untuk membuatnya terlihat lebih menarik, ini seharusnya tidak berdampak pada pengalaman pengguna. Alih-alih memiliki daftar teks di sebelah lingkaran kecil, Anda dapat membuatnya lebih menarik dengan merancang gambar atau ikon yang dapat dipilih.

5. Bila Mungkin, Hilangkan Kolom Opsional

Jika tujuan bisnis adalah untuk membuat pengguna membeli sesuatu dari situs web Anda, tujuan Anda sebagai desainer adalah untuk menghilangkan sebanyak mungkin gesekan antara pelanggan dan sistem. Mengambil bidang yang tidak perlu akan membuat formulir tampak seperti kurang berfungsi di sisi pengguna.

Ini penting untuk diketahui saat merancang segala bentuk checkout atau alamat pengiriman. Jika departemen pemasaran ingin mengetahui minat pelanggan sehingga mereka tahu email pemasaran mana yang akan dikirim, mungkin ada cara lain untuk menemukan informasi ini setelah pelanggan membeli barang-barang mereka (misalnya, pada halaman yang mereka kunjungi ketika mereka “mengkonfirmasi surel").

Selalu mencari cara kreatif untuk membuat hanya jumlah bidang minimum yang terlihat. Jika tujuan Anda adalah untuk mengoptimalkan konversi di situs e-niaga, fokuslah pada meminimalkan jumlah bidang dalam formulir untuk alamat pengiriman dan checkout. Jika Anda mendesain antarmuka untuk pemesanan penerbangan, tunjukkan kepada pengguna jumlah minimum bidang yang mereka butuhkan untuk melihat penerbangan yang tersedia. Setelah Anda menginvestasikan pengguna Anda, Anda dapat mulai menemukan lebih banyak informasi periferal yang mungkin mereka butuhkan - seperti jumlah tas dll.

6. Gunakan Pelengkapan Otomatis untuk Bidang yang Lebih Panjang

Bidang nama jalan mungkin, tergantung pada nama jalan, membutuhkan banyak waktu untuk mengetik - khususnya pada perangkat seluler. Mengetik dengan benar bisa menjadi lebih sulit.

Anda dapat berpikir tentang menggabungkan Google maps API untuk membuat nama jalan otomatis dilengkapi. Ini berarti bahwa pengguna hanya perlu mengetikkan beberapa karakter pertama, dan memilih jalan kanan dari daftar drop-down kemungkinan nama jalan. Bahkan mungkin untuk mengisi secara otomatis kode ZIP juga, hanya dengan memiliki nama jalan, tetapi kita akan membahas ini pada poin berikutnya.

7. Gunakan Logika Bersyarat

Ada beberapa cara untuk menggunakan logika untuk memasukkan beberapa informasi atas nama pengguna, membuat hidup mereka sedikit lebih mudah.

  • Jika Anda tahu negara pengguna, desainnya dapat menentukan sebelumnya bidang tambahan yang mungkin mereka butuhkan ('sebutkan' jika mereka berada di AS, 'county' jika mereka berada di Irlandia, dll.)
  • Anda dapat menggunakan kode pos untuk mengisi nama kota, negara bagian, atau provinsi.
  • Jika Anda memiliki negara berdasarkan alamat IP, dapatkah Anda mengisi kode negara di bidang nomor telepon?

Jika Anda akan mengisi bidang atas nama pengguna, selalu beri mereka cara untuk mengedit informasi ini. Mungkin saja Anda salah.

Misalnya — Anda dapat menggunakan Google Maps API untuk mendapatkan nama jalan Jerman. Dengan mengetahui nama jalan, Anda juga bisa mendapatkan kode area. Namun, beberapa jalan di Jerman cukup besar untuk menjangkau kode area yang berbeda, sehingga informasinya akan salah untuk sejumlah kecil kasus tepi. Selalu berikan opsi kepada pengguna untuk mengedit data jika perlu.

Menjelajahi logika kondisional untuk setiap negara di dunia akan menjadi pekerjaan yang sangat besar - jadi cerdaslah dengan upaya Anda. Lihatlah negara-negara di mana Anda mendapatkan pesanan atau lalu lintas terbanyak, dan mulailah mengoptimalkannya terlebih dahulu. Jika Anda melihat hasil yang baik, Anda dapat terus menerapkan logika kondisional yang sama untuk lebih banyak negara.

8. Dapatkan Cerdas dengan Placeholder

Sebelumnya kami berbicara tentang bagaimana seharusnya kami tidak menggunakan placeholder sebagai label bidang teks, karena itu akan hilang ketika pengguna mengetuknya. Kami tidak menjelajahi cara-cara lain tempat penampung dapat membuat pengalaman pengguna lebih baik.

Placeholder menawarkan kesempatan yang rapi untuk menunjukkan kepada pengguna cara memformat informasi mereka. Nomor telepon adalah contoh yang bagus. Haruskah pengguna memasukkan kode negara mereka? Atau kode area?

Saat Anda membutuhkan nomor telepon dalam format tertentu, atau nomor kartu kredit untuk menyertakan tanda hubung, Anda dapat memberi tahu pengguna informasi ini dengan memberikan contoh di placeholder. Ini adalah cara yang keren untuk meminimalkan kesalahan dengan secara jelas menyatakan bahwa Anda memerlukan kode negara dll.

9. Mengkomunikasikan Langkah Berikutnya dengan Jelas

Jadikan tombol Anda bekerja lembur dengan mengomunikasikan apa yang akan terjadi selanjutnya. Jika ada langkah tambahan untuk diselesaikan, buat ini juga diketahui pengguna.

Alih-alih menggunakan "Berikutnya" atau "Checkout", Anda bisa mengatakan "Tinjau Pesanan" atau "Bayar Sekarang dengan Paypal". Tambahkan tingkat komunikasi lain dengan secara khusus memberi tahu pengguna apa yang akan terjadi ketika mereka mengetuknya. Apakah tombol ini menyelesaikan pesanan mereka, atau akankah mereka punya waktu untuk memeriksanya? Apakah mereka akan dibawa ke login Paypal?

Selalu mencari cara untuk membuat pengguna merasa nyaman selama pengalaman, terutama jika itu mempengaruhi saldo bank mereka.

Saya masih cemas setiap kali saya menggunakan checkout Amazon karena mereka tidak memberi tahu saya jumlah penuh termasuk biaya pengiriman sampai langkah terakhir. Bersikap transparan dengan pengguna Anda. Dorong kepercayaan dengan memberi mereka informasi yang mereka butuhkan di setiap langkah, dan jelaskan apa yang diharapkan ketika mereka melakukan panggilan untuk bertindak.

10. Terus Mencari Cara untuk Dioptimalkan

Setelah Anda meluncurkan formulir baru Anda yang cerah dan berkilau - terus melihat analitiknya. Jika Anda menemukan banyak orang terpental saat melihatnya, cari tahu alasannya. Lakukan pengujian pengguna untuk melihat di mana pengguna Anda merasa tidak nyaman, dan bekerja untuk menghilangkan gesekan itu. Sebagai seorang desainer, seringkali pekerjaan kita tidak pernah benar-benar 'selesai'.

Kesimpulannya

Bentuk kadang-kadang bukan hal yang sangat menyenangkan untuk dirancang, tetapi ketika dilakukan dengan baik mereka bisa membuat perbedaan besar bagi pengalaman pengguna situs web atau aplikasi. Rancang formulir Anda untuk bekerja lebih keras sehingga pengguna tidak perlu melakukannya.

Berkomunikasi dengan jelas tentang ajakan bertindak, memberikan petunjuk kepada pengguna melalui peringatan dan placeholder, dan menawarkan pelengkapan otomatis. Selalu mencari cara baru untuk melakukan lebih banyak pekerjaan berat, sehingga pengguna memiliki pengalaman tanpa gesekan.