Artikel Pengenalan Wulin.com (www.vevb.com): Diskusi singkat tentang desain formulir dalam desain web harian.
Kotak input (input) harus secara logis dibagi menjadi beberapa kelompok sehingga otak dapat menangani hubungan antara area yang luas dengan baik. - "Panduan HTML otoritatif"
Aplikasi web selalu menggunakan formulir untuk menangani entri dan konfigurasi data, tetapi tidak semua formulir konsisten. Penyelarasan area input, label masing -masing, metode operasi, dan elemen visual di sekitarnya akan lebih atau kurang mempengaruhi perilaku pengguna.
Bentuk tata letak
Mempertimbangkan bahwa pengguna harus mengisi formulir sesingkat mungkin, dan data yang dikumpulkan akrab bagi pengguna (seperti nama, alamat, informasi berbayar, dll.), Label yang selaras secara vertikal dan kotak input dapat dikatakan sebagai yang terbaik. Setiap pasangan tag dan kotak input disejajarkan secara vertikal untuk memberikan perasaan dekat dengan keduanya, dan penyelarasan kiri yang konsisten mengurangi gerakan mata dan waktu pemrosesan. Pengguna hanya perlu bergerak ke satu arah: turun.
Dalam tata letak ini, label tebal direkomendasikan, yang dapat meningkatkan berat visual mereka dan meningkatkan arti -pentingnya. Jika tidak tebal, dari perspektif pengguna, teks kotak tag dan input akan hampir sama.
Jika data pada suatu formulir tidak akrab atau dikelompokkan secara logis (seperti beberapa komponen alamat), tag kiri dapat dengan mudah membaca informasi formulir. Pengguna hanya perlu melihat ke atas dan ke bawah pada label di kolom kiri tanpa mengganggu pemikiran mereka oleh kotak input. Tetapi dengan cara ini, jarak antara label dan kotak input yang sesuai biasanya diperpanjang dengan label yang lebih panjang, yang dapat mempengaruhi waktu untuk mengisi formulir. Pengguna harus melompat bolak -balik untuk menemukan dua tag dan kotak input yang sesuai.
Ini menciptakan solusi alternatif, tata letak tag yang selaras, membuat koneksi antara tag dan kotak input lebih dekat. Namun, hasilnya adalah bahwa kosong dan label yang tidak merata di sebelah kiri membuat sulit bagi pengguna untuk dengan cepat mengambil apa yang perlu diisi formulir. Di negara-negara Barat, orang-orang terbiasa menulis dari kiri ke kanan, sehingga tata letak kanan yang selaras ini menyebabkan disleksia bagi pengguna.
Dengan bantuan elemen visual
Karena keunggulan tata letak label yang selaras kiri (mudah diambil dan mengurangi ketinggian vertikal), tergoda untuk memperbaiki kelemahan utamanya (pemisahan label dan kotak input).
Salah satu solusi adalah menambahkan warna latar belakang dan garis split. Warna latar belakang yang berbeda menghasilkan kolom label vertikal dan kolom kotak input vertikal. Setiap set label dan kotak input dipisahkan oleh garis horizontal yang jelas. Meskipun ini kedengarannya bagus, masih ada masalah.
Membandingkan bentuk sebelumnya (perbedaan visual subyektif pengguna), ini menambahkan 15 elemen visual: garis tengah, sel berwarna latar belakang, dan garis horizontal. Elemen -elemen ini mengalihkan perhatian pengguna dan menyulitkan pengguna untuk fokus pada elemen -elemen penting, seperti tag dan kotak input. Seperti yang ditunjukkan Edward Tufte: ada perbedaan dalam informasi itu sendiri, yang pasti mengarah pada perbedaan sensorik. Dengan kata lain, elemen visual apa pun yang tidak berguna untuk tata letak akan terus -menerus mengganggu tata letak. Ketika Anda mencoba menelusuri tag di sebelah kiri, Anda akan menemukan bahwa penglihatan Anda selalu terganggu, berhenti untuk memikirkan garis -garis horizontal, sel, dan warna latar belakang.
Tentu saja ini tidak berarti menyerahkan warna dan garis latar belakang. Mereka masih sangat efektif dalam membagi informasi area yang relevan. Misalnya, garis horizontal tipis atau warna latar belakang cahaya dapat secara visual dikombinasikan dengan data yang relevan. Warna dan garis latar belakang sangat efektif untuk tombol operasi utama yang membedakan bentuk.
Operasi primer dan sekunder
Operasi utama suatu bentuk (biasanya mengirimkan atau menghemat) membutuhkan bobot visual yang relatif kuat (dalam contoh di atas, nada terang, font tebal, warna latar belakang, dll.). Ini setara dengan memberi pengguna prompt: Anda memiliki/akan mengisi formulir.
Ketika suatu formulir memiliki banyak operasi, seperti melanjutkan dan kembali, perlu untuk mengurangi bobot visual dari operasi sekunder. Ini meminimalkan risiko kesalahan operasional potensial bagi pengguna.
Meskipun konten di atas dapat lebih memungkinkan Anda untuk merancang formulir, menggabungkan tata letak, elemen visual dan konten masih memerlukan pengujian pengguna dan analisis data (evaluasi penyelesaian, pelaporan kesalahan, dll.).