Hal Yang Diharapkan Dari Lokakarya Smashing: Kelas Master Desain Formulir

Butuh waktu sekitar enam bulan untuk menulis konten lokakarya. Setelah banyak pertimbangan, saya memutuskan untuk menyusunnya seperti yang saya lakukan di buku saya, Form Design Patterns.

Itu adalah lokakarya 4 hari yang dibagi menjadi dua segmen 45 menit, dengan istirahat 15 menit diikuti oleh Q&A 30 menit dengan pekerjaan rumah opsional di antara hari-hari. Setiap hari kami berangkat untuk memecahkan satu masalah besar. Ini memberikan cara untuk mendekati masalah seperti yang kita lakukan dalam kehidupan nyata: dengan menganalisis dan mendiskusikan pilihan sebelum sampai pada solusi yang baik.

Secara keseluruhan, itu adalah pengalaman yang menyenangkan. Saya belajar banyak dan bersenang-senang mengajar dan mengobrol dengan semua orang. Saya sudah menantikan yang berikutnya yang sementara direncanakan untuk akhir 2021.

Beberapa Sorotan Setiap Hari

Berikut adalah ikhtisar singkat setiap hari termasuk beberapa yang menarik.

Hari 1: Memaku Dasar-dasar Desain Formulir

Pada hari pertama, kami merancang formulir pendaftaran sederhana dari awal. Ini memberikan cara sempurna untuk memahami dasar-dasar desain formulir. Itu mencakup hal-hal seperti penentuan posisi label , gaya formulir, dan tipe input. Pada akhir hari pertama, kami memiliki formulir pendaftaran yang mencakup dasar-dasar dan membuat formulir sesederhana mungkin bagi pengguna.

Sorotan saya dari sesi ini adalah latihan protokol pertanyaan . Alih-alih berfokus pada cara menghemat ruang secara artifisial pada formulir (dengan menggunakan hal-hal seperti label float, tooltips, label rata kiri, dan teks placeholder), kami menggunakan spreadsheet untuk membantu mengetahui mengapa setiap pertanyaan diajukan dan cara terbaik untuk memperoleh menjawab.

Untuk formulir pendaftaran kami, ini berarti analisis menyeluruh untuk menanyakan nama, alamat email, dan kata sandi seseorang. Dan pada akhir latihan kami telah mengurangi separuh jumlah bidang formulir dan memiliki pembenaran yang jelas untuk bidang yang tersisa.

Hari 2: Validasi Formulir Dan Menulis Pesan Kesalahan yang Baik

Pada hari kedua, kami mengambil formulir pendaftaran yang dirancang dengan baik dan melihat bagaimana membantu pengguna pulih dari kesalahan dalam dua cara:

1. Kami memutuskan kapan harus memvalidasi formulir dan bagaimana menampilkan pesan kesalahan;
2. Kami belajar cara menulis pesan kesalahan yang jelas, ringkas, konsisten, dan spesifik yang membantu pengguna kembali ke jalurnya dengan cepat.

Sorotan saya dari sesi ini adalah latihan untuk mendesain ulang pesan kesalahan pada formulir pendaftaran keanggotaan Smashing Magazine sendiri.

Sophy Colbert, seorang desainer konten yang menghadiri lokakarya, secara sukarela membagikan pesan kesalahan barunya yang menjelaskan alasannya untuk setiap kesalahan.

Baik pesan maupun alasannya luar biasa, dan saya pikir grup ini mendapat banyak manfaat karena mereka bisa mendapatkan wawasan tentang pola pikir desainer konten Sophy.

Hari 3: Mendesain Ulang Formulir Checkout Dunia Nyata

Pada hari ke-3, kami mendesain ulang alur pembayaran ASOS dari awal. Ini termasuk checkout tamu (pengalaman pertama kali) dan check out sebagai seseorang yang memiliki akun (pengalaman penggunaan berulang). Kami membahas banyak hal seperti apakah akan menggunakan tab, akordeon, atau tombol radio. Dan kami juga melihat checkout satu halaman versus checkout multi-halaman.

