Formları cihazlar ve platformlarda test edin

Bir formu birçok şekilde doldurabilirsiniz. Kişiler kalabalık bir otobüste ayaktayken, ekran okuyucuyla veya eski bir dizüstü bilgisayarda formunuzu akıllı telefonlarından kullanabilir. Formunuzun farklı cihazlarda ve farklı bağlamlarda çalıştığından nasıl emin olabileceğinizi görelim.

Formunuzun klavye kullanıcıları için çalıştığından emin olma

Formunuzun erişilebilir olduğundan emin olmak için kullanılabilecek iyi bir ilk test, formunuzu yalnızca klavyenizi kullanarak doldurmaktır. Formunuzu açın ve tab tuşuyla gezinmeyi deneyin. Şu anda hangi form alanının etkin olduğu açıkça belirtiliyor mu? Kullanıcıların hangi form alanının etkin olduğunu anlamasına yardımcı olmak için odak göstergelerini kullanabilirsiniz.

Deneyin. Girişe gitmek için tab tuşunuzu kullanın. Giriş etkin olduğunda ana hatları görüyor musunuz? Bu, odak göstergesidir. :focus CSS sözde sınıfını kullanarak odak göstergeleri ekleyebilirsiniz.

input:focus {
  outline: 4px solid #222;
}

Erişilebilir odak göstergeleri tasarlama hakkında daha fazla bilgi edinin.

Kullanıcıların formunuzda gezinmesine yardımcı olun

Kullanılabilirlik ve erişilebilirliğe ilişkin bir başka iyi test de mantıksal sekme sırasının görsel sekme sırasını takip etmesini sağlamaktır. Sekme sırasını nasıl test edebilirsiniz? Sekme tuşuyla formunuzu tamamen doldurun. Mantıksız gezinmede atlama fark ediyor musunuz? DOM sırasının görsel sırayla eşleştiğinden emin olun.

Sayfadaki görsel sıranın DOM sırasını takip etmesini sağlama hakkında daha fazla bilgi edinin.

Kullanıcıların dokunmatik cihazlarda formunuzu tamamlamasına yardımcı olun

İsteğinizi aldık. Formunuzun klavyeyle çalıştığından emin olmalısınız. Şimdi de bu özelliğin cep telefonları gibi dokunmatik cihazlarda da çalıştığından nasıl emin olabileceğinize bakalım.

Dokunmatik cihazınızda formunuzu açın, tüm alanları doldurun ve gönderin. Form kontrolü seçmek için birden fazla kez dokunmak zorunda kaldınız mı? Sorun, dokunma alanlarının çok küçük olmasından kaynaklanıyor olabilir. Bir düğmenin dokunma hedefi boyutunun en az 48 piksel olduğundan ve her bir <input> ile <select> değerinin de dokunulabilecek kadar büyük olduğundan emin olun. Ayrıca, form kontrolleri arasına yeterli boşluk ekleyerek kullanıcıların dokunmatik cihazlarda formunuzda gezinmesine yardımcı olabilirsiniz.

Kullanıcıların optimize edilmiş bir klavye almasını sağlayın

Önceki modüllerde type veya inputmode özelliklerini kullanarak farklı bir dokunmatik klavyeyi nasıl etkinleştireceğinizi öğrendiniz.

Telefonunuzda demoyu açıp telefon numarası alanına dokunun. Dokunmatik klavyede numaraların, telefon numarası için ihtiyaç duyabileceğiniz diğer karakterlerle birlikte varsayılan olarak gösterildiğine dikkat edin. Telefon numarası girmek için optimize edilmiş bir dokunmatik klavye edinmek için type="tel" uygulamasını kullanın.

Kendiniz denemek için bir telefon kullanın ve telefon numarasını doldurmak için gereken her karakteri kolayca girip giremediğinize bakın. Dokunmatik klavyenin başka bir type cihazda nasıl çalıştığını merak ediyorsanız demo bölümünde type="email" platformunu deneyin.

Form düğmelerinin gizlenmediğinden emin olun

