Bentuk posisi label untuk kegunaan terbaik

16

Aku menciptakan bentuk yang akan meminta pengunjung untuk mereka firstname, middle initialdan lastname. Saya ingin bidang teks tersebut semuanya sebaris, tetapi di mana saya harus menempatkan label? Di sebelah kiri, atas, atau di bawah bidang.

Saya mencari pendekatan terbaik dari sudut pandang kegunaan.

html usability user-input forms Shane Stillwell
sumber
Apakah ini tidak sesuai untuk uxexchange.com? ( uxexchange.com )
Bobby Jack
Wow, saya tidak tahu uxechange.com ada, terima kasih. Menilai dari jumlah suara pada pertanyaan ini, sudah pasti ada di benak Pro Webmaster.
Shane Stillwell
Ya - ini sedikit 'masalah'. Saya percaya uxexchange diatur menggunakan model 'SO lama'. Situs yang menggunakan model baru, seperti webmaster, tampaknya mendapat banyak perhatian. Jadi sesuatu yang lebih relevan dengan uxexchange akhirnya lebih sukses di webmaster. Saya tidak yakin apa solusinya - migrasi uxexchange?
Bobby Jack

Jawaban:

10

Lihatlah studi ini oleh UXmatters . Ini cukup mendalam, termasuk data pelacakan mata, dan menyimpulkan bahwa label di atas secara keseluruhan adalah solusi terbaik.

Ada artikel serupa oleh Luke Wroblewski , juga cukup detail. Kedua artikel itu layak dibaca!

Grant Palin
sumber
+1 Saya akan memposting sumber daya yang sama persis itu. Sungguh, setiap jawaban untuk pertanyaan ini harus mencakup penelitian.
virtuosi Media
Inilah yang saya cari, beberapa perbandingan kiri versus atas. Saya yakin banyak dari itu subjektif, tetapi bukan-kurang, harus ada beberapa tata letak yang sedikit lebih baik semua hal sama. Terima kasih.
Shane Stillwell
Yang juga menarik tentang artikel UXmatters adalah mereka menemukan label tebal mengganggu pengunjung dan ... "Label tebal lebih sulit bagi pengguna untuk membaca dan melihat — mungkin karena ada lebih banyak kebingungan visual antara teks tebal dan perbatasan berbatasan yang tebal. dari kolom input. " Senang mendengarnya.
Shane Stillwell
bukan untuk menjadi negatif nelly, tetapi uxmatters.com tidak memiliki bagian "artikel top" atau bahkan menggunakan alat webmaster google sehingga saya dapat menemukan artikel yang paling banyak dibaca mereka, yang tidak terlalu pengalaman pengguna!
Neil McGuigan
5

Yang paling penting adalah konsisten dengan sisa situs Anda. Secara umum sebagian besar situs web melakukan label di sebelah kiri bidang teks. Dalam hal ini akan menjadi deskripsi yang panjang jadi pastikan Anda memiliki ruang dan mengalir dengan baik.

Jika ke kiri tidak terlihat benar atau tidak ada ruang untuk melakukannya, maka saya akan melakukannya di atas. Karena itu sangat jelas.

Satu-satunya metode yang saya akan hindari adalah menempatkan label di bawah bidang teks. ketika label berada di bawah bidang itu lebih membingungkan.

Ben Hoffman
sumber
3
Bagaimanapun, jangan lupa foratributnya.
Pierre-Alain Vigeant
4

Biasanya, untuk situasi Anda, di atas atau ke kiri adalah yang terbaik. Pastikan label muncul sebelum kolom input untuk aksesibilitas.

Masih ada banyak cara yang berbeda untuk tata letak halaman dan dapat diakses.

Label formulir dapat benar-benar muncul di mana saja Anda inginkan asalkan dibuat sejak saat itu. Jalan ini layak untuk dilihat, http://patterntap.com/tap/collection/forms

Kevin
sumber
3

Ada dua opsi yang dianggap terbaik:

  • label di sebelah kiri bidang, memerah ke kanan sehingga mereka dekat dengan input.
  • label di atas bidang itu sendiri

Satu hal penting yang perlu diperhatikan agar dapat digunakan untuk memastikan Anda menggunakan atribut for dari label, sehingga mengklik label berfokus pada bidang yang dilabeli.

GSto
sumber
1

Jawab: Tidak satu pun di atas. Gunakan teks placeholder di dalam bidang itu sendiri. Atribut placeholder adalah bagian bawaan dari HTML-5.

Kalau tidak, saya akan mengatakan meletakkannya di atas bidang, rata kiri.

Adam L Davis
sumber
0

Ini sedikit singgung - tapi tolong jangan gunakan nama depan / nama belakang / inisial. Tidak semua nama termasuk dalam kelompok yang rapi itu.

Mengutip diri saya di StackOverflow:

Banyak budaya Asia mengutamakan nama keluarga , karena keluarga dianggap lebih penting daripada individu.

Memperhatikan bahwa ada cukup banyak orang yang menggunakan nama yang bukan nama yang diberikan oleh orang tua mereka, saya telah menggunakan skema berikut ini dengan beberapa keberhasilan:

Nama Lengkap (seperti biasanya ditulis untuk mengalamatkan surat); Nama keluarga; Dikenal Sebagai (nama yang biasa digunakan dalam percakapan).

Misalnya:

Nama Lengkap: William Gates III; Nama Keluarga: Gates; Dikenal Sebagai: Bill

Nama Lengkap: Soong Li; Nama Keluarga: Soong; Dikenal Sebagai: Lisa

Lihat /programming/259634/splitting-a-persons-name-into-forename-and-surname/259694#259694 untuk informasi lebih lanjut.

Bevan
sumber
Saya melihat nilai dalam rekomendasi Anda, tetapi pertanyaan kuncinya adalah "siapa audiens target Anda?" Jika 99% dari audiens saya adalah orang Amerika, maka saya akan menggunakan Firstname / MI / Lastname. Saya pikir banyak orang Amerika tidak akan langsung mengerti nama keluarga. Seperti yang dikatakan @RandomBen, Anda harus konsisten dan sebagian besar situs AS menggunakan Firstname / MI / Lastname.
Shane Stillwell