4 Borang Reka Bentuk UX Anda Perlu Tahu (Dengan Contoh)

Kami cenderung untuk memikirkan bentuk sebagai satu cara untuk mengumpul data pengguna, tetapi mereka juga satu cara, kadang-kadang satu-satunya cara, untuk pengguna kami berhubung dengan kami. Ia mungkin tidak senonoh untuk berfikir kita boleh membuat pengguna cinta mengisi borang, namun sudah pasti untuk mencari penyelesaian yang tidak mengganggu mereka terlalu banyak, dan membantu mereka sepanjang proses itu.

Semasa melayari internet, kita dapat mencari penyelesaian yang kadang-kadang mengejutkan yang secara betul diprogramkan, tetapi direka dengan cara yang paling mungkin membuat banyak pengguna meninggalkan laman web ini kerana pengalaman pengguna yang lemah.

Sekiranya borang kami direka dengan baik, kami akan dapat bukan sahaja untuk pengguna kami tetapi juga pasukan sokongan yang dapat menangani lebih kurang kesilapan input pengguna. Oleh itu, dalam artikel ini, kita akan melihat bagaimana kita boleh meminimumkan kesilapan masukan pengguna dan masih pastikan pengguna kami gembira.

Menjangkakan Keperluan Pengguna

Laman web dan aplikasi mempunyai asas & matlamat pengguna yang berbeza, dan bahkan lokasi yang sama boleh menjadi tuan rumah pelbagai bentuk yang mengumpul pelbagai jenis data, hanya untuk menamakan yang paling kerap:

• Borang masuk
• Borang pendaftaran
• Borang profil pengguna
• Borang pendaftaran surat berita
• Borang pemeriksaan
• Kajian pengguna
• Borang hubungan
• Borang komen
• Borang carian

Semua jenis bentuk ini memerlukan perkara yang berbeza. Apabila mereka bentuk borang checkout adalah penting untuk memastikan pengguna memberi jaminan tentang keselamatan, sedangkan dalam hal bentuk komen adalah idea yang baik untuk tambah emojis atau kaedah lain yang membolehkan pengguna untuk meluahkan perasaan sebenar mereka.

Walau bagaimanapun, jenis bentuk yang serupa mungkin perlu direka bentuk dengan berbeza, kerana semua laman web mempunyai mereka pangkalan pengguna yang unik. Sebelum memulakan proses reka bentuk, ia sentiasa menjadi idea yang baik menjangkakan apa yang pengguna perlukan, dan reka bentuk dengan sewajarnya.

Contoh: Masuk Sosial Menargetkan Keperluan Pengguna

Borang masuk Codepen mengandungi tiga log masuk sosial dengan Github di bahagian atas. Pilihan ini tidak munasabah untuk kebanyakan laman web.

Tetapi ia sesuai untuk Codepen, sebagai asas pengguna mereka terdiri daripada pemaju, ramai yang akan mahu log masuk dengan akaun Github mereka, atau sambungkan akaun pembangunan mereka dengan satu sama lain sekaligus.

Fikirkan Mobile-First

Pengguna mudah alih dan desktop mempunyai keperluan yang berbeza, tetapi sebagai melengkapkan borang adalah satu cabaran yang jauh lebih besar pada skrin mudah alih, menggunakan isyarat tangan daripada pada papan kekunci fizikal, a pendekatan pertama mudah alih boleh membawa kita lebih lanjut apabila kita mahu bentuk reka bentuk yang boleh digunakan.

Selain itu, banyak corak UI bentuk yang berfungsi dengan baik di mudah alih akan berfungsi dengan baik di desktop juga.

Contoh: Kawalan Tappable

Bentuk mudah alih berkualiti tinggi tidak boleh dibayangkan tanpa kawalan kelihatan di mana pengguna mudah alih boleh mengetik dengan mudah dengan jari mereka.

Borang pendaftaran surat berita persidangan reka bentuk web Satu Acara Selain menyesuaikan dengan cara pengguna mudah alih mengakses skrin - ia mengandungi dua medan input yang mudah dikesan dan a butang bersaiz hujung jari.