Uzun bir form doldurduğunuzu ve o formu göndermeye hazır olduğunuzu düşünün. Peki Gönder düğmesi nerededir? Ekranın alt kısmında, tarayıcı araç çubuğunun arkasında olabilir. Düğmelerin görünür olmasını sağlamanın bir yolu env() CSS işlevini kullanmaktır. Düğmelerin cihaz kullanıcı arayüzleri tarafından engellenmemesini sağlama hakkında bilgi edinin.

Formunuzun farklı platformlarda çalıştığından emin olun

Formlarınızı mümkün olduğunca çok sayıda cihazda test etmeye çalışın. Eski bir dizüstü bilgisayarınız mu var? İçindeki varsayılan tarayıcıyı açıp formunuzu test edin. Arkadaşınızın tableti var mı? Ödünç alın ve formunuzu orada da test edin.

Bir tarayıcıda bazı stiller farklı mı görünüyor? Sonraki modülde Stillerinizin farklı platformlarda çalıştığından nasıl emin olacağınızı öğrenebilirsiniz.

BrowserStack açık kaynak projeler için ücretsiz test hesapları sunar, Tarayıcı ise farklı tarayıcılarda, cihazlarda ve işletim sistemlerinde test etmek için ücretsiz bir deneme sürümü sunar.

Kullanıcıların formlarınızı farklı bağlamlarda tamamlamasına yardımcı olun

Kullanıcılar farklı tarayıcılar, cihazlar ve işletim sistemleri kullanmazlar. Kullanıcılar ayrıca formlarınızı farklı bağlamlarda da kullanıyor. Yenilikleri inceleyin. Şu anda dışarıda güneş var mı? Telefonunuzu alın ve dışarı çıkın. Formunuzu parlak ışıkta kullanmak, kontrast oranlarının kullanılabilir olup olmadığını test etmenin iyi bir yoludur.

Renk ve kontrast erişilebilirliği hakkında daha fazla bilgi edinin.

Formunuzun bağlantı zayıf olduğunda çalıştığından emin olun

Trende bir yere seyahat ettiğinizi varsayalım. Telefonunuzda bir web sayfası açtığınızda. Bir web sitesinin yüklenmesinin nasıl bu kadar uzun sürebildiğini merak ediyorsunuz Teşekkürler.

WebPageTest veya DevTools'u kullanarak yavaş bağlantıları ve farklı ağ türlerini simüle edebilirsiniz.

Düşük bant genişliği ve yüksek gecikmeyle test yapma hakkında daha fazla bilgi edinin.

Hareket halindeki kullanıcıların formunuzu kullanmasına yardımcı olun

Bir randevuya yürüdüğünüzü düşünün. Aniden telefonunuz çalar, aramayı cevaplarsınız ve aynı anda, başladığınız başvuru formunu doldurması için sigorta şirketinizden bir uyarı alırsınız. Formu açıyorsunuz ve yürürken ve konuşurken doldurmaya çalışıyorsunuz.

Kullanıcıların formlarınızı birçok farklı bağlamda kullanacağını unutmayın. Stresli durumlarda, hareket halindeyken başka işler yaparken. Formunuzun kolayca kullanılmasını sağlayarak kullanıcılara yardımcı olabilirsiniz.

Formunuzu doldurmak için kendinize bir zaman sınırı koymayı deneyin. Formunuzu test edebileceğiniz kusurlu koşulları simüle etmeye çalışın.

Test sonuçlarını paylaştığınızdan emin olun

Tüm testleri belgeleyin ve sonuçları ekibinizle paylaşın. Böylece yapılacak işlerin öncelik sırasının belirlenmesini sağlar ve ekibinizdeki herkesin en önemli görevlerden haberdar olmasını sağlar.

Test sonuçlarını paylaşma hakkında daha fazla bilgi edinin.

Öğrendiklerinizi sınayın

Platformlar arası test bilginizi test etme

Kaynaklar

• WebPageTest: Web Sitesi Performansı ve Optimizasyon Testleri
• Düşük bant genişliği ve yüksek gecikmeyle test etme
• Test sonuçlarını paylaşma