İlk bölümde basit bir formu nasıl oluşturacağınızı öğrendiniz. Bu bölümde en iyi uygulamalar ele alınmaktadır. Bu modülde, kullanıcı deneyimi (UX), iyi uygulanmış bir kullanıcı arayüzünün neden büyük fark yaratabileceğini öğreneceğiz.
Kullanıcı dostu arayüzler oluşturma
Formları doldurmak zaman alıcı ve can sıkıcı olabilir. Ancak böyle olması gerekmiyor. Mükemmel bir kullanıcı deneyimi sunulabilmesi için kullanıcı arayüzünün sezgisel olduğundan emin olun. En uygun form yapısını ve grafik tasarımını (düzen, boşluk, yazı tipi boyutu ve renk) sunduğunuzdan emin olun. ve mantıksal kullanıcı arayüzü (etiket ifadeleri ve uygun giriş türleri gibi) sağlar. Formunuzu nasıl geliştirebileceğinize ve kullanımı kolay hale nasıl getirebileceğinize göz atalım.
Etiketler
<label> öğesinin ne için olduğunu hatırlıyor musunuz?
Etiket, form kontrolünü tanımlar.
Görünür ve iyi yazılmış bir etiket, kullanıcının form kontrolünün amacını anlamasına yardımcı olur.
Her form kontrolü için etiket kullanın
Formunuza yeni bir form denetimi eklemek istiyor musunuz? Yeni alan için etiket ekleyerek başlayın. Böylece, fotoğrafı eklemeyi unutmayın.
Öncelikle etiketleri eklemek formun hedeflerine odaklanmanıza yardımcı olur. Burada hangi verilere ihtiyacım var? Bu durum netleştirildikten sonra, kullanıcının veri girmesine ve formu doldurmasına yardımcı olmaya odaklanabilirsiniz.
Etiket ifadesi
Bir e-posta alanını açıklamak istediğinizi varsayalım. Bunu aşağıdaki gibi yapabilirsiniz:
<label for="email">Enter your email address</label>
Şöyle de açıklayabilirsiniz:
<label for="email">Email address</label>
Hangi açıklamayı seçeceksiniz?
Örneğimizde, 'E-posta adresi' ifadesi tercih edilir, Çünkü kısa etiketlerin taranması daha kolaydır, görsel karmaşayı azaltır, ve kullanıcıların hangi verilere daha hızlı ihtiyaç duyduğunu anlamalarına yardımcı olur.
Etiket konumu
CSS'de Form kontrolünün üst, alt, sol ve sağ tarafına etiket yerleştirebilirsiniz. Nereye yerleştiriyorsunuz?
Araştırma programları en iyi uygulama olarak etiketi form denetiminin üzerine yerleştirin, Böylece kullanıcı bir formu hızlıca tarayıp hangi etiketin hangi form kontrolüne ait olduğunu görebilir.
Form tasarlama
İyi form tasarımı
form vazgeçme oranlarını önemli ölçüde azaltabilir.
Uygun öğeyi ve giriş türünü kullanarak kullanıcıların veri girmesine yardımcı olun
Farklı proje yönetimi
form öğelerini ve giriş türlerini seçebilirsiniz.
En iyi kullanıcı deneyimini sunmak için kullanım alanınıza en uygun öğeyi ve giriş türünü kullanın.
Kullanıcının birden fazla metin satırı doldurması gerekiyorsa <textarea> öğesini kullanın.
Sitenizin şartlar ve koşullarını kabul etmeleri gereken yerlerde <input type="checkbox"> adresini kullanın.
Farklı form denetimi türlerini görsel olarak birbirinden ayırt etmeniz de gerekir. Düğme, düğme gibi görünmelidir. Giriş gibi bir giriş. Kullanıcıların form kontrolünün amacını anlamalarını kolaylaştırın. Örneğin, bağlantı gibi görünen bir şey tıkladığınızda yeni bir sayfa açılır. ve form göndermemelidir.
Kullanıcıların formlarda gezinmesine yardımcı olun
Abartılı bir düzen eğlenceli olabilir ancak formu doldurmanıza engel olabilir.
Özellikle, araştırma programları tek bir sütun kullanmanın en iyi yolu olduğunu unutmayın. Kullanıcılar bir sonraki form kontrolünün nerede olduğunu aramak için zaman harcamak istemiyor. Bir sütun kullandığınızda, izlenecek yalnızca bir yön olur.
Kullanıcıların formlarla etkileşime geçmesine yardımcı olun
Yanlışlıkla dokunmaları ve tıklamaları önlemek için
ve kullanıcıların formunuzla etkileşim kurmasına yardımcı olmak için düğmelerinizi yeterince büyük hale getirin.
Önerilen
Bir düğmenin dokunma hedefi hedef boyutu en az 48 piksel olmalıdır.
Ayrıca, margin kullanarak form kontrolleri arasına yeterli boşluk bırakmalısınız.
Yanlışlıkla yapılan etkileşimlerin önlenmesine yardımcı olmak için CSS mülkü
Form denetimlerinin varsayılan boyutu gerçekten kullanışlı olamayacak kadar küçük. padding değerini kullanıp varsayılan font-size değerini değiştirerek boyutu artırmanız gerekir.
Farklı işaretleme cihazları için farklı boyutlar tanımlayabilirsiniz.
Örneğin, pointer CSS medya özelliğini kullanan bir fare.
// pointer device, for example, a mouse
@media (pointer: fine) {
input[type="checkbox"] {
width: 15px;
height: 15px;
}
}
// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
input[type="checkbox"] {
width: 30px;
height: 30px;
}
}
Şu konu hakkında daha fazla bilgi edinin:
pointer CSS medya özelliği.
Hataları oluştuğu yerde göster
Kullanıcıların hangi form kontrolüyle ilgilenmesi gerektiğini kolayca bulmasını sağlamak için ifade ettikleri form denetiminin yanında hata mesajları görüntüler. Form gönderilirken hataları görüntülerken ilk geçersiz form kontrolüne gittiğinizden emin olun.
Kullanıcıların hangi verileri gireceğini açıkça belirtme
Kullanıcıların geçerli verileri nasıl gireceğini anladığından emin olun. Şifre için en az sekiz karakter girmeleri gerekir mi? Anlatın.
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>
Hangi alanların zorunlu olduğunu kullanıcılara açıkça belirtin
<label for="name">Name (required)</label>
<input name="name" id="name" required>
Zorunlu bir alan varsa açıkça belirtin. The Antomy of Accessible Forms (Erişilebilir Formların Anatomisi) zorunlu alanları doldurun. Bir formdaki alanların çoğu zorunluysa isteğe bağlı alanları belirtin.
Hata mesajlarını ekran okuyucular için erişilebilir hale getirmek amacıyla form kontrollerine nasıl bağlayabilirsiniz? Bu konu hakkında bir sonraki modülde bilgi edinebilirsiniz.
Öğrendiklerinizi sınayın
Form tasarlama bilginizi test edin
Form kontrolünü nasıl tarif edersiniz?
<description> öğesi kullanılıyor.<label> öğesi kullanılıyor.description özelliği kullanılıyor.placeholder özelliği kullanılıyor.Önerilen dokunma hedefi boyutu nedir?
Hata mesajlarını nereye yerleştirmelisiniz?
<form> simgesinin üst kısmında.