Sorotan saya dari sesi ini adalah bahwa proses mendesain ulang beberapa interaksi , memaparkan desain konten baru dan tantangan desain layanan. Misalnya, kami mengonversi tab yang meminta pengguna untuk menentukan apakah mereka memiliki akun atau tidak:

Dan kami mendesain ulang mereka menjadi bentuk dengan tombol radio:

Dan ini mengungkap masalah bahwa dalam kehidupan nyata, pilihan jarang biner. Jadi saya bertanya kepada grup apa opsi yang hilang dan mereka dengan tepat berkata: 'Bagaimana jika pengguna tidak dapat mengingatnya?'

Jadi meskipun kami awalnya melihat ini terutama sebagai masalah desain interaksi, itu menjadi masalah desain konten dan layanan.

Semua masalah ini dengan baik merangkum salah satu bentuk aturan UX: 'Berteman dengan departemen lain'. Sebagai desainer, kita harus bekerja secara efektif dengan pemangku kepentingan di seluruh organisasi untuk memastikan kita menghindari kompleksitas sebanyak mungkin. Dan sekali lagi di sinilah protokol pertanyaan benar-benar bersinar.

Hari 4: Menggunakan Sintaks Singkatan Dan Merancang Bentuk Panjang Dan Kompleks

Hari 4 dibagi menjadi dua bagian yang akan saya bahas dalam urutan terbalik.

Di bagian kedua, kami melihat berbagai pola yang membantu pengguna mengisi formulir yang panjang dan rumit — jenis formulir yang membutuhkan waktu berhari-hari, berminggu-minggu, atau bahkan berbulan-bulan untuk diselesaikan. Saya sangat menantikan untuk menjalankan ini karena tantangan desain di sekitar ini menarik dan tidak diinjak dengan baik.

Pada bagian pertama, kami mendesain ulang formulir pendaftaran Majalah Smashing menggunakan sintaks singkatan.

Sorotan saya dari sesi ini adalah bahwa Vitaly, Mr. Smashing Magazine sendiri, datang untuk menjadi pemangku kepentingan bisnis kami. Kelompok itu mengajukan pertanyaan kepadanya untuk mencari tahu mengapa formulir itu dirancang seperti itu dan menanyakan mengapa pertanyaan-pertanyaan tertentu diajukan.

Berikut adalah beberapa contoh:

• Sophy O bertanya mengapa bidang negara diminta. Vitaly mengatakan bahwa itu tergantung pada apa yang dilakukan pengguna. Jika pengguna membeli buku, kita perlu tahu ke mana buku itu pergi. Dan pajak atas buku didasarkan pada negara tujuan. Hal ini mengakibatkan penghapusan bidang dan menanyakan informasi ini saat seseorang membeli buku — atau sekadar memperjelas teks petunjuk tentang alasan kami meminta informasi ini.
• Milos Lazarevic mempertanyakan perlunya 'Apakah Anda suka kucing?' kotak centang. Dan Dana Cottreau serta Jaclyn Ziegler menikmati permainan kotak centang itu . Tetapi saya akan mempertimbangkan kegembiraan yang diberikannya kepada beberapa orang terhadap risiko mengasingkan orang-orang yang, misalnya, kurang paham digital atau hanya terburu-buru untuk mengakses konten.
• Emma Stotz mempertanyakan penggunaan validasi langsung mengingat semua masalah kegunaan yang muncul di sekitar itu. Dan Vitaly tertarik untuk mengeksplorasi secara instan memvalidasi bidang yang dikirim sebagai gantinya.

Kesan Keseluruhan Saya

Bagi saya, lokakarya berjalan dengan sangat baik secara keseluruhan dan saya sangat senang dengan apa yang terjadi dan umpan balik yang saya terima dari para peserta. Semua orang sangat ramah, dan toleran terhadap beberapa kesulitan teknis yang saya alami pada hari pertama ( terima kasih sekali lagi, semuanya! ). Menjalankan lokakarya dari jarak jauh melalui Zoom memiliki masalah (kita tidak akan berbicara tentang bagaimana saya secara tidak sengaja meninggalkan rapat dalam keadaan panik secara tidak sengaja pada hari 1), tetapi sebenarnya saya menemukan aspek jarak jauh berguna secara keseluruhan.

