İlk bölümde temel bir form oluşturmayı öğrendiniz. Bu bölümde en iyi uygulamalar ele alınmaktadır. Bu modülde kullanıcı deneyimi (UX) ve iyi uygulanmış bir kullanıcı arayüzünün (UI) neden büyük bir fark yaratabileceği hakkında bilgi edinin.
Kullanıcı dostu arayüzler oluşturma
Form doldurmak zaman alıcı ve sinir bozucu olabilir ancak bu durum değişebilir. Harika bir kullanıcı deneyimi oluşturmak için arayüzün sezgisel olduğundan emin olun. En iyi form yapısını ve grafik tasarımını (düzen, boşluk, yazı tipi boyutu ve rengi) ve mantıksal kullanıcı arayüzünü (ör. etiket metni ve uygun giriş türleri) sunduğunuzdan emin olun. Formunuzu nasıl iyileştirebileceğinizi ve kullanımını kolaylaştırabileceğinizi öğrenin.
Etiketler
<label> öğesinin ne için kullanıldığını hatırlıyor musunuz?
Etiket, bir form denetimini 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 bir etiket kullanın
Formunuza yeni bir form denetimi eklemek mi istiyorsunuz? Yeni alanın etiketini ekleyerek başlayın. Böylece eklemeyi unutmazsınız.
Önce etiket eklemek, formun hedeflerine odaklanmanıza da yardımcı olur. Örneğin, "Burada hangi verilere ihtiyacım var?" Bu netleştikten sonra, kullanıcının veri girmesine ve formu tamamlamasına yardımcı olmaya odaklanabilirsiniz.
Etiket metni
Bir e-posta alanını açıklamak istediğinizi söyleyin. Bu işlemi aşağıdaki gibi yapabilirsiniz:
<label for="email">Enter your email address</label>
Alternatif olarak şu şekilde de açıklayabilirsiniz:
<label for="email">Email address</label>
Hangi açıklamayı seçersiniz?
Örneğimizde, kısa etiketler daha kolay taranabildiği, görsel dağınıklığı azalttığı ve kullanıcıların hangi verilerin gerekli olduğunu daha hızlı anlamasına yardımcı olduğu için "E-posta adresi" ifadesi tercih edilir.
Etiket konumu
CSS ile bir form kontrolünün üst, alt, sol ve sağ tarafına etiket yerleştirebilirsiniz. Nereye yerleştiriyorsunuz?
Araştırmalar, kullanıcının formu hızlıca tarayabilmesi ve hangi form kontrolüne hangi etiketin ait olduğunu görebilmesi için etiketin form kontrolünün üzerinde konumlandırılmasının en iyi uygulama olduğunu gösteriyor.
Form tasarlama
İyi bir form tasarımı, formu terk etme oranlarını önemli ölçüde azaltabilir.
Uygun öğeyi ve giriş türünü kullanarak kullanıcıların veri girmesine yardımcı olma
Aralarından seçim yapabileceğiniz çeşitli form öğeleri ve giriş türleri vardır.
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.
Kullanıcıların sitenizin hükümler ve koşullarını kabul etmesi gerektiği yerlerde <input type="checkbox"> kullanın.
Ayrıca, farklı form kontrolü türlerini görsel olarak ayırt etmeniz gerekir. Düğmeler, düğme gibi görünmelidir. Giriş gibi bir giriş. Kullanıcıların form kontrolünün amacını anlamasını kolaylaştırın. Örneğin, bağlantıya benzeyen bir öğe tıklandığında form gönderilmemeli, yeni bir sayfa açılmalıdır.
Kullanıcıların formlarda gezinmesine yardımcı olma
Gösterişli bir düzen eğlenceli olabilir ancak form doldurmayı zorlaştırabilir.
Özellikle araştırmalar, tek bir sütun kullanmanın en iyi yöntem olduğunu gösteriyor. Kullanıcılar, bir sonraki form kontrolünün nerede olduğunu arayarak zaman geçirmek istemez. Tek bir sütun kullanıldığında, takip edilecek tek bir yön vardır.
Kullanıcıların formlarla etkileşim kurmasına yardımcı olma
Yanlışlıkla dokunma ve tıklamaları önlemek ve kullanıcıların formunuzla etkileşim kurmasına yardımcı olmak için düğmelerinizi yeterince büyük yapın. Bir düğmenin önerilen dokunma hedefi boyutu en az 48 piksel olmalıdır. Ayrıca, yanlışlıkla etkileşimleri önlemek için marginCSS özelliğinimargin kullanarak form kontrolleri arasına yeterli boşluk eklemelisiniz.
Form kontrollerinin varsayılan boyutu, gerçekten kullanılabilir olacak kadar büyük değil. padding kullanarak ve varsayılan font-size değerini değiştirerek boyutu artırmanız gerekir.
pointer CSS medya özelliğini kullanarak farklı işaretleme cihazları (ör. fare) için farklı boyutlar tanımlayabilirsiniz.
// 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;
}
}
pointer CSS medya özelliği hakkında daha fazla bilgi edinin.
Hataları oluştuğu yerde göster
Kullanıcıların hangi form kontrolünün dikkatlerini çekmesi gerektiğini kolayca anlamaları için hata mesajlarını, ilgili form kontrolünün yanında gösterin. Form gönderiminde hataları gösterirken ilk geçersiz form denetimine gittiğinizden emin olun.
Kullanıcılara hangi verileri girecekleri konusunda net bilgi verin.
Kullanıcıların geçerli verileri nasıl gireceklerini anladığından emin olun. Şifre için en az sekiz karakter girmeleri gerekiyor mu? Bu durumu onlara bildirin.
<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>
Kullanıcılara hangi alanların zorunlu olduğunu açıkça belirtin.
<label for="name">Name (required)</label>
<input name="name" id="name" required>
Bir alan zorunluysa bunu açıkça belirtin. The Anatomy of Accessible Forms (Erişilebilir Formların Anatomisi) adlı makalede, zorunlu alanları belirtmek için kullanılabilecek alternatifler açıklanmaktadır. Bir formdaki alanların çoğu zorunluysa isteğe bağlı alanları belirtmek daha iyi olabilir.
Hata mesajlarını form kontrollerine bağlayarak ekran okuyucular için erişilebilir hale nasıl getirebilirsiniz? Bu konu hakkında bilgiyi Erişilebilirlik modülünde bulabilirsiniz.
Anlayıp anlamadığınızı kontrol etme
Form tasarlama bilginizi test edin
Form kontrolünü nasıl tanımlarsınız?
<description> öğesini kullanma<label> öğesini kullanmadescription özelliğini kullanmaplaceholder özelliğini kullanmaÖnerilen dokunma hedefi boyutu nedir?
Hata mesajlarını nereye yerleştirmelisiniz?
<form> üst kısmında