Medan masukan teks lebih tinggi seperti biasa sehingga pengguna mudah alih dapat dengan mudah mengetuknya, dan butang besar, oranye dengan ikon centang lebih lanjut mendorong pengguna untuk menyerahkan formulir.

Versi desktop laman web ini menggunakan reka bentuk bentuk yang sama, kerana ia juga kelihatan baik dan berfungsi dengan baik pada skrin yang lebih besar.

Contoh: Input Boleh Dibeli

Apabila mereka bentuk borang untuk mudah alih, selalu penting untuk mempertimbangkan bagaimana kami boleh meminimumkan ruang yang kami gunakan. The input yang boleh dibuang Corak reka bentuk UI telah menjadi sangat popular sejak kebelakangan ini, dan ia berfungsi dengan baik pada mudah alih.

Booking.com memanfaatkan corak ini dalam bentuk carian di tapak mudah alihnya. Apabila pengguna menjejak ke dalam medan carian, ia berkembang untuk biarkan lebih banyak ruang untuk gerak isyarat, dan senarai pilih dengan cadangan juga muncul di bawahnya.

Apabila pengguna keluar dari medan, ia mengecut, dan maklumat tambahan hilang.

Contoh: Morphing Button

Butang morphing ambil corak input yang dibelanjakan satu langkah lebih jauh, kerana pengguna pertama kali melihat butang, yang kemudiannya morphs menjadi satu bentuk apabila mereka mengetuknya.

Tangkapan skrin di bawah adalah dari artikel The Startup yang cemerlang dalam reka bentuk bentuk yang inovatif, yang memberikan banyak lagi penyelesaian kreatif yang lain.

Memudahkan Kemasukan Input

Borang panjang cenderung menghalang pengguna. Yang terbaik yang boleh kita lakukan ialah hanya meminta input yang kita perlukan. Ini bukan hanya penting dari perspektif pengalaman pengguna, tetapi pengguna juga boleh teragak-agak untuk memberikan terlalu banyak maklumat peribadi kerana kebimbangan privasi.

Kadang-kadang, bagaimanapun, kita masih ada mesti pergi bersama dengan bentuk yang lebih lama. Dalam kes ini, idea yang baik potong ke dalam potongan kecil, dan berkhidmat ketulan sebagai skrin berturut-turut.

Banyak laman e-Perdagangan (contohnya Amazon) menggunakan penyelesaian ini untuk mengurangkan kadar peninggalan kereta.

Sekiranya kita ingin melengkapkan bidang borang, peraturan adalah untuk mengurangkan kedua-dua gangguan dan tindakan pengguna sebanyak yang mungkin.

Contoh: Pemilih Input peribadi

Pemetik kandungan yang berbeza, seperti pemetik tarikh atau pemetik warna, bukan sahaja memudahkan untuk mengambil input yang betul, tetapi mereka juga membuat borang lebih menarik, dan ketara mengurangkan kesilapan pengguna.

Aplikasi pengambilan senarai Todoist memberi petua peribadi di dalam pemetik tarikhnya apabila pengguna berlegar sepanjang hari.

Sebagai contoh pada tangkapan skrin di bawah, pengguna dapat melihat bahawa untuk 31 Ogos dia sudah mempunyai 2 tugas yang sewajarnya, dan boleh mengambil maklumat ini ketika membuat keputusan tepat untuk tugas. Idea yang sangat baik untuk aplikasi di mana produktiviti adalah kebimbangan utama pengguna.

Contoh: Seret dan Drop-Input

Reka bentuk drag-and-drop biasanya berfungsi dengan baik dengan medan muat naik fail, terutama di mana pengguna sepatutnya memuat naik imej.

Mereka mungkin tidak mengurangkan tindakan pengguna yang lebih banyak berbanding dengan Upload biasa fail fail, tetapi mereka menjadikannya lebih mudah untuk pilih file mana yang ingin dimuat naik oleh pengguna, oleh itu mengurangkan kemungkinan menghantar fail yang salah.

