Formlarınızı test etme

Önceki modüllerde form oluşturmayı, kullanıcıların verileri yeniden girmekten kaçınmasına yardımcı olmayı ve form verilerini doğrulamayı öğrendiniz. Şimdi formun kullanılabilir olduğundan nasıl emin olabilirsiniz? Bu soruyu yanıtlamak için formunuzu test edip analiz edebilirsiniz.

Formunuz diğer cihazlarda çalışıyor mu?

Formunuzun kendi cihazınızda çalıştığını onaylayarak başlayın. Ancak kullanıcılarınızın kullanabileceği birçok cihaz türü vardır. Formunuzun diğer cihazlarla çalışıp çalışmadığını nasıl test edebilirsiniz?

Öncelikle, formunuzu bir masaüstü cihazda test edin. Bu durumda yalnızca klavyenizi kullanmayı deneyin. Sonra telefonda test edin. Şimdi formunuzu farklı giriş yöntemleri (klavye, dokunma ve fare), farklı ekran boyutları, farklı tarayıcılar ve farklı işletim sistemleriyle test ettiniz.

Test edebileceğiniz başka cihazlarınız var mı? Formunuzu hepsinde test edin. Ne kadar çok farklı cihaz, tarayıcı, tarayıcı sürümü ve işletim sistemi üzerinde test edebilirsiniz, o kadar iyidir!

Formunuzu pek çok farklı tarayıcıda, farklı tarayıcı sürümlerinde, farklı cihazlarda ve farklı işletim sistemlerinde test etmek için bir test hizmeti de kullanabilirsiniz. BrowserStack, farklı tarayıcılar, cihazlar ve işletim sistemlerinde test yapabilmek için açık kaynak projeler için ücretsiz test hesapları sunar.

Formunuzun başkaları için uygun olup olmadığını nasıl test edebilirsiniz?

İlk formunuz hazır. Doğru çalışması için çok zaman harcıyorsunuz. Formunuzun diğer herkes tarafından kullanılabilir olduğundan nasıl emin olabilirsiniz? İlk adım olarak, arkadaşlarınızdan ve iş arkadaşlarınızdan formunuzu doldurmalarını isteyebilirsiniz.

Yan yana oturun veya ekran paylaşın. Bu sayede, formunuzla nasıl etkileşimde bulunduklarını görebilirsiniz. Formu doldurmalarını izleyin. Ne yaptıklarını ve herhangi bir sorun yaşayıp yaşamadıklarını sesli olarak söylemelerini isteyin. Görevi tamamladıktan sonra onlara sorular sorun. Doldurulması gereken form net miydi? Formu doldururken herhangi bir sorunla karşılaştılar mı? Net olmayan bir şey var mıydı? Bu sorular daha da iyi formlar oluşturmanıza yardımcı olur.

Formunuzun performansını nasıl ölçebilirsiniz?

Formunuzun başkaları tarafından kullanılabilir olduğunu onayladınız. Bir sonraki adım olarak formunuzun performansını ölçmeniz gerekir. Bunun için kullanabileceğiniz ücretsiz araçlar vardır. Bunlardan bazılarına göz atalım.

PageSpeed Insights (PSI)

PSI, sitenizin performansını ölçer ve nasıl iyileştirebileceğiniz konusunda size ipuçları verir.

Deneyin: PageSpeed, laboratuvar ve alan verilerini kullanarak bir performans raporu sağlar. Hızlı bir site, formunuzun kullanılabilir olduğunun ilk göstergesidir. Siteniz henüz hızlı değil mi? PSI, performansı artırmayla ilgili öneriler gösterir.

Daha önce PSI ile test ettiğiniz sitenizin raporunu tekrar inceleyin. Önemli Web Verileri ile ilgili bilgileri görmek istiyor musunuz? Siteniz Core Web Vitals ölçütlerini karşılıyorsa bu bir özettir. Core Web Vitals, kullanıcıların bir web sayfasındaki deneyimini anlamanıza yardımcı olur.

Deniz Feneri

Lighthouse, performansı, arama motoru optimizasyonunu (SEO), en iyi uygulamaları ve erişilebilirlik sorunlarını belirlemenize yardımcı olur.

Lighthouse'u kullanmanın farklı yolları vardır. Seçeneklerden biri, aracı doğrudan DevTools'dan çalıştırmaktır. Chrome'da formunuzun bulunduğu URL'yi açın, DevTools'u açın, Lighthouse sekmesine geçin ve denetimi çalıştırın.