Misalnya, semua terhubung ke Zoom, berarti peserta dapat mengajukan pertanyaan sambil membagikan layar mereka untuk menghidupkan masalah.

Saya juga sangat senang bertemu dengan orang-orang di seluruh dunia, sesuatu yang saya rasa akan sulit dilakukan dengan lokakarya langsung. Juga, selama istirahat, saya harus cepat-cepat berlari untuk menidurkan anak-anak saya, jadi saya membayangkan itu juga bekerja dengan baik untuk para peserta juga.

Tapi ada satu hal yang saya harap saya tahu sebelumnya. Saya khawatir, bahwa dengan sekelompok besar orang (tepatnya 81), membiarkan orang berbicara dengan bebas akan berakhir dalam kekacauan. Alhasil, pada hari pertama, saya membacakan dan menjawab pertanyaan kelompok dari Google Doc yang dibagikan selama Q&A. Ini berarti suara orang lain tidak terdengar dan ada lebih banyak penghalang antara saya dan kelompok.

Ini adalah sesuatu yang saya perbaiki untuk hari ke-2 dan itu benar-benar membuat perbedaan. Sangat menyenangkan mendengar suara dan pemikiran orang-orang dengan kata-kata mereka sendiri dan ini menciptakan lebih banyak dialog terbuka di mana orang lain mulai menjawab pertanyaan orang lain yang saya sukai.

Saya ingat Alex Price pernah melompat untuk berbicara tentang pengalamannya menangani formulir rumit yang harus diisi oleh orang yang berbeda.

Apa yang Akan Saya Ubah Untuk Lain Kali

Walaupun kesan keseluruhan saya tentang lokakarya ini sangat positif, ada beberapa hal yang ingin saya perbaiki untuk waktu berikutnya.

1. Tunjukkan Dasar-dasarnya, Bukan Pelajari Dasar-dasarnya

Hari 1 membahas banyak hal dasar sebelum masuk ke detail yang lebih besar pada hari-hari berikutnya, tetapi saya sedikit terganggu untuk mengajarkan beberapa hal ini karena saya pikir banyak peserta sudah mengetahui banyak hal ini. Jadi, lain kali saya ingin mengakui bahwa beberapa orang telah datang dengan banyak pengetahuan dan menetapkan adegan sebagai 'inilah cara saya mengajarkan dasar-dasarnya' sebagai lawan dari 'ini adalah cara mempelajari dasar-dasarnya' — terima kasih kepada Caroline Jarrett untuk tip ini.

Juga, saya mungkin akan bertanya kepada grup apakah ada pendekatan desain formulir yang mereka perjuangkan untuk meyakinkan rekan satu tim karena itu pasti sesuatu yang saya perjuangkan sebelumnya.

2. Pisahkan Orang Dalam Grup yang Lebih Besar

Salah satu latihan melibatkan orang-orang yang dibagi menjadi 2 kelompok menggunakan ruang istirahat Zoom, tetapi karena orang-orang datang ke lokakarya ini dari seluruh dunia, beberapa orang yang mendengarkan tidak dapat ikut serta dalam latihan.

Misalnya, beberapa orang benar-benar perlu istirahat makan siang karena zona waktu mereka lebih cepat dari saya. Ini berarti satu atau dua orang yang memang ingin berpartisipasi menemukan diri mereka dalam kelompok mereka sendiri. Lain kali, saya akan menempatkan orang ke dalam kelompok katakanlah 4 dan pastikan latihannya masih berhasil.

3. Tambahkan Lebih Banyak Latihan Kelompok

Terlepas dari masalah yang baru saja saya sebutkan, latihan kelompok bekerja dengan baik. Orang-orang menikmatinya, dan itu memicu beberapa ide yang sangat menarik dari para peserta. Beberapa orang mengirim pesan kepada saya setelah mengatakan bahwa mereka berharap ada lebih banyak latihan kelompok, jadi saya bertujuan untuk melakukan hal itu.

