İçerik
- 1. Zorunlu alanları işaretlemeyin
- 2. Eğiriciler kullanmayın
- 3. Yalnızca bir tür düğmeye sahip olun veya daha iyisi, form başına yalnızca bir düğme
- 4. Parça alanları
- 5. Neden bir şey sorduğunuzu ve bunun kullanıcıya nasıl hissettirdiğini düşünün
- 6. Tarihler cızırtılı küçük arkadaşlar
- 7. Geliştirici zanaatı olarak formlar
- 8. Formlarda sütun kullanmayın
- 9. Biri yapacağınız zaman iki alan kullanmayın
- 10. nazik olun
Formlar, birçok tasarımcının formlardan daha fazla nefret ettiği hiçbir şey yoktur. İlle de yaratıcılığı ortaya çıkarmıyorlar, değil mi? Belki de formlara tekrar bakmamızın ve bir formun en basit haliyle kullanıcı ile yazılım arasındaki bir konuşma olduğunu anlamamızın zamanı gelmiştir.
İşaretle ve tıklamayı unutun, formlar dijital tasarımcılar olarak karşılaşacağımız en zengin etkileşimi temsil ediyor. Bir dahaki sefere bir form karşınıza çıktığında, bunun sadece bazı güzel CSS efektleri uygulamak veya güzel bir jQuery güzelliği eklemek olduğunu düşünmeyin. Form tasarlamanın çok daha fazla derinliği var.
Kullanıcıların yüzlerce formu test ettim ve sigorta şirketleri, tatil rezervasyonu etkileşimleri ve çok daha fazlası için bazı karmaşık formlar tasarladım. Muhtemelen son birkaç ayda formlarımdan birini kullanmışsınızdır.
Formları tasarlamaya başlamadan önce öğrenmiş olmayı dilediğim dersler burada.
1. Zorunlu alanları işaretlemeyin
Zorunlu bir alanı gösteren küçük yıldız işaretini biliyor musunuz? Bunun kullanıcı testinde birçok kez başarısız olduğunu gördüm. Kavram olarak, zorunlu alanlar pek bir anlam ifade etmiyor, çevrimdışı eşdeğerleri yok. Geliştiriciler için harikadır çünkü tamamlamaya güzel bir siyah beyaz yaklaşım sunarlar. Yıldız işareti ve zorunlu alan, öğrenilmiş bir davranış olduğu için başarısız olur. Kullanıcı testinde gördüğüm tipik davranış, kullanıcının en üstteki formu doldurması ve onu durduracak bir şey olduğunda veya bir düğmeye bastığında bitirmesidir.
Çözüm basittir, isteğe bağlı alanları işaretleyin, hoş kullanıcımızın durması gereken yeri işaretleyin ve bu alanı doldurmaları gerekip gerekmediğini düşünün.
2. Eğiriciler kullanmayın
HTML5 harika değil mi? Oynamak için birçok heyecan verici yeni parlak araç sunar. Yeni oyuncaklarımızın uygunluğunu düşünmemiz gerekiyor. Sayı alanı artık, kullanıcının sayılar arasında geçiş yapmasına olanak sağlamak için küçük yukarı ve aşağı oklar içermektedir.
Burada iki problem mevcut. İlk olarak, okların varsayılan tarayıcı görünümü onları gerçekten küçük yapar. Tıklamak çok zor ve aramızdaki yağ bir iPhone'da mücadele edecek. Buna Fitt Yasası denir, bir şey ne kadar küçükse tıklamak o kadar zordur.
Ama bağırdığını duydum, sadece numarayı doğrudan numara alanına yazabilirsin. Evet, yapabilirsiniz, ancak tarayıcı ekranına bakalım, yukarı / aşağı dönen oklar, güvenilir arkadaşımız seçme kutusuna benziyor. İlk kez bir değer değiştirici ile sunulan bir kullanıcı, bir seçim kutusuna benzediği için içine yazamayacağını varsayacaktır.
Benim tavsiyem, daha yaygın bir yer haline gelene veya tarayıcı geliştiricileri varsayılan tasarımı sıralayana kadar net bir şekilde yönlendirmek.
3. Yalnızca bir tür düğmeye sahip olun veya daha iyisi, form başına yalnızca bir düğme
Hick Yasası adında az bilinen bir psikoloji ilkesi var. Hick Yasası, bize ne kadar çok seçenek sunulursa, seçim yapmanın o kadar zor olacağını belirtir. Bildiğim roket bilimi değil, ama akılda tutmaya değer bir kural.
Hoş kullanıcınıza bir seçim yapmalarına yardımcı olarak yardımcı olabilirsiniz. Tüm birincil düğmeleri tek renk yaparak ve her sayfada bunlardan yalnızca birine sahip olmak seçimi kolaylaştırır. Basmam gereken düğme hangisi? Oh, kolay, büyük renkli olan.
4. Parça alanları
Önceki bir yaşamda sinirbilim okudum ve bu nedenle hafızanın psikolojisini - özellikle kısa süreli ya da işleyen hafıza - çalıştım. Şimdi söylemeden önce; hayır, kısa süreli hafıza kapasitesi 7 +/- 2, 4 +/- 1 değildir veya insanlarda üç ila beş parça konuşur. Biz insanlar olarak görsel uyaranları değerlendirmede harikayız, kısıtlama, sayı daha az olduğunda daha iyi olabilmemizdir. Bir formu daha küçük gruplara bölmek, kullanıcının forma girmesi gereken şey hafızasından geldiği için değerlendirmeyi kolaylaştırır.
Alan gruplarınızın yaklaşık dört uzunluğunda olduğundan emin olun.
5. Neden bir şey sorduğunuzu ve bunun kullanıcıya nasıl hissettirdiğini düşünün
Bu muhtemelen verdiğim en basit tavsiye, ancak çoğu zaman en az kullanılan tavsiyedir.
Aşağıdakileri ele alalım:
Sorduğunuz her soruyu sorgulayın. Bu gerekli mi? Bunu sormak nasıl bir duygu?
Çoğu zaman, bir soru sormak için bir iş ihtiyacı vardır ve biz tasarımcılar olarak yüzümüz maviye dönene kadar zorunluluk hakkında tartışabiliriz. Soru sorulmalı. Bu verilere yönelik iş ihtiyacını anlamakta sıklıkla ödün verebiliriz.
Hoş kullanıcımıza neden bu soruyu sormamız gerektiğini söyleyerek yardımcı olabiliriz. Bu verilerin kullanımı ve paylaşımı konusunda güvence verin ve genel olarak nazik davranın.
Tekrar örneğimizi ele alalım:
Hala zor bir soru ama umarım hapı tatlandırmışızdır.
6. Tarihler cızırtılı küçük arkadaşlar
Tarihleri girmek gerçek bir zorluk olabilir ve kaçınabileceğiniz birkaç tuzak vardır. Tek büyük sorun, hatalarla uğraşmaktır.
En kolay yaklaşım bir takvim başlatmaktır. İngiltere'de haftaların Pazartesi günü ve ABD'de Pazar günü başladığını belirtmekte fayda var. Kullanıcınız konsantre değilse, Pazartesi anlamına geldiği bir Pazar günü seçebilir.
Ayrıca uluslararası tarih biçimlerinden de bahsetmeye değer. ABD ayı birinci, Japonya'da ise ilk yılı alıyor. Yani 4/5/12 gibi bir tarih üç şekilde yorumlanabilir.
Bu nedenle, seçme kutuları kullanmak en iyisidir.
7. Geliştirici zanaatı olarak formlar
Formlar hem geliştiriciler hem de tasarımcılar için zanaattır. Veri girerken ve arka uç kodunuzu başa çıkacak şekilde tasarlarken hangi olası hataların yapılabileceğini anlamak zorlu bir iştir.
İşte basit bir tane. Para birimi değeri girme. Kullanıcının yapabileceği olası hatalar çok büyük. Kullanıcıların karşılaması gereken veri formatlarını zorlamak, kullanıcınız için sinir bozucu ve bununla yüzleşelim, geliştiriciler tarafında biraz tembel.
Bir geliştirici için kurşun geçirmez bir form oluşturmaktan daha iyi bir zorluk olabilir.
8. Formlarda sütun kullanmayın
Formlarda sütun kullanımındaki en büyük sorun akıştır. En üstte bir forma başlıyor ve en altta bitiyoruz. Sütunların tanıtımında formun akışı bozulabilir.
Formlar arasında kullanıcıların sekmesi olduğunu varsaymayın ve bu nedenle odak, sütunlardaki formlarda gezinmenin bir yoludur. Bunu kullanıcı testlerinde görmem çok nadirdir. Çoğu zaman ayrıntıları girdiğimizi görüyoruz, fare / izleme dörtgeni / parmağınızla bir sonraki alana tıklayın, ardından ayrıntıları girin vb.
9. Biri yapacağınız zaman iki alan kullanmayın
Çoğu insan dokunmatik daktilo değildir. Kullanıcı testinde, insanların klavyeye yazarken baktığını görüyoruz.
Form alanını bölerek bir telefon numarası girerken, örneğin alan kodu ve numara eklemek gerçek sorunlara neden olur. Kullanıcılar iki alan olduğunu görmez veya gerçekten hatırlamaz, bu nedenle ilk alana tam sayıyı girin; alan belirli sayıda karakterle sınırlıysa daha kötüsü.
Telefon numarası için yalnızca bir alan kullanın, aynı şey bina numarası / sokak için de geçerlidir - yalnızca bir metin giriş kutusu kullanın.
10. nazik olun
Orada oldukça kaba hata mesajlarının kaç tane olduğuna şaşıracaksınız.
İşte son zamanlarda karşılaştığım bir örnek.
Tam da gelecekte bir tarihe isteyerek gireceğinizi ve ardından oldukça alaycı bir yanıt vereceğinizi öne sürdükleri gerçeği, pek de hoş değil.
Kendinizi yine kullanıcının yerine koyun, bu hatayı görünce nasıl hissedersiniz? Sinirli mi? Belki daha da kötüsü. İyi olmak kolaydır.
Daha iyi formlar tasarlamanıza yardımcı olmak için indirilebilir bir beşik / hile sayfası hazırladım. Daha iyi formlar tasarlamak için daha birçok en iyi uygulama yolunu içerir.