PSI'dan alınan performans metrikleri gösterilir. Buna ek olarak Lighthouse, sitenizi SEO, en iyi uygulama ve erişilebilirlik sorunlarına göre denetler. Bir etiketi form denetimine bağlamayı mı unuttunuz? Lighthouse sizi uyarır ve sorunu düzeltmeniz için bir rehber sağlar.

Sık karşılaşılan sorunları belirlemeye yarayan araçlar

Yaygın sorunları tespit etmek için kullanılabilecek birçok araç vardır. Bunun bir yolu Form sorun giderici uzantısını kullanmaktır. Sizi eksik autocomplete özellikleri, standart olmayan özellikler, eksik veya boş etiketler ve daha fazlası hakkında uyarır.

WAVE veya axe gibi bir erişilebilirlik değerlendirme aracı da kullanabilirsiniz. Bu araçlar eksik etiketler, etiketler ile form denetimleri arasındaki eksik bağlantılar, yetersiz renk kontrastı ve daha pek çok erişilebilirlik sorunu hakkında sizi bilgilendirir.

Form deneyimini nasıl izleyebilirsiniz?

Formlarınızın gerçek kullanıcı deneyimini izlemek, yeni sorunları hızla tespit etmenize yardımcı olur. Şimdi formunuzu nasıl izleyebileceğinize bakalım.

KMSİ

Deneyimi izlemenin bir yolu da PSI'yı tekrar kullanmaktır. Kendi izleme aracınızı oluşturmak için PSI API'yi kullanabilirsiniz: PageSpeed Insights API'sinde bunu nasıl yapacağınız açıklanmaktadır.

PSI, belirtilen URL için kullanılabiliyorsa Chrome Kullanıcı Deneyimi Raporu (CrUX) veri kümesindeki verileri içerir. Bu şekilde, alan verilerini doğrudan raporda da görebilirsiniz.

Deniz Feneri

Lighthouse, komut satırı aracı, Düğüm modülü veya Lighthouse CI araçları olarak kullanılabilir. Lighthouse CI ile performans izleme, Lighthouse'u GitHub Actions gibi bir sürekli entegrasyon sistemine eklemeyle ilgilidir.

Sitenizi ölçmek ve izlemek için kullanabileceğiniz daha pek çok tools vardır. Bazıları web aracı olarak mevcuttur, bazıları denetimi komut satırınızda çalıştırmanızı sağlar, bazıları ise bunları araçlarınıza entegre etmek için bir API sunar.

Formunuzu analiz etme

Formunuzu gerçek kullanıcılarla test ettiniz ve nasıl ölçüp izleyeceğinizi öğrendiniz. Kullanıcılarınız ve formunuzla etkileşime geçme şekilleri hakkında istatistikleri nasıl toplayabilirsiniz? Analiz aracı kullanabilirsiniz. Bunlardan birine ve nasıl çalıştığına göz atalım.

Analizler

Google Analytics'i (GA) kullanabilirsiniz. Bu kodu ayarladıktan sonra sitenizdeki her sayfaya eklediğiniz bir JavaScript snippet'i alırsınız. Bu noktadan sonra, kullanıcıların sitenizi nasıl kullandığını öğrenebilirsiniz.

Formunuzun bulunduğu sayfayı kaç kişi ziyaret ediyor? Kaç kişi formu doldurup sonraki sayfaya geçiyor? Analiz araçlarından yararlanarak bu soruların yanıtlarını bulabilirsiniz.

Daha gelişmiş analiz raporları da oluşturabilirsiniz. Kaç kullanıcının Gönder düğmesini tıkladığını mı izlemek istiyorsunuz? Bunu analiz etmek için etkinlikleri tanımlayıp entegre edebilirsiniz.

Çok çeşitli analiz araçları mevcuttur. Bazıları minimalist tarzdır, bazıları ise kişiselleştirme için çok fazla seçenek sunar. İhtiyaçlarınıza en uygun aracı bulmak için bir dizi aracı deneyin.

Öğrendiklerinizi sınayın

Formları test etme konusundaki bilginizi sınayın

Alan verisi nedir?

Bir alanda toplanan veriler.
Tekrar deneyin.
Gerçek kullanıcılardan alınan veriler.
🎉
Gerçek koşullardan elde edilen veriler.
🎉
Laboratuvarda toplanan veriler.
Tekrar deneyin.

RUM, metrikleri şu kaynaklardan toplar:

gerçek kullanıcılar
🎉
önceden seçilmiş kullanıcılar
Tekrar deneyin
önceden tanımlanmış tarayıcılar
Tekrar deneyin
son kullanıcıların tarayıcılarına
🎉

Kaynaklar