İlk bölümde temel bir formun nasıl oluşturulacağını öğrendiniz. Bu bölümde en iyi uygulamalar ele alınmaktadır. Bu modülde, kullanıcı deneyimi (UX) hakkında bilgi edinecek ve iyi tasarlanmış bir kullanıcı arayüzünün neden büyük bir fark yaratabileceğini öğreneceksiniz.
Kullanıcı dostu arayüzler oluşturma
Formları doldurmak zaman alıcı ve sinir bozucu olabilir. Öyle olması gerekmiyor. Mükemmel bir kullanıcı deneyimi sunmak 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, aralık, yazı tipi boyutu ve rengi) ve mantıksal kullanıcı arayüzünü (etiket ifadeleri ve uygun giriş türleri gibi) sunduğunuzdan emin olun. Formunuzu nasıl iyileştirebileceğinize ve kullanımını nasıl kolaylaştırabileceğ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 kontrolü eklemek istiyor musunuz? Yeni alana etiket ekleyerek başlayın. Bu şekilde, ekleme işlemini unutmamış olursunuz.
Etiket eklemek, formun hedeflerine odaklanmanıza da yardımcı olur. Burada hangi verilere ihtiyacım var? Bu durumu netleştirdikten sonra, kullanıcının veri girmesine ve formu doldurmasına yardımcı olmaya odaklanabilirsiniz.
Etiket ifadeleri
Bir e-posta alanını tanımlamak istediğinizi varsayalım. Bunu aşağıdaki şekilde yapabilirsiniz:
<label for="email">Enter your email address</label>
Şöyle de açıklayabilirsiniz:
<label for="email">Email address</label>
Hangi açıklamayı seçersiniz?
Örneğimizde "E-posta adresi" ifadesi tercih edilir. Bunun nedeni, kısa etiketlerin taranmasının daha kolay olması, görsel dağınıklığı azaltmasının ve kullanıcıların hangi verilerin gerekli olduğunu daha hızlı anlamalarına yardımcı olmasıdır.
Etiket konumu
CSS ile bir etiketi form kontrolünün üst, alt, sol ve sağına yerleştirebilirsiniz. Nereye yerleştirmelisiniz?
Araştırmalar, en iyi uygulamanın etiketi form kontrolünün üstüne yerleştirmek olduğunu gösteriyor. 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 bir form tasarımı, formdan vazgeçme oranlarını önemli ölçüde azaltabilir.
Uygun öğe ve giriş türünü kullanarak kullanıcıların veri girmelerine yardımcı olun
Seçebileceğ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.
Sitenizin şartlar ve koşullarını kabul etmeleri gerektiğinde <input type="checkbox"> kullanın.
Ayrıca farklı form denetimleri türlerini görsel olarak ayırt etmeniz gerekir. Düğmeler, düğmelere benzemelidir. Giriş gibi bir giriş. Kullanıcıların form kontrolünün amacını anlamasını kolaylaştırın. Örneğin, bağlantı gibi görünen bir öğe tıklandığında yeni bir sayfa açılır, form gönderilmez.
Kullanıcıların formlarda gezinmesine yardımcı olun
Gösterişli bir sayfa düzeni eğlenceli olabilir ancak formu doldurmanıza engel olabilir.
Özellikle, araştırmalar yalnızca tek bir sütun kullanmanın en iyi yöntem olduğunu göstermektedir. Kullanıcılar bir sonraki form kontrolünün yerini aramak için zaman harcamak istemiyor. Tek bir sütun kullanıldığında, izlenecek tek bir yön olur.
Kullanıcıların formlarla etkileşim kurmasına yardımcı olma
Yanlışlıkla dokunma ve tıklama yapmamak ve kullanıcıların
formunuzla etkileşim kurmasına yardımcı olmak için düğmelerinizin yeterince büyük olmasını sağlayın.
Bir düğme için önerilen dokunma hedefi boyutu en az 48 pikseldir.
Yanlışlıkla yapılan etkileşimlerin önlenmesine yardımcı olması için margin CSS özelliğini kullanarak form kontrolleri arasında yeterli boşluk bırakmalısınız.
Form denetimlerinin varsayılan boyutu gerçekten kullanılabilir olamayacak kadar küçük. padding işlevini kullanıp 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ın meydana geldiği yerleri göster
Kullanıcıların hangi form kontrolüyle ilgilenmeleri gerektiğini anlamalarını kolaylaştırmak için ilgili form kontrolünün yanında hata mesajları görüntüleyin. Form gönderme sırasında hataları görüntülerken, ilk geçersiz form kontrolüne gittiğinizden emin olun.
Kullanıcıların hangi verileri gireceğini net bir şekilde belirtin
Kullanıcıların geçerli verilerin nasıl girileceğini anladığından emin olun. Şifre için en az sekiz karakter girmeleri gerekiyor mu? Onlara söyleyin.
<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 bunu açıkça belirtin. Erişilebilirlik Formlarının Anatomisi’nde zorunlu alanları belirtmek için kullanabileceğiniz alternatifler açıklanmaktadır. Formdaki çoğu alan zorunluysa isteğe bağlı alanları belirtmek daha iyi olabilir.
Hata mesajlarını, ekran okuyucular tarafından erişilebilir hale getirmek için form kontrollerine nasıl bağlayabilirsiniz? Bunu bir sonraki modülde öğrenebilirsiniz.
Öğrendiklerinizi sınayın
Form tasarlama konusundaki bilginizi test edin
Form kontrolünü nasıl tanımlarsınız?
<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> üst kısmı.