web-gelistirme-sc.com

Gerekli alan doğrulaması

Gerekli alan doğrulaması görsel olarak nasıl ele alınmalıdır?

Not: yıldız işaretinin kırmızı olduğunu varsayın

*Name:[_______________]

veya

Name:*[_______________]

veya

Name: [_______________]*

veya

Name: [____red bg____  ]

veya

Name(<- font color red): [_______________]

veya

Bana daha iyi bir yol söyle!

16
rick schott

Bu tür soruların hiçbir zaman doğru ya da yanlış cevabı yoktur ve bunların çoğu kullanıcılarınızın kişilerine (mühendisleri, güç kullanıcıları ve bilgisayar kullanmayan teyze alice) ve bağlama bağlıdır.

Genel bir kural,

label [input   ] [validation       ] 

Formu (veya her ikisini) doğruladıktan sonra zorunlu bir alanı veya bir hata mesajını belirtmek için kırmızı yıldız işareti için doğrulama alanını kullanma.

Basitçe Erişilebilir web sitesi, burada gerekli form alanlarına iyi ve özlü bir şekilde yazılmıştır: http://simplyaccessible.com/article/required-form-fields

11
Bil Simser

Çok çeşitli faktörlere bağlıdır.

  1. Genel bir kural olarak: forma sadece 1 saniyelik bir bakışla bakmak gibi bir metin göstergesi (yıldız işareti) ve görsel bir gösterge olmalıdır. Örneğin, etiketin yanına yıldız işareti (etiketin kendisinden biraz farklı biçimlendirilmişse daha iyi) ekleyebilir ve zorunlu alanlara daha yoğun bir kenarlık ekleyebilirsiniz.
  2. İkinci bir genel kural olarak, bir formun basitleştirin bir form olup olmadığını görmek için çok çalışın: çoğu zaman formları simge durumuna küçültmenin ve tüm isteğe bağlı alanlardan kaçınmanın yolları vardır. Örneğin, minimalist kayıt formları yalnızca e-postayı sorabilir ve diğer her şeyi "Profiliniz% 90 tamamlandı" gibi takiplere ve widget'lara bırakabilir.
  3. Tüm web sitesinde tutarlı olun, bu gerçekten önemlidir, çünkü kullanıcıyı her seferinde öğrenmeye zorlamaz.
  4. Yıldız işareti aynı sütunda hizalanmış ise biraz daha iyi olduğunu unutmayın (ancak biraz, formu daha güzel yapmaktan kaçınılır, Güzel formlar daha kötü olanlardan daha iyi performans gösterir).
  5. Formdaki öğelerin çoğu zorunluysa, isteğe bağlı olanları işaretlemek muhtemelen daha iyidir.

Sorunlar:

  1. Sadece renklere güvenmeyin (renkleri iyi okuyamıyorsanız zahmetli).
  2. Yalnız yıldız işaretine güvenmeyin (kullanıcıyı neyin zorunlu olup neyin olmadığını düşünmeye zorlarsınız).
  3. Formu karıştırmayın: bu sorunun kapsamı dışında görünse de, genellikle açık etiketlerle cilalı, dikey olarak hizalanmış bir form zorunlu alanların anlaşılmasında çok yardımcı olur: tek bir dikey tarama daha kolay olduğu için, zorunlu alanları saptar.
6
Folletto

Baymards'ın son araştırmalarıyla ilgilenebileceğinizi düşündüm: http://baymard.com/blog/required-optional-form-fields

Özet şudur:

  • En iyi 100 ABD ödeme sürecini karşılaştırırken, sitelerin yalnızca% 9'u her iki alan türünü de açıkça işaretledi
  • Hem isteğe bağlı hem de zorunlu alanları açıkça belirterek, kullanıcı hiçbir şey çıkarmaya zorlanmaz ve yalnızca doldurdukları alana odaklanabilir ve sonuç olarak tüm form alanı boyunca ileri geri sorunsuz bir şekilde ilerleyebilir. önceki alanların taranması.
  • En yaygın 100 e-ticaret ödünç alma işleminin% 63'ü tarafından yapılan hata, türlerden yalnızca birini belirtmektir.
  • Mobil check-out'ları test ederken, test deneklerinin% 75'i, zorunlu ve isteğe bağlı alanları açıkça işaretleyemeyen sitelerde ciddi form kullanılabilirlik sorunları yaşadı.

Ve önerileri:

enter image description here

2
DLM

Yıldız işaretini tutmak, yalnızca renk tabanlı göstergeden ziyade yararlı olabilir (erişilebilirlik için +1). Yıldız işaretine de bir başlık niteliği atın, ör. <span title = "Zorunlu Alan"> * </span>

Bu muhtemelen uygun şekilde şekillendirmek için zaten gereklidir

Yıldız pozisyonunun kritik olduğunu düşünmüyorum - sadece tutarlı olun!

0
cbosco

Bence hepsini bir noktada yaptım. Son zamanlarda düştüğüm şey daha fazla iş gerektiren bir şey ama bence kullanıcı için daha iyi. Temel olarak, söz konusu alana işaret eden inatçı bir okla küçük bir kırmızı popover kutusu verirsiniz ve onlara gerekli bir alan olduğunu söylersiniz. Alanın üzerinde parlak bir renkte görüntülenmesi, eklenen içerik veya kalın metinle belgenin geri kalanının akışını değiştirmeden noktayı iyi karşıladığını düşünüyorum.

Birden fazla popovers görüntülemenin çok karmaşık olduğu birden fazla hatanız varsa daha karmaşık hale gelir, bu nedenle ya sadece ilk hatayı görüntülemeye karar verirsiniz veya her seferinde yalnızca bir hata görüntüler ve çakışmalardan biri çözüldükten sonra bir sonraki hatayı görüntüler .

0
user306