WordPress.com menyediakan antara muka input pengguna drag-and-drop yang elegan dan intuitif dalam bentuk editor posnya. The kecil kecil dan juga perwakilan visual fail yang telah dimuat naik terus membantu pengguna dengan cepat melaksanakan muat naik.

Contoh: Overlay untuk Alih Keluar Kegagalan

Jika pengguna terganggu semasa melengkapkan borang kami, mereka lebih cenderung kepada kesilapan, dan juga menjadi lebih mudah tersinggung

Lapisan kandungan adalah alternatif yang hebat untuk reka bentuk bentuk minimalis. Mereka digunakan oleh laman web yang lebih kompleks yang ingin memaparkan pelbagai jenis maklumat pada skrin yang sama.

Pada tangkapan skrin di bawah, anda boleh melihat versi desktop Booking.com. Apabila pengguna berlegar pada borang carian yang lain, kandungannya akan diterima diliputi oleh lapisan kelabu untuk membantu mereka teruskan fokus pada proses mengisi borang.

Beri Maklumbalas kepada Pengguna

Memberi maklum balas yang betul pada masa yang sesuai boleh meningkatkan pengalaman pengguna dengan ketara.

Dalam bentuk reka bentuk, ada dua jenis maklum balas pengguna:

1. Maklumbalas yang diberikan sebelum ini borang penyerahan - untuk mengurangkan kesilapan dan bentuk pengabaian, seperti pelacak kemajuan, pengesahan input segera yang segera memberi ganjaran kepada pengguna untuk input yang betul, atau alat penolong
2. Maklumbalas yang diberikan selepas borang penyerahan - untuk membolehkan pengguna mengetahui mereka melakukan kesalahan, seperti mesej ralat

Jenis maklum balas pengguna pengguna kami sangat bergantung pada ciri khalayak target kami, dan tujuan laman web kami.

Contoh: Tracker Kemajuan

Borang lebih daripada satu halaman, seperti kaji selidik dan kebanyakan borang pembayaran e-Niaga boleh mengambil leverage pelacak kemajuan corak reka bentuk. Pelacak kemajuan memberikan maklum balas visual segera kepada pengguna mengenai status mereka, dan mendorong mereka untuk meneruskan proses tersebut.

Aplikasi web pencipta SnapSurveys survey menunjukkan sedikit pelacak kemajuan tepat di atas butang penyerahan supaya pengguna boleh semulajadi menangkapnya.

dia maju pelacak tidak menggunakan label apa pun, tetapi cara ia direka membuat matlamatnya jelas - bilangan bulatan menunjukkan bilangan langkah, langkah yang sudah dilaksanakan menjadi biru, dan pengguna dapat melihat berapa banyak langkah yang masih ada di depan mereka.

Contoh: Pengesahan Masa Nyata

Kegunaan peruncit kosmetik Body Shop pengesahan masa nyata pada borang Profil Penggunanya untuk menghapuskan kesilapan dan memperbaiki UX proses penyempurnaan borang.

Input diperiksa semasa pengguna melengkapkan borang, dan jawapan yang betul dan salah segera ditunjukkan oleh ikon mudah dibezakan sedikit lagi di sebelah kanan tetapi masih di kawasan yang kelihatan.

Contoh: Petua Ekspresif

Mikrofon difahami juga merupakan bahagian penting dari maklum balas pengguna yang berjaya dalam reka bentuk bentuk. Secara takrif, mikrokopi tapak web terdiri daripada potongan kecil teks digunakan dalam elemen yang berlainan - label, butang, mesej ralat, petua, dan lain-lain.

Dalam borang masuknya, kumpulan perbankan Barclay membalas kepada pengguna yang mungkin bertanya dengan bantuan petua yang direka dengan baik yang termasuk mudah difahami mikrokopi.

Petua tersembunyi di belakang sedikit? ikon bukan untuk mengganggu pengguna yang tahu bagaimana untuk melengkapkan borang login, tetapi untuk sentiasa hadir untuk pengguna yang tidak pasti.

Beberapa petua walaupun mengandungi sedikit penglihatan kad debit anotasi supaya pengguna dapat dengan mudah mencari data yang mereka perlu masukkan ke dalam borang login.