Poster Semua Aturan

Saat kami melewati lokakarya, kami menandai lebih dari 40 aturan dan prinsip desain formulir yang membawa struktur tambahan yang bagus ke sesi.

Beberapa peserta bertanya kepada saya apakah saya memiliki poster semua peraturan dan saya tidak memilikinya — jadi sekarang saya telah membuatnya.

Poster Masterclass Desain Formulir (Versi Teks Biasa)

Demi kenyamanan Anda, berikut adalah versi teks sederhana dari poster — silakan sesuaikan dan sesuaikan dengan kebutuhan Anda.

Hari 1: Memaku Dasar-dasar Desain Formulir

1. Jadikan formulir berfungsi dengan baik untuk semua orang
2. Setiap kontrol formulir membutuhkan label
3. Hanya tambahkan teks petunjuk jika itu menambah nilai
4. Jangan gunakan teks placeholder
5. Letakkan teks petunjuk di antara label dan input
6. Letakkan label di atas input
7. Jangan gunakan tooltips untuk teks petunjuk
8. Ketahui mengapa Anda menanyakan setiap pertanyaan ^*
9. Berikan kotak teks batas yang berbeda
10. Label posisi yang akan dikaitkan dengan input
11. Berikan input status fokus yang jelas
12. Gunakan jenis input yang tepat untuk pekerjaan itu
13. Sejajarkan tombol ke tepi kiri input
14. Beri label tombol dengan persis fungsinya
15. Pastikan formulir Anda benar-benar diperlukan
16. Hindari menempatkan dua formulir pada satu halaman
17. Gunakan banyak masukan sebagai upaya terakhir
18. Jangan gunakan masker input

Hari 2: Memvalidasi Formulir Dan Menulis Pesan Kesalahan yang Baik

1. Jangan nonaktifkan tombol kirim
2. Jangan memicu kesalahan saat pengguna menjawab
3. Hanya validasi saat pengguna mengirimkan
4. Letakkan kesalahan di atas input
5. Maafkan kesalahan sepele
6. Lacak kesalahan Anda
7. Berikan kesalahan yang jelas, ringkas, dan spesifik kepada pengguna

Hari 3: Mendesain Ulang Alur Checkout Nyata

1. Tunda pertanyaan yang bisa Anda ajukan nanti ^**
2. Gunakan kontrol formulir di dalam formulir
3. Mulai tanpa bilah kemajuan ^*
4. Mulailah membuat prototipe dengan satu hal per halaman ^**
5. Ajukan pertanyaan dalam urutan yang masuk akal
6. Gunakan kotak pilih sebagai pilihan terakhir
7. Gunakan default yang masuk akal
8. Berikan bantuan dalam konteks pertanyaan
9. Hindari bidang opsional sedapat mungkin
10. Jangan sembunyikan tombol kirim
11. Buat lebar bidang sesuai dengan nilai yang diharapkan
12. Biarkan pengguna memeriksa jawaban mereka
13. Letakkan tautan kembali di kiri atas formulir
14. Berteman dengan departemen lain

Hari 4: Menggunakan Singkatan Dan Merancang Bentuk Panjang Dan Kompleks

1. Hancurkan formulir besar menjadi tugas-tugas kecil
2. Beri tahu pengguna apa yang mereka butuhkan sebelum memulai
3. Bantu pengguna memeriksa kelayakan mereka

^* Prinsip ini dari Manual Layanan GOV.UK
^** Prinsip ini dari Manual Layanan NHS.

Sekali lagi terima kasih kepada semua orang yang datang untuk semua kontribusi mereka. Saya menantikan yang berikutnya.

Terima kasih kepada Caroline Jarrett karena tidak hanya meninjau setiap detail lokakarya saya, tetapi juga mengedit artikel ini.

Catatan Editor : Anda juga dapat memeriksa gambaran rinci tentang Bagaimana Kami Menjalankan Lokakarya Online Smashing, dan jika Anda tertarik untuk menghadirinya, kami memiliki banyak lokakarya online di front-end & UX yang akan segera hadir. Kami akan senang melihat Anda di sana!